feat: set homepage

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

@@ -1,49 +0,0 @@
-'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,219 +1,49 @@
 'use client';
 
-import { useState, FormEvent } from 'react';
+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() {
-  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 (
     <>
-      {/* Hero Section */}
+      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
-      <section className="relative z-10 max-w-7xl mx-auto px-6 pt-20 pb-16 md:pt-32 md:pb-24">
+      <div className="relative">
-        <div className="text-center max-w-4xl mx-auto">
+        <BackgroundBlobs />
-          <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">
+        <HeroGlow />
-            Now in Closed Beta
-          </div>
 
-          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 flex flex-col items-center gap-4">
+        <HeroSection />
-            <span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent whitespace-nowrap">
+        <ApiExampleSection />
-              Your AI Image Generation API
+        <ProblemSolutionSection />
-            </span>
+        <PromptUrlsSection />
-            <span className="bg-gradient-to-r from-purple-400 via-cyan-400 to-purple-400 bg-clip-text text-transparent animate-gradient whitespace-nowrap">
+        <HowItWorksSection />
-              Ready in 60 seconds
+        <KeyFeaturesSection />
-            </span>
+        <IntegrationsSection />
-          </h1>
+        <ShapeTheFutureSection />
-
+        <GeminiSection />
-          <p className="text-xl md:text-2xl text-gray-400 mb-8 leading-relaxed">
+        <FinalCtaSection />
-            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>
     </>
   );
 }