feat: switch to TW

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

@@ -1,37 +1,6 @@
 import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
 import { WaitlistEmailForm } from './WaitlistEmailForm';
 
-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' },
@@ -42,8 +11,6 @@ const badges = [
 
 export function HeroSection() {
   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">
@@ -54,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">
@@ -86,6 +55,5 @@ export function HeroSection() {
         </div>
       </div>
     </section>
-    </>
   );
 }

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;