713 lines
31 KiB
TypeScript
713 lines
31 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { TipBox } from '@/components/docs/shared/TipBox';
|
|
import { Table } from '@/components/docs/shared/Table';
|
|
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
|
import { LivePreview } from '@/components/docs/shared/LivePreview';
|
|
import { DocPage } from '@/components/docs/layout/DocPage';
|
|
import { JsonLd } from '@/components/seo/JsonLd';
|
|
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
|
|
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
|
|
import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';
|
|
|
|
const PAGE = DOCS_PAGES['guide-placeholder-images'];
|
|
|
|
export const metadata: Metadata = createDocsMetadata(PAGE);
|
|
|
|
const breadcrumbSchema = createBreadcrumbSchema([
|
|
{ name: 'Home', path: '/' },
|
|
{ name: 'Documentation', path: '/docs/' },
|
|
{ name: 'Guides', path: '/docs/guides/' },
|
|
{ name: 'Placeholder Images', path: '/docs/guides/placeholder-images/' },
|
|
]);
|
|
|
|
const articleSchema = createTechArticleSchema(PAGE);
|
|
|
|
const tocItems = [
|
|
{ id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 },
|
|
{ id: 'how-to-create-placeholders', text: 'How to Create Placeholders', level: 2 },
|
|
{ id: 'quick-start', text: 'Quick Start', level: 2 },
|
|
{ id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
|
|
{ id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
|
|
{ id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 },
|
|
{ id: 'dark-mode-placeholders', text: 'Dark Mode Placeholders', level: 2 },
|
|
{ id: 'placeholder-image-examples', text: 'Placeholder Image Examples', level: 2 },
|
|
{ id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
|
|
];
|
|
|
|
export default function PlaceholderImagesGuidePage() {
|
|
return (
|
|
<>
|
|
<JsonLd data={breadcrumbSchema} />
|
|
<JsonLd data={articleSchema} />
|
|
<DocPage
|
|
breadcrumbItems={[
|
|
{ label: 'Documentation', href: '/docs/' },
|
|
{ label: 'Guides', href: '/docs/guides/' },
|
|
{ label: 'Placeholder Images' },
|
|
]}
|
|
tocItems={tocItems}
|
|
nextSteps={{
|
|
links: [
|
|
{
|
|
href: '/docs/live-urls/',
|
|
title: 'Live URLs Reference',
|
|
description: 'Full parameter documentation for Live URLs.',
|
|
accent: 'primary',
|
|
},
|
|
{
|
|
href: '/docs/api/generations/',
|
|
title: 'Generations API',
|
|
description: 'Generate images programmatically.',
|
|
accent: 'secondary',
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Hero
|
|
title="AI Placeholder Images"
|
|
subtitle="Generate contextual images for development. The new era of AI placeholders."
|
|
/>
|
|
|
|
{/* What This Guide Covers */}
|
|
<section id="what-this-guide-covers" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="what-this-guide-covers">
|
|
What This Guide Covers
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-4">
|
|
Two ways to generate placeholder images with Banatie:
|
|
</p>
|
|
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
|
<li>
|
|
<a href="#quick-start" className="text-white font-semibold hover:text-purple-400">
|
|
Live URLs
|
|
</a>{' '}
|
|
— describe what you need right in <InlineCode><img></InlineCode> src URLs
|
|
</li>
|
|
<li>
|
|
<a href="#file-based-workflow" className="text-white font-semibold hover:text-purple-400">
|
|
API generation
|
|
</a>{' '}
|
|
— full control, permanent URLs, downloadable files
|
|
</li>
|
|
</ul>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
All examples on this page use real placeholder image URLs generated by Banatie.
|
|
</p>
|
|
</section>
|
|
|
|
{/* How to Create Placeholders */}
|
|
<section id="how-to-create-placeholders" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="how-to-create-placeholders">
|
|
How to Create Placeholders
|
|
</SectionHeader>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-2">Templates</h4>
|
|
<p className="text-gray-300 mb-2">
|
|
Choose a style, get quality results. Banatie enhances your simple prompt based on
|
|
the selected template:
|
|
</p>
|
|
<ul className="list-disc list-inside text-gray-300 space-y-1">
|
|
<li>
|
|
<InlineCode>photorealistic</InlineCode> — photo-quality images
|
|
</li>
|
|
<li>
|
|
<InlineCode>digital-art</InlineCode> — stylized illustrations
|
|
</li>
|
|
<li>
|
|
<InlineCode>3d-render</InlineCode> — 3D graphics
|
|
</li>
|
|
</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>
|
|
<h4 className="text-white font-semibold mb-2">Simple Prompts</h4>
|
|
<p className="text-gray-300 mb-2">
|
|
Write minimal descriptions. Templates handle the rest:
|
|
</p>
|
|
<ul className="list-none text-gray-300 space-y-1">
|
|
<li>
|
|
<span className="text-gray-500">→</span> "office" becomes a detailed
|
|
modern office with proper lighting
|
|
</li>
|
|
<li>
|
|
<span className="text-gray-500">→</span> "headshot" 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quick Start */}
|
|
<section id="quick-start" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="quick-start">
|
|
Quick Start
|
|
</SectionHeader>
|
|
<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
|
|
code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}"
|
|
language="text"
|
|
filename="URL Format"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
|
|
<CodeBlock
|
|
code={`<img
|
|
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
|
|
alt="Mountain landscape"
|
|
/>`}
|
|
language="html"
|
|
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>
|
|
<Table
|
|
headers={['Parameter', 'Required', 'Description']}
|
|
rows={[
|
|
[<InlineCode key="p">prompt</InlineCode>, 'Yes', 'Image description (URL-encoded)'],
|
|
[
|
|
<InlineCode key="a">aspectRatio</InlineCode>,
|
|
'No',
|
|
'Ratio like 1:1, 16:9, 4:3 (default: 16:9)',
|
|
],
|
|
[<InlineCode key="t">template</InlineCode>, 'No', 'Style template name'],
|
|
]}
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
For full parameter reference, see{' '}
|
|
<a href="/docs/live-urls/" className="text-purple-400 hover:underline">
|
|
Live URLs documentation
|
|
</a>
|
|
.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Organizing Placeholders */}
|
|
<section id="organizing-placeholders" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="organizing-placeholders">
|
|
Organizing Placeholders
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-4">
|
|
Organize images by sections of your site using scopes:
|
|
</p>
|
|
<CodeBlock
|
|
code={`/live/avatars?prompt=... → user photos
|
|
/live/hero?prompt=... → hero backgrounds
|
|
/live/products?prompt=... → product catalog`}
|
|
language="text"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
Learn more about scopes in{' '}
|
|
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
|
|
Live URLs documentation
|
|
</a>
|
|
.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Prompt Tips */}
|
|
<section id="prompt-tips" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="prompt-tips">
|
|
Prompt Tips
|
|
</SectionHeader>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-2">Write less, not more</h4>
|
|
<p className="text-gray-300 mb-2">
|
|
For placeholders, simple prompts are often enough. You can always add more details
|
|
later if needed. Templates handle the rest:
|
|
</p>
|
|
<ul className="list-none text-gray-300 space-y-1">
|
|
<li>
|
|
<span className="text-gray-500">→</span> Want an office? Write{' '}
|
|
<InlineCode>office</InlineCode>
|
|
</li>
|
|
<li>
|
|
<span className="text-gray-500">→</span> Need a dark version? Add{' '}
|
|
<InlineCode>office dark background</InlineCode>
|
|
</li>
|
|
<li>
|
|
<span className="text-gray-500">→</span> Templates handle lighting, composition,
|
|
style
|
|
</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
|
|
code={`"dark background" → dark theme
|
|
"blue and orange accents" → specific palette
|
|
"warm lighting" → cozy feel`}
|
|
language="text"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<TipBox variant="protip">
|
|
Templates automatically enhance your prompts. A simple description becomes a detailed
|
|
generation instruction.
|
|
</TipBox>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Light Mode Placeholders */}
|
|
<section id="light-mode-placeholders" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="light-mode-placeholders">
|
|
Light Mode Placeholders
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-4">
|
|
Generated images work well with light interfaces by default. If you need more control,
|
|
specify background colors or accents to match your design system.
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`"product on white background"
|
|
"office with soft natural light"
|
|
"portrait, bright studio, pastel tones"
|
|
"dashboard mockup, light gray background, blue accent"`}
|
|
language="text"
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<LivePreview label="Light Background Example">
|
|
<div className="bg-white rounded-xl p-6 max-w-md">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+desk+setup+white+background+clean+aesthetic&aspectRatio=16:9"
|
|
alt="Light theme placeholder"
|
|
className="w-full rounded-lg mb-4"
|
|
/>
|
|
<p className="text-gray-900 font-semibold">Clean Workspace</p>
|
|
<p className="text-gray-600 text-sm">White background, natural lighting</p>
|
|
</div>
|
|
</LivePreview>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Dark Mode Placeholders */}
|
|
<section id="dark-mode-placeholders" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="dark-mode-placeholders">
|
|
Dark Mode Placeholders
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-4">
|
|
For dark interfaces, add <InlineCode>dark background</InlineCode> or descriptive words
|
|
like night, moody, or twilight. You can also specify accent colors.
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`"office interior, dark background"
|
|
"product photo, dark surface, moody lighting"
|
|
"night cityscape, neon accents"
|
|
"abstract gradient, dark purple and blue"`}
|
|
language="text"
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<LivePreview label="Dark Background Example">
|
|
<div className="bg-slate-900 rounded-xl p-6 max-w-md border border-slate-700">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/hero?prompt=abstract+gradient+dark+background+purple+blue+moody&aspectRatio=16:9"
|
|
alt="Dark theme placeholder"
|
|
className="w-full rounded-lg mb-4"
|
|
/>
|
|
<p className="text-white font-semibold">Dark Gradient</p>
|
|
<p className="text-gray-400 text-sm">Dark background with purple accents</p>
|
|
</div>
|
|
</LivePreview>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Placeholder Image Examples */}
|
|
<section id="placeholder-image-examples" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="placeholder-image-examples">
|
|
Placeholder Image Examples
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-8">
|
|
Copy-paste examples for common placeholder image use cases.
|
|
</p>
|
|
|
|
{/* Avatar */}
|
|
<div className="mb-10">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Avatar</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
<InlineCode>1:1</InlineCode> · User profiles, team sections, testimonials
|
|
</p>
|
|
|
|
<LivePreview>
|
|
<div className="bg-slate-800/50 rounded-xl p-6 max-w-md">
|
|
<div className="flex items-start gap-4">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1"
|
|
alt="Sarah Chen"
|
|
className="w-14 h-14 rounded-full object-cover flex-shrink-0"
|
|
/>
|
|
<div className="border-l-2 border-purple-500/50 pl-4">
|
|
<p className="text-gray-300 italic">
|
|
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>
|
|
</LivePreview>
|
|
|
|
<CodeBlock
|
|
code={`<img
|
|
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
|
|
alt="User avatar"
|
|
class="w-14 h-14 rounded-full object-cover"
|
|
/>`}
|
|
language="html"
|
|
/>
|
|
|
|
<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>
|
|
|
|
{/* Product */}
|
|
<div className="mb-10">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Product</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
<InlineCode>1:1</InlineCode> or <InlineCode>4:5</InlineCode> · E-commerce, catalogs,
|
|
listings
|
|
</p>
|
|
|
|
<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"
|
|
/>
|
|
<p className="text-gray-900 font-semibold">Wireless Pro Headphones</p>
|
|
<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">
|
|
Add to Cart
|
|
</button>
|
|
</div>
|
|
</LivePreview>
|
|
|
|
<CodeBlock
|
|
code={`<img
|
|
src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
|
|
alt="Product"
|
|
class="w-full aspect-square object-cover rounded-lg"
|
|
/>`}
|
|
language="html"
|
|
/>
|
|
|
|
<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&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>
|
|
|
|
{/* Hero */}
|
|
<div className="mb-10">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Hero</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
<InlineCode>16:9</InlineCode> · Landing pages, section backgrounds
|
|
</p>
|
|
|
|
<LivePreview className="p-0">
|
|
<div className="relative w-full h-72 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">
|
|
<p className="text-3xl font-bold text-white mb-2">Build the Future</p>
|
|
<p className="text-gray-200">Start your next project with AI-powered tools</p>
|
|
</div>
|
|
</div>
|
|
</LivePreview>
|
|
|
|
<CodeBlock
|
|
code={`<div class="relative w-full h-96 overflow-hidden">
|
|
<img
|
|
src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
|
|
alt="Hero background"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<div class="absolute inset-0 bg-black/50 flex items-center justify-center">
|
|
<h1 class="text-4xl font-bold text-white">Your Headline</h1>
|
|
</div>
|
|
</div>`}
|
|
language="html"
|
|
/>
|
|
</div>
|
|
|
|
{/* OG Image */}
|
|
<div className="mb-10">
|
|
<h3 className="text-xl font-semibold text-white mb-2">OG Image</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
<InlineCode>1200:630</InlineCode> · Social sharing, Twitter/LinkedIn cards
|
|
</p>
|
|
|
|
<LivePreview>
|
|
<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="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-yellow-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>
|
|
</LivePreview>
|
|
|
|
<CodeBlock
|
|
code={`<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:height" content="630" />`}
|
|
language="html"
|
|
/>
|
|
|
|
<div className="mt-4">
|
|
<TipBox variant="compact" type="info">
|
|
OG images are cached by social platforms. Change the prompt to regenerate.
|
|
</TipBox>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="mb-10">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Features</h3>
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
<InlineCode>1:1</InlineCode> · Feature grids, benefit sections, icons
|
|
</p>
|
|
|
|
<LivePreview>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
|
|
alt="Lightning Fast"
|
|
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
|
/>
|
|
<p className="mt-4 font-semibold text-white">Lightning Fast</p>
|
|
<p className="mt-2 text-sm text-gray-400">
|
|
Deploy in seconds with our global CDN
|
|
</p>
|
|
</div>
|
|
<div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+shield+green+glow+dark+slate+background&aspectRatio=1:1"
|
|
alt="Secure by Default"
|
|
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
|
/>
|
|
<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="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
|
|
<img
|
|
src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+puzzle+piece+purple+glow+dark+slate+background&aspectRatio=1:1"
|
|
alt="Easy Integration"
|
|
className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
|
/>
|
|
<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>
|
|
|
|
<CodeBlock
|
|
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
|
|
<img
|
|
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
|
|
alt="Lightning Fast"
|
|
class="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
|
|
/>
|
|
<p class="mt-4 font-semibold text-white">Lightning Fast</p>
|
|
<p class="mt-2 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
|
|
</div>
|
|
<!-- Repeat for other features -->
|
|
</div>`}
|
|
language="html"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* File-based Workflow */}
|
|
<section id="file-based-workflow" className="mb-12 scroll-mt-24">
|
|
<SectionHeader level={2} id="file-based-workflow">
|
|
File-based Workflow
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Need files in your repo? Here's how to download generated images.
|
|
</p>
|
|
|
|
<h4 className="text-white font-semibold mb-3">When to Use Files</h4>
|
|
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
|
<li>Next.js/React projects with local image imports</li>
|
|
<li>Version-controlled placeholder assets</li>
|
|
<li>Offline or CI/CD environments</li>
|
|
</ul>
|
|
|
|
<h4 className="text-white font-semibold mb-3">Generate via API</h4>
|
|
<p className="text-gray-300 leading-relaxed mb-4">Request:</p>
|
|
<CodeBlock
|
|
code={`POST https://api.banatie.app/v1/generations
|
|
Content-Type: application/json
|
|
X-API-Key: your_api_key
|
|
|
|
{
|
|
"prompt": "modern office interior"
|
|
}`}
|
|
language="http"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Response:</p>
|
|
<CodeBlock
|
|
code={`{
|
|
"image": {
|
|
"id": "img_abc123",
|
|
"cdnUrl": "https://cdn.banatie.app/org/project/images/2025-01/abc123.png"
|
|
}
|
|
}`}
|
|
language="json"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
Open <InlineCode>cdnUrl</InlineCode> in your browser, save the image, and add it to your
|
|
project's assets folder.
|
|
</p>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-4">
|
|
For full API reference, see{' '}
|
|
<a href="/docs/api/generations/" className="text-purple-400 hover:underline">
|
|
Generations API
|
|
</a>
|
|
.
|
|
</p>
|
|
</section>
|
|
</DocPage>
|
|
</>
|
|
);
|
|
}
|