diff --git a/apps/landing/src/app/homepage/page.tsx b/apps/landing/src/app/homepage/page.tsx new file mode 100644 index 0000000..9d7668d --- /dev/null +++ b/apps/landing/src/app/homepage/page.tsx @@ -0,0 +1,856 @@ +'use client'; + +import { useState } from 'react'; +import { + Zap, + Globe, + FlaskConical, + AtSign, + Link, + Terminal, + RefreshCw, + ArrowLeftRight, + Package, + Layers, + Check, + Sparkles, + Settings2, + Info, + GitBranch, + Palette, + SlidersHorizontal, + Link2, + Server, + Code, + Cpu, + MessageCircle, + Vote, + Users, + Crown, + Type, + Brain, + Target, + Image, + Award, + ArrowRight, +} from 'lucide-react'; + +// ============================================================================ +// STYLES (CSS-in-JS for custom styles not available in Tailwind) +// ============================================================================ + +const customStyles = ` + @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap'); + + @property --form-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; + } + + .gradient-text { + background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradient-shift 4s ease-in-out infinite; + } + + @keyframes gradient-shift { + 0% { background-position: 100% 50%; } + 50% { background-position: 0% 50%; } + 100% { background-position: 100% 50%; } + } + + .email-form-wrapper { + position: relative; + max-width: 28rem; + margin: 0 auto; + padding: 2px; + border-radius: 12px; + background: linear-gradient(#0a0612, #0a0612) padding-box, + conic-gradient(from var(--form-angle), + rgba(99, 102, 241, 0.3), + rgba(139, 92, 246, 0.8), + rgba(236, 72, 153, 0.6), + rgba(34, 211, 238, 0.8), + rgba(99, 102, 241, 0.3) + ) border-box; + animation: form-glow-rotate 4s linear infinite; + } + + .email-form-wrapper::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 14px; + background: conic-gradient(from var(--form-angle), + rgba(99, 102, 241, 0.1), + rgba(139, 92, 246, 0.4), + rgba(236, 72, 153, 0.3), + rgba(34, 211, 238, 0.4), + rgba(99, 102, 241, 0.1) + ); + filter: blur(15px); + opacity: 0.6; + z-index: -1; + animation: form-glow-rotate 4s linear infinite; + } + + @keyframes form-glow-rotate { + to { + --form-angle: 360deg; + } + } + + .beta-dot { + animation: beta-dot-delay 20s linear forwards, beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite; + } + + @keyframes beta-dot-delay { + 0%, 99% { background-color: rgb(107, 114, 128); } + 100% { background-color: rgb(74, 222, 128); } + } + + @keyframes beta-dot-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } + } + + .shape-future { + clip-path: polygon( + 0% 40px, 10% 0px, 20% 40px, 30% 0px, 40% 40px, 50% 0px, 60% 40px, 70% 0px, 80% 40px, 90% 0px, 100% 40px, + 100% calc(100% - 40px), 90% calc(100% - 0px), 80% calc(100% - 40px), 70% calc(100% - 0px), + 60% calc(100% - 40px), 50% calc(100% - 0px), 40% calc(100% - 40px), 30% calc(100% - 0px), + 20% calc(100% - 40px), 10% calc(100% - 0px), 0% calc(100% - 40px) + ); + } + + .shape-future-title { + font-family: 'Caveat', cursive; + } +`; + +// ============================================================================ +// BACKGROUND COMPONENTS +// ============================================================================ + +function BackgroundBlobs() { + const blobs = [ + { className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]', gradient: 'rgba(139, 92, 246, 0.3)' }, + { className: 'w-[500px] h-[500px] top-[800px] left-[-150px]', gradient: 'rgba(99, 102, 241, 0.25)' }, + { className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]', gradient: 'rgba(236, 72, 153, 0.2)' }, + { className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]', gradient: 'rgba(34, 211, 238, 0.15)' }, + { className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]', gradient: 'rgba(139, 92, 246, 0.25)' }, + { className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]', gradient: 'rgba(99, 102, 241, 0.2)' }, + ]; + + return ( + <> + {blobs.map((blob, i) => ( +
+ ))} + + ); +} + +function HeroGlow() { + return ( +
+ ); +} + +// ============================================================================ +// HERO SECTION +// ============================================================================ + +function HeroSection() { + const [email, setEmail] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // TODO: Handle form submission + console.log('Email submitted:', email); + }; + + const badges = [ + { icon: Zap, text: 'API-First', variant: 'default' }, + { icon: Globe, text: 'Built-in CDN', variant: 'default' }, + { icon: FlaskConical, text: 'Web Lab', variant: 'default' }, + { icon: AtSign, text: 'Style References', variant: 'default' }, + { icon: Link, text: 'Prompt URLs', variant: 'cyan' }, + ]; + + return ( +
+
+ {/* Status Badge */} +
+ + In Active Development +
+ + {/* Headline */} +

