feat: new version
This commit is contained in:
parent
8080e7012e
commit
77a2a03a81
|
|
@ -0,0 +1,702 @@
|
||||||
|
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: 'ai-generation-basics', text: 'AI Generation Basics', 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: 'avatar-placeholder', text: 'Avatar Placeholder', 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 },
|
||||||
|
];
|
||||||
|
|
||||||
|
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. Copy-paste ready examples with Tailwind CSS."
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* What This Guide Covers */}
|
||||||
|
<section id="what-this-guide-covers" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="what-this-guide-covers">
|
||||||
|
What This Guide Covers
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-4">
|
||||||
|
This guide shows how to generate placeholder images with Banatie:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
||||||
|
<li>
|
||||||
|
<strong className="text-white">Live URLs</strong> — embed AI-generated images directly
|
||||||
|
in HTML
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong className="text-white">Ready-to-use snippets</strong> — copy into your project
|
||||||
|
with Tailwind classes
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong className="text-white">File download</strong> — save images locally via API
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p className="text-gray-300 leading-relaxed">
|
||||||
|
All examples use real Live URLs. Images you see on this page are generated by Banatie.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* AI Generation Basics */}
|
||||||
|
<section id="ai-generation-basics" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="ai-generation-basics">
|
||||||
|
AI Generation Basics
|
||||||
|
</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>
|
||||||
|
<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. "office" becomes a detailed
|
||||||
|
description with lighting, composition, and style.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-2">Templates</h4>
|
||||||
|
<p className="text-gray-300 mb-2">
|
||||||
|
Control visual style with the <InlineCode>template</InlineCode> parameter:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc list-inside text-gray-300 space-y-1">
|
||||||
|
<li>
|
||||||
|
<InlineCode>photorealistic</InlineCode> — photo-like images
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<InlineCode>digital-art</InlineCode> — stylized illustrations
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<InlineCode>3d-render</InlineCode> — 3D graphics
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-2">Caching</h4>
|
||||||
|
<p className="text-gray-300">
|
||||||
|
Same prompt returns the same image. First request generates, subsequent requests
|
||||||
|
serve from cache instantly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Quick Start */}
|
||||||
|
<section id="quick-start" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="quick-start">
|
||||||
|
Quick Start
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-4">Basic Live 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">Minimal example:</p>
|
||||||
|
<CodeBlock
|
||||||
|
code={`<img
|
||||||
|
src="https://cdn.banatie.app/{org}/{project}/live/demo?prompt=mountain+landscape"
|
||||||
|
alt="Mountain landscape"
|
||||||
|
/>`}
|
||||||
|
language="html"
|
||||||
|
filename="Basic Usage"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<SectionHeader level={2} id="organizing-placeholders">
|
||||||
|
Organizing Placeholders
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-4">Use scopes to group related images:</p>
|
||||||
|
<CodeBlock
|
||||||
|
code={`/live/avatars?prompt=... → team member photos
|
||||||
|
/live/products?prompt=... → product catalog
|
||||||
|
/live/blog?prompt=... → article images
|
||||||
|
/live/hero?prompt=... → hero sections`}
|
||||||
|
language="text"
|
||||||
|
filename="Scope Examples"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p className="text-gray-300 leading-relaxed mt-6">
|
||||||
|
Scopes are created automatically on first use. Each scope maintains its own cache. For
|
||||||
|
scope configuration and limits, see{' '}
|
||||||
|
<a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
|
||||||
|
Live URLs → Scopes
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Prompt Tips */}
|
||||||
|
<section id="prompt-tips" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="prompt-tips">
|
||||||
|
Prompt Tips
|
||||||
|
</SectionHeader>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-2">Be specific</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">
|
||||||
|
Use the <InlineCode>template</InlineCode> parameter for visual consistency across
|
||||||
|
multiple images:
|
||||||
|
</p>
|
||||||
|
<CodeBlock
|
||||||
|
code={`?prompt=...&template=photorealistic
|
||||||
|
?prompt=...&template=digital-art`}
|
||||||
|
language="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<TipBox variant="protip">
|
||||||
|
All examples in this guide use prompt enhancement. Your short descriptions are
|
||||||
|
automatically expanded into detailed prompts.
|
||||||
|
</TipBox>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Avatar Placeholder */}
|
||||||
|
<section id="avatar-placeholder" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="avatar-placeholder">
|
||||||
|
Avatar Placeholder
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-2">
|
||||||
|
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-6">
|
||||||
|
<strong className="text-white">Use case:</strong> User profiles, team sections,
|
||||||
|
testimonials.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<SectionHeader level={3} id="avatar-testimonial">
|
||||||
|
Testimonial Card
|
||||||
|
</SectionHeader>
|
||||||
|
<LivePreview>
|
||||||
|
<div className="bg-slate-800 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-16 h-16 rounded-full object-cover flex-shrink-0"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-300 italic mb-3">
|
||||||
|
“Banatie cut our design mockup time in half. No more hunting for stock
|
||||||
|
photos.”
|
||||||
|
</p>
|
||||||
|
<p className="text-white font-semibold">Sarah Chen</p>
|
||||||
|
<p className="text-gray-400 text-sm">Product Designer at Acme</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LivePreview>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<CodeBlock
|
||||||
|
code={`<img
|
||||||
|
src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+studio+headshot&aspectRatio=1:1"
|
||||||
|
alt="User avatar"
|
||||||
|
class="w-16 h-16 rounded-full object-cover"
|
||||||
|
/>`}
|
||||||
|
language="html"
|
||||||
|
filename="Avatar Code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SectionHeader level={3} id="avatar-team-grid" className="mt-8">
|
||||||
|
Team Grid
|
||||||
|
</SectionHeader>
|
||||||
|
<LivePreview>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Product Image */}
|
||||||
|
<section id="product-image" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="product-image">
|
||||||
|
Product Image
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-2">
|
||||||
|
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>{' '}
|
||||||
|
(square) or <InlineCode>4:5</InlineCode> (portrait)
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-6">
|
||||||
|
<strong className="text-white">Use case:</strong> E-commerce catalogs, product cards,
|
||||||
|
listings.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
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"
|
||||||
|
filename="Product Image Code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SectionHeader level={3} id="product-grid" className="mt-8">
|
||||||
|
Product Grid
|
||||||
|
</SectionHeader>
|
||||||
|
<LivePreview>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section id="hero-section" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="hero-section">
|
||||||
|
Hero Section
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-2">
|
||||||
|
<strong className="text-white">Aspect ratio:</strong> <InlineCode>16:9</InlineCode>
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-6">
|
||||||
|
<strong className="text-white">Use case:</strong> Landing page heroes, section
|
||||||
|
backgrounds, feature highlights.
|
||||||
|
</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>
|
||||||
|
</LivePreview>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<CodeBlock
|
||||||
|
code={`<div class="relative w-full h-96 rounded-xl 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"
|
||||||
|
filename="Hero Section Code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* OG Image */}
|
||||||
|
<section id="og-image" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="og-image">
|
||||||
|
OG Image
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-2">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<CodeBlock
|
||||||
|
code={`<head>
|
||||||
|
<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" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
</head>`}
|
||||||
|
language="html"
|
||||||
|
filename="OG Meta Tags"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<TipBox variant="compact" type="info">
|
||||||
|
OG images are crawled once and cached by social platforms. Change the prompt to
|
||||||
|
generate a new image for updated content.
|
||||||
|
</TipBox>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Block */}
|
||||||
|
<section id="features-block" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="features-block">
|
||||||
|
Features Block
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-2">
|
||||||
|
<strong className="text-white">Aspect ratio:</strong> <InlineCode>1:1</InlineCode>
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-6">
|
||||||
|
<strong className="text-white">Use case:</strong> Feature grids, benefit sections,
|
||||||
|
service highlights.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<img
|
||||||
|
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+illustration&aspectRatio=1:1"
|
||||||
|
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"
|
||||||
|
filename="Features Grid Code"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* File-based Workflow */}
|
||||||
|
<section id="file-based-workflow" className="mb-12">
|
||||||
|
<SectionHeader level={2} id="file-based-workflow">
|
||||||
|
File-based Workflow
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-6">
|
||||||
|
Sometimes you need image files in your repository instead of URLs.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<SectionHeader level={3} id="when-to-use-files">
|
||||||
|
When to Use Files
|
||||||
|
</SectionHeader>
|
||||||
|
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
|
||||||
|
<li>
|
||||||
|
Next.js projects with <InlineCode>/public</InlineCode> folder
|
||||||
|
</li>
|
||||||
|
<li>Static site generators requiring local assets</li>
|
||||||
|
<li>Version-controlled images</li>
|
||||||
|
<li>Offline development</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<SectionHeader level={3} id="api-generation-download">
|
||||||
|
API Generation + Download
|
||||||
|
</SectionHeader>
|
||||||
|
<p className="text-gray-300 leading-relaxed mb-4">
|
||||||
|
Generate an image and save it locally:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<CodeBlock
|
||||||
|
code={`// Node.js example
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
async function downloadPlaceholder(prompt, outputPath) {
|
||||||
|
// Generate image
|
||||||
|
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"
|
||||||
|
filename="download-placeholder.js"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p className="text-gray-300 leading-relaxed mt-6">
|
||||||
|
For full API reference, see{' '}
|
||||||
|
<a href="/docs/api/generations/" className="text-purple-400 hover:underline">
|
||||||
|
Generations API
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</DocPage>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
interface LivePreviewProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
showLabel?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LivePreview = ({
|
||||||
|
children,
|
||||||
|
label = 'Live Example',
|
||||||
|
className = '',
|
||||||
|
showLabel = true,
|
||||||
|
}: LivePreviewProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 rounded-xl overflow-hidden my-4"
|
||||||
|
role="region"
|
||||||
|
aria-label={label}
|
||||||
|
>
|
||||||
|
{showLabel && (
|
||||||
|
<div className="absolute top-3 left-3 z-10">
|
||||||
|
<span className="px-2.5 py-1 bg-purple-500/20 border border-purple-500/30 rounded-md text-xs font-medium text-purple-300">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className={`${showLabel ? 'pt-12' : ''} p-4 ${className}`}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,267 @@
|
||||||
|
# Task: Revise Placeholder Images Guide
|
||||||
|
|
||||||
|
**Priority:** High
|
||||||
|
**Type:** Content revision
|
||||||
|
**Related:** Previous guide implementation needs text/UX improvements
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Context
|
||||||
|
|
||||||
|
Guide exists at `/docs/guides/placeholder-images/page.tsx`. Structure is OK, but texts need revision based on review session. This task covers text changes and minor UX improvements.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## SEO Keywords to Include Naturally
|
||||||
|
|
||||||
|
Target these in headings and body text:
|
||||||
|
- "placeholder image url" (390/mo, KD 21)
|
||||||
|
- "html placeholder image" (320/mo, KD 33)
|
||||||
|
- "placeholder image generator" (480/mo, KD 32)
|
||||||
|
- "ai placeholder images" (from our research)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Section-by-Section Changes
|
||||||
|
|
||||||
|
### Hero
|
||||||
|
|
||||||
|
**Current subtitle:** "Generate contextual images for development. Copy-paste ready examples with Tailwind CSS."
|
||||||
|
|
||||||
|
**New subtitle:** "Generate contextual images for development. The new era of AI placeholders."
|
||||||
|
|
||||||
|
Remove Tailwind mention from hero — it's implementation detail, not selling point.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### What This Guide Covers
|
||||||
|
|
||||||
|
**Current:**
|
||||||
|
- Live URLs — embed AI-generated images directly in HTML
|
||||||
|
- Ready-to-use snippets — copy into your project with Tailwind classes
|
||||||
|
- File download — save images locally via API
|
||||||
|
|
||||||
|
**New:**
|
||||||
|
- **Live URLs** — describe what you need right in `<img>` src URLs
|
||||||
|
- **API generation** — full control, permanent URLs, downloadable files
|
||||||
|
|
||||||
|
Remove "snippets" as separate point — that's expected from any guide.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### AI Generation Basics → Rename to "How to Create Placeholders"
|
||||||
|
|
||||||
|
**Current content:** Generic AI explanation (prompt → image, enhancement, etc.)
|
||||||
|
|
||||||
|
**New content:**
|
||||||
|
|
||||||
|
Focus on Banatie features, not AI basics:
|
||||||
|
|
||||||
|
**Templates**
|
||||||
|
Choose a style, get quality results. Banatie enhances your simple prompt based on selected template.
|
||||||
|
|
||||||
|
Available templates:
|
||||||
|
- `photorealistic` — photo-quality images
|
||||||
|
- `digital-art` — stylized illustrations
|
||||||
|
- `3d-render` — 3D graphics
|
||||||
|
|
||||||
|
[Link to full templates documentation]
|
||||||
|
|
||||||
|
**Simple Prompts**
|
||||||
|
Write minimal descriptions. Templates handle the rest.
|
||||||
|
- "office" → detailed modern office with proper lighting
|
||||||
|
- "headshot" → professional portrait with studio background
|
||||||
|
|
||||||
|
No need for complex prompts — this is for placeholders, not art.
|
||||||
|
|
||||||
|
**Remove:**
|
||||||
|
- "Prompt Enhancement" as separate concept (it's what templates do)
|
||||||
|
- "Caching" paragraph (belongs to Live URLs section, not here)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Quick Start
|
||||||
|
|
||||||
|
**Add intro paragraph** explaining what Live URLs are and why they're perfect for placeholders:
|
||||||
|
|
||||||
|
> Live URLs let you generate images by describing what you need right in the URL. No API calls, no file management — just an `<img>` tag with your prompt. Each unique prompt is cached, so subsequent loads are instant via CDN.
|
||||||
|
|
||||||
|
**Change example URL** from `{org}/{project}` placeholder to real working URL:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img
|
||||||
|
src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
|
||||||
|
alt="Mountain landscape"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Add live result** — show the actual generated image right after the code snippet.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Organizing Placeholders
|
||||||
|
|
||||||
|
**Current:** Dry list of scope examples
|
||||||
|
|
||||||
|
**New approach:**
|
||||||
|
|
||||||
|
Short explanation: "Organize images by sections of your site using scopes."
|
||||||
|
|
||||||
|
One example showing the pattern:
|
||||||
|
```
|
||||||
|
/live/avatars?prompt=... → user photos
|
||||||
|
/live/hero?prompt=... → hero backgrounds
|
||||||
|
/live/products?prompt=... → product catalog
|
||||||
|
```
|
||||||
|
|
||||||
|
Then link: "Learn more about scopes in [Live URLs documentation](/docs/live-urls/#scopes)."
|
||||||
|
|
||||||
|
Don't teach users how to name things — let them figure it out.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Prompt Tips
|
||||||
|
|
||||||
|
**Current "Be specific"** — contradicts placeholder philosophy
|
||||||
|
|
||||||
|
**New "Write less, not more":**
|
||||||
|
|
||||||
|
> For placeholders, simple prompts work best. Templates add the details.
|
||||||
|
>
|
||||||
|
> - Want an office? Write "office"
|
||||||
|
> - Need something specific? Add only what matters: "office dark theme"
|
||||||
|
> - Templates handle lighting, composition, style
|
||||||
|
|
||||||
|
**Current "Dark mode"** → **"Colors and themes":**
|
||||||
|
|
||||||
|
> Control the mood with color hints:
|
||||||
|
> - `dark background` — dark theme
|
||||||
|
> - `blue and orange accents` — specific palette
|
||||||
|
> - `warm lighting` — cozy feel
|
||||||
|
|
||||||
|
Keep dark mode examples but expand to general color control.
|
||||||
|
|
||||||
|
**Remove "Consistent style"** — too vague. Consistency comes from templates + references (advanced topic).
|
||||||
|
|
||||||
|
**Change TipBox text:**
|
||||||
|
From: "All examples in this guide use prompt enhancement..."
|
||||||
|
To: "Templates automatically enhance your prompts. A simple description becomes a detailed generation instruction."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Recipes Section
|
||||||
|
|
||||||
|
**Add section header:** Create a parent heading "Recipes" or "Common Use Cases" that groups all the examples (Avatar, Product, Hero, OG, Features).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Recipe Cards: Code + Preview
|
||||||
|
|
||||||
|
**UX improvement:** Each recipe should have a tabbed component with "Preview" and "Code" tabs, not separate blocks.
|
||||||
|
|
||||||
|
If tabs are complex to implement, at minimum:
|
||||||
|
- Show live preview FIRST
|
||||||
|
- Code snippet below with clear label
|
||||||
|
- Remove redundant "Code Snippet" / "Live Example" headings — visual separation is enough
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Testimonial Card (Avatar section)
|
||||||
|
|
||||||
|
**Current design:** Basic dark card
|
||||||
|
|
||||||
|
**Improve design quality:**
|
||||||
|
- Add subtle border or gradient
|
||||||
|
- Better typography hierarchy
|
||||||
|
- Proper quote styling (quotation marks or left border)
|
||||||
|
- Make it look like something you'd actually ship
|
||||||
|
|
||||||
|
This is our showcase — it should look good.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### File-based Workflow
|
||||||
|
|
||||||
|
**Current intro:** "Sometimes you need image files in your repository instead of URLs."
|
||||||
|
|
||||||
|
**New intro:** "Need files in your repo? Here's how to download generated images."
|
||||||
|
|
||||||
|
Warmer, more direct.
|
||||||
|
|
||||||
|
**Remove "Static site generators" mention** — no SEO value, weak use case.
|
||||||
|
|
||||||
|
**Keep:**
|
||||||
|
- Next.js with imports (fix the pattern — show `import` from `src/assets`, not `/public`)
|
||||||
|
- Version-controlled images
|
||||||
|
|
||||||
|
**Simplify download example:**
|
||||||
|
|
||||||
|
Current code is mini-SDK territory. Simplify to:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 1. Generate image
|
||||||
|
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' }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { image } = await response.json();
|
||||||
|
console.log(image.cdnUrl); // Download this URL via browser or curl
|
||||||
|
```
|
||||||
|
|
||||||
|
Remove the fs.writeFileSync part — that's SDK territory. User can download via browser.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### "When to Use Files" List
|
||||||
|
|
||||||
|
**Current:**
|
||||||
|
- Next.js projects with `/public` folder ❌
|
||||||
|
- Static site generators requiring local assets ❌
|
||||||
|
- Version-controlled images
|
||||||
|
- Offline development
|
||||||
|
|
||||||
|
**New:**
|
||||||
|
- Next.js/React projects with local image imports
|
||||||
|
- Version-controlled placeholder assets
|
||||||
|
- Offline or CI/CD environments
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Component Changes
|
||||||
|
|
||||||
|
### LivePreview wrapper
|
||||||
|
|
||||||
|
Current implementation is OK. No changes needed unless design quality is poor.
|
||||||
|
|
||||||
|
### Code/Preview tabs
|
||||||
|
|
||||||
|
If implementing tabs is too complex, skip for now. But note it as future improvement.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quality Checklist
|
||||||
|
|
||||||
|
After implementation:
|
||||||
|
- [ ] No mention of "Prompt Enhancement" as standalone feature
|
||||||
|
- [ ] Templates positioned as primary feature
|
||||||
|
- [ ] All example URLs use `sys/demo` (real project)
|
||||||
|
- [ ] Quick Start shows actual generated image
|
||||||
|
- [ ] File-based section uses import pattern, not /public
|
||||||
|
- [ ] No static site generators mentioned
|
||||||
|
- [ ] Testimonial card looks professional
|
||||||
|
- [ ] SEO keywords naturally integrated
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files to Modify
|
||||||
|
|
||||||
|
```
|
||||||
|
apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
|
||||||
|
```
|
||||||
|
|
||||||
|
No new files needed.
|
||||||
Loading…
Reference in New Issue