apps/landing/src/app/homepage/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import {
+  BackgroundBlobs,
+  HeroGlow,
+  HeroSection,
+  heroStyles,
+  ApiExampleSection,
+  ProblemSolutionSection,
+  PromptUrlsSection,
+  HowItWorksSection,
+  KeyFeaturesSection,
+  IntegrationsSection,
+  ShapeTheFutureSection,
+  shapeFutureStyles,
+  GeminiSection,
+  FinalCtaSection,
+} from './_components';
+
+const customStyles = `
+  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
+
+  ${heroStyles}
+
+  ${shapeFutureStyles}
+`;
+
+export default function Home() {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
+      <div className="relative">
+        <BackgroundBlobs />
+        <HeroGlow />
+
+        <HeroSection />
+        <ApiExampleSection />
+        <ProblemSolutionSection />
+        <PromptUrlsSection />
+        <HowItWorksSection />
+        <KeyFeaturesSection />
+        <IntegrationsSection />
+        <ShapeTheFutureSection />
+        <GeminiSection />
+        <FinalCtaSection />
+      </div>
+    </>
+  );
+}

apps/landing/src/app/page.tsx

@@ -1,96 +1,219 @@
-import {
+'use client';
-  BackgroundBlobs,
-  HeroGlow,
-  HeroSection,
-  heroStyles,
-  ApiExampleSection,
-  ProblemSolutionSection,
-  PromptUrlsSection,
-  HowItWorksSection,
-  KeyFeaturesSection,
-  IntegrationsSection,
-  ShapeTheFutureSection,
-  shapeFutureStyles,
-  GeminiSection,
-  FinalCtaSection,
-} from './_components';
 
