diff --git a/apps/landing/src/app/homepage/_components/AnimatedGradientBorder.tsx b/apps/landing/src/app/homepage/_components/AnimatedGradientBorder.tsx
deleted file mode 100644
index 3a9e12d..0000000
--- a/apps/landing/src/app/homepage/_components/AnimatedGradientBorder.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-interface AnimatedGradientBorderProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-const gradientStyle: React.CSSProperties = {
-  background: `conic-gradient(
-    from 0deg,
-    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)
-  )`,
-  filter: 'blur(40px)',
-};
-
-const glowStyle: React.CSSProperties = {
-  background: `conic-gradient(
-    from 0deg,
-    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)',
-};
-
-export const AnimatedGradientBorder = ({
-  children,
-  className = '',
-}: AnimatedGradientBorderProps) => {
-  return (
-    <div className={`relative p-10 rounded-xl isolate ${className}`}>
-      <div
-        className="absolute -inset-16 pointer-events-none"
-        style={{
-          maskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
-          WebkitMaskImage: 'radial-gradient(ellipse closest-side at center, black 0%, black 50%, transparent 100%)',
-        }}
-      >
-        <div
-          className="absolute inset-[-52%] opacity-60 -z-10 animate-[gradient-rotate_4s_linear_infinite]"
-          style={glowStyle}
-        />
-        <div
-          className="absolute inset-[-50%] z-0 animate-[gradient-rotate_4s_linear_infinite]"
-          style={gradientStyle}
-        />
-      </div>
-      <div className="relative z-10 bg-[#0a0612] rounded-[10px]">{children}</div>
-    </div>
-  );
-};
diff --git a/apps/landing/src/app/homepage/_components/ApiExampleSection.tsx b/apps/landing/src/app/homepage/_components/ApiExampleSection.tsx
new file mode 100644
index 0000000..5610299
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/ApiExampleSection.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { Terminal } from 'lucide-react';
+
+export function ApiExampleSection() {
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-2xl p-8">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
+              <Terminal className="w-5 h-5 text-indigo-400" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
+              <p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
+            </div>
+          </div>
+
+          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
+            <div className="text-gray-500 mb-2"># Generate an image</div>
+            <span className="text-cyan-400">curl</span>{' '}
+            <span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
+            <br />
+            <span className="text-gray-300 ml-4">-H</span>{' '}
+            <span className="text-green-400">&quot;Authorization: Bearer $API_KEY&quot;</span>{' '}
+            <span className="text-gray-300">\</span>
+            <br />
+            <span className="text-gray-300 ml-4">-d</span>{' '}
+            <span className="text-green-400">
+              &apos;{`{"prompt": "modern office interior, natural light"}`}&apos;
+            </span>
+          </div>
+
+          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+            <div className="text-gray-500 mb-2"># Response</div>
+            <span className="text-gray-300">{'{'}</span>
+            <br />
+            <span className="text-purple-400 ml-4">&quot;url&quot;</span>
+            <span className="text-gray-300">:</span>{' '}
+            <span className="text-green-400">
+              &quot;https://cdn.banatie.app/img/a7x2k9.png&quot;
+            </span>
+            <span className="text-gray-300">,</span>
+            <br />
+            <span className="text-purple-400 ml-4">&quot;enhanced_prompt&quot;</span>
+            <span className="text-gray-300">:</span>{' '}
+            <span className="text-green-400">&quot;A photorealistic modern office...&quot;</span>
+            <span className="text-gray-300">,</span>
+            <br />
+            <span className="text-purple-400 ml-4">&quot;generation_time&quot;</span>
+            <span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
+            <br />
+            <span className="text-gray-300">{'}'}</span>
+          </div>
+
+          <p className="text-gray-500 text-sm mt-4 text-center">
+            CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/BackgroundBlobs.tsx b/apps/landing/src/app/homepage/_components/BackgroundBlobs.tsx
new file mode 100644
index 0000000..0232f00
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/BackgroundBlobs.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+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)',
+  },
+];
+
+export function BackgroundBlobs() {
+  return (
+    <>
+      {blobs.map((blob, i) => (
+        <div
+          key={i}
+          className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
+          style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/FinalCtaSection.tsx b/apps/landing/src/app/homepage/_components/FinalCtaSection.tsx
new file mode 100644
index 0000000..e8fd5b9
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/FinalCtaSection.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { ArrowRight } from 'lucide-react';
+
+export function FinalCtaSection() {
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setTimeout(() => {
+      const input = document.querySelector('input[type="email"]') as HTMLInputElement;
+      input?.focus();
+    }, 500);
+  };
+
+  return (
+    <section
+      id="join"
+      className="relative py-24 px-6 overflow-hidden"
+      style={{
+        background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
+      }}
+    >
+      <div
+        className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
+        style={{
+          background:
+            'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
+        }}
+      />
+
+      <div
+        className="absolute inset-0 opacity-50 pointer-events-none"
+        style={{
+          backgroundImage:
+            'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
+        }}
+      />
+
+      <div className="relative z-10 max-w-3xl mx-auto text-center">
+        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
+          Ready to build?
+        </h2>
+        <p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
+          Join developers waiting for early access. We&apos;ll notify you when your spot is ready.
+        </p>
+
+        <button
+          onClick={scrollToTop}
+          className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
+        >
+          Get Early Access
+          <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
+        </button>
+
+        <p className="text-cyan-200/50 text-sm mt-8">
+          No credit card required • Free to start • Cancel anytime
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/GeminiSection.tsx b/apps/landing/src/app/homepage/_components/GeminiSection.tsx
new file mode 100644
index 0000000..f313c46
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/GeminiSection.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { Zap, Check, Crown, Type, Brain, Target, Image, Award } from 'lucide-react';
+
+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.',
+  },
+];
+
+export function GeminiSection() {
+  return (
+    <section className="py-20 px-6">
+      <div className="max-w-5xl mx-auto">
+        <div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
+          <div className="text-center mb-10">
+            <div className="flex items-center justify-center gap-3 mb-4">
+              <Zap className="w-8 h-8 text-yellow-400" />
+              <h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
+            </div>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              We chose Gemini because it&apos;s the only model family that combines native
+              multimodal understanding with production-grade image generation. Two models, optimized
+              for different needs.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-10">
+            <div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
+                  <Zap className="w-5 h-5 text-cyan-400" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
+                  <p className="text-cyan-400 text-sm">Nano Banana</p>
+                </div>
+              </div>
+              <p className="text-gray-400 text-sm mb-4">
+                Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
+                generation.
+              </p>
+              <ul className="space-y-2 text-sm">
+                {flashFeatures.map((feature, i) => (
+                  <li key={i} className="flex items-start gap-2">
+                    <Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
+                    <span className="text-gray-300">
+                      <strong className="text-white">{feature.text}</strong> {feature.detail}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
+                  <Crown className="w-5 h-5 text-yellow-400" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
+                  <p className="text-yellow-400 text-sm">Nano Banana Pro</p>
+                </div>
+              </div>
+              <p className="text-gray-400 text-sm mb-4">
+                Maximum quality and creative control. For production assets and professional
+                workflows.
+              </p>
+              <ul className="space-y-2 text-sm">
+                {proFeatures.map((feature, i) => (
+                  <li key={i} className="flex items-start gap-2">
+                    <Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
+                    <span className="text-gray-300">
+                      <strong className="text-white">{feature.text}</strong> {feature.detail}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-yellow-500/20 pt-8">
+            <h4 className="text-center font-semibold mb-6 text-gray-300">
+              Why Gemini outperforms competitors
+            </h4>
+            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+              {capabilities.map((cap, i) => (
+                <div key={i} className="text-center p-4">
+                  <div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
+                    <cap.icon className="w-6 h-6 text-yellow-400" />
+                  </div>
+                  <h5 className="font-medium text-sm mb-1">{cap.title}</h5>
+                  <p className="text-gray-500 text-xs">{cap.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <p className="text-center text-gray-500 text-sm mt-8">
+            <Award className="w-4 h-4 inline mr-1 text-yellow-400" />
+            Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
+            (August 2025)
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/HeroGlow.tsx b/apps/landing/src/app/homepage/_components/HeroGlow.tsx
new file mode 100644
index 0000000..9770b01
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/HeroGlow.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+export function HeroGlow() {
+  return (
+    <div
+      className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] pointer-events-none"
+      style={{
+        background:
+          'radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%)',
+      }}
+    />
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/HeroSection.tsx b/apps/landing/src/app/homepage/_components/HeroSection.tsx
new file mode 100644
index 0000000..e5e6ac3
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/HeroSection.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
+import GlowEffect from './GlowEffect';
+
+export const styles = `
+  .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 6s ease-in-out infinite;
+  }
+
+  @keyframes gradient-shift {
+    0% { background-position: 100% 50%; }
+    50% { background-position: 0% 50%; }
+    100% { background-position: 100% 50%; }
+  }
+
+  .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; }
+  }
+`;
+
+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' },
+];
+
+export function HeroSection() {
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Email submitted:', email);
+  };
+
+  return (
+    <section className="relative pt-40 pb-20 px-6">
+      <div className="max-w-4xl mx-auto text-center">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-8">
+          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
+          In Active Development
+        </div>
+
+        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+          AI Image Generation
+          <br />
+          <span className="gradient-text">Inside Your Workflow</span>
+        </h1>
+
+        <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+          Generate images via API, SDK, CLI, Lab, or live URLs.
+          <br />
+          Production-ready CDN delivery in seconds.
+        </p>
+
+        <GlowEffect>
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
+            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => 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]"
+            />
+            <button
+              type="submit"
+              className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
+            >
+              Get Early Access
+            </button>
+          </form>
+        </GlowEffect>
+
+        <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
+
+        <div className="flex flex-nowrap gap-5 justify-center">
+          {badges.map((badge, i) => (
+            <span
+              key={i}
+              className={`px-6 py-2.5 rounded-full text-sm flex items-center gap-2.5 whitespace-nowrap ${
+                badge.variant === 'cyan'
+                  ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
+                  : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
+              }`}
+            >
+              <badge.icon
+                className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
+              />
+              {badge.text}
+            </span>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/HowItWorksSection.tsx b/apps/landing/src/app/homepage/_components/HowItWorksSection.tsx
new file mode 100644
index 0000000..6ad0dcc
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/HowItWorksSection.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { Settings2, Check, Info } from 'lucide-react';
+
+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' },
+];
+
+export function HowItWorksSection() {
+  return (
+    <section className="py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
+          Your prompt. Your control. Production-ready.
+        </h2>
+        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+          We handle the complexity so you can focus on building.
+        </p>
+
+        <div className="max-w-4xl mx-auto">
+          <div className="grid md:grid-cols-4 gap-4 mb-8">
+            {steps.map((step) => (
+              <div key={step.number} className="text-center p-4">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 shadow-[0_2px_10px_rgba(99,102,241,0.4)] flex items-center justify-center mx-auto mb-3 text-sm font-bold">
+                  {step.number}
+                </div>
+                <p className="text-sm font-medium mb-1">{step.title}</p>
+                <p className="text-xs text-gray-500">{step.subtitle}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-xl p-6 mt-8">
+            <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
+              <Settings2 className="w-5 h-5 text-indigo-400" />
+              What you control
+            </h3>
+            <div className="grid md:grid-cols-3 gap-4 text-sm">
+              {controls.map((control, i) => (
+                <div key={i} className="flex items-start gap-2">
+                  <Check className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
+                  <span className="text-gray-300">
+                    <strong className="text-white">{control.text}</strong> {control.detail}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <p className="text-center text-gray-500 text-sm mt-6">
+            <Info className="w-4 h-4 inline mr-1" />
+            Enhanced prompts are visible in API response. You always see what was generated.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/IntegrationsSection.tsx b/apps/landing/src/app/homepage/_components/IntegrationsSection.tsx
new file mode 100644
index 0000000..27c2d7e
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/IntegrationsSection.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Server, Code, Cpu, Terminal, FlaskConical, Link2 } from 'lucide-react';
+
+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 },
+];
+
+export function IntegrationsSection() {
+  return (
+    <section className="py-20 px-6">
+      <div className="max-w-6xl mx-auto text-center">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
+        <p className="text-gray-400 mb-12 max-w-2xl mx-auto">
+          Use what fits your workflow. All methods, same capabilities.
+        </p>
+
+        <div className="flex flex-wrap justify-center gap-4 mb-8">
+          {tools.map((tool, i) => (
+            <div
+              key={i}
+              className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
+                tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
+              }`}
+            >
+              <tool.icon className={`w-5 h-5 ${tool.color}`} />
+              <span>{tool.text}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
+          <p className="text-sm text-gray-400">
+            <strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
+            API. Generate images, build flows, browse your gallery, and explore all capabilities
+            with ready-to-use code snippets.
+          </p>
+        </div>
+
+        <p className="text-gray-500 text-sm mt-6">
+          Perfect for Claude Code, Cursor, and any AI-powered workflow.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/KeyFeaturesSection.tsx b/apps/landing/src/app/homepage/_components/KeyFeaturesSection.tsx
new file mode 100644
index 0000000..3d01848
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/KeyFeaturesSection.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { AtSign, GitBranch, Palette, Globe, SlidersHorizontal, Link } from 'lucide-react';
+
+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,
+  },
+];
+
+export function KeyFeaturesSection() {
+  return (
+    <section className="py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
+          Built for real development workflows
+        </h2>
+        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+          Everything you need to integrate AI images into your projects.
+        </p>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature, i) => (
+            <div
+              key={i}
+              className={`rounded-xl p-6 ${
+                feature.isUnique
+                  ? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
+                  : 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
+              }`}
+            >
+              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
+                <feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
+              </div>
+              <div className="flex items-center gap-2 mb-2">
+                <h3 className="font-semibold text-lg">{feature.title}</h3>
+                {feature.isUnique && (
+                  <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
+                    Unique
+                  </span>
+                )}
+              </div>
+              <p className="text-gray-400 text-sm">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/ProblemSolutionSection.tsx b/apps/landing/src/app/homepage/_components/ProblemSolutionSection.tsx
new file mode 100644
index 0000000..3e22697
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/ProblemSolutionSection.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { RefreshCw, ArrowLeftRight, Package, Layers, Check } from 'lucide-react';
+
+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',
+  },
+];
+
+export function ProblemSolutionSection() {
+  return (
+    <section className="py-20 px-6">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
+          Why developers choose Banatie
+        </h2>
+        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+          Stop fighting your image workflow. Start building.
+        </p>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {problems.map((item, i) => (
+            <div
+              key={i}
+              className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
+            >
+              <div className="flex-1 flex flex-col">
+                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
+                  <item.icon className="w-6 h-6 text-red-400" />
+                </div>
+                <h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
+                <p className="text-gray-500 text-sm mb-4">{item.problem}</p>
+                <div className="mt-auto flex items-start gap-1 text-sm">
+                  <Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
+                  <span className="text-white">{item.solution}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/PromptUrlsSection.tsx b/apps/landing/src/app/homepage/_components/PromptUrlsSection.tsx
new file mode 100644
index 0000000..a121498
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/PromptUrlsSection.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { Sparkles } from 'lucide-react';
+
+export function PromptUrlsSection() {
+  return (
+    <section className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30 rounded-2xl p-8">
+          <div className="flex items-start gap-4 mb-6">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center flex-shrink-0">
+              <Sparkles className="w-6 h-6 text-cyan-400" />
+            </div>
+            <div>
+              <span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">
+                Unique
+              </span>
+              <h2 className="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
+              <p className="text-gray-400">
+                Put a prompt in your{' '}
+                <code className="text-cyan-300 bg-black/30 px-1 rounded">img src</code> and get a
+                real image. No API calls. No JavaScript. Just HTML.
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
+            <span className="text-gray-500">&lt;!-- Write this --&gt;</span>
+            <br />
+            <span className="text-purple-400">&lt;img</span>{' '}
+            <span className="text-cyan-300">src</span>=
+            <span className="text-green-400">
+              &quot;https://cdn.banatie.app/gen?p=modern office interior&quot;
+            </span>{' '}
+            <span className="text-purple-400">/&gt;</span>
+            <br />
+            <br />
+            <span className="text-gray-500">
+              &lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;
+            </span>
+          </div>
+
+          <p className="text-gray-500 text-sm mt-4">
+            Perfect for static sites, prototypes, and AI coding agents that generate HTML.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/ShapeTheFutureSection.tsx b/apps/landing/src/app/homepage/_components/ShapeTheFutureSection.tsx
new file mode 100644
index 0000000..2f6be07
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/ShapeTheFutureSection.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { MessageCircle, Vote, Users } from 'lucide-react';
+
+const ZIGZAG_POINTS = [
+  40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
+  10, 0, 15, 0, 20, 0, 40, 10, 0,
+];
+
+function generateZigzagClipPath(yValues: number[]): string {
+  const lastIndex = yValues.length - 1;
+  const getX = (i: number) => `${(i / lastIndex) * 100}%`;
+
+  const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
+  const bottomEdge = [...yValues]
+    .map((y, i) => [getX(i), y] as const)
+    .reverse()
+    .map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
+    .join(', ');
+
+  return `polygon(${topEdge}, ${bottomEdge})`;
+}
+
+export const styles = `
+  .shape-future {
+    clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
+  }
+
+  .metal-texture {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .metal-texture::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.5;
+    mix-blend-mode: multiply;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .shape-future-title {
+    font-family: 'Caveat', cursive;
+  }
+`;
+
+const features = [
+  { icon: MessageCircle, text: 'Direct feedback channel' },
+  { icon: Vote, text: 'Feature voting' },
+  { icon: Users, text: 'Early adopter community' },
+];
+
+export function ShapeTheFutureSection() {
+  return (
+    <div className="relative my-[60px]">
+      <section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
+        <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
+        <div className="absolute h-[200px] w-full blur-sm">
+          <section className="shape-future bg-black absolute  w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
+        </div>
+        <div className="absolute h-[200px] bottom-[-50px] w-full blur-sm">
+          <section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
+        </div>
+        <section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
+        <div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
+          <h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
+            Shape the future of Banatie
+          </h2>
+
+          <p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
+            We&apos;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.
+          </p>
+
+          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
+            {features.map((feature, i) => (
+              <span key={i} className="flex items-center gap-2">
+                <feature.icon className="w-4 h-4" />
+                {feature.text}
+              </span>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/apps/landing/src/app/homepage/_components/index.ts b/apps/landing/src/app/homepage/_components/index.ts
new file mode 100644
index 0000000..8ca95d6
--- /dev/null
+++ b/apps/landing/src/app/homepage/_components/index.ts
@@ -0,0 +1,12 @@
+export { BackgroundBlobs } from './BackgroundBlobs';
+export { HeroGlow } from './HeroGlow';
+export { HeroSection, styles as heroStyles } from './HeroSection';
+export { ApiExampleSection } from './ApiExampleSection';
+export { ProblemSolutionSection } from './ProblemSolutionSection';
+export { PromptUrlsSection } from './PromptUrlsSection';
+export { HowItWorksSection } from './HowItWorksSection';
+export { KeyFeaturesSection } from './KeyFeaturesSection';
+export { IntegrationsSection } from './IntegrationsSection';
+export { ShapeTheFutureSection, styles as shapeFutureStyles } from './ShapeTheFutureSection';
+export { GeminiSection } from './GeminiSection';
+export { FinalCtaSection } from './FinalCtaSection';
diff --git a/apps/landing/src/app/homepage/page.tsx b/apps/landing/src/app/homepage/page.tsx
index 3fe196d..d05e4a8 100644
--- a/apps/landing/src/app/homepage/page.tsx
+++ b/apps/landing/src/app/homepage/page.tsx
@@ -1,939 +1,30 @@
 'use client';
 
-import { useState } from 'react';
-import { AnimatedGradientBorder } from './_components/AnimatedGradientBorder';
 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';
-import GlowEffect from './_components/GlowEffect';
-
-// ============================================================================
-// UTILS
-// ============================================================================
-
-const ZIGZAG_POINTS = [
-  40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
-  10, 0, 15, 0, 20, 0, 40, 10, 0,
-];
-
-function generateZigzagClipPath(yValues: number[]): string {
-  const lastIndex = yValues.length - 1;
-  const getX = (i: number) => `${(i / lastIndex) * 100}%`;
-
-  const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
-  const bottomEdge = [...yValues]
-    .map((y, i) => [getX(i), y] as const)
-    .reverse()
-    .map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
-    .join(', ');
-
-  return `polygon(${topEdge}, ${bottomEdge})`;
-}
-
-// ============================================================================
-// STYLES (CSS-in-JS for custom styles not available in Tailwind)
-// ============================================================================
+  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');
 
-  .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 6s ease-in-out infinite;
-  }
+  ${heroStyles}
 
-  @keyframes gradient-shift {
-    0% { background-position: 100% 50%; }
-    50% { background-position: 0% 50%; }
-    100% { background-position: 100% 50%; }
-  }
-
-  .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: ${generateZigzagClipPath(ZIGZAG_POINTS)};
-  }
-
-  .metal-texture {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .metal-texture::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-    opacity: 0.3;
-    mix-blend-mode: overlay;
-    pointer-events: none;
-    z-index: 3;
-  }
-
-  .shape-future-title {
-    font-family: 'Caveat', cursive;
-  }
+  ${shapeFutureStyles}
 `;
 
-// ============================================================================
-// 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) => (
-        <div
-          key={i}
-          className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
-          style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
-        />
-      ))}
-    </>
-  );
-}
-
-function HeroGlow() {
-  return (
-    <div
-      className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] pointer-events-none"
-      style={{
-        background:
-          'radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%)',
-      }}
-    />
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="relative pt-40 pb-20 px-6">
-      <div className="max-w-4xl mx-auto text-center">
-        {/* Status Badge */}
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-8">
-          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
-          In Active Development
-        </div>
-
-        {/* Headline */}
-        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
-          AI Image Generation
-          <br />
-          <span className="gradient-text">Inside Your Workflow</span>
-        </h1>
-
-        {/* Subheadline */}
-        <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
-          Generate images via API, SDK, CLI, Lab, or live URLs.
-          <br />
-          Production-ready CDN delivery in seconds.
-        </p>
-
-        {/* Email Form */}
-        <GlowEffect>
-          <form
-            onSubmit={handleSubmit}
-            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
-            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
-          >
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => 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]"
-            />
-            <button
-              type="submit"
-              className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
-            >
-              Get Early Access
-            </button>
-          </form>
-        </GlowEffect>
-
-        <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
-
-        {/* Badges */}
-        <div className="flex flex-nowrap gap-5 justify-center">
-          {badges.map((badge, i) => (
-            <span
-              key={i}
-              className={`px-6 py-2.5 rounded-full text-sm flex items-center gap-2.5 whitespace-nowrap ${
-                badge.variant === 'cyan'
-                  ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
-                  : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
-              }`}
-            >
-              <badge.icon
-                className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
-              />
-              {badge.text}
-            </span>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// API EXAMPLE SECTION
-// ============================================================================
-
-function ApiExampleSection() {
-  return (
-    <section className="py-16 px-6">
-      <div className="max-w-4xl mx-auto">
-        <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-2xl p-8">
-          <div className="flex items-center gap-3 mb-6">
-            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
-              <Terminal className="w-5 h-5 text-indigo-400" />
-            </div>
-            <div>
-              <h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
-              <p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
-            </div>
-          </div>
-
-          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
-            <div className="text-gray-500 mb-2"># Generate an image</div>
-            <span className="text-cyan-400">curl</span>{' '}
-            <span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
-            <br />
-            <span className="text-gray-300 ml-4">-H</span>{' '}
-            <span className="text-green-400">&quot;Authorization: Bearer $API_KEY&quot;</span>{' '}
-            <span className="text-gray-300">\</span>
-            <br />
-            <span className="text-gray-300 ml-4">-d</span>{' '}
-            <span className="text-green-400">
-              &apos;{`{"prompt": "modern office interior, natural light"}`}&apos;
-            </span>
-          </div>
-
-          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
-            <div className="text-gray-500 mb-2"># Response</div>
-            <span className="text-gray-300">{'{'}</span>
-            <br />
-            <span className="text-purple-400 ml-4">&quot;url&quot;</span>
-            <span className="text-gray-300">:</span>{' '}
-            <span className="text-green-400">
-              &quot;https://cdn.banatie.app/img/a7x2k9.png&quot;
-            </span>
-            <span className="text-gray-300">,</span>
-            <br />
-            <span className="text-purple-400 ml-4">&quot;enhanced_prompt&quot;</span>
-            <span className="text-gray-300">:</span>{' '}
-            <span className="text-green-400">&quot;A photorealistic modern office...&quot;</span>
-            <span className="text-gray-300">,</span>
-            <br />
-            <span className="text-purple-400 ml-4">&quot;generation_time&quot;</span>
-            <span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
-            <br />
-            <span className="text-gray-300">{'}'}</span>
-          </div>
-
-          <p className="text-gray-500 text-sm mt-4 text-center">
-            CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="py-20 px-6">
-      <div className="max-w-6xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-          Why developers choose Banatie
-        </h2>
-        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
-          Stop fighting your image workflow. Start building.
-        </p>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {problems.map((item, i) => (
-            <div
-              key={i}
-              className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
-            >
-              <div className="flex-1 flex flex-col">
-                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
-                  <item.icon className="w-6 h-6 text-red-400" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
-                <p className="text-gray-500 text-sm mb-4">{item.problem}</p>
-                <div className="mt-auto flex items-start gap-1 text-sm">
-                  <Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
-                  <span className="text-white">{item.solution}</span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// PROMPT URLs SECTION
-// ============================================================================
-
-function PromptUrlsSection() {
-  return (
-    <section className="py-16 px-6">
-      <div className="max-w-4xl mx-auto">
-        <div className="bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30 rounded-2xl p-8">
-          <div className="flex items-start gap-4 mb-6">
-            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center flex-shrink-0">
-              <Sparkles className="w-6 h-6 text-cyan-400" />
-            </div>
-            <div>
-              <span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">
-                Unique
-              </span>
-              <h2 className="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
-              <p className="text-gray-400">
-                Put a prompt in your{' '}
-                <code className="text-cyan-300 bg-black/30 px-1 rounded">img src</code> and get a
-                real image. No API calls. No JavaScript. Just HTML.
-              </p>
-            </div>
-          </div>
-
-          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
-            <span className="text-gray-500">&lt;!-- Write this --&gt;</span>
-            <br />
-            <span className="text-purple-400">&lt;img</span>{' '}
-            <span className="text-cyan-300">src</span>=
-            <span className="text-green-400">
-              &quot;https://cdn.banatie.app/gen?p=modern office interior&quot;
-            </span>{' '}
-            <span className="text-purple-400">/&gt;</span>
-            <br />
-            <br />
-            <span className="text-gray-500">
-              &lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;
-            </span>
-          </div>
-
-          <p className="text-gray-500 text-sm mt-4">
-            Perfect for static sites, prototypes, and AI coding agents that generate HTML.
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="py-20 px-6">
-      <div className="max-w-6xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-          Your prompt. Your control. Production-ready.
-        </h2>
-        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
-          We handle the complexity so you can focus on building.
-        </p>
-
-        <div className="max-w-4xl mx-auto">
-          <div className="grid md:grid-cols-4 gap-4 mb-8">
-            {steps.map((step) => (
-              <div key={step.number} className="text-center p-4">
-                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 shadow-[0_2px_10px_rgba(99,102,241,0.4)] flex items-center justify-center mx-auto mb-3 text-sm font-bold">
-                  {step.number}
-                </div>
-                <p className="text-sm font-medium mb-1">{step.title}</p>
-                <p className="text-xs text-gray-500">{step.subtitle}</p>
-              </div>
-            ))}
-          </div>
-
-          <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-xl p-6 mt-8">
-            <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
-              <Settings2 className="w-5 h-5 text-indigo-400" />
-              What you control
-            </h3>
-            <div className="grid md:grid-cols-3 gap-4 text-sm">
-              {controls.map((control, i) => (
-                <div key={i} className="flex items-start gap-2">
-                  <Check className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
-                  <span className="text-gray-300">
-                    <strong className="text-white">{control.text}</strong> {control.detail}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <p className="text-center text-gray-500 text-sm mt-6">
-            <Info className="w-4 h-4 inline mr-1" />
-            Enhanced prompts are visible in API response. You always see what was generated.
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="py-20 px-6">
-      <div className="max-w-6xl mx-auto">
-        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-          Built for real development workflows
-        </h2>
-        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
-          Everything you need to integrate AI images into your projects.
-        </p>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((feature, i) => (
-            <div
-              key={i}
-              className={`rounded-xl p-6 ${
-                feature.isUnique
-                  ? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
-                  : 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
-              }`}
-            >
-              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
-                <feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
-              </div>
-              <div className="flex items-center gap-2 mb-2">
-                <h3 className="font-semibold text-lg">{feature.title}</h3>
-                {feature.isUnique && (
-                  <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
-                    Unique
-                  </span>
-                )}
-              </div>
-              <p className="text-gray-400 text-sm">{feature.description}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="py-20 px-6">
-      <div className="max-w-6xl mx-auto text-center">
-        <h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
-        <p className="text-gray-400 mb-12 max-w-2xl mx-auto">
-          Use what fits your workflow. All methods, same capabilities.
-        </p>
-
-        <div className="flex flex-wrap justify-center gap-4 mb-8">
-          {tools.map((tool, i) => (
-            <div
-              key={i}
-              className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
-                tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
-              }`}
-            >
-              <tool.icon className={`w-5 h-5 ${tool.color}`} />
-              <span>{tool.text}</span>
-            </div>
-          ))}
-        </div>
-
-        <div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
-          <p className="text-sm text-gray-400">
-            <strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
-            API. Generate images, build flows, browse your gallery, and explore all capabilities
-            with ready-to-use code snippets.
-          </p>
-        </div>
-
-        <p className="text-gray-500 text-sm mt-6">
-          Perfect for Claude Code, Cursor, and any AI-powered workflow.
-        </p>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <div className="relative my-[60px]">
-      <section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
-        <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
-        <div className='absolute h-[200px] w-full blur-sm'>
-          <section className="shape-future bg-black absolute  w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
-        </div>
-        <div className='absolute h-[200px] bottom-[-50px] w-full blur-sm'>
-          <section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
-        </div>
-        <section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
-        <div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
-          <h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
-            Shape the future of Banatie
-          </h2>
-
-          <p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
-            We&apos;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.
-          </p>
-
-          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
-            {features.map((feature, i) => (
-              <span key={i} className="flex items-center gap-2">
-                <feature.icon className="w-4 h-4" />
-                {feature.text}
-              </span>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section className="py-20 px-6">
-      <div className="max-w-5xl mx-auto">
-        <div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
-          {/* Header */}
-          <div className="text-center mb-10">
-            <div className="flex items-center justify-center gap-3 mb-4">
-              <Zap className="w-8 h-8 text-yellow-400" />
-              <h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
-            </div>
-            <p className="text-gray-400 max-w-2xl mx-auto">
-              We chose Gemini because it&apos;s the only model family that combines native
-              multimodal understanding with production-grade image generation. Two models, optimized
-              for different needs.
-            </p>
-          </div>
-
-          {/* Two Model Cards */}
-          <div className="grid md:grid-cols-2 gap-6 mb-10">
-            {/* Flash Model */}
-            <div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                  <Zap className="w-5 h-5 text-cyan-400" />
-                </div>
-                <div>
-                  <h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
-                  <p className="text-cyan-400 text-sm">Nano Banana</p>
-                </div>
-              </div>
-              <p className="text-gray-400 text-sm mb-4">
-                Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
-                generation.
-              </p>
-              <ul className="space-y-2 text-sm">
-                {flashFeatures.map((feature, i) => (
-                  <li key={i} className="flex items-start gap-2">
-                    <Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
-                    <span className="text-gray-300">
-                      <strong className="text-white">{feature.text}</strong> {feature.detail}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Pro Model */}
-            <div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
-                  <Crown className="w-5 h-5 text-yellow-400" />
-                </div>
-                <div>
-                  <h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
-                  <p className="text-yellow-400 text-sm">Nano Banana Pro</p>
-                </div>
-              </div>
-              <p className="text-gray-400 text-sm mb-4">
-                Maximum quality and creative control. For production assets and professional
-                workflows.
-              </p>
-              <ul className="space-y-2 text-sm">
-                {proFeatures.map((feature, i) => (
-                  <li key={i} className="flex items-start gap-2">
-                    <Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
-                    <span className="text-gray-300">
-                      <strong className="text-white">{feature.text}</strong> {feature.detail}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          {/* Shared Capabilities */}
-          <div className="border-t border-yellow-500/20 pt-8">
-            <h4 className="text-center font-semibold mb-6 text-gray-300">
-              Why Gemini outperforms competitors
-            </h4>
-            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
-              {capabilities.map((cap, i) => (
-                <div key={i} className="text-center p-4">
-                  <div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
-                    <cap.icon className="w-6 h-6 text-yellow-400" />
-                  </div>
-                  <h5 className="font-medium text-sm mb-1">{cap.title}</h5>
-                  <p className="text-gray-500 text-xs">{cap.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* #1 Ranking Note */}
-          <p className="text-center text-gray-500 text-sm mt-8">
-            <Award className="w-4 h-4 inline mr-1 text-yellow-400" />
-            Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
-            (August 2025)
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// 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 (
-    <section
-      id="join"
-      className="relative py-24 px-6 overflow-hidden"
-      style={{
-        background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
-      }}
-    >
-      {/* Top accent line */}
-      <div
-        className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
-        style={{
-          background:
-            'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
-        }}
-      />
-
-      {/* Subtle cyan glow accents */}
-      <div
-        className="absolute inset-0 opacity-50 pointer-events-none"
-        style={{
-          backgroundImage:
-            'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
-        }}
-      />
-
-      <div className="relative z-10 max-w-3xl mx-auto text-center">
-        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
-          Ready to build?
-        </h2>
-        <p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
-          Join developers waiting for early access. We&apos;ll notify you when your spot is ready.
-        </p>
-
-        <button
-          onClick={scrollToTop}
-          className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
-        >
-          Get Early Access
-          <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
-        </button>
-
-        <p className="text-cyan-200/50 text-sm mt-8">
-          No credit card required • Free to start • Cancel anytime
-        </p>
-      </div>
-    </section>
-  );
-}
-
-// ============================================================================
-// MAIN HOME COMPONENT
-// ============================================================================
-
 export default function Home() {
   return (
     <>