From 9b032eaf5acce637dff765da11f5254903efc97c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 4 Jan 2026 15:04:26 +0700 Subject: [PATCH 1/6] doc: updates to live urls --- .../src/app/(apps)/docs/live-urls/page.tsx | 516 +++++++++--------- .../components/docs/layout/DocsSidebar.tsx | 15 +- .../src/components/docs/shared/TipBox.tsx | 74 ++- 3 files changed, 332 insertions(+), 273 deletions(-) diff --git a/apps/landing/src/app/(apps)/docs/live-urls/page.tsx b/apps/landing/src/app/(apps)/docs/live-urls/page.tsx index 68ebe39..9dedbad 100644 --- a/apps/landing/src/app/(apps)/docs/live-urls/page.tsx +++ b/apps/landing/src/app/(apps)/docs/live-urls/page.tsx @@ -6,11 +6,7 @@ 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'; +import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks'; const PAGE = DOCS_PAGES['live-urls']; @@ -42,129 +38,276 @@ export default function LiveUrlsPage() { - - -
- - The Concept - -

- Put your prompt in a URL. Use it directly in an <img src="..."> tag. -

-

- First request generates the image. All subsequent requests serve it from cache instantly. -

-
- -
- - URL Format - - - + -

- Query parameters: -

+
+ + The Concept + +

+ Put your prompt in a URL. Use it directly in an{' '} + <img src="..."> tag. +

+

+ First request generates the image. All subsequent requests serve it from cache + instantly. +

+
- prompt, - Yes, - 'Text description of the image to generate', - ], - [ - aspectRatio, - No, - 'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)', - ], - [ - autoEnhance, - No, - 'Enable prompt enhancement (default: true)', - ], - [ - template, - No, - 'Enhancement template to use', - ], - ]} - /> - +
+ + URL Format + -
- - Try It - -

- Open this URL in your browser: -

+ - +

Query parameters:

-

- Or use it directly in HTML: -

+
prompt, + + Yes + , + 'Text description of the image to generate', + ], + [ + aspectRatio, + + No + , + 'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 16:9)', + ], + [ + template, + + No + , + 'Enhancement template to use', + ], + [ + autoEnhance, + + No + , + 'Enable prompt enhancement (default: true)', + ], + ]} + /> + - + + Try It + +

Open this URL in your browser:

+ + + +

Or use it directly in HTML:

+ + `} - language="html" - filename="HTML Usage" - /> - + language="html" + filename="HTML Usage" + /> + -
- - 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. -

+
+ + Caching Behavior + +

+ The response includes an X-Cache-Status header: +

-

Common placeholder sizes:

+
+ HIT + , + 'Image served from cache', + 'Instant (milliseconds)', + ], + [MISS, 'New image generated', 'A few seconds'], + ]} + /> - +

+ Cache hits are unlimited and don't count toward rate limits. Only new generations (cache + MISS) are rate limited. +

+ + +
+ + Scopes + +

+ Scopes organize your live generations. Each scope has its own generation limit. +

+ + + +

+ Scopes are auto-created on first use. You can also pre-configure them via the API to set + custom limits. +

+
+ + {/*
+ + Rate Limits + + +
+ 10 new generations/hour + , + 'Only applies to cache MISS', + ], + [ + 'Per Scope', + + 30 generations + , + 'Configurable via API', + ], + [ + 'Cache Hits', + + Unlimited + , + 'No limits on cached images', + ], + ]} + /> + +
+ + Rate limits protect the service from abuse. For high-volume needs, use the generations + API directly. + +
+ */} + +
+ + Use Cases + + +
    +
  • + • +
    + Static HTML & serverless sites +

    + Deploy HTML pages without configuring asset hosting or CDN infrastructure. Images + are served directly from Banatie's edge network. +

    +
    +
    • +
  • + • +
    + AI-assisted development +

    + Enable AI coding assistants to generate complete HTML or JSX with contextual + images in a single pass—no asset pipeline required. +

    +
    +
    • +
  • + • +
    + Rapid prototyping +

    + Test different visuals without writing backend code. +

    +
    +
    • +
  • + • +
    + AI placeholder images +

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

    +
    +
    • +
  • + • +
    + Personalized content +

    + Generate unique images based on user data or preferences for dynamic, + individualized experiences. +

    +
    +
    • +
+
+ + +
+ + Use Live URLs as intelligent placeholder images during development. Generate contextual + visuals that match your design intent—no more gray boxes or random stock photos. + + +

Common placeholder configurations:

+ + @@ -175,141 +318,18 @@ export default function LiveUrlsPage() { `} - language="html" - filename="Placeholder Examples" - /> + language="html" + filename="Placeholder Examples" + /> -
- - For dark mode interfaces, include "dark theme" or "dark background" in your prompt. - -
-
+
+ + For dark mode interfaces, include "dark theme" or "dark background" in your prompt. + +
+ -
- - Caching Behavior - -

- The response includes an X-Cache-Status header: -

- -
HIT, - 'Image served from cache', - 'Instant (milliseconds)', - ], - [ - MISS, - 'New image generated', - 'A few seconds', - ], - ]} - /> - -

- Cache hits are unlimited and don't count toward rate limits. Only new generations (cache MISS) are rate limited. -

- - -
- - Scopes - -

- Scopes organize your live generations. Each scope has its own generation limit. -

- - - -

- Scopes are auto-created on first use. You can also pre-configure them via the API to set custom limits. -