+ AI Image Generation +
+ Inside Your Workflow +

+ + {/* Subheadline */} +

+ Generate images via API, SDK, CLI, Lab, or live URLs. +
+ Production-ready CDN delivery in seconds. +

+ + {/* Email Form */} +
+
+ setEmail(e.target.value)} + placeholder="your@email.com" + className="flex-1 px-4 py-3 bg-transparent border-none rounded-md text-white outline-none placeholder:text-white/40 focus:bg-white/[0.03]" + /> + +
+
+ +

Free early access. No credit card required.

+ + {/* Badges */} +
+ {badges.map((badge, i) => ( + + + {badge.text} + + ))} +
+
+
+ ); +} + +// ============================================================================ +// API EXAMPLE SECTION +// ============================================================================ + +function ApiExampleSection() { + return ( +
+
+
+
+
+ +
+
+

One request. Production-ready URL.

+

Simple REST API that handles everything

+
+
+ +
+
# Generate an image
+ curl -X POST https://api.banatie.app/v1/generate \ +
+ -H "Authorization: Bearer $API_KEY"{' '} + \ +
+ -d{' '} + '{`{"prompt": "modern office interior, natural light"}`}' +
+ +
+
# Response
+ {'{'} +
+ "url" + : "https://cdn.banatie.app/img/a7x2k9.png" + , +
+ "enhanced_prompt" + : "A photorealistic modern office..." + , +
+ "generation_time" + : 12.4 +
+ {'}'} +
+ +

+ CDN-cached, optimized, ready to use. No download, no upload, no extra steps. +

+
+
+
+ ); +} + +// ============================================================================ +// PROBLEM/SOLUTION SECTION +// ============================================================================ + +function ProblemSolutionSection() { + const problems = [ + { + icon: RefreshCw, + title: 'Placeholder hell', + problem: '"I\'ll add images later" never happens', + solution: 'Generate real images as you build', + }, + { + icon: ArrowLeftRight, + title: 'Context switching', + problem: 'Leave IDE, generate elsewhere, come back', + solution: 'Stay in your workflow. API, SDK, MCP', + }, + { + icon: Package, + title: 'Asset management', + problem: 'Download, optimize, upload, get URL', + solution: 'Production CDN URLs instantly', + }, + { + icon: Layers, + title: 'Style drift', + problem: 'Every image looks different', + solution: 'Reference images keep style consistent', + }, + ]; + + return ( +
+
+

Why developers choose Banatie

+

Stop fighting your image workflow. Start building.

+ +
+ {problems.map((item, i) => ( +
+
+
+ +
+

{item.title}

+

{item.problem}

+
+ + {item.solution} +
+
+
+ ))} +
+
+
+ ); +} + +// ============================================================================ +// PROMPT URLs SECTION +// ============================================================================ + +function PromptUrlsSection() { + return ( +
+
+
+
+
+ +
+
+ Unique +

Prompt URLs — Images via HTML

+

+ Put a prompt in your img src and get a real image. No API calls. No + JavaScript. Just HTML. +

