From 9eb63bea22fa18af7e55b3c49362b677782e7885 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin Date: Tue, 6 Jan 2026 00:35:56 +0700 Subject: [PATCH] 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', ], },