diff --git a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
index fead8d0..2bf2847 100644
--- a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
+++ b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx
@@ -24,15 +24,11 @@ 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: '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: '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: 'recipes', text: 'Recipes', level: 2 },
   { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
 ];
 
@@ -67,7 +63,7 @@ export default function PlaceholderImagesGuidePage() {
       >
         <Hero
           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 */}
@@ -76,59 +72,39 @@ export default function PlaceholderImagesGuidePage() {
             What This Guide Covers
           </SectionHeader>
           <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>
           <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
+              <strong className="text-white">Live URLs</strong> — describe what you need right in{' '}
+              <InlineCode>&lt;img&gt;</InlineCode> src URLs
             </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
+              <strong className="text-white">API generation</strong> — full control, permanent URLs,
+              downloadable files
             </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.
+            All examples on this page use real placeholder image URLs 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
+        {/* How to Create Placeholders */}
+        <section id="how-to-create-placeholders" className="mb-12">
+          <SectionHeader level={2} id="how-to-create-placeholders">
+            How to Create Placeholders
           </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. &quot;office&quot; 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:
+                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-like images
+                  <InlineCode>photorealistic</InlineCode> — photo-quality images
                 </li>
                 <li>
                   <InlineCode>digital-art</InlineCode> — stylized illustrations
@@ -137,13 +113,30 @@ export default function PlaceholderImagesGuidePage() {
                   <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">Caching</h4>
-              <p className="text-gray-300">
-                Same prompt returns the same image. First request generates, subsequent requests
-                serve from cache instantly.
+              <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> &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>
             </div>
           </div>
@@ -154,23 +147,38 @@ export default function PlaceholderImagesGuidePage() {
           <SectionHeader level={2} id="quick-start">
             Quick Start
           </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
             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>
+          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
           <CodeBlock
             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"
 />`}
             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>
           <Table
             headers={['Parameter', 'Required', 'Description']}
@@ -199,21 +207,20 @@ export default function PlaceholderImagesGuidePage() {
           <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>
+          <p className="text-gray-300 leading-relaxed mb-4">
+            Organize images by sections of your site using scopes:
+          </p>
           <CodeBlock
-            code={`/live/avatars?prompt=...    → team member photos
-/live/products?prompt=...   → product catalog
-/live/blog?prompt=...       → article images
-/live/hero?prompt=...       → hero sections`}
+            code={`/live/avatars?prompt=...  → user photos
+/live/hero?prompt=...     → hero backgrounds
+/live/products?prompt=... → product catalog`}
             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{' '}
+            Learn more about scopes in{' '}
             <a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
-              Live URLs → Scopes
+              Live URLs documentation
             </a>
             .
           </p>
@@ -227,34 +234,25 @@ export default function PlaceholderImagesGuidePage() {
 
           <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>
+              <h4 className="text-white font-semibold mb-2">Write less, not more</h4>
               <p className="text-gray-300 mb-2">
-                Use the <InlineCode>template</InlineCode> parameter for visual consistency across
-                multiple images:
+                For placeholders, simple prompts work best. Templates add the details:
               </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
-                code={`?prompt=...&template=photorealistic
-?prompt=...&template=digital-art`}
+                code={`"dark background" → dark theme
+"blue and orange accents" → specific palette
+"warm lighting" → cozy feel`}
                 language="text"
               />
             </div>
@@ -262,135 +260,121 @@ export default function PlaceholderImagesGuidePage() {
 
           <div className="mt-6">
             <TipBox variant="protip">
-              All examples in this guide use prompt enhancement. Your short descriptions are
-              automatically expanded into detailed prompts.
+              Templates automatically enhance your prompts. A simple description becomes a detailed
+              generation instruction.
             </TipBox>
           </div>
         </section>
 
-        {/* Avatar Placeholder */}
-        <section id="avatar-placeholder" className="mb-12">
-          <SectionHeader level={2} id="avatar-placeholder">
-            Avatar Placeholder
+        {/* Recipes */}
+        <section id="recipes" className="mb-12">
+          <SectionHeader level={2} id="recipes">
+            Recipes
           </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 className="text-gray-300 leading-relaxed mb-8">
+            Copy-paste examples for common placeholder image use cases.
           </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">
-                    &ldquo;Banatie cut our design mockup time in half. No more hunting for stock
-                    photos.&rdquo;
-                  </p>
-                  <p className="text-white font-semibold">Sarah Chen</p>
-                  <p className="text-gray-400 text-sm">Product Designer at Acme</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>
-            </div>
-          </LivePreview>
+            </LivePreview>
 
-          <div className="mt-6">
             <CodeBlock
               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"
-  class="w-16 h-16 rounded-full object-cover"
+  class="w-14 h-14 rounded-full object-cover"
 />`}
               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>
 
-          <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 */}
+          <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>
 
-        {/* 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>
+            <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>
 
-          <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"
@@ -398,87 +382,76 @@ export default function PlaceholderImagesGuidePage() {
   class="w-full aspect-square object-cover rounded-lg"
 />`}
               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>
 
-          <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 */}
+          <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>
 
-        {/* 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>
+            <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>
-            </div>
-          </LivePreview>
+            </LivePreview>
 
-          <div className="mt-6">
             <CodeBlock
-              code={`<div class="relative w-full h-96 rounded-xl overflow-hidden">
+              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"
@@ -489,135 +462,105 @@ export default function PlaceholderImagesGuidePage() {
   </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>
+          {/* 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 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>
+            <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>
-                <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>
+            </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>`}
+              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"
-              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 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 */}
+          <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>
 
-        {/* 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="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"
+                  />
+                  <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="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
-              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>`}
+              code={`<img
+  src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+lightning+bolt&aspectRatio=1:1"
+  alt="Feature icon"
+  class="w-16 h-16 rounded-lg"
+/>`}
               language="html"
-              filename="Features Grid Code"
             />
           </div>
         </section>
@@ -628,64 +571,31 @@ export default function PlaceholderImagesGuidePage() {
             File-based Workflow
           </SectionHeader>
           <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>
 
-          <SectionHeader level={3} id="when-to-use-files">
-            When to Use Files
-          </SectionHeader>
+          <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 projects with <InlineCode>/public</InlineCode> folder
-            </li>
-            <li>Static site generators requiring local assets</li>
-            <li>Version-controlled images</li>
-            <li>Offline development</li>
+            <li>Next.js/React projects with local image imports</li>
+            <li>Version-controlled placeholder assets</li>
+            <li>Offline or CI/CD environments</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>
-
+          <h4 className="text-white font-semibold mb-3">Generate via API</h4>
           <CodeBlock
-            code={`// Node.js example
-const fs = require('fs');
+            code={`// 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' }),
+});
 
-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'
-);`}
+const { image } = await response.json();
+console.log(image.cdnUrl); // Download this URL`}
             language="javascript"
-            filename="download-placeholder.js"
           />
 
           <p className="text-gray-300 leading-relaxed mt-6">