apps/landing/src/app/_components/HeroSection.tsx

@@ -1,5 +1,79 @@
-import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
+'use client';
-import { WaitlistEmailForm } from './WaitlistEmailForm';
+
+import { useState } from 'react';
+import { Zap, Globe, FlaskConical, AtSign, Link, Check } from 'lucide-react';
+import GlowEffect from './GlowEffect';
+import WaitlistPopup from './WaitlistPopup';
+import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
+
+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; }
+  }
+
+  .hero-btn {
+    transition: all 0.2s ease;
+  }
+
+  .hero-btn.enabled {
+    cursor: pointer;
+  }
+
+  .hero-btn.disabled {
+    cursor: not-allowed;
+  }
+
+  .hero-btn.disabled:hover {
+    background: rgba(100, 100, 120, 0.4) !important;
+  }
+
+  .success-checkmark-ring {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .success-checkmark-inner {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
 
 const badges = [
   { icon: Zap, text: 'API-First', variant: 'default' },
@@ -9,8 +83,47 @@ const badges = [
   { icon: Link, text: 'Prompt URLs', variant: 'cyan' },
 ];
 
+const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
 export function HeroSection() {
+  const [email, setEmail] = useState('');
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+
+  const isEnabled = email.length > 0 && isValidEmail(email);
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (isInvalid) setIsInvalid(false);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isValidEmail(email)) {
+      setIsInvalid(true);
+      return;
+    }
+    setIsInvalid(false);
+
+    // Fire and forget - don't block popup on logging failure
+    submitEmail(email).catch(console.error);
+    setShowPopup(true);
+  };
+
+  const handlePopupClose = () => {
+    setShowPopup(false);
+    setIsSubmitted(true);
+  };
+
+  const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
+    // Fire and forget - don't block on logging failure
+    submitWaitlistData(email, data).catch(console.error);
+  };
+
   return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
       <section className="relative pt-20 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-6">
@@ -21,9 +134,7 @@ export function HeroSection() {
         <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
           AI Image Generation
           <br />
-          <span className="bg-[linear-gradient(90deg,#818cf8_0%,#c084fc_25%,#f472b6_50%,#c084fc_75%,#818cf8_100%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-gradient-shift-hero">
+          <span className="gradient-text">Inside Your Workflow</span>
-            Inside Your Workflow
-          </span>
         </h1>
 
         <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
@@ -32,7 +143,46 @@ export function HeroSection() {
           Production-ready CDN delivery in seconds.
         </p>
 
-        <WaitlistEmailForm />
+        <GlowEffect>
+          {isSubmitted ? (
+            <div
+              className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
+              style={{ background: 'rgba(10, 6, 18, 0.95)' }}
+            >
+              <div className="success-checkmark-ring">
+                <div className="success-checkmark-inner">
+                  <Check className="w-3 h-3 text-white" strokeWidth={3} />
+                </div>
+              </div>
+              <span className="text-white font-medium">Done! You're in the list</span>
+            </div>
+          ) : (
+            <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={handleEmailChange}
+                placeholder="your@email.com"
+                className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
+                  isInvalid ? 'text-red-400' : 'text-white'
+                }`}
+              />
+              <button
+                type="submit"
+                disabled={!isEnabled}
+                className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
+                  isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
+                }`}
+              >
+                Get Early Access
+              </button>
+            </form>
+          )}
+        </GlowEffect>
 
         <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
 
@@ -54,6 +204,12 @@ export function HeroSection() {
           ))}
         </div>
       </div>
+      <WaitlistPopup
+        isOpen={showPopup}
+        onClose={handlePopupClose}
+        onSubmit={handleWaitlistSubmit}
+      />
     </section>
+    </>
   );
 }

apps/landing/src/app/_components/WaitlistEmailForm.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Check } from 'lucide-react';
-import GlowEffect from './GlowEffect';
-import WaitlistPopup from './WaitlistPopup';
-import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
-
-const styles = `
-  .hero-btn {
-    transition: all 0.2s ease;
-  }
-
-  .hero-btn.enabled {
-    cursor: pointer;
-  }
-
-  .hero-btn.disabled {
-    cursor: not-allowed;
-  }
-
-  .hero-btn.disabled:hover {
-    background: rgba(100, 100, 120, 0.4) !important;
-  }
-
-  .success-checkmark-ring {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .success-checkmark-inner {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-
-const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-
-export function WaitlistEmailForm() {
-  const [email, setEmail] = useState('');
-  const [isInvalid, setIsInvalid] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [showPopup, setShowPopup] = useState(false);
-
-  const isEnabled = email.length > 0 && isValidEmail(email);
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(e.target.value);
-    if (isInvalid) setIsInvalid(false);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isValidEmail(email)) {
-      setIsInvalid(true);
-      return;
-    }
-    setIsInvalid(false);
-
-    submitEmail(email).catch(console.error);
-    setShowPopup(true);
-  };
-
-  const handlePopupClose = () => {
-    setShowPopup(false);
-    setIsSubmitted(true);
-  };
-
-  const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
-    submitWaitlistData(email, data).catch(console.error);
-  };
-
-  return (
-    <>
-      <style dangerouslySetInnerHTML={{ __html: styles }} />
-      <GlowEffect>
-        {isSubmitted ? (
-          <div
-            className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
-            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
-          >
-            <div className="success-checkmark-ring">
-              <div className="success-checkmark-inner">
-                <Check className="w-3 h-3 text-white" strokeWidth={3} />
-              </div>
-            </div>
-            <span className="text-white font-medium">Done! You're in the list</span>
-          </div>
-        ) : (
-          <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={handleEmailChange}
-              placeholder="your@email.com"
-              className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
-                isInvalid ? 'text-red-400' : 'text-white'
-              }`}
-            />
-            <button
-              type="submit"
-              disabled={!isEnabled}
-              className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
-                isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
-              }`}
-            >
-              Get Early Access
-            </button>
-          </form>
-        )}
-      </GlowEffect>
-      <WaitlistPopup isOpen={showPopup} onClose={handlePopupClose} onSubmit={handleWaitlistSubmit} />
-    </>
-  );
-}

apps/landing/src/app/globals.css

@@ -10,7 +10,6 @@
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
-  --animate-gradient-shift-hero: gradient-shift-hero 6s ease-in-out infinite;
 }
 
 body {
@@ -55,18 +54,6 @@ body {
   }
 }
 
-@keyframes gradient-shift-hero {
-  0% {
-    background-position: 100% 50%;
-  }
-  50% {
-    background-position: 0% 50%;
-  }
-  100% {
-    background-position: 100% 50%;
-  }
-}
-
 .animate-gradient {
   background-size: 200% 200%;
   animation: gradient-shift 3s ease infinite;
@@ -80,33 +67,6 @@ body {
   animation-delay: 700ms;
 }
 
-/* Hero Section - Beta Dot Animation */
-@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;
-  }
-}
-
-.beta-dot {
-  animation:
-    beta-dot-delay 20s linear forwards,
-    beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
-}
-
 /* Smooth scrolling */
 html {
   scroll-behavior: smooth;