-
- -
- - Rate Limits - - -
10 new generations/hour, - 'Only applies to cache MISS', - ], - [ - 'Per Scope', - 30 generations, - 'Configurable via API', - ], - [ - 'Cache Hits', - Unlimited, - 'No limits on cached images', - ], - ]} - /> - -
- - Rate limits protect the service from abuse. For high-volume needs, use the generations API directly. - -
- - -
- - Use Cases - - -
    -
  • - • -
    - AI Placeholder Images -

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

    -
    -
    • -
  • - • -
    - Personalized content -

    Create unique images based on user data or preferences.

    -
    -
    • -
  • - • -
    - Rapid prototyping -

    Test different visuals without writing backend code.

    -
    -
    • -
  • - • -
    - HTML emails -

    Include dynamic images in email templates with just a URL.

    -
    -
    • -
-
- + ); } diff --git a/apps/landing/src/components/docs/layout/DocsSidebar.tsx b/apps/landing/src/components/docs/layout/DocsSidebar.tsx index ce69d9a..981afae 100644 --- a/apps/landing/src/components/docs/layout/DocsSidebar.tsx +++ b/apps/landing/src/components/docs/layout/DocsSidebar.tsx @@ -58,6 +58,13 @@ const navigationItems: NavItem[] = [ label: 'Authentication', href: '/docs/authentication/', }, + { + label: 'Guides', + href: '/docs/guides/', + children: [ + { label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' }, + ], + }, { label: 'API Reference', href: '/docs/api/', @@ -69,13 +76,7 @@ const navigationItems: NavItem[] = [ { label: 'Live Scopes', href: '/docs/api/live-scopes/' }, ], }, - { - label: 'Guides', - href: '/docs/guides/', - children: [ - { label: 'Image Placeholders', href: '/docs/guides/placeholder-images/' }, - ], - }, + ]; export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => { diff --git a/apps/landing/src/components/docs/shared/TipBox.tsx b/apps/landing/src/components/docs/shared/TipBox.tsx index 8f7c313..197c71f 100644 --- a/apps/landing/src/components/docs/shared/TipBox.tsx +++ b/apps/landing/src/components/docs/shared/TipBox.tsx @@ -1,18 +1,20 @@ 'use client'; +import { Sparkles, Lightbulb, AlertTriangle, CheckCircle } from 'lucide-react'; + /** - * TipBox Component - Dual Style System + * TipBox Component - Multi-Style Callout System * - * Provides two distinct styles for callouts/notes: + * Provides three distinct styles for callouts/notes: * - * 1. Compact Style (Variant A inspired): - * - Small emoji icon on left + * 1. Compact Style: + * - Lucide icon on left * - Compact padding (p-4) * - Smaller text (text-sm) * - Subtle background with thin border * - Best for minor notes and tips * - * 2. Prominent Style (Adapted from Variant C): + * 2. Prominent Style: * - NO icon * - Larger padding (p-6) * - Larger text (text-base) @@ -20,6 +22,12 @@ * - More visual weight * - Best for important warnings and security notices * + * 3. Protip Style: + * - Sparkles icon with "Pro Tip" label + * - Golden/amber color scheme + * - Premium visual treatment with glow + * - Best for highlighting valuable tips and tricks + * * Usage: * * This is a compact tip @@ -28,10 +36,14 @@ * * This is an important security warning * + * + * + * This is a valuable pro tip + * */ type TipType = 'info' | 'warning' | 'success'; -type TipVariant = 'compact' | 'prominent'; +type TipVariant = 'compact' | 'prominent' | 'protip'; interface TipBoxProps { children: React.ReactNode; @@ -39,10 +51,10 @@ interface TipBoxProps { type?: TipType; } -const icons: Record = { - info: '💡', - warning: '⚠️', - success: '✓', +const icons: Record = { + info: , + warning: , + success: , }; const compactStyles: Record = { @@ -53,23 +65,49 @@ const compactStyles: Record = { const prominentStyles: Record = { info: 'bg-gradient-to-br from-purple-500/5 via-cyan-500/5 to-purple-500/5 border-purple-500/30 text-gray-300 shadow-lg shadow-purple-500/10', - warning: 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10', - success: 'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10', + warning: + 'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10', + success: + 'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10', }; -export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => { - const isCompact = variant === 'compact'; - const icon = icons[type]; - const styleClass = isCompact ? compactStyles[type] : prominentStyles[type]; +const protipStyle = + 'bg-gradient-to-r from-amber-500/15 via-yellow-500/10 to-amber-500/15 border-amber-400/40 text-amber-100 shadow-lg shadow-amber-500/20 ring-1 ring-amber-400/20'; - if (isCompact) { +export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => { + // Protip variant - premium golden style + if (variant === 'protip') { + return ( +
+ + + +
+ + Pro Tip + +
{children}
+
+
+ ); + } + + const icon = icons[type]; + const styleClass = variant === 'compact' ? compactStyles[type] : prominentStyles[type]; + + // Compact style + if (variant === 'compact') { return (
- {icon} + {icon}
{children}
); From 8080e7012eebac3d91951d5175ff247ab5ad2e28 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Sun, 4 Jan 2026 20:44:21 +0700 Subject: [PATCH 2/6] doc: prepare for guide --- .../docs/guides/placeholder-images/page.tsx | 245 -------- inbox/task-docs-placeholder-seo.md | 536 ------------------ inbox/task-homepage-placeholder-seo.md | 75 --- inbox/task-placeholder-guide-rewrite.md | 515 +++++++++++++++++ 4 files changed, 515 insertions(+), 856 deletions(-) delete mode 100644 apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx delete mode 100644 inbox/task-docs-placeholder-seo.md delete mode 100644 inbox/task-homepage-placeholder-seo.md create mode 100644 inbox/task-placeholder-guide-rewrite.md 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 From 77a2a03a815492ef52541257edaf4dabf93c05ba Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 5 Jan 2026 11:31:05 +0700 Subject: [PATCH 3/6] feat: new version --- .../docs/guides/placeholder-images/page.tsx | 702 ++++++++++++++++++ .../components/docs/shared/LivePreview.tsx | 32 + inbox/task-placeholder-guide-revision.md | 267 +++++++ 3 files changed, 1001 insertions(+) create mode 100644 apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx create mode 100644 apps/landing/src/components/docs/shared/LivePreview.tsx create mode 100644 inbox/task-placeholder-guide-revision.md 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 new file mode 100644 index 0000000..fead8d0 --- /dev/null +++ b/apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx @@ -0,0 +1,702 @@ +import type { Metadata } from 'next'; +import { TipBox } from '@/components/docs/shared/TipBox'; +import { Table } from '@/components/docs/shared/Table'; +import { CodeBlock } from '@/components/docs/shared/CodeBlock'; +import { LivePreview } from '@/components/docs/shared/LivePreview'; +import { DocPage } from '@/components/docs/layout/DocPage'; +import { JsonLd } from '@/components/seo/JsonLd'; +import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo'; +import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema'; +import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks'; + +const PAGE = DOCS_PAGES['guide-placeholder-images']; + +export const metadata: Metadata = createDocsMetadata(PAGE); + +const breadcrumbSchema = createBreadcrumbSchema([ + { name: 'Home', path: '/' }, + { name: 'Documentation', path: '/docs/' }, + { name: 'Guides', path: '/docs/guides/' }, + { name: 'Placeholder Images', path: '/docs/guides/placeholder-images/' }, +]); + +const articleSchema = createTechArticleSchema(PAGE); + +const tocItems = [ + { id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 }, + { id: 'ai-generation-basics', text: 'AI Generation Basics', level: 2 }, + { id: 'quick-start', text: 'Quick Start', level: 2 }, + { id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 }, + { id: 'prompt-tips', text: 'Prompt Tips', level: 2 }, + { id: 'avatar-placeholder', text: 'Avatar Placeholder', level: 2 }, + { id: 'product-image', text: 'Product Image', level: 2 }, + { id: 'hero-section', text: 'Hero Section', level: 2 }, + { id: 'og-image', text: 'OG Image', level: 2 }, + { id: 'features-block', text: 'Features Block', level: 2 }, + { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 }, +]; + +export default function PlaceholderImagesGuidePage() { + return ( + <> + + + + + + {/* What This Guide Covers */} +
    + + 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. +

    +
    + + {/* AI Generation Basics */} +
    + + 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. +

    +
    +
    +
    + + {/* Quick Start */} +
    + + Quick Start + +

    Basic Live URL format:

    + + +

    Minimal example:

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

    Parameters:

    +
    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 + + . +

    + + + {/* Organizing Placeholders */} +
    + + Organizing Placeholders + +

    Use scopes to group related images:

    + + +

    + Scopes are created automatically on first use. Each scope maintains its own cache. For + scope configuration and limits, see{' '} + + Live URLs → Scopes + + . +

    +
    + + {/* Prompt Tips */} +
    + + Prompt Tips + + +
    +
    +

    Be specific

    + +
    + +
    +

    Dark mode

    +

    Include theme context in your prompt:

    + +
    + +
    +

    Consistent style

    +

    + Use the template parameter for visual consistency across + multiple images: +

    + +
    +
    + +
    + + All examples in this guide use prompt enhancement. Your short descriptions are + automatically expanded into detailed prompts. + +
    +
    + + {/* Avatar Placeholder */} +
    + + Avatar Placeholder + +

    + Aspect ratio: 1:1 +

    +

    + Use case: User profiles, team sections, + testimonials. +

    + + + Testimonial Card + + +
    +
    + Sarah Chen +
    +

    + “Banatie cut our design mockup time in half. No more hunting for stock + photos.” +

    +

    Sarah Chen

    +

    Product Designer at Acme

    +
    +
    +
    +     + +
    + `} + language="html" + filename="Avatar Code" + /> +
    + + + Team Grid + + +
    +
    + Alex Rivera +
    +

    Alex Rivera

    +

    Engineering Lead

    +
    +
    +
    + Maria Santos +
    +

    Maria Santos

    +

    Design Director

    +
    +
    +
    + James Wilson +
    +

    James Wilson

    +

    Product Manager

    +
    +
    +
    +     +
    + + {/* Product Image */} +
    + + Product Image + +

    + Aspect ratio: 1:1{' '} + (square) or 4:5 (portrait) +

    +

    + Use case: E-commerce catalogs, product cards, + listings. +

    + + + Product Card + + +
    + Wireless Pro Headphones +

    Wireless Pro Headphones

    +

    $299

    + +
    +     + +
    + `} + language="html" + filename="Product Image Code" + /> +
    + + + Product Grid + + +
    +
    + Smart Watch X1 +

    Smart Watch X1

    +

    $199

    +
    +
    + AirPods Pro +

    AirPods Pro

    +

    $249

    +
    +
    + Portable Speaker +

    Portable Speaker

    +

    $79

    +
    +
    + Laptop Stand +

    Laptop Stand

    +

    $129

    +
    +
    +     +
    + + {/* Hero Section */} +
    + + Hero Section + +

    + Aspect ratio: 16:9 +

    +

    + Use case: Landing page heroes, section + backgrounds, feature highlights. +

    + + +
    + Hero background +
    +

    Build the Future

    +

    + Start your next project with AI-powered tools +

    +
    +
    +     + +
    + + Hero background +
    +

    Your Headline

    +
    +
    `} + language="html" + filename="Hero Section Code" + /> + +
    + + {/* OG Image */} +
    + + OG Image + +

    + Aspect ratio: 1200:630{' '} + (standard for social media) +

    +

    + Use case: Social sharing previews, + Twitter/LinkedIn cards. +

    + + +
    +
    +
    + + + +
    + twitter.com +
    +
    + OG Image Preview +

    banatie.app

    +

    AI Placeholder Images Guide | Banatie

    +

    + Generate AI placeholder images for development... +

    +
    +
    +     + +
    + + + + + +`} + language="html" + filename="OG Meta Tags" + /> +
    + +
    + + OG images are crawled once and cached by social platforms. Change the prompt to + generate a new image for updated content. + +
    +
    + + {/* Features Block */} +
    + + Features Block + +

    + Aspect ratio: 1:1 +

    +

    + Use case: Feature grids, benefit sections, + service highlights. +

    + + +
    +

    Why Choose Us

    +
    +
    +
    + Lightning Fast +

    Lightning Fast

    +

    Deploy in seconds with our global CDN

    +
    +
    + Secure by Default +

    Secure by Default

    +

    Enterprise-grade security built in

    +
    +
    + Easy Integration +

    Easy Integration

    +

    Works with your existing stack

    +
    +
    +     + +
    + +
    + Feature +

    Feature Title

    +

    Feature description goes here.

    +
    + +
    `} + language="html" + filename="Features Grid Code" + /> + +
    + + {/* File-based Workflow */} +
    + + 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: +

    + + + +

    + For full API reference, see{' '} + + Generations API + + . +

    +
    + + + ); +} diff --git a/apps/landing/src/components/docs/shared/LivePreview.tsx b/apps/landing/src/components/docs/shared/LivePreview.tsx new file mode 100644 index 0000000..027a0c5 --- /dev/null +++ b/apps/landing/src/components/docs/shared/LivePreview.tsx @@ -0,0 +1,32 @@ +'use client'; + +interface LivePreviewProps { + children: React.ReactNode; + label?: string; + className?: string; + showLabel?: boolean; +} + +export const LivePreview = ({ + children, + label = 'Live Example', + className = '', + showLabel = true, +}: LivePreviewProps) => { + return ( +
    + {showLabel && ( +
    + + {label} + +
    + )} +
    {children}
    +
    + ); +}; diff --git a/inbox/task-placeholder-guide-revision.md b/inbox/task-placeholder-guide-revision.md new file mode 100644 index 0000000..b047381 --- /dev/null +++ b/inbox/task-placeholder-guide-revision.md @@ -0,0 +1,267 @@ +# Task: Revise Placeholder Images Guide + +**Priority:** High +**Type:** Content revision +**Related:** Previous guide implementation needs text/UX improvements + +--- + +## Context + +Guide exists at `/docs/guides/placeholder-images/page.tsx`. Structure is OK, but texts need revision based on review session. This task covers text changes and minor UX improvements. + +--- + +## SEO Keywords to Include Naturally + +Target these in headings and body text: +- "placeholder image url" (390/mo, KD 21) +- "html placeholder image" (320/mo, KD 33) +- "placeholder image generator" (480/mo, KD 32) +- "ai placeholder images" (from our research) + +--- + +## Section-by-Section Changes + +### Hero + +**Current subtitle:** "Generate contextual images for development. Copy-paste ready examples with Tailwind CSS." + +**New subtitle:** "Generate contextual images for development. The new era of AI placeholders." + +Remove Tailwind mention from hero — it's implementation detail, not selling point. + +--- + +### What This Guide Covers + +**Current:** +- Live URLs — embed AI-generated images directly in HTML +- Ready-to-use snippets — copy into your project with Tailwind classes +- File download — save images locally via API + +**New:** +- **Live URLs** — describe what you need right in `` src URLs +- **API generation** — full control, permanent URLs, downloadable files + +Remove "snippets" as separate point — that's expected from any guide. + +--- + +### AI Generation Basics → Rename to "How to Create Placeholders" + +**Current content:** Generic AI explanation (prompt → image, enhancement, etc.) + +**New content:** + +Focus on Banatie features, not AI basics: + +**Templates** +Choose a style, get quality results. Banatie enhances your simple prompt based on selected template. + +Available templates: +- `photorealistic` — photo-quality images +- `digital-art` — stylized illustrations +- `3d-render` — 3D graphics + +[Link to full templates documentation] + +**Simple Prompts** +Write minimal descriptions. Templates handle the rest. +- "office" → detailed modern office with proper lighting +- "headshot" → professional portrait with studio background + +No need for complex prompts — this is for placeholders, not art. + +**Remove:** +- "Prompt Enhancement" as separate concept (it's what templates do) +- "Caching" paragraph (belongs to Live URLs section, not here) + +--- + +### Quick Start + +**Add intro paragraph** explaining what Live URLs are and why they're perfect for placeholders: + +> Live URLs let you generate images by describing what you need right in the URL. No API calls, no file management — just an `` tag with your prompt. Each unique prompt is cached, so subsequent loads are instant via CDN. + +**Change example URL** from `{org}/{project}` placeholder to real working URL: + +```html +Mountain landscape +``` + +**Add live result** — show the actual generated image right after the code snippet. + +--- + +### Organizing Placeholders + +**Current:** Dry list of scope examples + +**New approach:** + +Short explanation: "Organize images by sections of your site using scopes." + +One example showing the pattern: +``` +/live/avatars?prompt=... → user photos +/live/hero?prompt=... → hero backgrounds +/live/products?prompt=... → product catalog +``` + +Then link: "Learn more about scopes in [Live URLs documentation](/docs/live-urls/#scopes)." + +Don't teach users how to name things — let them figure it out. + +--- + +### Prompt Tips + +**Current "Be specific"** — contradicts placeholder philosophy + +**New "Write less, not more":** + +> For placeholders, simple prompts work best. Templates add the details. +> +> - Want an office? Write "office" +> - Need something specific? Add only what matters: "office dark theme" +> - Templates handle lighting, composition, style + +**Current "Dark mode"** → **"Colors and themes":** + +> Control the mood with color hints: +> - `dark background` — dark theme +> - `blue and orange accents` — specific palette +> - `warm lighting` — cozy feel + +Keep dark mode examples but expand to general color control. + +**Remove "Consistent style"** — too vague. Consistency comes from templates + references (advanced topic). + +**Change TipBox text:** +From: "All examples in this guide use prompt enhancement..." +To: "Templates automatically enhance your prompts. A simple description becomes a detailed generation instruction." + +--- + +### Recipes Section + +**Add section header:** Create a parent heading "Recipes" or "Common Use Cases" that groups all the examples (Avatar, Product, Hero, OG, Features). + +--- + +### Recipe Cards: Code + Preview + +**UX improvement:** Each recipe should have a tabbed component with "Preview" and "Code" tabs, not separate blocks. + +If tabs are complex to implement, at minimum: +- Show live preview FIRST +- Code snippet below with clear label +- Remove redundant "Code Snippet" / "Live Example" headings — visual separation is enough + +--- + +### Testimonial Card (Avatar section) + +**Current design:** Basic dark card + +**Improve design quality:** +- Add subtle border or gradient +- Better typography hierarchy +- Proper quote styling (quotation marks or left border) +- Make it look like something you'd actually ship + +This is our showcase — it should look good. + +--- + +### File-based Workflow + +**Current intro:** "Sometimes you need image files in your repository instead of URLs." + +**New intro:** "Need files in your repo? Here's how to download generated images." + +Warmer, more direct. + +**Remove "Static site generators" mention** — no SEO value, weak use case. + +**Keep:** +- Next.js with imports (fix the pattern — show `import` from `src/assets`, not `/public`) +- Version-controlled images + +**Simplify download example:** + +Current code is mini-SDK territory. Simplify to: + +```javascript +// 1. Generate image +const response = await fetch('https://api.banatie.app/v1/generations', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'X-API-Key': process.env.BANATIE_API_KEY, + }, + body: JSON.stringify({ prompt: 'modern office' }), +}); + +const { image } = await response.json(); +console.log(image.cdnUrl); // Download this URL via browser or curl +``` + +Remove the fs.writeFileSync part — that's SDK territory. User can download via browser. + +--- + +### "When to Use Files" List + +**Current:** +- Next.js projects with `/public` folder ❌ +- Static site generators requiring local assets ❌ +- Version-controlled images +- Offline development + +**New:** +- Next.js/React projects with local image imports +- Version-controlled placeholder assets +- Offline or CI/CD environments + +--- + +## Component Changes + +### LivePreview wrapper + +Current implementation is OK. No changes needed unless design quality is poor. + +### Code/Preview tabs + +If implementing tabs is too complex, skip for now. But note it as future improvement. + +--- + +## Quality Checklist + +After implementation: +- [ ] No mention of "Prompt Enhancement" as standalone feature +- [ ] Templates positioned as primary feature +- [ ] All example URLs use `sys/demo` (real project) +- [ ] Quick Start shows actual generated image +- [ ] File-based section uses import pattern, not /public +- [ ] No static site generators mentioned +- [ ] Testimonial card looks professional +- [ ] SEO keywords naturally integrated + +--- + +## Files to Modify + +``` +apps/landing/src/app/(apps)/docs/guides/placeholder-images/page.tsx +``` + +No new files needed. From df3720557c585b78c3415e60f8e60847adeac921 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Mon, 5 Jan 2026 21:27:13 +0700 Subject: [PATCH 4/6] feat: guide update --- .../docs/guides/placeholder-images/page.tsx | 766 ++++++++---------- 1 file changed, 338 insertions(+), 428 deletions(-) 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() { > {/* What This Guide Covers */} @@ -76,59 +72,39 @@ export default function PlaceholderImagesGuidePage() { What This Guide Covers

    - This guide shows how to generate placeholder images with Banatie: + Two ways to generate placeholder images with Banatie:

    • - Live URLs — embed AI-generated images directly - in HTML + Live URLs — describe what you need right in{' '} + <img> src URLs
    • - Ready-to-use snippets — copy into your project - with Tailwind classes -
      • -
    • - File download — save images locally via API + API generation — full control, permanent URLs, + downloadable files

    - 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.

    - {/* AI Generation Basics */} -
    - - AI Generation Basics + {/* How to Create Placeholders */} +
    + + How to Create Placeholders -

    - 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: + Choose a style, get quality results. Banatie enhances your simple prompt based on + the selected template:

    • - photorealistic — photo-like images + photorealistic — photo-quality images
    • digital-art — stylized illustrations @@ -137,13 +113,30 @@ export default function PlaceholderImagesGuidePage() { 3d-render — 3D graphics
    +

    + + View all templates → + +

    -

    Caching

    -

    - Same prompt returns the same image. First request generates, subsequent requests - serve from cache instantly. +

    Simple Prompts

    +

    + Write minimal descriptions. Templates handle the rest: +

    +
      +
    • + → "office" becomes a detailed + modern office with proper lighting +
      • +
    • + → "headshot" becomes a + professional portrait with studio background +
      • +
    +

    + No need for complex prompts — this is for placeholders, not art.

    @@ -154,23 +147,38 @@ export default function PlaceholderImagesGuidePage() { Quick Start -

    Basic Live URL format:

    +

    + 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. +

    + +

    Basic URL format:

    -

    Minimal example:

    +

    Example:

    `} language="html" - filename="Basic Usage" + filename="HTML Placeholder Image" /> +

    Result:

    + + Mountain landscape + +

    Parameters:

    Organizing Placeholders -

    Use scopes to group related images:

    +

    + Organize images by sections of your site using scopes: +

    - Scopes are created automatically on first use. Each scope maintains its own cache. For - scope configuration and limits, see{' '} + Learn more about scopes in{' '} - Live URLs → Scopes + Live URLs documentation .

    @@ -227,34 +234,25 @@ export default function PlaceholderImagesGuidePage() {
    -

    Be specific

    - -
    - -
    -

    Dark mode

    -

    Include theme context in your prompt:

    - -
    - -
    -

    Consistent style

    +

    Write less, not more

    - Use the template parameter for visual consistency across - multiple images: + For placeholders, simple prompts work best. Templates add the details:

    +
      +
    • Want an office? Write "office"
      • +
    • + Need something specific? Add only what matters: "office dark theme" +
      • +
    +
    + +
    +

    Colors and themes

    +

    Control the mood with color hints:

    @@ -262,135 +260,121 @@ export default function PlaceholderImagesGuidePage() {
    - 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.
    - {/* Avatar Placeholder */} -
    - - Avatar Placeholder + {/* Recipes */} +
    + + Recipes -

    - Aspect ratio: 1:1 -

    -

    - Use case: User profiles, team sections, - testimonials. +

    + Copy-paste examples for common placeholder image use cases.

    - - Testimonial Card - - -
    -
    - Sarah Chen -
    -

    - “Banatie cut our design mockup time in half. No more hunting for stock - photos.” -

    -

    Sarah Chen

    -

    Product Designer at Acme

    + {/* Avatar */} +
    +

    Avatar

    +

    + 1:1 · User profiles, team sections, testimonials +

    + + +
    +
    + Sarah Chen +
    +

    + Banatie cut our design mockup time in half. No more hunting for stock photos. +

    +

    Sarah Chen

    +

    Product Designer at Acme

    +
    -
    - + -
    `} language="html" - filename="Avatar Code" /> + +
    +

    Team grid example:

    + +
    +
    + Alex Rivera +
    +

    Alex Rivera

    +

    Engineering Lead

    +
    +
    +
    + Maria Santos +
    +

    Maria Santos

    +

    Design Director

    +
    +
    +
    + James Wilson +
    +

    James Wilson

    +

    Product Manager

    +
    +
    +
    +     +
    - - Team Grid - - -
    -
    - Alex Rivera -
    -

    Alex Rivera

    -

    Engineering Lead

    -
    -
    -
    - Maria Santos -
    -

    Maria Santos

    -

    Design Director

    -
    -
    -
    - James Wilson -
    -

    James Wilson

    -

    Product Manager

    -
    -
    -
    -     -
    + {/* Product */} +
    +

    Product

    +

    + 1:1 or 4:5 · E-commerce, catalogs, + listings +

    - {/* Product Image */} -
    - - Product Image - -

    - Aspect ratio: 1:1{' '} - (square) or 4:5 (portrait) -

    -

    - Use case: E-commerce catalogs, product cards, - listings. -

    + +
    + Wireless Pro Headphones +

    Wireless Pro Headphones

    +

    $299

    + +
    +     - - Product Card - - -
    - Wireless Pro Headphones -

    Wireless Pro Headphones

    -

    $299

    - -
    -     - -
    `} language="html" - filename="Product Image Code" /> + +
    +

    Product grid example:

    + +
    +
    + Smart Watch X1 +

    Smart Watch X1

    +

    $199

    +
    +
    + AirPods Pro +

    AirPods Pro

    +

    $249

    +
    +
    + Portable Speaker +

    Portable Speaker

    +

    $79

    +
    +
    + Laptop Stand +

    Laptop Stand

    +

    $129

    +
    +
    +     +
    - - Product Grid - - -
    -
    - Smart Watch X1 -

    Smart Watch X1

    -

    $199

    -
    -
    - AirPods Pro -

    AirPods Pro

    -

    $249

    -
    -
    - Portable Speaker -

    Portable Speaker

    -

    $79

    -
    -
    - Laptop Stand -

    Laptop Stand

    -

    $129

    -
    -
    -     -
    + {/* Hero */} +
    +

    Hero

    +

    + 16:9 · Landing pages, section backgrounds +

    - {/* Hero Section */} -
    - - Hero Section - -

    - Aspect ratio: 16:9 -

    -

    - Use case: Landing page heroes, section - backgrounds, feature highlights. -

    - - -
    - Hero background -
    -

    Build the Future

    -

    - Start your next project with AI-powered tools -

    + +
    + Hero background +
    +

    Build the Future

    +

    Start your next project with AI-powered tools

    +
    -
    - + -
    + code={`
    Hero background
    `} language="html" - filename="Hero Section Code" />
    -
    - {/* OG Image */} -
    - - OG Image - -

    - Aspect ratio: 1200:630{' '} - (standard for social media) -

    -

    - Use case: Social sharing previews, - Twitter/LinkedIn cards. -

    + {/* OG Image */} +
    +

    OG Image

    +

    + 1200:630 · Social sharing, Twitter/LinkedIn cards +

    - -
    -
    -
    - - - + +
    +
    +
    + + + +
    + twitter.com +
    +
    + OG Image Preview +

    banatie.app

    +

    + AI Placeholder Images Guide | Banatie +

    +

    + Generate AI placeholder images for development... +

    - twitter.com
    -
    - OG Image Preview -

    banatie.app

    -

    AI Placeholder Images Guide | Banatie

    -

    - Generate AI placeholder images for development... -

    -
    -
    - + -
    - - - - -`} + code={` + +`} language="html" - filename="OG Meta Tags" /> + +
    + + OG images are cached by social platforms. Change the prompt to regenerate. + +
    -
    - - OG images are crawled once and cached by social platforms. Change the prompt to - generate a new image for updated content. - -
    -
    + {/* Features */} +
    +

    Features

    +

    + 1:1 · Feature grids, benefit sections, icons +

    - {/* Features Block */} -
    - - Features Block - -

    - Aspect ratio: 1:1 -

    -

    - Use case: Feature grids, benefit sections, - service highlights. -

    + +
    +
    + Lightning Fast +

    Lightning Fast

    +

    + Deploy in seconds with our global CDN +

    +
    +
    + Secure by Default +

    Secure by Default

    +

    Enterprise-grade security built in

    +
    +
    + Easy Integration +

    Easy Integration

    +

    Works with your existing stack

    +
    +
    +     - -
    -

    Why Choose Us

    -
    -
    -
    - Lightning Fast -

    Lightning Fast

    -

    Deploy in seconds with our global CDN

    -
    -
    - Secure by Default -

    Secure by Default

    -

    Enterprise-grade security built in

    -
    -
    - Easy Integration -

    Easy Integration

    -

    Works with your existing stack

    -
    -
    -     - -
    -
    - Feature -

    Feature Title

    -

    Feature description goes here.

    -
    - -
    `} + code={`Feature icon`} language="html" - filename="Features Grid Code" />
    @@ -628,64 +571,31 @@ export default function PlaceholderImagesGuidePage() { File-based Workflow

    - Sometimes you need image files in your repository instead of URLs. + Need files in your repo? Here's how to download generated images.

    - - When to Use Files - +

    When to Use Files

      -
    • - Next.js projects with /public folder -
      • -
    • Static site generators requiring local assets
      • -
    • Version-controlled images
      • -
    • Offline development
      • +
    • Next.js/React projects with local image imports
      • +
    • Version-controlled placeholder assets
      • +
    • Offline or CI/CD environments
    - - API Generation + Download - -

    - Generate an image and save it locally: -

    - +

    Generate via API

    From 9eb63bea22fa18af7e55b3c49362b677782e7885 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 6 Jan 2026 00:35:56 +0700 Subject: [PATCH 5/6] feat: improve guide --- .../docs/guides/placeholder-images/page.tsx | 192 +++++++++++++----- .../components/docs/layout/DocsSidebar.tsx | 2 +- apps/landing/src/config/docs-seo.ts | 14 +- 3 files changed, 155 insertions(+), 53 deletions(-) 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 2bf2847..2aa366a 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 @@ -28,7 +28,9 @@ 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: 'recipes', text: 'Recipes', level: 2 }, + { id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 }, + { id: 'dark-mode-placeholders', text: 'Dark Mode Placeholders', level: 2 }, + { id: 'placeholder-image-examples', text: 'Placeholder Image Examples', level: 2 }, { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 }, ]; @@ -67,7 +69,7 @@ export default function PlaceholderImagesGuidePage() { /> {/* What This Guide Covers */} -

    +
    What This Guide Covers @@ -76,12 +78,16 @@ export default function PlaceholderImagesGuidePage() {

    • - Live URLs — describe what you need right in{' '} - <img> src URLs + + Live URLs + {' '} + — describe what you need right in <img> src URLs
    • - API generation — full control, permanent URLs, - downloadable files + + API generation + {' '} + — full control, permanent URLs, downloadable files

    @@ -90,7 +96,7 @@ export default function PlaceholderImagesGuidePage() {

    {/* How to Create Placeholders */} -
    +
    How to Create Placeholders @@ -143,7 +149,7 @@ export default function PlaceholderImagesGuidePage() {
    {/* Quick Start */} -
    +
    Quick Start @@ -203,7 +209,7 @@ export default function PlaceholderImagesGuidePage() {
    {/* Organizing Placeholders */} -
    +
    Organizing Placeholders @@ -227,7 +233,7 @@ export default function PlaceholderImagesGuidePage() {
    {/* Prompt Tips */} -
    +
    Prompt Tips @@ -236,12 +242,21 @@ export default function PlaceholderImagesGuidePage() {

    Write less, not more

    - For placeholders, simple prompts work best. Templates add the details: + For placeholders, simple prompts are often enough. You can always add more details + later if needed. Templates handle the rest:

      -
    • Want an office? Write "office"
    • - Need something specific? Add only what matters: "office dark theme" + → Want an office? Write{' '} + office +
      • +
    • + → Need a dark version? Add{' '} + office dark background +
      • +
    • + → Templates handle lighting, composition, + style
    @@ -266,10 +281,76 @@ export default function PlaceholderImagesGuidePage() {
    - {/* Recipes */} -
    - - Recipes + {/* Light Mode Placeholders */} +
    + + Light Mode Placeholders + +

    + Generated images work well with light interfaces by default. If you need more control, + specify background colors or accents to match your design system. +

    + + + +
    + +
    + Light theme placeholder +

    Clean Workspace

    +

    White background, natural lighting

    +
    +     +
    +
    + + {/* Dark Mode Placeholders */} +
    + + Dark Mode Placeholders + +

    + For dark interfaces, add dark background or descriptive words + like night, moody, or twilight. You can also specify accent colors. +

    + + + +
    + +
    + Dark theme placeholder +

    Dark Gradient

    +

    Dark background with purple accents

    +
    +     +
    +
    + + {/* Placeholder Image Examples */} +
    + + Placeholder Image Examples

    Copy-paste examples for common placeholder image use cases. @@ -417,7 +498,7 @@ export default function PlaceholderImagesGuidePage() {

    Laptop Stand @@ -521,32 +602,32 @@ export default function PlaceholderImagesGuidePage() {

    -
    -
    +
    +
    Lightning Fast

    Lightning Fast

    Deploy in seconds with our global CDN

    -
    +
    Secure by Default

    Secure by Default

    Enterprise-grade security built in

    -
    +
    Easy Integration

    Easy Integration

    Works with your existing stack

    @@ -555,18 +636,25 @@ export default function PlaceholderImagesGuidePage() { `} + code={`
    +
    + Lightning Fast +

    Lightning Fast

    +

    Deploy in seconds with our global CDN

    +
    + +
    `} language="html" />
    {/* File-based Workflow */} -
    +
    File-based Workflow @@ -582,23 +670,35 @@ export default function PlaceholderImagesGuidePage() {

    Generate via API

    +

    Request:

    + +

    Response:

    +

    + Open cdnUrl in your browser, save the image, and add it to your + project's assets folder. +

    + +

    For full API reference, see{' '} Generations API diff --git a/apps/landing/src/components/docs/layout/DocsSidebar.tsx b/apps/landing/src/components/docs/layout/DocsSidebar.tsx index 981afae..5926246 100644 --- a/apps/landing/src/components/docs/layout/DocsSidebar.tsx +++ b/apps/landing/src/components/docs/layout/DocsSidebar.tsx @@ -80,7 +80,7 @@ const navigationItems: NavItem[] = [ ]; export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => { - const [expandedSections, setExpandedSections] = useState(['API Reference']); + const [expandedSections, setExpandedSections] = useState(['API Reference', 'Guides']); const toggleSection = (label: string) => { setExpandedSections((prev) => diff --git a/apps/landing/src/config/docs-seo.ts b/apps/landing/src/config/docs-seo.ts index 7f06317..614b513 100644 --- a/apps/landing/src/config/docs-seo.ts +++ b/apps/landing/src/config/docs-seo.ts @@ -132,16 +132,18 @@ export const DOCS_PAGES = { }, 'guide-placeholder-images': { path: '/docs/guides/placeholder-images/', - title: 'AI Placeholder Images Guide | Banatie', + title: 'AI Placeholder Image Generator — Light & Dark Mode | Banatie', description: - 'Generate AI placeholder images for development. Replace gray boxes with contextual visuals. Sizes for avatars, thumbnails, heroes, and more.', + 'Generate AI placeholder images for development. Image placeholder dark mode, light backgrounds, avatars, products, heroes. Copy-paste HTML examples.', keywords: [ - 'placeholder images', - 'ai placeholder generator', - 'placeholder image api', + 'placeholder image generator', 'image placeholder dark', - 'profile placeholder image', 'placeholder image url', + 'html placeholder image', + 'ai placeholder images', + 'dark mode placeholder', + 'light mode placeholder', + 'profile placeholder image', 'dummy image generator', ], }, From 0dc15d8694eb45f9880635269a7bc5c863f0c8ef Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 6 Jan 2026 00:49:39 +0700 Subject: [PATCH 6/6] chore: adjust page --- .../docs/guides/placeholder-images/page.tsx | 59 +++++++++++-------- 1 file changed, 34 insertions(+), 25 deletions(-) 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 2aa366a..b4b1961 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 @@ -481,10 +481,10 @@ export default function PlaceholderImagesGuidePage() {

    @@ -565,7 +565,7 @@ export default function PlaceholderImagesGuidePage() {
    OG Image Preview @@ -603,48 +603,57 @@ export default function PlaceholderImagesGuidePage() {
    -
    +
    Lightning Fast -

    Lightning Fast

    -

    - Deploy in seconds with our global CDN -

    +
    +

    Lightning Fast

    +

    + Deploy in seconds with our global CDN +

    +
    -
    +
    Secure by Default -

    Secure by Default

    -

    Enterprise-grade security built in

    +
    +

    Secure by Default

    +

    Enterprise-grade security built in

    +
    -
    +
    Easy Integration -

    Easy Integration

    -

    Works with your existing stack

    +
    +

    Easy Integration

    +

    Works with your existing stack

    +
    -
    +
    Lightning Fast -

    Lightning Fast

    -

    Deploy in seconds with our global CDN

    +
    +

    Lightning Fast

    +

    Deploy in seconds with our global CDN

    +
    `}