+ 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}
+
+
-
{icon}
+
{icon}
{children}