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 deleted file mode 100644 index 2d60199..0000000 --- a/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx +++ /dev/null @@ -1,245 +0,0 @@ -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 { 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: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 }, - { id: 'quick-start', text: 'Quick Start', level: 2 }, - { id: 'common-sizes', text: 'Common Sizes', level: 2 }, - { id: 'dark-mode', text: 'Dark Mode Placeholders', level: 2 }, - { id: 'profile-avatars', text: 'Profile Avatars', level: 2 }, - { id: 'tips', text: 'Tips for Better Results', level: 2 }, - { id: 'next-steps', text: 'Next Steps', level: 2 }, -]; - -export default function PlaceholderImagesGuidePage() { - return ( - <> - - - - - -
- - Why AI Placeholders? - -

- Traditional placeholder services give you gray rectangles or random photos - that have nothing to do with your actual content. -

-

- With Banatie Live URLs, you describe what you need and get a relevant AI-generated image instantly. - Your mockups look real. Client demos make sense. Prototypes feel complete. -

- - - - -
- - Quick Start - -

- Use a Live URL directly in your <img> tag: -

- - `} - language="html" - filename="Basic Usage" - /> - -

- First request generates the image. Subsequent requests serve from cache instantly. -

-
- -
- - Common Sizes - -

- Use the aspectRatio parameter for standard sizes: -

- -
- - - - - - - - -`} - language="html" - filename="Size Examples" - /> - - -
- - Dark Mode Placeholders - -

- For dark UI interfaces, include dark theme hints in your prompt: -

- - - - - - - - -`} - language="html" - filename="Dark Mode Examples" - /> - -
- - Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images. - -
-
- -
- - Profile Avatars - -

- Generate realistic avatar placeholders for user profiles: -

- - - - - - - - - -`} - language="html" - filename="Avatar Examples" - /> -
- -
- - Tips for Better Results - - -
    -
  • - • -
    - Be specific -

    - "modern minimalist office with plants" works better than "office". -

    -
    -
    • -
  • - • -
    - Include style hints -

    - Add "photorealistic", "illustration", "3D render", or "flat design" for consistent style. -

    -
    -
    • -
  • - • -
    - Use scopes to organize -

    - Group related placeholders: /live/avatars/, /live/products/, /live/backgrounds/. -

    -
    -
    • -
  • - • -
    - Same prompt = same image -

    - Cached results mean consistent placeholders across your app. -

    -
    -
    • -