+
+
+ +
+ <!-- Write this --> +
+ <img src= + "https://cdn.banatie.app/gen?p=modern office interior"{' '} + /> +
+
+ <!-- Get this: production-ready image, cached, CDN-delivered --> +
+ +

Perfect for static sites, prototypes, and AI coding agents that generate HTML.

+
+
+
+ ); +} + +// ============================================================================ +// HOW IT WORKS SECTION +// ============================================================================ + +function HowItWorksSection() { + const steps = [ + { number: 1, title: 'Your Prompt', subtitle: '"a cat on windowsill"' }, + { number: 2, title: 'Smart Enhancement', subtitle: 'Style + details added' }, + { number: 3, title: 'AI Generation', subtitle: 'Gemini creates image' }, + { number: 4, title: 'CDN Delivery', subtitle: 'Instant global URL' }, + ]; + + const controls = [ + { text: 'Style templates', detail: '— photorealistic, illustration, minimalist, and more' }, + { text: 'Reference images', detail: '— @aliases maintain visual consistency' }, + { text: 'Output specs', detail: '— aspect ratio, dimensions, format' }, + ]; + + return ( +
+
+

Your prompt. Your control. Production-ready.

+

We handle the complexity so you can focus on building.

+ +
+
+ {steps.map((step) => ( +
+
+ {step.number} +
+

{step.title}

+

{step.subtitle}

+
+ ))} +
+ +
+

+ + What you control +

+
+ {controls.map((control, i) => ( +
+ + + {control.text} {control.detail} + +
+ ))} +
+
+ +

+ + Enhanced prompts are visible in API response. You always see what was generated. +

+
+
+
+ ); +} + +// ============================================================================ +// KEY FEATURES SECTION +// ============================================================================ + +function KeyFeaturesSection() { + const features = [ + { + icon: AtSign, + iconColor: 'text-pink-400', + title: 'Reference Images', + description: 'Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.', + isUnique: false, + }, + { + icon: GitBranch, + iconColor: 'text-purple-400', + title: 'Flows', + description: 'Chain generations, iterate on results, build image sequences with @last and @first references.', + isUnique: false, + }, + { + icon: Palette, + iconColor: 'text-yellow-400', + title: '7 Style Templates', + description: 'Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.', + isUnique: false, + }, + { + icon: Globe, + iconColor: 'text-green-400', + title: 'Instant CDN Delivery', + description: 'Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.', + isUnique: false, + }, + { + icon: SlidersHorizontal, + iconColor: 'text-blue-400', + title: 'Output Control', + description: 'Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.', + isUnique: false, + }, + { + icon: Link, + iconColor: 'text-cyan-400', + title: 'Prompt URLs', + description: 'Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.', + isUnique: true, + }, + ]; + + return ( +
+
+

Built for real development workflows

+

Everything you need to integrate AI images into your projects.

+ +
+ {features.map((feature, i) => ( +
+
+ +
+
+

{feature.title}

+ {feature.isUnique && Unique} +
+

{feature.description}

+
+ ))} +
+
+
+ ); +} + +// ============================================================================ +// INTEGRATIONS SECTION +// ============================================================================ + +function IntegrationsSection() { + const tools = [ + { icon: Server, text: 'REST API', color: 'text-cyan-400' }, + { icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' }, + { icon: Cpu, text: 'MCP Server', color: 'text-purple-400' }, + { icon: Terminal, text: 'CLI', color: 'text-green-400' }, + { icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' }, + { icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true }, + ]; + + return ( +
+
+

Works with your tools

+

Use what fits your workflow. All methods, same capabilities.

+ +
+ {tools.map((tool, i) => ( +
+ + {tool.text} +
+ ))} +
+ +
+

+ Banatie Lab — Official web interface for Banatie API. Generate images, build flows, browse your + gallery, and explore all capabilities with ready-to-use code snippets. +

+
+ +

Perfect for Claude Code, Cursor, and any AI-powered workflow.

