feat: switch to TW

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

@@ -1,79 +1,5 @@
-'use client';
-
-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;
-  }
-`;
+import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
+import { WaitlistEmailForm } from './WaitlistEmailForm';
 
 const badges = [
   { icon: Zap, text: 'API-First', variant: 'default' },
@@ -83,47 +9,8 @@ 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">
@@ -134,7 +21,9 @@ 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="gradient-text">Inside Your Workflow</span>
+          <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">
+            Inside Your Workflow
+          </span>
         </h1>
 
         <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
@@ -143,46 +32,7 @@ export function HeroSection() {
           Production-ready CDN delivery in seconds.
         </p>
 
-        <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>
+        <WaitlistEmailForm />
 
         <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
 
@@ -204,12 +54,6 @@ export function HeroSection() {
           ))}
         </div>
       </div>
-      <WaitlistPopup
-        isOpen={showPopup}
-        onClose={handlePopupClose}
-        onSubmit={handleWaitlistSubmit}
-      />
     </section>
-    </>
   );
 }

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

@@ -0,0 +1,131 @@
+'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,6 +10,7 @@
   --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 {
@@ -54,6 +55,18 @@ 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;
@@ -67,6 +80,33 @@ 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;