+ Introduction
+
+ Banatie is a developer-first API for AI-powered image generation. Built on Google Gemini
+ 2.5 Flash and Imagen 4.0, it transforms text prompts and reference images into
+ production-ready visuals.
+
+
+ Whether you are building a content creation platform, e-commerce site, or creative tool,
+ Banatie provides the infrastructure you need to generate high-quality images at scale.
+
+
+ {/* Compact Tip Box */}
+
+ New to API integration? Start with our{' '}
+
+ code examples
+ {' '}
+ to see common use cases in action.
+
+
+
+ {/* Quick Start */}
+
{/* Variant A: Clean & Minimal */}
diff --git a/apps/landing/src/components/docs/final/DocsLayoutFinal.tsx b/apps/landing/src/components/docs/final/DocsLayoutFinal.tsx
new file mode 100644
index 0000000..db66cc7
--- /dev/null
+++ b/apps/landing/src/components/docs/final/DocsLayoutFinal.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+/**
+ * Documentation Layout - Final Variant
+ *
+ * Based on Variant A: Clean & Minimal with enhancements
+ * This is the production-ready version combining the best aspects
+ *
+ * Layout Structure:
+ * - Left Sidebar: Thin (256px) with minimal design
+ * - Content Area: Wide margins (max-w-3xl) for comfortable reading
+ * - Right TOC: Subtle and unobtrusive (224px)
+ *
+ * Responsive Behavior:
+ * - Mobile (<768px): Single column, sidebars become overlays
+ * - Tablet (768px-1024px): Content + TOC only
+ * - Desktop (>1024px): Full three-column layout
+ *
+ * Design Characteristics:
+ * - Generous whitespace
+ * - Subtle borders and shadows
+ * - Focus on content clarity
+ * - Minimal visual noise
+ * - Accessibility compliant (WCAG 2.1 AA)
+ */
+
+import { ReactNode } from 'react';
+
+interface DocsLayoutFinalProps {
+ sidebar: ReactNode;
+ children: ReactNode;
+ toc: ReactNode;
+}
+
+export const DocsLayoutFinal = ({ sidebar, children, toc }: DocsLayoutFinalProps) => {
+ return (
+
+ {/* Animated gradient background (matching landing page) */}
+
+
+
+ {/* Left Sidebar - Thin, minimal design */}
+
+
+ {/* Main Content Area - Wide margins for comfortable reading */}
+
+
+ {children}
+
+
+
+ {/* Right TOC - Subtle and unobtrusive */}
+
+
+
+ );
+};
diff --git a/apps/landing/src/components/docs/final/DocsSidebarFinal.tsx b/apps/landing/src/components/docs/final/DocsSidebarFinal.tsx
new file mode 100644
index 0000000..e7fe7c9
--- /dev/null
+++ b/apps/landing/src/components/docs/final/DocsSidebarFinal.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+/**
+ * Documentation Sidebar - Final Variant
+ *
+ * Based on Variant A with FIXED active states
+ *
+ * Key Improvements:
+ * - Consistent active state styling for both parent and child items
+ * - Clean left border indicator (no background boxes)
+ * - Parent active: purple left border + white text
+ * - Child active: purple left border + white text (NO background)
+ *
+ * Features:
+ * - Thin sidebar with subtle hover states
+ * - Collapsible section groups
+ * - Minimal icons (chevron for expandable items)
+ * - Clean, uncluttered appearance
+ *
+ * Navigation Structure:
+ * - Getting Started
+ * - API Reference (collapsible)
+ * - Guides (collapsible)
+ * - Examples
+ */
+
+import { useState } from 'react';
+
+interface NavItem {
+ label: string;
+ href: string;
+ icon?: string;
+ children?: NavItem[];
+}
+
+interface DocsSidebarFinalProps {
+ currentPath: string;
+}
+
+const navigationItems: NavItem[] = [
+ {
+ label: 'Getting Started',
+ href: '/docs/final',
+ icon: '🚀',
+ },
+ {
+ label: 'API Reference',
+ href: '/docs/final/api',
+ icon: '📚',
+ children: [
+ { label: 'Text to Image', href: '/docs/final/api/text-to-image' },
+ { label: 'Upload', href: '/docs/final/api/upload' },
+ { label: 'Images', href: '/docs/final/api/images' },
+ ],
+ },
+ {
+ label: 'Guides',
+ href: '/docs/final/guides',
+ icon: '📖',
+ children: [
+ { label: 'Authentication', href: '/docs/final/guides/authentication' },
+ { label: 'Error Handling', href: '/docs/final/guides/error-handling' },
+ { label: 'Rate Limits', href: '/docs/final/guides/rate-limits' },
+ ],
+ },
+ {
+ label: 'Examples',
+ href: '/docs/final/examples',
+ icon: '💡',
+ },
+];
+
+export const DocsSidebarFinal = ({ currentPath }: DocsSidebarFinalProps) => {
+ const [expandedSections, setExpandedSections] = useState
(['API Reference', 'Guides']);
+
+ const toggleSection = (label: string) => {
+ setExpandedSections((prev) =>
+ prev.includes(label) ? prev.filter((item) => item !== label) : [...prev, label]
+ );
+ };
+
+ const isActive = (href: string) => currentPath === href;
+ const isExpanded = (label: string) => expandedSections.includes(label);
+
+ return (
+
+ {/* Logo/Title */}
+
+
Documentation
+
Final: Production
+
+ {navigationItems.map((item) => {
+ const hasChildren = item.children && item.children.length > 0;
+ const expanded = isExpanded(item.label);
+ const active = isActive(item.href);
+
+ return (
+
+ {/* Parent Item */}
+
+
+ {/* Children Items - FIXED ACTIVE STATE */}
+ {hasChildren && expanded && (
+
+ {item.children!.map((child) => {
+ const childActive = isActive(child.href);
+ return (
+
+
+ {child.label}
+
+
+ );
+ })}
+
+ )}
+
+ );
+ })}
+
+
+ {/* Bottom Links */}
+
+
+ );
+};
diff --git a/apps/landing/src/components/docs/final/DocsTOCFinal.tsx b/apps/landing/src/components/docs/final/DocsTOCFinal.tsx
new file mode 100644
index 0000000..0a25277
--- /dev/null
+++ b/apps/landing/src/components/docs/final/DocsTOCFinal.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+/**
+ * Table of Contents - Final Variant
+ *
+ * Based on Variant A: Clean & Minimal (no changes needed)
+ *
+ * Features:
+ * - Small indicator dots for section levels
+ * - Smooth scroll to section
+ * - Active section highlighting (purple text)
+ * - Sticky positioning
+ * - Minimal visual weight
+ *
+ * Behavior:
+ * - Extracts H2 and H3 headings from content
+ * - Tracks scroll position to highlight active section
+ * - Click to smooth scroll to section
+ */
+
+import { useEffect, useState } from 'react';
+
+interface TocItem {
+ id: string;
+ text: string;
+ level: number;
+}
+
+interface DocsTOCFinalProps {
+ items: TocItem[];
+}
+
+export const DocsTOCFinal = ({ items }: DocsTOCFinalProps) => {
+ const [activeId, setActiveId] = useState('');
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id);
+ }
+ });
+ },
+ { rootMargin: '-20% 0px -35% 0px' }
+ );
+
+ items.forEach((item) => {
+ const element = document.getElementById(item.id);
+ if (element) observer.observe(element);
+ });
+
+ return () => observer.disconnect();
+ }, [items]);
+
+ const scrollToSection = (id: string) => {
+ const element = document.getElementById(id);
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ };
+
+ if (items.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ On This Page
+
+
+
+ {items.map((item) => {
+ const isActive = activeId === item.id;
+ const isH3 = item.level === 3;
+
+ return (
+
+ scrollToSection(item.id)}
+ className={`
+ flex items-start gap-2 text-left w-full transition-colors group
+ ${isActive ? 'text-purple-400' : 'text-gray-500 hover:text-gray-300'}
+ `}
+ >
+ {/* Indicator dot */}
+ {item.text}
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx b/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx
new file mode 100644
index 0000000..8f45243
--- /dev/null
+++ b/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+/**
+ * Interactive API Widget - Final Variant
+ *
+ * Enhanced version of Variant A with:
+ * 1. Expand button for full-screen code view
+ * 2. Success response styling (green accent)
+ * 3. Error response styling (red accent)
+ * 4. Clickable image URLs in response
+ * 5. Status badges (200 Success, Error)
+ *
+ * Features:
+ * - Multi-language code tabs (curl, JavaScript, Python, Go)
+ * - API key input field (persists via localStorage)
+ * - "Try It" button to execute live requests
+ * - Response viewer with enhanced styling
+ * - Clean, focused design
+ */
+
+import { useState, useEffect } from 'react';
+import { CodeBlockExpanded } from '@/components/docs/shared/CodeBlockExpanded';
+
+interface InteractiveAPIWidgetFinalProps {
+ endpoint: string;
+ method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+ description: string;
+ parameters?: Array<{
+ name: string;
+ type: string;
+ required: boolean;
+ description: string;
+ defaultValue?: string;
+ }>;
+}
+
+type Language = 'curl' | 'javascript' | 'python' | 'go';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+const API_KEY_STORAGE = 'banatie_docs_api_key';
+
+export const InteractiveAPIWidgetFinal = ({
+ endpoint,
+ method,
+ description,
+ parameters = [],
+}: InteractiveAPIWidgetFinalProps) => {
+ const [language, setLanguage] = useState('curl');
+ const [apiKey, setApiKey] = useState('');
+ const [isExecuting, setIsExecuting] = useState(false);
+ const [response, setResponse] = useState(null);
+ const [error, setError] = useState(null);
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ // Parameter values
+ const [paramValues, setParamValues] = useState>({});
+
+ // Load API key from localStorage
+ useEffect(() => {
+ const stored = localStorage.getItem(API_KEY_STORAGE);
+ if (stored) setApiKey(stored);
+
+ // Initialize parameter default values
+ const defaults: Record = {};
+ parameters.forEach((param) => {
+ if (param.defaultValue) {
+ defaults[param.name] = param.defaultValue;
+ }
+ });
+ setParamValues(defaults);
+ }, [parameters]);
+
+ // Save API key to localStorage
+ const handleApiKeyChange = (value: string) => {
+ setApiKey(value);
+ if (value) {
+ localStorage.setItem(API_KEY_STORAGE, value);
+ } else {
+ localStorage.removeItem(API_KEY_STORAGE);
+ }
+ };
+
+ // Generate code examples
+ const generateCode = (): string => {
+ const url = `${API_BASE_URL}${endpoint}`;
+
+ switch (language) {
+ case 'curl':
+ return `curl -X ${method} "${url}" \\
+ -H "X-API-Key: ${apiKey || 'YOUR_API_KEY'}" \\
+ -H "Content-Type: application/json" \\
+ -d '{
+ "prompt": "a futuristic city at sunset",
+ "filename": "city",
+ "aspectRatio": "16:9"
+ }'`;
+
+ case 'javascript':
+ return `const response = await fetch('${url}', {
+ method: '${method}',
+ headers: {
+ 'X-API-Key': '${apiKey || 'YOUR_API_KEY'}',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ prompt: 'a futuristic city at sunset',
+ filename: 'city',
+ aspectRatio: '16:9'
+ })
+});
+
+const data = await response.json();
+console.log(data);`;
+
+ case 'python':
+ return `import requests
+
+url = '${url}'
+headers = {
+ 'X-API-Key': '${apiKey || 'YOUR_API_KEY'}',
+ 'Content-Type': 'application/json'
+}
+data = {
+ 'prompt': 'a futuristic city at sunset',
+ 'filename': 'city',
+ 'aspectRatio': '16:9'
+}
+
+response = requests.${method.toLowerCase()}(url, headers=headers, json=data)
+print(response.json())`;
+
+ case 'go':
+ return `package main
+
+import (
+ "bytes"
+ "encoding/json"
+ "fmt"
+ "net/http"
+)
+
+func main() {
+ url := "${url}"
+ data := map[string]interface{}{
+ "prompt": "a futuristic city at sunset",
+ "filename": "city",
+ "aspectRatio": "16:9",
+ }
+
+ jsonData, _ := json.Marshal(data)
+ req, _ := http.NewRequest("${method}", url, bytes.NewBuffer(jsonData))
+ req.Header.Set("X-API-Key", "${apiKey || 'YOUR_API_KEY'}")
+ req.Header.Set("Content-Type", "application/json")
+
+ client := &http.Client{}
+ resp, _ := client.Do(req)
+ defer resp.Body.Close()
+}`;
+
+ default:
+ return '';
+ }
+ };
+
+ // Execute API request
+ const executeRequest = async () => {
+ if (!apiKey) {
+ setError('Please enter your API key');
+ return;
+ }
+
+ setIsExecuting(true);
+ setError(null);
+
+ try {
+ const body: Record = {};
+ parameters.forEach((param) => {
+ if (paramValues[param.name]) {
+ body[param.name] = paramValues[param.name];
+ }
+ });
+
+ const res = await fetch(`${API_BASE_URL}${endpoint}`, {
+ method,
+ headers: {
+ 'X-API-Key': apiKey,
+ 'Content-Type': 'application/json',
+ },
+ body: method !== 'GET' ? JSON.stringify(body) : undefined,
+ });
+
+ const data = await res.json();
+ setResponse(data);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to execute request');
+ } finally {
+ setIsExecuting(false);
+ }
+ };
+
+ // Copy code to clipboard
+ const copyCode = () => {
+ navigator.clipboard.writeText(generateCode());
+ };
+
+ // Render response with clickable URLs
+ const renderResponse = (data: any): string => {
+ return JSON.stringify(data, null, 2);
+ };
+
+ // Check if response is success
+ const isSuccess = response && response.success === true;
+
+ return (
+ <>
+
+ {/* Header with API Key Input */}
+
+
+
+
Try it out
+
{description}
+
+
+
+
+
+
+ {/* Language Tabs with Expand Button */}
+
+
+ {(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang) => (
+ setLanguage(lang)}
+ className={`px-3 py-1 text-xs rounded transition-colors ${
+ language === lang
+ ? 'bg-slate-700 text-white'
+ : 'text-gray-400 hover:text-white'
+ }`}
+ >
+ {lang === 'javascript' ? 'JavaScript' : lang.charAt(0).toUpperCase() + lang.slice(1)}
+
+ ))}
+
+
+
setIsExpanded(true)}
+ className="px-3 py-1 text-xs text-gray-400 hover:text-white transition-colors"
+ aria-label="Expand code view"
+ >
+
+
+
+
+ Copy
+
+
+
+
+ {/* Code Display */}
+
+
+ {/* Try It Button */}
+
+
+ {isExecuting ? 'Executing...' : 'Try It'}
+
+
+
+ {/* Response Section - Enhanced with success/error styling */}
+ {(response || error) && (
+
+
+
Response
+ {error ? (
+ // Error Response
+
+
+
+ ✗ Error
+
+
+
{error}
+
+ ) : isSuccess ? (
+ // Success Response
+
+
+
+ ✓ 200 Success
+
+
+
+ {renderResponse(response)}
+
+
+ ) : (
+ // Normal Response
+
+ {renderResponse(response)}
+
+ )}
+
+
+ )}
+
setIsExpanded(false)}
+ code={generateCode()}
+ language={language}
+ filename={`example.${language === 'javascript' ? 'js' : language === 'python' ? 'py' : language}`}
+ />
+
+ );
+};
diff --git a/apps/landing/src/components/docs/shared/CodeBlockExpanded.tsx b/apps/landing/src/components/docs/shared/CodeBlockExpanded.tsx
new file mode 100644
index 0000000..8f28869
--- /dev/null
+++ b/apps/landing/src/components/docs/shared/CodeBlockExpanded.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+/**
+ * Code Block Expanded Modal Component
+ *
+ * Full-screen code viewer for better readability
+ * Features:
+ * - Full-screen overlay with dark backdrop
+ * - Centered modal with max-width constraint
+ * - Close button (X) in top-right
+ * - Escape key support
+ * - Larger code text in expanded mode
+ * - Copy button still visible
+ * - Language badge
+ *
+ * Usage:
+ * setIsOpen(false)}
+ * code={codeString}
+ * language="javascript"
+ * filename="example.js"
+ * />
+ */
+
+import { useEffect } from 'react';
+
+interface CodeBlockExpandedProps {
+ isOpen: boolean;
+ onClose: () => void;
+ code: string;
+ language: string;
+ filename?: string;
+}
+
+export const CodeBlockExpanded = ({
+ isOpen,
+ onClose,
+ code,
+ language,
+ filename,
+}: CodeBlockExpandedProps) => {
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleEscape);
+ // Prevent body scroll when modal is open
+ document.body.style.overflow = 'hidden';
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape);
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen, onClose]);
+
+ // Copy to clipboard
+ const copyCode = () => {
+ navigator.clipboard.writeText(code);
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+ {/* Modal Content */}
+
e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+ {filename && (
+ {filename}
+ )}
+
+ {language}
+
+
+
+
+ {/* Copy Button */}
+
+ Copy
+
+
+ {/* Close Button */}
+
+
+
+
+
+
+
+ {/* Code Content */}
+
+
+ {/* Hint Text */}
+
+
+ Press Esc to close
+
+
+
+
+
+ {/* Header */}
+
+
+ {headers.map((header, idx) => (
+
+
+ {header}
+ {sortable && (
+
+
+
+
+ )}
+
+ ))}
+
+
+
+ {/* Body */}
+
+ {rows.map((row, rowIdx) => (
+
+ {row.map((cell, cellIdx) => (
+
+ {cell}
+
+ ))}
+
+ ))}
+
+
+
+ * This is a compact tip
+ *
+ *
+ *
+ * This is an important security warning
+ *
+ */
+
+import { ReactNode } from 'react';
+
+type TipType = 'info' | 'warning' | 'success';
+type TipVariant = 'compact' | 'prominent';
+
+interface TipBoxProps {
+ children: ReactNode;
+ variant?: TipVariant;
+ type?: TipType;
+}
+
+const icons: Record = {
+ info: '💡',
+ warning: '⚠️',
+ success: '✓',
+};
+
+const compactStyles: Record = {
+ info: 'bg-purple-500/10 border-purple-500/20 text-purple-300',
+ warning: 'bg-amber-500/10 border-amber-500/20 text-amber-300',
+ success: 'bg-green-500/10 border-green-500/20 text-green-300',
+};
+
+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',
+};
+
+export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => {
+ const isCompact = variant === 'compact';
+ const icon = icons[type];
+ const styleClass = isCompact ? compactStyles[type] : prominentStyles[type];
+
+ if (isCompact) {
+ return (
+
+ );
+ }
+
+ // Prominent style
+ return (
+
+ );
+};
diff --git a/apps/landing/src/components/shared/SubsectionNav.tsx b/apps/landing/src/components/shared/SubsectionNav.tsx
new file mode 100644
index 0000000..1ae7314
--- /dev/null
+++ b/apps/landing/src/components/shared/SubsectionNav.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+/**
+ * Subsection Navigation Component
+ *
+ * Reusable navigation bar for documentation and other subsections
+ * Features:
+ * - Dark nav bar with decorative wave line
+ * - Active state indicator (purple underline/highlight)
+ * - "Join Beta" CTA button on the right
+ * - Responsive (hamburger menu on mobile)
+ * - Can be reused across landing app sections
+ *
+ * Usage:
+ *
+ {/* Main Nav Container */}
+
+
+ {/* Desktop Navigation */}
+
+
+ {/* CTA Button - Desktop */}
+
+
+ {/* Mobile Menu Button */}
+
+
+ {ctaText}
+
+
setMobileMenuOpen(!mobileMenuOpen)}
+ className="p-2 text-gray-400 hover:text-white transition-colors"
+ aria-label="Toggle menu"
+ >
+
+ {mobileMenuOpen ? (
+
+
+
+
+
+ );
+};