usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: guide update

This commit is contained in:
Oleg Proskurin 2026-01-05 21:27:13 +07:00
parent 77a2a03a81
commit df3720557c
1 changed files with 338 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

766
apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
View File

@ -24,15 +24,11 @@ const articleSchema = createTechArticleSchema(PAGE);
const tocItems = [ const tocItems = [
{ id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 }, { id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 },
{ id: 'ai-generation-basics', text: 'AI Generation Basics', level: 2 }, { id: 'how-to-create-placeholders', text: 'How to Create Placeholders', level: 2 },
{ id: 'quick-start', text: 'Quick Start', level: 2 }, { id: 'quick-start', text: 'Quick Start', level: 2 },
{ id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 }, { id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
{ id: 'prompt-tips', text: 'Prompt Tips', level: 2 }, { id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
{ id: 'avatar-placeholder', text: 'Avatar Placeholder', level: 2 }, { id: 'recipes', text: 'Recipes', level: 2 },
{ id: 'product-image', text: 'Product Image', level: 2 },
{ id: 'hero-section', text: 'Hero Section', level: 2 },
{ id: 'og-image', text: 'OG Image', level: 2 },
{ id: 'features-block', text: 'Features Block', level: 2 },
{ id: 'file-based-workflow', text: 'File-based Workflow', level: 2 }, { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
]; ];
@ -67,7 +63,7 @@ export default function PlaceholderImagesGuidePage() {
> >
<Hero <Hero
title="AI Placeholder Images" title="AI Placeholder Images"
subtitle="Generate contextual images for development. Copy-paste ready examples with Tailwind CSS." subtitle="Generate contextual images for development. The new era of AI placeholders."
/> />
{/* What This Guide Covers */} {/* What This Guide Covers */}
@ -76,59 +72,39 @@ export default function PlaceholderImagesGuidePage() {
What This Guide Covers What This Guide Covers
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4"> <p className="text-gray-300 leading-relaxed mb-4">
This guide shows how to generate placeholder images with Banatie: Two ways to generate placeholder images with Banatie:
</p> </p>
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6"> <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
<li> <li>
<strong className="text-white">Live URLs</strong> — embed AI-generated images directly <strong className="text-white">Live URLs</strong> — describe what you need right in{' '}
in HTML <InlineCode>&lt;img&gt;</InlineCode> src URLs
</li> </li>
<li> <li>
<strong className="text-white">Ready-to-use snippets</strong> — copy into your project <strong className="text-white">API generation</strong> — full control, permanent URLs,
with Tailwind classes downloadable files
</li>
<li>
<strong className="text-white">File download</strong> — save images locally via API
</li> </li>
</ul> </ul>
<p className="text-gray-300 leading-relaxed"> <p className="text-gray-300 leading-relaxed">
All examples use real Live URLs. Images you see on this page are generated by Banatie. All examples on this page use real placeholder image URLs generated by Banatie.
</p> </p>
</section> </section>
{/* AI Generation Basics */} {/* How to Create Placeholders */}
<section id="ai-generation-basics" className="mb-12"> <section id="how-to-create-placeholders" className="mb-12">
<SectionHeader level={2} id="ai-generation-basics"> <SectionHeader level={2} id="how-to-create-placeholders">
AI Generation Basics How to Create Placeholders
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6">
Banatie generates images from text descriptions. Key concepts:
</p>
<div className="space-y-6"> <div className="space-y-6">
<div>
<h4 className="text-white font-semibold mb-2">Prompt → Image</h4>
<p className="text-gray-300">
Describe what you need. The AI generates a matching image.
</p>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Prompt Enhancement</h4>
<p className="text-gray-300">
Short prompts are automatically expanded. &quot;office&quot; becomes a detailed
description with lighting, composition, and style.
</p>
</div>
<div> <div>
<h4 className="text-white font-semibold mb-2">Templates</h4> <h4 className="text-white font-semibold mb-2">Templates</h4>
<p className="text-gray-300 mb-2"> <p className="text-gray-300 mb-2">
Control visual style with the <InlineCode>template</InlineCode> parameter: Choose a style, get quality results. Banatie enhances your simple prompt based on
the selected template:
</p> </p>
<ul className="list-disc list-inside text-gray-300 space-y-1"> <ul className="list-disc list-inside text-gray-300 space-y-1">
<li> <li>
<InlineCode>photorealistic</InlineCode> — photo-like images <InlineCode>photorealistic</InlineCode> — photo-quality images
</li> </li>
<li> <li>
<InlineCode>digital-art</InlineCode> — stylized illustrations <InlineCode>digital-art</InlineCode> — stylized illustrations
@ -137,13 +113,30 @@ export default function PlaceholderImagesGuidePage() {
<InlineCode>3d-render</InlineCode> — 3D graphics <InlineCode>3d-render</InlineCode> — 3D graphics
</li> </li>
</ul> </ul>
<p className="text-gray-400 text-sm mt-3">
<a href="/docs/generation/#templates" className="text-purple-400 hover:underline">
View all templates →
</a>
</p>
</div> </div>
<div> <div>
<h4 className="text-white font-semibold mb-2">Caching</h4> <h4 className="text-white font-semibold mb-2">Simple Prompts</h4>
<p className="text-gray-300"> <p className="text-gray-300 mb-2">
Same prompt returns the same image. First request generates, subsequent requests Write minimal descriptions. Templates handle the rest:
serve from cache instantly. </p>
<ul className="list-none text-gray-300 space-y-1">
<li>
<span className="text-gray-500">→</span> &quot;office&quot; becomes a detailed
modern office with proper lighting
</li>
<li>
<span className="text-gray-500">→</span> &quot;headshot&quot; becomes a
professional portrait with studio background
</li>
</ul>
<p className="text-gray-400 text-sm mt-3">
No need for complex prompts — this is for placeholders, not art.
</p> </p>
</div> </div>
</div> </div>
@ -154,23 +147,38 @@ export default function PlaceholderImagesGuidePage() {
<SectionHeader level={2} id="quick-start"> <SectionHeader level={2} id="quick-start">
Quick Start Quick Start
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">Basic Live URL format:</p> <p className="text-gray-300 leading-relaxed mb-6">
Live URLs let you generate images by describing what you need right in the URL. No API
calls, no file management — just an HTML placeholder image tag with your prompt. Each
unique prompt is cached, so subsequent loads are instant via CDN.
</p>
<p className="text-gray-300 leading-relaxed mb-4">Basic URL format:</p>
<CodeBlock <CodeBlock
code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}" code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}"
language="text" language="text"
filename="URL Format" filename="URL Format"
/> />
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Minimal example:</p> <p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
<CodeBlock <CodeBlock
code={`<img code={`<img
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=mountain+landscape" src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
alt="Mountain landscape" alt="Mountain landscape"
/>`} />`}
language="html" language="html"
filename="Basic Usage" filename="HTML Placeholder Image"
/> />
<p className="text-gray-300 leading-relaxed mt-4 mb-2">Result:</p>
<LivePreview showLabel={false}>
<img
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape&aspectRatio=16:9"
alt="Mountain landscape"
className="w-full max-w-md rounded-lg"
/>
</LivePreview>
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p> <p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p>
<Table <Table
headers={['Parameter', 'Required', 'Description']} headers={['Parameter', 'Required', 'Description']}
@ -199,21 +207,20 @@ export default function PlaceholderImagesGuidePage() {
<SectionHeader level={2} id="organizing-placeholders"> <SectionHeader level={2} id="organizing-placeholders">
Organizing Placeholders Organizing Placeholders
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">Use scopes to group related images:</p> <p className="text-gray-300 leading-relaxed mb-4">
Organize images by sections of your site using scopes:
</p>
<CodeBlock <CodeBlock
code={`/live/avatars?prompt=... → team member photos code={`/live/avatars?prompt=... → user photos
/live/products?prompt=... → product catalog /live/hero?prompt=... → hero backgrounds
/live/blog?prompt=... → article images /live/products?prompt=... → product catalog`}
/live/hero?prompt=... → hero sections`}
language="text" language="text"
filename="Scope Examples"
/> />
<p className="text-gray-300 leading-relaxed mt-6"> <p className="text-gray-300 leading-relaxed mt-6">
Scopes are created automatically on first use. Each scope maintains its own cache. For Learn more about scopes in{' '}
scope configuration and limits, see{' '}
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline"> <a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
Live URLs → Scopes Live URLs documentation
</a> </a>
. .
</p> </p>
@ -227,34 +234,25 @@ export default function PlaceholderImagesGuidePage() {
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h4 className="text-white font-semibold mb-2">Be specific</h4> <h4 className="text-white font-semibold mb-2">Write less, not more</h4>
<CodeBlock
code={`❌ "office"
✅ "modern minimalist office with plants and natural light"`}
language="text"
/>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Dark mode</h4>
<p className="text-gray-300 mb-2">Include theme context in your prompt:</p>
<CodeBlock
code={`"abstract gradient background dark theme"
"product photo on dark surface moody lighting"
"avatar silhouette dark background"`}
language="text"
/>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Consistent style</h4>
<p className="text-gray-300 mb-2"> <p className="text-gray-300 mb-2">
Use the <InlineCode>template</InlineCode> parameter for visual consistency across For placeholders, simple prompts work best. Templates add the details:
multiple images:
</p> </p>
<ul className="list-none text-gray-300 space-y-1">
<li>Want an office? Write &quot;office&quot;</li>
<li>
Need something specific? Add only what matters: &quot;office dark theme&quot;
</li>
</ul>
</div>
<div>
<h4 className="text-white font-semibold mb-2">Colors and themes</h4>
<p className="text-gray-300 mb-2">Control the mood with color hints:</p>
<CodeBlock <CodeBlock
code={`?prompt=...&template=photorealistic code={`"dark background" → dark theme
?prompt=...&template=digital-art`} "blue and orange accents" → specific palette
"warm lighting" → cozy feel`}
language="text" language="text"
/> />
</div> </div>
@ -262,135 +260,121 @@ export default function PlaceholderImagesGuidePage() {
<div className="mt-6"> <div className="mt-6">
<TipBox variant="protip"> <TipBox variant="protip">
All examples in this guide use prompt enhancement. Your short descriptions are Templates automatically enhance your prompts. A simple description becomes a detailed
automatically expanded into detailed prompts. generation instruction.
</TipBox> </TipBox>
</div> </div>
</section> </section>
{/* Avatar Placeholder */} {/* Recipes */}
<section id="avatar-placeholder" className="mb-12"> <section id="recipes" className="mb-12">
<SectionHeader level={2} id="avatar-placeholder"> <SectionHeader level={2} id="recipes">
Avatar Placeholder Recipes
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-2"> <p className="text-gray-300 leading-relaxed mb-8">
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode> Copy-paste examples for common placeholder image use cases.
</p>
<p className="text-gray-300 leading-relaxed mb-6">
<strong className="text-white">Use case:</strong> User profiles, team sections,
testimonials.
</p> </p>
<SectionHeader level={3} id="avatar-testimonial"> {/* Avatar */}
Testimonial Card <div className="mb-10">
</SectionHeader> <h3 className="text-xl font-semibold text-white mb-2">Avatar</h3>
<LivePreview> <p className="text-gray-400 text-sm mb-4">
<div className="bg-slate-800 rounded-xl p-6 max-w-md"> <InlineCode>1:1</InlineCode> · User profiles, team sections, testimonials
<div className="flex items-start gap-4"> </p>
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1" <LivePreview>
alt="Sarah Chen" <div className="bg-slate-800/50 rounded-xl p-6 max-w-md">
className="w-16 h-16 rounded-full object-cover flex-shrink-0" <div className="flex items-start gap-4">
/> <img
<div> src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1"
<p className="text-gray-300 italic mb-3"> alt="Sarah Chen"
&ldquo;Banatie cut our design mockup time in half. No more hunting for stock className="w-14 h-14 rounded-full object-cover flex-shrink-0"
photos.&rdquo; />
</p> <div className="border-l-2 border-purple-500/50 pl-4">
<p className="text-white font-semibold">Sarah Chen</p> <p className="text-gray-300 italic">
<p className="text-gray-400 text-sm">Product Designer at Acme</p> Banatie cut our design mockup time in half. No more hunting for stock photos.
</p>
<p className="text-white font-semibold mt-3">Sarah Chen</p>
<p className="text-gray-500 text-sm">Product Designer at Acme</p>
</div>
</div> </div>
</div> </div>
</div> </LivePreview>
</LivePreview>
<div className="mt-6">
<CodeBlock <CodeBlock
code={`<img code={`<img
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+studio+headshot&aspectRatio=1:1" src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
alt="User avatar" alt="User avatar"
class="w-16 h-16 rounded-full object-cover" class="w-14 h-14 rounded-full object-cover"
/>`} />`}
language="html" language="html"
filename="Avatar Code"
/> />
<div className="mt-6">
<p className="text-gray-400 text-sm mb-3">Team grid example:</p>
<LivePreview showLabel={false}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1"
alt="Alex Rivera"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Alex Rivera</p>
<p className="text-gray-400 text-sm">Engineering Lead</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1"
alt="Maria Santos"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Maria Santos</p>
<p className="text-gray-400 text-sm">Design Director</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1"
alt="James Wilson"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">James Wilson</p>
<p className="text-gray-400 text-sm">Product Manager</p>
</div>
</div>
</div>
</LivePreview>
</div>
</div> </div>
<SectionHeader level={3} id="avatar-team-grid" className="mt-8"> {/* Product */}
Team Grid <div className="mb-10">
</SectionHeader> <h3 className="text-xl font-semibold text-white mb-2">Product</h3>
<LivePreview> <p className="text-gray-400 text-sm mb-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <InlineCode>1:1</InlineCode> or <InlineCode>4:5</InlineCode> · E-commerce, catalogs,
<div className="flex items-center gap-3"> listings
<img </p>
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1"
alt="Alex Rivera"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Alex Rivera</p>
<p className="text-gray-400 text-sm">Engineering Lead</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1"
alt="Maria Santos"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">Maria Santos</p>
<p className="text-gray-400 text-sm">Design Director</p>
</div>
</div>
<div className="flex items-center gap-3">
<img
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1"
alt="James Wilson"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-white font-medium">James Wilson</p>
<p className="text-gray-400 text-sm">Product Manager</p>
</div>
</div>
</div>
</LivePreview>
</section>
{/* Product Image */} <LivePreview>
<section id="product-image" className="mb-12"> <div className="bg-white rounded-xl p-4 max-w-xs shadow-lg">
<SectionHeader level={2} id="product-image"> <img
Product Image src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1"
</SectionHeader> alt="Wireless Pro Headphones"
<p className="text-gray-300 leading-relaxed mb-2"> className="w-full aspect-square object-cover rounded-lg mb-4"
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>{' '} />
(square) or <InlineCode>4:5</InlineCode> (portrait) <p className="text-gray-900 font-semibold">Wireless Pro Headphones</p>
</p> <p className="text-gray-600 text-lg font-bold mt-1">$299</p>
<p className="text-gray-300 leading-relaxed mb-6"> <button className="mt-3 w-full bg-gray-900 text-white py-2 px-4 rounded-lg text-sm font-medium">
<strong className="text-white">Use case:</strong> E-commerce catalogs, product cards, Add to Cart
listings. </button>
</p> </div>
</LivePreview>
<SectionHeader level={3} id="product-card">
Product Card
</SectionHeader>
<LivePreview>
<div className="bg-white rounded-xl p-4 max-w-xs shadow-lg">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1"
alt="Wireless Pro Headphones"
className="w-full aspect-square object-cover rounded-lg mb-4"
/>
<h3 className="text-gray-900 font-semibold">Wireless Pro Headphones</h3>
<p className="text-gray-600 text-lg font-bold mt-1">$299</p>
<button className="mt-3 w-full bg-gray-900 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-800 transition-colors">
Add to Cart
</button>
</div>
</LivePreview>
<div className="mt-6">
<CodeBlock <CodeBlock
code={`<img code={`<img
src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1" src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
@ -398,87 +382,76 @@ export default function PlaceholderImagesGuidePage() {
class="w-full aspect-square object-cover rounded-lg" class="w-full aspect-square object-cover rounded-lg"
/>`} />`}
language="html" language="html"
filename="Product Image Code"
/> />
<div className="mt-6">
<p className="text-gray-400 text-sm mb-3">Product grid example:</p>
<LivePreview showLabel={false}>
<div className="grid grid-cols-2 gap-4 max-w-lg">
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=modern+smart+watch+product+photo&aspectRatio=1:1"
alt="Smart Watch X1"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Smart Watch X1</p>
<p className="text-gray-600 font-bold">$199</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
alt="AirPods Pro"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">AirPods Pro</p>
<p className="text-gray-600 font-bold">$249</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=portable+bluetooth+speaker+product+photo&aspectRatio=1:1"
alt="Portable Speaker"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Portable Speaker</p>
<p className="text-gray-600 font-bold">$79</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product+photo&aspectRatio=1:1"
alt="Laptop Stand"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Laptop Stand</p>
<p className="text-gray-600 font-bold">$129</p>
</div>
</div>
</LivePreview>
</div>
</div> </div>
<SectionHeader level={3} id="product-grid" className="mt-8"> {/* Hero */}
Product Grid <div className="mb-10">
</SectionHeader> <h3 className="text-xl font-semibold text-white mb-2">Hero</h3>
<LivePreview> <p className="text-gray-400 text-sm mb-4">
<div className="grid grid-cols-2 gap-4 max-w-lg"> <InlineCode>16:9</InlineCode> · Landing pages, section backgrounds
<div className="bg-white rounded-lg p-3"> </p>
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=modern+smart+watch+product+photo&aspectRatio=1:1"
alt="Smart Watch X1"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Smart Watch X1</p>
<p className="text-gray-600 font-bold">$199</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
alt="AirPods Pro"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">AirPods Pro</p>
<p className="text-gray-600 font-bold">$249</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=portable+bluetooth+speaker+product+photo&aspectRatio=1:1"
alt="Portable Speaker"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Portable Speaker</p>
<p className="text-gray-600 font-bold">$79</p>
</div>
<div className="bg-white rounded-lg p-3">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product+photo&aspectRatio=1:1"
alt="Laptop Stand"
className="w-full aspect-square object-cover rounded-md mb-2"
/>
<p className="text-gray-900 font-medium text-sm">Laptop Stand</p>
<p className="text-gray-600 font-bold">$129</p>
</div>
</div>
</LivePreview>
</section>
{/* Hero Section */} <LivePreview className="p-0">
<section id="hero-section" className="mb-12"> <div className="relative w-full h-72 rounded-xl overflow-hidden">
<SectionHeader level={2} id="hero-section"> <img
Hero Section src="https://cdn.banatie.app/sys/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9"
</SectionHeader> alt="Hero background"
<p className="text-gray-300 leading-relaxed mb-2"> className="w-full h-full object-cover"
<strong className="text-white">Aspect ratio:</strong> <InlineCode>16:9</InlineCode> />
</p> <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-center px-4">
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-3xl font-bold text-white mb-2">Build the Future</p>
<strong className="text-white">Use case:</strong> Landing page heroes, section <p className="text-gray-200">Start your next project with AI-powered tools</p>
backgrounds, feature highlights. </div>
</p>
<LivePreview label="Hero Preview" className="p-0">
<div className="relative w-full h-96 rounded-xl overflow-hidden">
<img
src="https://cdn.banatie.app/sys/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9"
alt="Hero background"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-center px-4">
<h2 className="text-4xl font-bold text-white mb-2">Build the Future</h2>
<p className="text-gray-200 text-lg">
Start your next project with AI-powered tools
</p>
</div> </div>
</div> </LivePreview>
</LivePreview>
<div className="mt-6">
<CodeBlock <CodeBlock
code={`<div class="relative w-full h-96 rounded-xl overflow-hidden"> code={`<div class="relative w-full h-96 overflow-hidden">
<img <img
src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9" src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
alt="Hero background" alt="Hero background"
@ -489,135 +462,105 @@ export default function PlaceholderImagesGuidePage() {
</div> </div>
</div>`} </div>`}
language="html" language="html"
filename="Hero Section Code"
/> />
</div> </div>
</section>
{/* OG Image */} {/* OG Image */}
<section id="og-image" className="mb-12"> <div className="mb-10">
<SectionHeader level={2} id="og-image"> <h3 className="text-xl font-semibold text-white mb-2">OG Image</h3>
OG Image <p className="text-gray-400 text-sm mb-4">
</SectionHeader> <InlineCode>1200:630</InlineCode> · Social sharing, Twitter/LinkedIn cards
<p className="text-gray-300 leading-relaxed mb-2"> </p>
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1200:630</InlineCode>{' '}
(standard for social media)
</p>
<p className="text-gray-300 leading-relaxed mb-6">
<strong className="text-white">Use case:</strong> Social sharing previews,
Twitter/LinkedIn cards.
</p>
<LivePreview label="Social Card Preview"> <LivePreview>
<div className="bg-slate-800 rounded-lg overflow-hidden max-w-md shadow-xl"> <div className="bg-slate-800 rounded-lg overflow-hidden max-w-md shadow-xl">
<div className="bg-slate-700 px-3 py-2 flex items-center gap-2"> <div className="bg-slate-700 px-3 py-2 flex items-center gap-2">
<div className="flex gap-1.5"> <div className="flex gap-1.5">
<span className="w-3 h-3 rounded-full bg-red-500"></span> <span className="w-3 h-3 rounded-full bg-red-500"></span>
<span className="w-3 h-3 rounded-full bg-yellow-500"></span> <span className="w-3 h-3 rounded-full bg-yellow-500"></span>
<span className="w-3 h-3 rounded-full bg-green-500"></span> <span className="w-3 h-3 rounded-full bg-green-500"></span>
</div>
<span className="text-gray-400 text-xs ml-2">twitter.com</span>
</div>
<div className="p-4">
<img
src="https://cdn.banatie.app/sys/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
alt="OG Image Preview"
className="w-full rounded-lg"
/>
<p className="text-gray-400 text-xs mt-2">banatie.app</p>
<p className="text-white font-medium mt-1">
AI Placeholder Images Guide | Banatie
</p>
<p className="text-gray-400 text-sm mt-1">
Generate AI placeholder images for development...
</p>
</div> </div>
<span className="text-gray-400 text-xs ml-2">twitter.com</span>
</div> </div>
<div className="p-4"> </LivePreview>
<img
src="https://cdn.banatie.app/sys/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
alt="OG Image Preview"
className="w-full rounded-lg"
/>
<p className="text-gray-400 text-xs mt-2">banatie.app</p>
<p className="text-white font-medium mt-1">AI Placeholder Images Guide | Banatie</p>
<p className="text-gray-400 text-sm mt-1">
Generate AI placeholder images for development...
</p>
</div>
</div>
</LivePreview>
<div className="mt-6">
<CodeBlock <CodeBlock
code={`<head> code={`<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" />
<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />`}
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
</head>`}
language="html" language="html"
filename="OG Meta Tags"
/> />
<div className="mt-4">
<TipBox variant="compact" type="info">
OG images are cached by social platforms. Change the prompt to regenerate.
</TipBox>
</div>
</div> </div>
<div className="mt-6"> {/* Features */}
<TipBox variant="compact" type="info"> <div className="mb-10">
OG images are crawled once and cached by social platforms. Change the prompt to <h3 className="text-xl font-semibold text-white mb-2">Features</h3>
generate a new image for updated content. <p className="text-gray-400 text-sm mb-4">
</TipBox> <InlineCode>1:1</InlineCode> · Feature grids, benefit sections, icons
</div> </p>
</section>
{/* Features Block */} <LivePreview>
<section id="features-block" className="mb-12"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<SectionHeader level={2} id="features-block"> <div className="text-center">
Features Block <img
</SectionHeader> src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+lightning+bolt+speed+blue&aspectRatio=1:1"
<p className="text-gray-300 leading-relaxed mb-2"> alt="Lightning Fast"
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode> className="w-16 h-16 mx-auto rounded-lg"
</p> />
<p className="text-gray-300 leading-relaxed mb-6"> <p className="mt-4 font-semibold text-white">Lightning Fast</p>
<strong className="text-white">Use case:</strong> Feature grids, benefit sections, <p className="mt-2 text-sm text-gray-400">
service highlights. Deploy in seconds with our global CDN
</p> </p>
</div>
<div className="text-center">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+shield+security+green&aspectRatio=1:1"
alt="Secure by Default"
className="w-16 h-16 mx-auto rounded-lg"
/>
<p className="mt-4 font-semibold text-white">Secure by Default</p>
<p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
</div>
<div className="text-center">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+puzzle+piece+integration+purple&aspectRatio=1:1"
alt="Easy Integration"
className="w-16 h-16 mx-auto rounded-lg"
/>
<p className="mt-4 font-semibold text-white">Easy Integration</p>
<p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
</div>
</div>
</LivePreview>
<LivePreview>
<div className="text-center mb-6">
<h3 className="text-xl font-bold text-white">Why Choose Us</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+lightning+bolt+speed+blue&aspectRatio=1:1"
alt="Lightning Fast"
className="w-16 h-16 mx-auto rounded-lg"
/>
<h4 className="mt-4 font-semibold text-white">Lightning Fast</h4>
<p className="mt-2 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
</div>
<div className="text-center">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+shield+security+green&aspectRatio=1:1"
alt="Secure by Default"
className="w-16 h-16 mx-auto rounded-lg"
/>
<h4 className="mt-4 font-semibold text-white">Secure by Default</h4>
<p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
</div>
<div className="text-center">
<img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+puzzle+piece+integration+purple&aspectRatio=1:1"
alt="Easy Integration"
className="w-16 h-16 mx-auto rounded-lg"
/>
<h4 className="mt-4 font-semibold text-white">Easy Integration</h4>
<p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
</div>
</div>
</LivePreview>
<div className="mt-6">
<CodeBlock <CodeBlock
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> code={`<img
<div class="text-center"> src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+lightning+bolt&aspectRatio=1:1"
<img alt="Feature icon"
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+illustration&aspectRatio=1:1" class="w-16 h-16 rounded-lg"
alt="Feature" />`}
class="w-16 h-16 mx-auto rounded-lg"
/>
<h3 class="mt-4 font-semibold">Feature Title</h3>
<p class="mt-2 text-sm text-gray-600">Feature description goes here.</p>
</div>
<!-- Repeat for other features -->
</div>`}
language="html" language="html"
filename="Features Grid Code"
/> />
</div> </div>
</section> </section>
@ -628,64 +571,31 @@ export default function PlaceholderImagesGuidePage() {
File-based Workflow File-based Workflow
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-6"> <p className="text-gray-300 leading-relaxed mb-6">
Sometimes you need image files in your repository instead of URLs. Need files in your repo? Here&apos;s how to download generated images.
</p> </p>
<SectionHeader level={3} id="when-to-use-files"> <h4 className="text-white font-semibold mb-3">When to Use Files</h4>
When to Use Files
</SectionHeader>
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6"> <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
<li> <li>Next.js/React projects with local image imports</li>
Next.js projects with <InlineCode>/public</InlineCode> folder <li>Version-controlled placeholder assets</li>
</li> <li>Offline or CI/CD environments</li>
<li>Static site generators requiring local assets</li>
<li>Version-controlled images</li>
<li>Offline development</li>
</ul> </ul>
<SectionHeader level={3} id="api-generation-download"> <h4 className="text-white font-semibold mb-3">Generate via API</h4>
API Generation + Download
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
Generate an image and save it locally:
</p>
<CodeBlock <CodeBlock
code={`// Node.js example code={`// Generate image
const fs = require('fs'); const response = await fetch('https://api.banatie.app/v1/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.BANATIE_API_KEY,
},
body: JSON.stringify({ prompt: 'modern office' }),
});
async function downloadPlaceholder(prompt, outputPath) { const { image } = await response.json();
// Generate image console.log(image.cdnUrl); // Download this URL`}
const response = await fetch('https://api.banatie.app/v1/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-Key': process.env.BANATIE_API_KEY,
},
body: JSON.stringify({
prompt: prompt,
aspectRatio: '16:9',
}),
});
const { image } = await response.json();
// Download from CDN
const imageResponse = await fetch(image.cdnUrl);
const buffer = await imageResponse.arrayBuffer();
// Save to file
fs.writeFileSync(outputPath, Buffer.from(buffer));
console.log(\`Saved: \${outputPath}\`);
}
// Usage
downloadPlaceholder(
'modern office interior',
'./public/images/hero.png'
);`}
language="javascript" language="javascript"
filename="download-placeholder.js"
/> />
<p className="text-gray-300 leading-relaxed mt-6"> <p className="text-gray-300 leading-relaxed mt-6">