+
+
+ ); +} + +// ============================================================================ +// SHAPE THE FUTURE SECTION +// ============================================================================ + +function ShapeTheFutureSection() { + const features = [ + { icon: MessageCircle, text: 'Direct feedback channel' }, + { icon: Vote, text: 'Feature voting' }, + { icon: Users, text: 'Early adopter community' }, + ]; + + return ( +
+
+
+

Shape the future of Banatie

+ +

+ We're building this for developers like you. Early adopters get direct influence on our roadmap — suggest features, vote on + priorities, and help us build exactly what you need. +

+ +
+ {features.map((feature, i) => ( + + + {feature.text} + + ))} +
+
+
+
+ ); +} + +// ============================================================================ +// GEMINI SECTION +// ============================================================================ + +function GeminiSection() { + const flashFeatures = [ + { text: 'Sub-3 second', detail: 'generation time' }, + { text: 'Multi-turn editing', detail: '— refine through conversation' }, + { text: 'Up to 3 reference images', detail: 'for consistency' }, + { text: '1024px', detail: 'resolution output' }, + ]; + + const proFeatures = [ + { text: 'Up to 4K', detail: 'resolution output' }, + { text: '14 reference images', detail: 'for brand consistency' }, + { text: 'Studio controls', detail: '— lighting, focus, color grading' }, + { text: 'Thinking mode', detail: '— advanced reasoning for complex prompts' }, + ]; + + const capabilities = [ + { icon: Type, title: 'Perfect Text Rendering', description: 'Legible text in images — logos, diagrams, posters. What other models still struggle with.' }, + { icon: Brain, title: 'Native Multimodal', description: 'Understands text AND images in one model. Not a text model + image model bolted together.' }, + { icon: Target, title: 'Precise Prompt Following', description: 'What you ask is what you get. No artistic "interpretation" that ignores your instructions.' }, + { icon: Image, title: 'Professional Realism', description: 'Photorealistic output that replaces stock photos. Not fantasy art — real, usable images.' }, + ]; + + return ( +
+
+
+ {/* Header */} +
+
+ +

Powered by Google Gemini

+
+

+ We chose Gemini because it's the only model family that combines native multimodal understanding with production-grade image + generation. Two models, optimized for different needs. +

+
+ + {/* Two Model Cards */} +
+ {/* Flash Model */} +
+
+
+ +
+
+

Gemini 2.5 Flash Image

+

Nano Banana

+
+
+

+ Optimized for speed and iteration. Perfect for rapid prototyping and high-volume generation. +

+
    + {flashFeatures.map((feature, i) => ( +
  • + + + {feature.text} {feature.detail} + +
    • + ))} +
+
+ + {/* Pro Model */} +
+
+
+ +
+
+

Gemini 3 Pro Image

+

Nano Banana Pro

+
+
+

+ Maximum quality and creative control. For production assets and professional workflows. +

+
    + {proFeatures.map((feature, i) => ( +
  • + + + {feature.text} {feature.detail} + +
    • + ))} +
+
+
+ + {/* Shared Capabilities */} +
+

Why Gemini outperforms competitors

+
+ {capabilities.map((cap, i) => ( +
+
+ +
+
{cap.title}
+

{cap.description}

+
+ ))} +
+
+ + {/* #1 Ranking Note */} +

+ + Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing (August 2025) +

+
+
+
+ ); +} + +// ============================================================================ +// FINAL CTA SECTION +// ============================================================================ + +function FinalCtaSection() { + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + // Focus on email input after scroll + setTimeout(() => { + const input = document.querySelector('input[type="email"]') as HTMLInputElement; + input?.focus(); + }, 500); + }; + + return ( +
+ {/* Top accent line */} +
+ + {/* Subtle cyan glow accents */} +
+ +
+

Ready to build?

+

+ Join developers waiting for early access. We'll notify you when your spot is ready. +

+ + + +

No credit card required • Free to start • Cancel anytime

+
+
+ ); +} + +// ============================================================================ +// MAIN HOME COMPONENT +// ============================================================================ + +export default function Home() { + return ( + <> +