-
- - - ); -} diff --git a/inbox/task-docs-placeholder-seo.md b/inbox/task-docs-placeholder-seo.md deleted file mode 100644 index 0caa358..0000000 --- a/inbox/task-docs-placeholder-seo.md +++ /dev/null @@ -1,536 +0,0 @@ -# Task: Docs Placeholder SEO Enhancement - -**Priority:** High -**Estimated time:** 30-45 min -**Type:** SEO optimization + content - ---- - -## Part 1: Update Live URLs SEO metadata - -**File:** `apps/landing/src/config/docs-seo.ts` - -**Find the `'live-urls'` entry:** -```typescript -'live-urls': { - path: '/docs/live-urls/', - title: 'Live URLs — Generate Images from URL | Banatie API Docs', - description: - 'Generate images directly from URL parameters. No API calls needed — use the URL in img tags. Automatic caching.', - keywords: ['live url image generation', 'url to image', 'dynamic image generation', 'image from url', 'cached image api'], -}, -``` - -**Replace with:** -```typescript -'live-urls': { - path: '/docs/live-urls/', - title: 'Live URLs — AI Placeholder Images & Dynamic Generation | Banatie', - description: - 'Generate AI placeholder images directly from URL. No API calls — use in img tags. Perfect for prototypes, mockups, and dynamic content.', - keywords: [ - 'placeholder images', - 'placeholder image url', - 'ai placeholder generator', - 'live url image generation', - 'dynamic image generation', - 'image placeholder api', - 'placeholder image api', - ], -}, -``` - ---- - -## Part 2: Enhance Live URLs page content - -**File:** `apps/landing/src/app/(apps)/docs/live-urls/page.tsx` - -### 2.1 Update tocItems array - -**Find:** -```typescript -const tocItems = [ - { id: 'the-concept', text: 'The Concept', level: 2 }, - { id: 'url-format', text: 'URL Format', level: 2 }, - { id: 'try-it', text: 'Try It', level: 2 }, - { id: 'caching-behavior', text: 'Caching Behavior', level: 2 }, - { id: 'scopes', text: 'Scopes', level: 2 }, - { id: 'rate-limits', text: 'Rate Limits', level: 2 }, - { id: 'use-cases', text: 'Use Cases', level: 2 }, - { id: 'next-steps', text: 'Next Steps', level: 2 }, -]; -``` - -**Replace with:** -```typescript -const tocItems = [ - { id: 'the-concept', text: 'The Concept', level: 2 }, - { id: 'url-format', text: 'URL Format', level: 2 }, - { id: 'try-it', text: 'Try It', level: 2 }, - { id: 'placeholder-images', text: 'Placeholder Images', level: 2 }, - { id: 'caching-behavior', text: 'Caching Behavior', level: 2 }, - { id: 'scopes', text: 'Scopes', level: 2 }, - { id: 'rate-limits', text: 'Rate Limits', level: 2 }, - { id: 'use-cases', text: 'Use Cases', level: 2 }, - { id: 'next-steps', text: 'Next Steps', level: 2 }, -]; -``` - -### 2.2 Update Hero subtitle - -**Find:** -```tsx - -``` - -**Replace with:** -```tsx - -``` - -### 2.3 Add new "Placeholder Images" section - -**Add this section AFTER the "Try It" section and BEFORE "Caching Behavior":** - -```tsx -
- - Placeholder Images - -

- Live URLs are perfect for generating AI placeholder images during development. - Unlike generic placeholder services that show gray boxes or random stock photos, - Banatie generates contextual images that match your design intent. -

- -

Common placeholder sizes:

