From 097fdd3d2d8cccd98486b70f47151d50993a4a93 Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Thu, 18 Dec 2025 00:01:06 +0700
Subject: [PATCH] feat: switch to TW

---
 .../src/app/_components/HeroSection.tsx       | 118 +++++++-----------
 apps/landing/src/app/globals.css              |  40 ++++++
 2 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/apps/landing/src/app/_components/HeroSection.tsx b/apps/landing/src/app/_components/HeroSection.tsx
index 91c741d..de67abb 100644
--- a/apps/landing/src/app/_components/HeroSection.tsx
+++ b/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,50 +11,49 @@ 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">
-            <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-8 leading-tight">
-            AI Image Generation
-            <br />
-            <span className="gradient-text">Inside Your Workflow</span>
-          </h1>
-
-          <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
-            Generate images via API, SDK, CLI, Lab, or live URLs.
-            <br />
-            Production-ready CDN delivery in seconds.
-          </p>
-
-          <WaitlistEmailForm />
-
-          <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
-
-          <div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
-            {badges.map((badge, i) => (
-              <span
-                key={i}
-                className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm: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>
+    <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">
+          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
+          In Active Development
         </div>
-      </section>
-    </>
+
+        <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">
+            Inside Your Workflow
+          </span>
+        </h1>
+
+        <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
+          Generate images via API, SDK, CLI, Lab, or live URLs.
+          <br />
+          Production-ready CDN delivery in seconds.
+        </p>
+
+        <WaitlistEmailForm />
+
+        <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
+
+        <div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
+          {badges.map((badge, i) => (
+            <span
+              key={i}
+              className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm: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/globals.css b/apps/landing/src/app/globals.css
index 63d1204..9e6c79a 100644
--- a/apps/landing/src/app/globals.css
+++ b/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;