usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: usulpro:0dc15d8694eb45f9880635269a7bc5c863f0c8ef
Branches Tags
usulpro:main
usulpro:feature/placeholders-guide
usulpro:docs-section
usulpro:feature/lab-frontend
usulpro:feature/db-for-generation
usulpro:feature/documentation-section
..
compare: usulpro:df3720557c585b78c3415e60f8e60847adeac921
Branches Tags
usulpro:main
usulpro:feature/placeholders-guide
usulpro:docs-section
usulpro:feature/lab-frontend
usulpro:feature/db-for-generation
usulpro:feature/documentation-section

No commits in common. "0dc15d8694eb45f9880635269a7bc5c863f0c8ef" and "df3720557c585b78c3415e60f8e60847adeac921" have entirely different histories.
0dc15d8694 ... df3720557c

3 changed files with 64 additions and 175 deletions
Show Stats Expand all files Collapse all files

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

@ -28,9 +28,7 @@ const tocItems = [
{ id: 'quick-start', text: 'Quick Start', level: 2 }, { id: 'quick-start', text: 'Quick Start', level: 2 },
{ id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 }, { id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
{ id: 'prompt-tips', text: 'Prompt Tips', level: 2 }, { id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
{ id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 }, { id: 'recipes', text: 'Recipes', 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 }, { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
]; ];
@ -69,7 +67,7 @@ export default function PlaceholderImagesGuidePage() {
/> />
{/* What This Guide Covers */} {/* What This Guide Covers */}
<section id="what-this-guide-covers" className="mb-12 scroll-mt-24"> <section id="what-this-guide-covers" className="mb-12">
<SectionHeader level={2} id="what-this-guide-covers"> <SectionHeader level={2} id="what-this-guide-covers">
What This Guide Covers What This Guide Covers
</SectionHeader> </SectionHeader>
@ -78,16 +76,12 @@ export default function PlaceholderImagesGuidePage() {
</p> </p>
<ul className="list-disc list-inside text-gray-300 space-y-2 mb-6"> <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
<li> <li>
<a href="#quick-start" className="text-white font-semibold hover:text-purple-400"> <strong className="text-white">Live URLs</strong> — describe what you need right in{' '}
Live URLs <InlineCode>&lt;img&gt;</InlineCode> src URLs
</a>{' '}
— describe what you need right in <InlineCode>&lt;img&gt;</InlineCode> src URLs
</li> </li>
<li> <li>
<a href="#file-based-workflow" className="text-white font-semibold hover:text-purple-400"> <strong className="text-white">API generation</strong> — full control, permanent URLs,
API generation downloadable files
</a>{' '}
— full control, permanent URLs, downloadable files
</li> </li>
</ul> </ul>
<p className="text-gray-300 leading-relaxed"> <p className="text-gray-300 leading-relaxed">
@ -96,7 +90,7 @@ export default function PlaceholderImagesGuidePage() {
</section> </section>
{/* How to Create Placeholders */} {/* How to Create Placeholders */}
<section id="how-to-create-placeholders" className="mb-12 scroll-mt-24"> <section id="how-to-create-placeholders" className="mb-12">
<SectionHeader level={2} id="how-to-create-placeholders"> <SectionHeader level={2} id="how-to-create-placeholders">
How to Create Placeholders How to Create Placeholders
</SectionHeader> </SectionHeader>
@ -149,7 +143,7 @@ export default function PlaceholderImagesGuidePage() {
</section> </section>
{/* Quick Start */} {/* Quick Start */}
<section id="quick-start" className="mb-12 scroll-mt-24"> <section id="quick-start" className="mb-12">
<SectionHeader level={2} id="quick-start"> <SectionHeader level={2} id="quick-start">
Quick Start Quick Start
</SectionHeader> </SectionHeader>
@ -209,7 +203,7 @@ export default function PlaceholderImagesGuidePage() {
</section> </section>
{/* Organizing Placeholders */} {/* Organizing Placeholders */}
<section id="organizing-placeholders" className="mb-12 scroll-mt-24"> <section id="organizing-placeholders" className="mb-12">
<SectionHeader level={2} id="organizing-placeholders"> <SectionHeader level={2} id="organizing-placeholders">
Organizing Placeholders Organizing Placeholders
</SectionHeader> </SectionHeader>
@ -233,7 +227,7 @@ export default function PlaceholderImagesGuidePage() {
</section> </section>
{/* Prompt Tips */} {/* Prompt Tips */}
<section id="prompt-tips" className="mb-12 scroll-mt-24"> <section id="prompt-tips" className="mb-12">
<SectionHeader level={2} id="prompt-tips"> <SectionHeader level={2} id="prompt-tips">
Prompt Tips Prompt Tips
</SectionHeader> </SectionHeader>
@ -242,21 +236,12 @@ export default function PlaceholderImagesGuidePage() {
<div> <div>
<h4 className="text-white font-semibold mb-2">Write less, not more</h4> <h4 className="text-white font-semibold mb-2">Write less, not more</h4>
<p className="text-gray-300 mb-2"> <p className="text-gray-300 mb-2">
For placeholders, simple prompts are often enough. You can always add more details For placeholders, simple prompts work best. Templates add the details:
later if needed. Templates handle the rest:
</p> </p>
<ul className="list-none text-gray-300 space-y-1"> <ul className="list-none text-gray-300 space-y-1">
<li>Want an office? Write &quot;office&quot;</li>
<li> <li>
<span className="text-gray-500">→</span> Want an office? Write{' '} Need something specific? Add only what matters: &quot;office dark theme&quot;
<InlineCode>office</InlineCode>
</li>
<li>
<span className="text-gray-500">→</span> Need a dark version? Add{' '}
<InlineCode>office dark background</InlineCode>
</li>
<li>
<span className="text-gray-500">→</span> Templates handle lighting, composition,
style
</li> </li>
</ul> </ul>
</div> </div>
@ -281,76 +266,10 @@ export default function PlaceholderImagesGuidePage() {
</div> </div>
</section> </section>
{/* Light Mode Placeholders */} {/* Recipes */}
<section id="light-mode-placeholders" className="mb-12 scroll-mt-24"> <section id="recipes" className="mb-12">
<SectionHeader level={2} id="light-mode-placeholders"> <SectionHeader level={2} id="recipes">
Light Mode Placeholders Recipes
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
Generated images work well with light interfaces by default. If you need more control,
specify background colors or accents to match your design system.
</p>
<CodeBlock
code={`"product on white background"
"office with soft natural light"
"portrait, bright studio, pastel tones"
"dashboard mockup, light gray background, blue accent"`}
language="text"
/>
<div className="mt-6">
<LivePreview label="Light Background Example">
<div className="bg-white rounded-xl p-6 max-w-md">
<img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+desk+setup+white+background+clean+aesthetic&aspectRatio=16:9"
alt="Light theme placeholder"
className="w-full rounded-lg mb-4"
/>
<p className="text-gray-900 font-semibold">Clean Workspace</p>
<p className="text-gray-600 text-sm">White background, natural lighting</p>
</div>
</LivePreview>
</div>
</section>
{/* Dark Mode Placeholders */}
<section id="dark-mode-placeholders" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="dark-mode-placeholders">
Dark Mode Placeholders
</SectionHeader>
<p className="text-gray-300 leading-relaxed mb-4">
For dark interfaces, add <InlineCode>dark background</InlineCode> or descriptive words
like night, moody, or twilight. You can also specify accent colors.
</p>
<CodeBlock
code={`"office interior, dark background"
"product photo, dark surface, moody lighting"
"night cityscape, neon accents"
"abstract gradient, dark purple and blue"`}
language="text"
/>
<div className="mt-6">
<LivePreview label="Dark Background Example">
<div className="bg-slate-900 rounded-xl p-6 max-w-md border border-slate-700">
<img
src="https://cdn.banatie.app/sys/demo/live/hero?prompt=abstract+gradient+dark+background+purple+blue+moody&aspectRatio=16:9"
alt="Dark theme placeholder"
className="w-full rounded-lg mb-4"
/>
<p className="text-white font-semibold">Dark Gradient</p>
<p className="text-gray-400 text-sm">Dark background with purple accents</p>
</div>
</LivePreview>
</div>
</section>
{/* Placeholder Image Examples */}
<section id="placeholder-image-examples" className="mb-12 scroll-mt-24">
<SectionHeader level={2} id="placeholder-image-examples">
Placeholder Image Examples
</SectionHeader> </SectionHeader>
<p className="text-gray-300 leading-relaxed mb-8"> <p className="text-gray-300 leading-relaxed mb-8">
Copy-paste examples for common placeholder image use cases. Copy-paste examples for common placeholder image use cases.
@ -481,10 +400,10 @@ export default function PlaceholderImagesGuidePage() {
<div className="bg-white rounded-lg p-3"> <div className="bg-white rounded-lg p-3">
<img <img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1" src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
alt="Wireless Earbuds" alt="AirPods Pro"
className="w-full aspect-square object-cover rounded-md mb-2" className="w-full aspect-square object-cover rounded-md mb-2"
/> />
<p className="text-gray-900 font-medium text-sm">Wireless Earbuds</p> <p className="text-gray-900 font-medium text-sm">AirPods Pro</p>
<p className="text-gray-600 font-bold">$249</p> <p className="text-gray-600 font-bold">$249</p>
</div> </div>
<div className="bg-white rounded-lg p-3"> <div className="bg-white rounded-lg p-3">
@ -498,7 +417,7 @@ export default function PlaceholderImagesGuidePage() {
</div> </div>
<div className="bg-white rounded-lg p-3"> <div className="bg-white rounded-lg p-3">
<img <img
src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product&aspectRatio=1:1" src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product+photo&aspectRatio=1:1"
alt="Laptop Stand" alt="Laptop Stand"
className="w-full aspect-square object-cover rounded-md mb-2" className="w-full aspect-square object-cover rounded-md mb-2"
/> />
@ -565,7 +484,7 @@ export default function PlaceholderImagesGuidePage() {
</div> </div>
<div className="p-4"> <div className="p-4">
<img <img
src="https://cdn.banatie.app/sys/demo/live/og?prompt=modern+tech+abstract+waves+purple+blue&aspectRatio=16:9" src="https://cdn.banatie.app/sys/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
alt="OG Image Preview" alt="OG Image Preview"
className="w-full rounded-lg" className="w-full rounded-lg"
/> />
@ -602,68 +521,52 @@ export default function PlaceholderImagesGuidePage() {
</p> </p>
<LivePreview> <LivePreview>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-purple-500/10 hover:-translate-y-1"> <div className="text-center">
<img <img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1" src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+lightning+bolt+speed+blue&aspectRatio=1:1"
alt="Lightning Fast" alt="Lightning Fast"
className="w-full aspect-square object-cover" className="w-16 h-16 mx-auto rounded-lg"
/> />
<div className="p-4"> <p className="mt-4 font-semibold text-white">Lightning Fast</p>
<p className="font-semibold text-white">Lightning Fast</p> <p className="mt-2 text-sm text-gray-400">
<p className="mt-1 text-sm text-gray-400"> Deploy in seconds with our global CDN
Deploy in seconds with our global CDN </p>
</p>
</div>
</div> </div>
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-1"> <div className="text-center">
<img <img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=shield+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1" src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+shield+security+green&aspectRatio=1:1"
alt="Secure by Default" alt="Secure by Default"
className="w-full aspect-square object-cover" className="w-16 h-16 mx-auto rounded-lg"
/> />
<div className="p-4"> <p className="mt-4 font-semibold text-white">Secure by Default</p>
<p className="font-semibold text-white">Secure by Default</p> <p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
<p className="mt-1 text-sm text-gray-400">Enterprise-grade security built in</p>
</div>
</div> </div>
<div className="group bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:shadow-violet-500/10 hover:-translate-y-1"> <div className="text-center">
<img <img
src="https://cdn.banatie.app/sys/demo/live/features?prompt=puzzle+piece+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1" src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+illustration+puzzle+piece+integration+purple&aspectRatio=1:1"
alt="Easy Integration" alt="Easy Integration"
className="w-full aspect-square object-cover" className="w-16 h-16 mx-auto rounded-lg"
/> />
<div className="p-4"> <p className="mt-4 font-semibold text-white">Easy Integration</p>
<p className="font-semibold text-white">Easy Integration</p> <p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
<p className="mt-1 text-sm text-gray-400">Works with your existing stack</p>
</div>
</div> </div>
</div> </div>
</LivePreview> </LivePreview>
<CodeBlock <CodeBlock
code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> code={`<img
<div class="bg-slate-800/40 border border-slate-700/30 rounded-2xl overflow-hidden text-center src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=icon+lightning+bolt&aspectRatio=1:1"
transition-all duration-300 hover:border-slate-600/50 hover:shadow-lg hover:-translate-y-1"> alt="Feature icon"
<img class="w-16 h-16 rounded-lg"
src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=lightning+bolt+icon+single+line+art+illustration+minimal+background+hex+1e293b&aspectRatio=1:1" />`}
alt="Lightning Fast"
class="w-full aspect-square object-cover"
/>
<div class="p-4">
<p class="font-semibold text-white">Lightning Fast</p>
<p class="mt-1 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
</div>
</div>
<!-- Repeat for other features -->
</div>`}
language="html" language="html"
/> />
</div> </div>
</section> </section>
{/* File-based Workflow */} {/* File-based Workflow */}
<section id="file-based-workflow" className="mb-12 scroll-mt-24"> <section id="file-based-workflow" className="mb-12">
<SectionHeader level={2} id="file-based-workflow"> <SectionHeader level={2} id="file-based-workflow">
File-based Workflow File-based Workflow
</SectionHeader> </SectionHeader>
@ -679,35 +582,23 @@ export default function PlaceholderImagesGuidePage() {
</ul> </ul>
<h4 className="text-white font-semibold mb-3">Generate via API</h4> <h4 className="text-white font-semibold mb-3">Generate via API</h4>
<p className="text-gray-300 leading-relaxed mb-4">Request:</p>
<CodeBlock <CodeBlock
code={`POST https://api.banatie.app/v1/generations code={`// Generate image
Content-Type: application/json const response = await fetch('https://api.banatie.app/v1/generations', {
X-API-Key: your_api_key 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();
"prompt": "modern office interior" console.log(image.cdnUrl); // Download this URL`}
}`} language="javascript"
language="http"
/>
<p className="text-gray-300 leading-relaxed mt-6 mb-4">Response:</p>
<CodeBlock
code={`{
"image": {
"id": "img_abc123",
"cdnUrl": "https://cdn.banatie.app/org/project/images/2025-01/abc123.png"
}
}`}
language="json"
/> />
<p className="text-gray-300 leading-relaxed mt-6"> <p className="text-gray-300 leading-relaxed mt-6">
Open <InlineCode>cdnUrl</InlineCode> in your browser, save the image, and add it to your
project&apos;s assets folder.
</p>
<p className="text-gray-300 leading-relaxed mt-4">
For full API reference, see{' '} For full API reference, see{' '}
<a href="/docs/api/generations/" className="text-purple-400 hover:underline"> <a href="/docs/api/generations/" className="text-purple-400 hover:underline">
Generations API Generations API

2
apps/landing/src/components/docs/layout/DocsSidebar.tsx
View File

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

14
apps/landing/src/config/docs-seo.ts
View File

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