- - - - - - - - - - - -`} - language="html" - filename="Placeholder Examples" - /> - -
- - For dark mode interfaces, include "dark theme" or "dark background" in your prompt. - -
-
-``` - -### 2.4 Update "Use Cases" section — expand first item - -**Find the first list item in use-cases section:** -```tsx -
  • - • -
    - Dynamic placeholders -

    Generate placeholder images during development that match your design intent.

    -
    -
    • -``` - -**Replace with:** -```tsx -
  • - • -
    - AI Placeholder Images -

    - Replace gray boxes and random stock photos with contextual AI images. - Perfect for prototypes, client demos, and design mockups. -

    -
    -
    • -``` - ---- - -## Part 3: Add guides section with placeholder guide - -### 3.1 Create guides directory structure - -```bash -mkdir -p apps/landing/src/app/\(apps\)/docs/guides/placeholder-images -``` - -### 3.2 Add guides SEO config - -**File:** `apps/landing/src/config/docs-seo.ts` - -**Add to DOCS_PAGES object:** -```typescript -'guides': { - path: '/docs/guides/', - title: 'Guides | Banatie Docs', - description: 'Step-by-step guides for common use cases. Placeholder images, prototyping, and more.', - keywords: ['banatie guides', 'image generation tutorials', 'api guides'], -}, -'guide-placeholder-images': { - path: '/docs/guides/placeholder-images/', - title: 'AI Placeholder Images Guide | Banatie', - description: - 'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.', - keywords: [ - 'placeholder images', - 'ai placeholder generator', - 'placeholder image api', - 'image placeholder dark', - 'profile placeholder image', - 'placeholder image url', - 'dummy image generator', - ], -}, -``` - -### 3.3 Create guides index page - -**File:** `apps/landing/src/app/(apps)/docs/guides/page.tsx` - -```tsx -import type { Metadata } from 'next'; -import { DocPage } from '@/components/docs/layout/DocPage'; -import { JsonLd } from '@/components/seo/JsonLd'; -import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo'; -import { createBreadcrumbSchema } from '@/config/docs-schema'; -import { Hero, SectionHeader } from '@/components/docs/blocks'; -import Link from 'next/link'; - -const PAGE = DOCS_PAGES['guides']; - -export const metadata: Metadata = createDocsMetadata(PAGE); - -const breadcrumbSchema = createBreadcrumbSchema([ - { name: 'Home', path: '/' }, - { name: 'Documentation', path: '/docs/' }, - { name: 'Guides', path: '/docs/guides/' }, -]); - -export default function GuidesPage() { - return ( - <> - - - - -
    -
    - -

    AI Placeholder Images

    -

    - Generate contextual placeholder images for development. - Replace gray boxes with AI visuals that match your design. -

    - -
    -
    -     - - ); -} -``` - -### 3.4 Create placeholder images guide page - -**File:** `apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx` - -```tsx -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 { 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: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 }, - { id: 'quick-start', text: 'Quick Start', level: 2 }, - { id: 'common-sizes', text: 'Common Sizes', level: 2 }, - { id: 'dark-mode', text: 'Dark Mode Placeholders', level: 2 }, - { id: 'profile-avatars', text: 'Profile Avatars', level: 2 }, - { id: 'tips', text: 'Tips for Better Results', level: 2 }, - { id: 'next-steps', text: 'Next Steps', level: 2 }, -]; - -export default function PlaceholderImagesGuidePage() { - return ( - <> - - - - - -
    - - Why AI Placeholders? - -

    - Traditional placeholder services give you gray rectangles or random photos - that have nothing to do with your actual content. -

    -

    - With Banatie Live URLs, you describe what you need and get a relevant AI-generated image instantly. - Your mockups look real. Client demos make sense. Prototypes feel complete. -

    - -
    - - -
    - - Quick Start - -

    - Use a Live URL directly in your <img> tag: -

    - - `} - language="html" - filename="Basic Usage" - /> - -

    - First request generates the image. Subsequent requests serve from cache instantly. -

    -
    - -
    - - Common Sizes - -

    - Use the aspectRatio parameter for standard sizes: -

    - -
    - - - - - - - - -`} - language="html" - filename="Size Examples" - /> - - -
    - - Dark Mode Placeholders - -

    - For dark UI interfaces, include dark theme hints in your prompt: -

    - - - - - - - - -`} - language="html" - filename="Dark Mode Examples" - /> - -
    - - Keywords like "dark background", "moody lighting", "dark theme", and "night mode" help generate dark-friendly images. - -
    -
    - -
    - - Profile Avatars - -

    - Generate realistic avatar placeholders for user profiles: -

    - - - - - - - - - -`} - language="html" - filename="Avatar Examples" - /> -
    - -
    - - Tips for Better Results - - -
      -
    • - • -
      - Be specific -

      - "modern minimalist office with plants" works better than "office". -

      -
      -
      • -
    • - • -
      - Include style hints -

      - Add "photorealistic", "illustration", "3D render", or "flat design" for consistent style. -

      -
      -
      • -
    • - • -
      - Use scopes to organize -

      - Group related placeholders: /live/avatars/, /live/products/, /live/backgrounds/. -

      -
      -
      • -
    • - • -
      - Same prompt = same image -

      - Cached results mean consistent placeholders across your app. -

      -
      -
      • -
    -
    - - - ); -} -``` - ---- - -## Verification - -After all changes: -1. Run `pnpm dev` in `apps/landing` -2. Check `/docs/live-urls/` — verify new "Placeholder Images" section -3. Check `/docs/guides/` — verify guides index page -4. Check `/docs/guides/placeholder-images/` — verify guide content -5. View page source — verify SEO metadata on all pages - ---- - -## Done criteria - -- [ ] live-urls SEO metadata updated with placeholder keywords -- [ ] live-urls page has new "Placeholder Images" section with examples -- [ ] `/docs/guides/` index page created -- [ ] `/docs/guides/placeholder-images/` guide created -- [ ] All pages render without errors -- [ ] sitemap.ts includes new pages (may need manual update) diff --git a/inbox/task-homepage-placeholder-seo.md b/inbox/task-homepage-placeholder-seo.md deleted file mode 100644 index 8a44ee6..0000000 --- a/inbox/task-homepage-placeholder-seo.md +++ /dev/null @@ -1,75 +0,0 @@ -# Task: Homepage Placeholder SEO Keywords - -**Priority:** High -**Estimated time:** 5 min -**Type:** SEO optimization - ---- - -## Change 1: Update keywords in metadata - -**File:** `apps/landing/src/app/(landings)/page.tsx` - -**Find:** -```typescript -keywords: [ - 'API-first image generation', - 'AI image API', - 'image generation for developers', - 'prompt to image API', - 'CDN image delivery', -], -``` - -**Replace with:** -```typescript -keywords: [ - 'AI image API', - 'image generation for developers', - 'prompt to image API', - 'CDN image delivery', - 'placeholder images', - 'ai placeholder generator', - 'placeholder image url', - 'image placeholder api', -], -``` - ---- - -## Change 2: Update PromptUrlsSection subtitle - -**File:** `apps/landing/src/app/(landings)/_components/PromptUrlsSection.tsx` - -**Find:** -```tsx -

    - Perfect for static sites, prototypes, and AI coding agents that generate HTML. -

    -``` - -**Replace with:** -```tsx -

    - Perfect for placeholder images, prototypes, static sites, and AI coding agents. -

    -``` - ---- - -## Verification - -After changes: -1. Run `pnpm dev` in `apps/landing` -2. Check homepage loads without errors -3. Inspect page source — verify new keywords in meta tag -4. Scroll to Prompt URLs section — verify updated text - ---- - -## Done criteria - -- [ ] Keywords array updated with 8 items -- [ ] PromptUrlsSection shows "placeholder images" first in list -- [ ] No TypeScript/lint errors -- [ ] Page renders correctly diff --git a/inbox/task-placeholder-guide-rewrite.md b/inbox/task-placeholder-guide-rewrite.md new file mode 100644 index 0000000..bbbb51b --- /dev/null +++ b/inbox/task-placeholder-guide-rewrite.md @@ -0,0 +1,515 @@ +# Task: Rewrite Placeholder Images Guide + +**Priority:** High +**Estimated time:** 1-2 hours +**Type:** Documentation rewrite + +--- + +## Overview + +Delete current `/docs/guides/placeholder-images/page.tsx` and create new guide with structure below. + +**Tone:** Technical, professional, concise. No marketing fluff. +**Audience:** Developers who want practical examples they can copy-paste. + +**Live examples:** Use `https://cdn.banatie.app/sys/demo/live/{scope}` for all images. + +--- + +## SEO Metadata + +Keep existing SEO config in `docs-seo.ts` for `guide-placeholder-images`: + +```typescript +'guide-placeholder-images': { + path: '/docs/guides/placeholder-images/', + title: 'AI Placeholder Images Guide | Banatie', + description: + 'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.', + keywords: [ + 'placeholder images', + 'ai placeholder generator', + 'placeholder image api', + 'image placeholder dark', + 'profile placeholder image', + 'placeholder image url', + 'dummy image generator', + ], +}, +``` + +--- + +## Page Structure + +``` +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 }, +] +``` + +--- + +## Content + +### Hero + +**Title:** AI Placeholder Images + +**Subtitle:** Generate contextual images for development. Copy-paste ready examples with Tailwind CSS. + +--- + +### Section: What This Guide Covers + +This guide shows how to generate placeholder images with Banatie: + +- **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 + +All examples use real Live URLs. Images you see on this page are generated by Banatie. + +--- + +### Section: AI Generation Basics + +Banatie generates images from text descriptions. Key concepts: + +**Prompt → Image** +Describe what you need. The AI generates a matching image. + +**Prompt Enhancement** +Short prompts are automatically expanded. "office" becomes a detailed description with lighting, composition, and style. + +**Templates** +Control visual style with the `template` parameter: +- `photorealistic` — photo-like images +- `digital-art` — stylized illustrations +- `3d-render` — 3D graphics + +**Caching** +Same prompt returns the same image. First request generates, subsequent requests serve from cache instantly. + +--- + +### Section: Quick Start + +Basic Live URL format: + +``` +https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio} +``` + +Minimal example: + +```html +Mountain landscape +``` + +Parameters: + +| Parameter | Required | Description | +|-----------|----------|-------------| +| `prompt` | Yes | Image description (URL-encoded) | +| `aspectRatio` | No | Ratio like `1:1`, `16:9`, `4:3` (default: `16:9`) | +| `template` | No | Style template name | + +For full parameter reference, see [Live URLs documentation](/docs/live-urls/). + +--- + +### Section: Organizing Placeholders + +Use scopes to group related images: + +``` +/live/avatars?prompt=... → team member photos +/live/products?prompt=... → product catalog +/live/blog?prompt=... → article images +/live/hero?prompt=... → hero sections +``` + +Scopes are created automatically on first use. Each scope maintains its own cache. + +For scope configuration and limits, see [Live URLs → Scopes](/docs/live-urls/#scopes). + +--- + +### Section: Prompt Tips + +**Be specific** + +``` +❌ "office" +✅ "modern minimalist office with plants and natural light" +``` + +**Dark mode** + +Include theme context in your prompt: + +``` +"abstract gradient background dark theme" +"product photo on dark surface moody lighting" +"avatar silhouette dark background" +``` + +**Consistent style** + +Use the `template` parameter for visual consistency across multiple images: + +``` +?prompt=...&template=photorealistic +?prompt=...&template=digital-art +``` + +[TIP] All examples in this guide use prompt enhancement. Your short descriptions are automatically expanded into detailed prompts. + +--- + +### Section: Avatar Placeholder + +**Aspect ratio:** `1:1` + +**Use case:** User profiles, team sections, testimonials. + +#### Live Example + +[LIVE_PREVIEW: testimonial-card] + +Create a testimonial card component with: +- Dark card background (slate-800) +- Avatar image: 64x64px, rounded-full +- Quote text +- Author name and role +- Use this exact URL: `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1` +- Quote: "Banatie cut our design mockup time in half. No more hunting for stock photos." +- Author: "Sarah Chen" +- Role: "Product Designer at Acme" + +[/LIVE_PREVIEW] + +#### Code Snippet + +```html +User avatar +``` + +#### Team Grid Example + +[LIVE_PREVIEW: team-grid] + +Create a 3-column responsive grid with: +- 3 avatar cards side by side on desktop, stacked on mobile +- Each card: avatar (48x48, rounded-full), name, role +- Gap between cards +- Use these URLs: + 1. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1` — "Alex Rivera", "Engineering Lead" + 2. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1` — "Maria Santos", "Design Director" + 3. `https://cdn.banatie.app/landing/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1` — "James Wilson", "Product Manager" + +[/LIVE_PREVIEW] + +--- + +### Section: Product Image + +**Aspect ratio:** `1:1` (square) or `4:5` (portrait) + +**Use case:** E-commerce catalogs, product cards, listings. + +#### Live Example + +[LIVE_PREVIEW: product-card] + +Create a product card with: +- White/light background card with subtle shadow +- Product image: square, rounded corners +- Product name +- Price +- "Add to Cart" button (small, secondary style) +- Use URL: `https://cdn.banatie.app/landing/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1` +- Name: "Wireless Pro Headphones" +- Price: "$299" + +[/LIVE_PREVIEW] + +#### Code Snippet + +```html +Product +``` + +#### Product Grid Example + +[LIVE_PREVIEW: product-grid] + +Create a 2x2 product grid: +- 4 product cards +- Each: image (1:1), name, price +- Use these: + 1. `?prompt=modern+smart+watch+product+photo` — "Smart Watch X1", "$199" + 2. `?prompt=wireless+earbuds+case+product+photo` — "AirPods Pro", "$249" + 3. `?prompt=portable+bluetooth+speaker+product+photo` — "Portable Speaker", "$79" + 4. `?prompt=laptop+stand+aluminum+product+photo` — "Laptop Stand", "$129" + +Base URL: `https://cdn.banatie.app/landing/demo/live/products` with `&aspectRatio=1:1` + +[/LIVE_PREVIEW] + +--- + +### Section: Hero Section + +**Aspect ratio:** `16:9` + +**Use case:** Landing page heroes, section backgrounds, feature highlights. + +#### Live Example + +[LIVE_PREVIEW: hero-section] + +Create a full-width hero section: +- Full width, 400px height +- Background image with dark overlay (50% black) +- Centered white text: heading + subheading +- Rounded corners +- Use URL: `https://cdn.banatie.app/landing/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9` +- Heading: "Build the Future" +- Subheading: "Start your next project with AI-powered tools" + +[/LIVE_PREVIEW] + +#### Code Snippet + +```html +
    + Hero background +
    +

    Your Headline

    +
    +
    +``` + +--- + +### Section: OG Image + +**Aspect ratio:** `1200:630` (standard for social media) + +**Use case:** Social sharing previews, Twitter/LinkedIn cards. + +#### Live Example + +[LIVE_PREVIEW: og-preview] + +Create a social card preview mockup: +- Browser-like frame with URL bar showing "twitter.com" +- Inside: the OG image preview card +- Image with title overlay area +- Use URL: `https://cdn.banatie.app/landing/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630` +- Show how it would appear as a link preview + +[/LIVE_PREVIEW] + +#### Code Snippet + +```html + + + + + + +``` + +[TIP] OG images are crawled once and cached by social platforms. Change the prompt to generate a new image for updated content. + +--- + +### Section: Features Block + +**Aspect ratio:** `1:1` + +**Use case:** Feature grids, benefit sections, service highlights. + +#### Live Example + +[LIVE_PREVIEW: features-grid] + +Create a 3-column features section: +- Section heading: "Why Choose Us" +- 3 feature cards, each with: + - Square illustration (64x64) + - Feature title + - Short description (1-2 lines) +- Use these: + 1. `?prompt=minimal+icon+illustration+lightning+bolt+speed+blue` — "Lightning Fast", "Deploy in seconds with our global CDN" + 2. `?prompt=minimal+icon+illustration+shield+security+green` — "Secure by Default", "Enterprise-grade security built in" + 3. `?prompt=minimal+icon+illustration+puzzle+piece+integration+purple` — "Easy Integration", "Works with your existing stack" + +Base URL: `https://cdn.banatie.app/landing/demo/live/features` with `&aspectRatio=1:1` + +[/LIVE_PREVIEW] + +#### Code Snippet + +```html +
    +
    + Feature +

    Feature Title

    +

    Feature description goes here.

    +
    + +
    +``` + +--- + +### Section: File-based Workflow + +Sometimes you need image files in your repository instead of URLs. + +#### When to Use Files + +- Next.js projects with `/public` folder +- Static site generators requiring local assets +- Version-controlled images +- Offline development + +#### API Generation + Download + +Generate an image and save it locally: + +```javascript +// 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' +); +``` + +For full API reference, see [Generations API](/docs/api/generations/). + +--- + +## Implementation Notes for Claude Code + +### Live Preview Component + +Create a new component `LivePreview` or similar wrapper that: +- Has dark background (slate-900 or similar) +- Shows the rendered example +- Has subtle border +- Optionally shows "Live Example" label + +### Code Structure + +``` +/docs/guides/placeholder-images/ + page.tsx ← Main guide page +``` + +Use existing doc components: +- `CodeBlock` for code snippets +- `Table` for parameter tables +- `TipBox` for tips +- `SectionHeader` for sections +- `Hero` for page header + +### Image URLs + +All live example images use: +``` +https://cdn.banatie.app/landing/demo/live/{scope}?prompt=...&aspectRatio=... +``` + +Scopes used: +- `avatars` — avatar examples +- `products` — product photos +- `hero` — hero backgrounds +- `og` — OG images +- `features` — feature illustrations + +--- + +## Verification + +After implementation: +1. All live preview images load correctly +2. Code snippets are properly formatted +3. Links to other docs work +4. Page renders without errors +5. TOC navigation works +6. Mobile responsive + +--- + +## Done Criteria + +- [ ] Old guide deleted +- [ ] New guide created with all sections +- [ ] Live preview components render actual images +- [ ] Code snippets are copy-paste ready +- [ ] All internal links work +- [ ] No TypeScript/lint errors