-import type { Metadata, Viewport } from 'next'
+import { useState, FormEvent } from 'react';
-
-export const viewport: Viewport = {
-  themeColor: '#0a0a0f',
-}
-
-export const metadata: Metadata = {
-  title: 'AI Image Generation Inside Your Workflow | Banatie',
-  description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery, style references, and prompt enhancement. Built for developers.',
-  keywords: ['API-first image generation', 'AI image API', 'image generation for developers', 'prompt to image API', 'CDN image delivery'],
-  authors: [{ name: 'Banatie' }],
-  robots: 'index, follow',
-
-  // Canonical & Alternates
-  alternates: {
-    canonical: 'https://banatie.app',
-    languages: {
-      'en': 'https://banatie.app',
-      'x-default': 'https://banatie.app',
-    },
-  },
-
-  // Open Graph
-  openGraph: {
-    type: 'website',
-    url: 'https://banatie.app',
-    title: 'AI Image Generation Inside Your Workflow | Banatie',
-    description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
-    siteName: 'Banatie',
-    locale: 'en_US',
-    images: [
-      {
-        url: 'https://banatie.app/og-image.png',
-        width: 1200,
-        height: 630,
-        alt: 'Banatie - AI Image Generation API for Developers',
-      },
-    ],
-  },
-
-  // Twitter
-  twitter: {
-    card: 'summary_large_image',
-    title: 'AI Image Generation Inside Your Workflow | Banatie',
-    description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
-    images: ['https://banatie.app/og-image.png'],
-  },
-}
-
-const customStyles = `
-  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
-
-  ${heroStyles}
-
-  ${shapeFutureStyles}
-`;
 
 export default function Home() {
+  const [email, setEmail] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+
+    // TODO: Replace with actual API endpoint
+    setTimeout(() => {
+      setStatus('success');
+      setMessage("You're on the list! Check your email for beta access details.");
+      setEmail('');
+    }, 1000);
+  };
+
   return (
     <>
-      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
+      {/* Hero Section */}
-      <div className="relative">
+      <section className="relative z-10 max-w-7xl mx-auto px-6 pt-20 pb-16 md:pt-32 md:pb-24">
-        <BackgroundBlobs />
+        <div className="text-center max-w-4xl mx-auto">
-        <HeroGlow />
+          <div className="inline-block mb-4 px-4 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-300 text-sm font-medium">
+            Now in Closed Beta
+          </div>
 
-        <HeroSection />
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 flex flex-col items-center gap-4">
-        <ApiExampleSection />
+            <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent whitespace-nowrap">
-        <ProblemSolutionSection />
+              Your AI Image Generation API
-        <PromptUrlsSection />
+            </span>
-        <HowItWorksSection />
+            <span className="bg-gradient-to-r from-purple-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent animate-gradient whitespace-nowrap">
-        <KeyFeaturesSection />
+              Ready in 60 seconds
-        <IntegrationsSection />
+            </span>
-        <ShapeTheFutureSection />
+          </h1>
-        <GeminiSection />
+
-        <FinalCtaSection />
+          <p className="text-xl md:text-2xl text-gray-400 mb-8 leading-relaxed">
-      </div>
+            Developer-first API for AI-powered image generation.
+            <br className="hidden md:block" />
+            Transform text and reference images into production-ready visuals.
+          </p>
+
+          {/* Email Capture Form */}
+          <div id="waitlist" className="max-w-md mx-auto mb-12">
+            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="your@email.com"
+                required
+                disabled={status === 'loading' || status === 'success'}
+                className="flex-1 px-6 py-4 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent backdrop-blur-sm disabled:opacity-50"
+              />
+              <button
+                type="submit"
+                disabled={status === 'loading' || status === 'success'}
+                className="px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-500/25"
+              >
+                {status === 'loading'
+                  ? 'Joining...'
+                  : status === 'success'
+                    ? 'Joined!'
+                    : 'Join Beta'}
+              </button>
+            </form>
+            {status === 'success' && (
+              <p className="mt-3 text-sm text-green-400 animate-fade-in">{message}</p>
+            )}
+          </div>
+
+          {/* Quick Feature Pills */}
+          <div className="flex flex-wrap justify-center gap-3 text-sm text-gray-400">
+            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
+              ⚡ RESTful API
+            </span>
+            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
+              🎨 Reference Images
+            </span>
+            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
+              🧠 Auto Prompt Enhancement
+            </span>
+            <span className="px-4 py-2 rounded-full bg-white/5 border border-white/10">
+              🔐 Enterprise Security
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* Code Example Section */}
+      <section className="relative z-10 max-w-7xl mx-auto px-6 py-16">
+        <div className="max-w-3xl mx-auto">
+          <div className="bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-8 shadow-2xl">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="flex gap-1.5">
+                <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
+              </div>
+              <span className="text-sm text-gray-500 ml-2">Quick Start</span>
+            </div>
+            <pre className="text-sm md:text-base text-gray-300 overflow-x-auto">
+              <code>{`curl -X POST https://api.banatie.com/generate \\
+  -H "X-API-Key: YOUR_KEY" \\
+  -F "prompt=futuristic city at sunset" \\
+  -F "filename=city"
+
+# ✅ Response in ~3 seconds
+{
+  "success": true,
+  "url": "https://cdn.banatie.com/city.png"
+}`}</code>
+            </pre>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="relative z-10 max-w-7xl mx-auto px-6 py-16 md:py-24">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-16 text-white">
+          Built for Developers, Powered by AI
+        </h2>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {/* Feature 1 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
+              🚀
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Instant Integration</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Clean REST API that works with any stack. From hobbyist to enterprise, start
+              generating images in minutes.
+            </p>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
+              🎯
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Reference-Guided Generation</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Upload up to 3 reference images alongside your prompt. Perfect for brand consistency
+              and style matching.
+            </p>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
+              ✨
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Smart Prompt Enhancement</h3>
+            <p className="text-gray-400 leading-relaxed">
+              AI-powered prompt optimization with language detection. Get better results
+              automatically.
+            </p>
+          </div>
+
+          {/* Feature 4 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
+              🔐
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Enterprise-Ready Security</h3>
+            <p className="text-gray-400 leading-relaxed">
+              API key management, rate limiting, multi-tenant architecture. Built for production
+              from day one.
+            </p>
+          </div>
+
+          {/* Feature 5 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-purple-500/10 to-transparent border border-purple-500/20 backdrop-blur-sm hover:border-purple-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 text-2xl">
+              ⚡
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Dual AI Models</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Powered by Google Gemini 2.5 Flash and Imagen 4.0. Automatic fallback ensures
+              reliability.
+            </p>
+          </div>
+
+          {/* Feature 6 */}
+          <div className="p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-transparent border border-cyan-500/20 backdrop-blur-sm hover:border-cyan-500/40 transition-colors">
+            <div className="w-12 h-12 rounded-xl bg-cyan-500/20 flex items-center justify-center mb-4 text-2xl">
+              📦
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-3">Organized Cloud Storage</h3>
+            <p className="text-gray-400 leading-relaxed">
+              Automatic file organization by org/project/category. CDN-ready URLs for instant
+              delivery.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="relative z-10 max-w-4xl mx-auto px-6 py-16 md:py-24">
+        <div className="text-center p-12 rounded-3xl bg-gradient-to-br from-purple-600/20 via-cyan-600/20 to-purple-600/20 border border-purple-500/30 backdrop-blur-sm">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Join the Beta Program</h2>
+          <p className="text-xl text-gray-300 mb-8">
+            Get early access, shape the product, and lock in founder pricing.
+          </p>
+          <a
+            href="#waitlist"
+            className="inline-block px-8 py-4 rounded-xl bg-white text-purple-950 font-semibold hover:bg-gray-100 transition-colors shadow-lg"
+          >
+            Request Beta Access
+          </a>
+        </div>
+      </section>
     </>
   );
 }