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

@@ -28,9 +28,7 @@ const tocItems = [
   { 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: 'recipes', text: 'Recipes', level: 2 },
   { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
 ];
 
@@ -69,7 +67,7 @@ export default function PlaceholderImagesGuidePage() {
         />
 
         {/* What This Guide Covers */}
-        <section id="what-this-guide-covers" className="mb-12 scroll-mt-24">
+        <section id="what-this-guide-covers" className="mb-12">
           <SectionHeader level={2} id="what-this-guide-covers">
             What This Guide Covers
           </SectionHeader>
@@ -78,16 +76,12 @@ export default function PlaceholderImagesGuidePage() {
           </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>&lt;img&gt;</InlineCode> src URLs
+              <strong className="text-white">Live URLs</strong> — describe what you need right in{' '}
+              <InlineCode>&lt;img&gt;</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
+              <strong className="text-white">API generation</strong> — full control, permanent URLs,
+              downloadable files
             </li>
           </ul>
           <p className="text-gray-300 leading-relaxed">
@@ -96,7 +90,7 @@ export default function PlaceholderImagesGuidePage() {
         </section>
 
         {/* How to Create Placeholders */}
-        <section id="how-to-create-placeholders" className="mb-12 scroll-mt-24">
+        <section id="how-to-create-placeholders" className="mb-12">
           <SectionHeader level={2} id="how-to-create-placeholders">
             How to Create Placeholders
           </SectionHeader>
@@ -149,7 +143,7 @@ export default function PlaceholderImagesGuidePage() {
         </section>
 
         {/* Quick Start */}
-        <section id="quick-start" className="mb-12 scroll-mt-24">
+        <section id="quick-start" className="mb-12">
           <SectionHeader level={2} id="quick-start">
             Quick Start
           </SectionHeader>
@@ -209,7 +203,7 @@ export default function PlaceholderImagesGuidePage() {
         </section>
 
         {/* Organizing Placeholders */}
-        <section id="organizing-placeholders" className="mb-12 scroll-mt-24">
+        <section id="organizing-placeholders" className="mb-12">
           <SectionHeader level={2} id="organizing-placeholders">
             Organizing Placeholders
           </SectionHeader>
@@ -233,7 +227,7 @@ export default function PlaceholderImagesGuidePage() {
         </section>
 
         {/* Prompt Tips */}
-        <section id="prompt-tips" className="mb-12 scroll-mt-24">
+        <section id="prompt-tips" className="mb-12">
           <SectionHeader level={2} id="prompt-tips">
             Prompt Tips
           </SectionHeader>
@@ -242,21 +236,12 @@ export default function PlaceholderImagesGuidePage() {
             <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:
+                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>
-                  <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
+                  Need something specific? Add only what matters: &quot;office dark theme&quot;
                 </li>
               </ul>
             </div>
@@ -281,76 +266,10 @@ export default function PlaceholderImagesGuidePage() {
           </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
+        {/* Recipes */}
+        <section id="recipes" className="mb-12">
+          <SectionHeader level={2} id="recipes">
+            Recipes
           </SectionHeader>
           <p className="text-gray-300 leading-relaxed mb-8">
             Copy-paste examples for common placeholder image use cases.
@@ -481,10 +400,10 @@ export default function PlaceholderImagesGuidePage() {
                   <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="Wireless Earbuds"
+                      alt="AirPods Pro"
                       className="w-full aspect-square object-cover rounded-md mb-2"
                     />
-                    <p className="text-gray-900 font-medium text-sm">Wireless Earbuds</p>
+                    <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">
@@ -498,7 +417,7 @@ export default function PlaceholderImagesGuidePage() {
                   </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"
+                      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"
                     />
@@ -565,7 +484,7 @@ export default function PlaceholderImagesGuidePage() {
                 </div>
                 <div className="p-4">
                   <img
-                    src="https://cdn.banatie.app/sys/demo/live/og?prompt=modern+tech+abstract+waves+purple+blue&aspectRatio=16:9"
+                    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"
                   />
@@ -602,68 +521,52 @@ export default function PlaceholderImagesGuidePage() {
             </p>
 
             <LivePreview>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-purple-500/10 hover:-translate-y-1">
+              <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=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
+                    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-full aspect-square object-cover"
+                    className="w-16 h-16 mx-auto rounded-lg"
                   />
-                  <div className="p-4">
-                    <p className="font-semibold text-white">Lightning Fast</p>
-                    <p className="mt-1 text-sm text-gray-400">
-                      Deploy in seconds with our global CDN
-                    </p>
-                  </div>
+                  <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="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-1">
+                <div className="text-center">
                   <img
-                    src="https://cdn.banatie.app/sys/demo/live/features?prompt=shield+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
+                    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-full aspect-square object-cover"
+                    className="w-16 h-16 mx-auto rounded-lg"
                   />
-                  <div className="p-4">
-                    <p className="font-semibold text-white">Secure by Default</p>
-                    <p className="mt-1 text-sm text-gray-400">Enterprise-grade security built in</p>
-                  </div>
+                  <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="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1">
+                <div className="text-center">
                   <img
-                    src="https://cdn.banatie.app/sys/demo/live/features?prompt=puzzle+piece+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
+                    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-full aspect-square object-cover"
+                    className="w-16 h-16 mx-auto rounded-lg"
                   />
-                  <div className="p-4">
-                    <p className="font-semibold text-white">Easy Integration</p>
-                    <p className="mt-1 text-sm text-gray-400">Works with your existing stack</p>
-                  </div>
+                  <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/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center
-              transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:-translate-y-1">
-    <img
-      src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1"
-      alt="Lightning Fast"
-      class="w-full aspect-square object-cover"
-    />
-    <div class="p-4">
-      <p class="font-semibold text-white">Lightning Fast</p>
-      <p class="mt-1 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
-    </div>
-  </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"
             />
           </div>
         </section>
 
         {/* File-based Workflow */}
-        <section id="file-based-workflow" className="mb-12 scroll-mt-24">
+        <section id="file-based-workflow" className="mb-12">
           <SectionHeader level={2} id="file-based-workflow">
             File-based Workflow
           </SectionHeader>
@@ -679,35 +582,23 @@ export default function PlaceholderImagesGuidePage() {
           </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
+            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' }),
+});
 
-{
-  "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"
+const { image } = await response.json();
+console.log(image.cdnUrl); // Download this URL`}
+            language="javascript"
           />
 
           <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&apos;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

apps/landing/src/components/docs/layout/DocsSidebar.tsx

@@ -80,7 +80,7 @@ const navigationItems: NavItem[] = [
 ];
 
 export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => {
-  const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference', 'Guides']);
+  const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference']);
 
   const toggleSection = (label: string) => {
     setExpandedSections((prev) =>

apps/landing/src/config/docs-seo.ts

@@ -132,18 +132,16 @@ export const DOCS_PAGES = {
   },
   'guide-placeholder-images': {
     path: '/docs/guides/placeholder-images/',
-    title: 'AI Placeholder Image Generator — Light & Dark Mode | Banatie',
+    title: 'AI Placeholder Images Guide | Banatie',
     description:
-      'Generate AI placeholder images for development. Image placeholder dark mode, light backgrounds, avatars, products, heroes. Copy-paste HTML examples.',
+      'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.',
     keywords: [
-      'placeholder image generator',
+      'placeholder images',
+      'ai placeholder generator',
+      'placeholder image api',
       'image placeholder dark',
-      'placeholder image url',
-      'html placeholder image',
-      'ai placeholder images',
-      'dark mode placeholder',
-      'light mode placeholder',
       'profile placeholder image',
+      'placeholder image url',
       'dummy image generator',
     ],
   },