Production ready

frontend/components/landing/LandingSections.tsx

@@ -6,14 +6,15 @@ import { Button } from '@/components/ui/button'
 import {
   Check, ArrowRight, Shield, Search, FileCheck, TrendingUp,
   Target, Filter, Bell, Eye, Slack, Webhook, History,
-  Zap, Lock, ChevronRight, Star
+  Zap, Lock, ChevronRight, Star, Accessibility
 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { SEODemoVisual } from './SEODemoVisual'
 import { CompetitorDemoVisual } from './CompetitorDemoVisual'
 import { PolicyDemoVisual } from './PolicyDemoVisual'
 import { WaitlistForm } from './WaitlistForm'
-import { MagneticButton, SectionDivider } from './MagneticElements'
+import { MagneticButton } from './MagneticElements'
+import { BackgroundGradient, FloatingElements, InteractiveGrid, GlowEffect, SectionDivider } from './BackgroundEffects'
 
 // Animation Variants
 const fadeInUp: Variants = {
@@ -30,21 +31,12 @@ const fadeInUp: Variants = {
   })
 }
 
-const scaleIn: Variants = {
-  hidden: { opacity: 0, scale: 0.95 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] }
-  }
-}
-
 // ============================================
-// 1. HERO SECTION - "Track competitor changes without the noise"
+// 1. HERO SECTION
 // ============================================
 export function HeroSection() {
   return (
-    <section id="hero" className="relative overflow-hidden pt-32 pb-24 lg:pt-40 lg:pb-32 bg-[hsl(var(--section-bg-1))]">
+    <section id="hero" className="relative overflow-hidden pt-32 pb-24 lg:pt-40 lg:pb-32 gradient-velvet">
       {/* Background Elements */}
       <div className="absolute inset-0 grain-texture" />
       <div className="absolute right-0 top-20 -z-10 h-[600px] w-[600px] rounded-full bg-[hsl(var(--primary))] opacity-8 blur-[120px]" />
@@ -65,7 +57,7 @@ export function HeroSection() {
                   <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[hsl(var(--teal))] opacity-75"></span>
                   <span className="relative inline-flex rounded-full h-2 w-2 bg-[hsl(var(--teal))]"></span>
                 </span>
-                For SEO & Growth Teams
+                Website Change Monitor for SEO & Growth Teams
               </div>
             </motion.div>
 
@@ -75,8 +67,8 @@ export function HeroSection() {
               custom={1}
               className="text-5xl lg:text-7xl font-display font-bold leading-[1.08] tracking-tight text-foreground"
             >
-              Track competitor changes{' '}
-              <span className="text-[hsl(var(--primary))]">without the noise.</span>
+              Monitor website changes &{' '}
+              <span className="text-[hsl(var(--primary))]">price drops automatically.</span>
             </motion.h1>
 
             {/* Subheadline */}
@@ -85,7 +77,7 @@ export function HeroSection() {
               custom={2}
               className="text-xl lg:text-2xl text-muted-foreground font-body leading-relaxed max-w-2xl"
             >
-              Less noise. More signal. Proof included.
+              Less noise. More signal. Visual proof included.
             </motion.p>
 
             {/* Feature Bullets */}
@@ -156,7 +148,44 @@ export function HeroSection() {
   )
 }
 
-// Noise → Signal Animation Component - Enhanced
+// ============================================
+// 1b. TRUST SECTION - "As seen on..."
+// ============================================
+function TrustSectionDeprecated() {
+  const logos = [
+    { name: 'SEO Clarity', color: 'text-muted-foreground' },
+    { name: 'Search Engine Journal', color: 'text-muted-foreground' },
+    { name: 'Moz', color: 'text-muted-foreground' },
+    { name: 'Ahrefs', color: 'text-muted-foreground' },
+    { name: 'Semrush', color: 'text-muted-foreground' }
+  ]
+
+  return (
+    <section className="py-12 border-y border-border/50 bg-secondary/10">
+      <div className="mx-auto max-w-7xl px-6">
+        <p className="text-center text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/80 mb-8">
+          The Essential Toolkit for Industry Leaders
+        </p>
+        <div className="flex flex-wrap justify-center items-center gap-x-12 gap-y-8 opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
+          {logos.map((logo, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.1, duration: 0.8 }}
+              className={`text-xl font-display font-black tracking-tighter ${logo.color}`}
+            >
+              {logo.name}
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+// Noise → Signal Animation Component
 function NoiseToSignalVisual() {
   const [phase, setPhase] = useState(0)
   const [isPaused, setIsPaused] = useState(false)
@@ -167,7 +196,6 @@ function NoiseToSignalVisual() {
     const interval = setInterval(() => {
       setPhase(p => {
         const nextPhase = (p + 1) % 4
-        // Trigger particles when transitioning from phase 0 to 1
         if (p === 0 && nextPhase === 1) {
           triggerParticles()
         }
@@ -189,7 +217,7 @@ function NoiseToSignalVisual() {
 
   return (
     <motion.div
-      className="relative aspect-[4/3] rounded-3xl border-2 border-border bg-card/50 backdrop-blur-sm shadow-2xl overflow-hidden cursor-pointer group"
+      className="relative aspect-[4/3] min-h-[320px] rounded-3xl border-2 border-border bg-card/50 backdrop-blur-sm shadow-2xl overflow-hidden cursor-pointer group"
       style={{ perspective: '1000px' }}
       whileHover={{ rotateY: 2, rotateX: -2, scale: 1.02 }}
       transition={{ duration: 0.3 }}
@@ -249,7 +277,6 @@ function NoiseToSignalVisual() {
 
       {/* Content Area */}
       <div className="p-8 space-y-4 relative">
-        {/* Noise Counter */}
         <motion.div
           className="absolute top-4 left-4 px-3 py-1 rounded-full bg-background/80 backdrop-blur-sm border border-border text-xs font-mono font-semibold"
           animate={{
@@ -266,176 +293,80 @@ function NoiseToSignalVisual() {
             opacity: phase === 0 ? 1 : 0,
             scale: phase === 0 ? 1 : 0.98
           }}
-          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+          transition={{ duration: 0.5 }}
           className="space-y-3"
         >
-          {/* Cookie Banner - with strikethrough */}
-          <motion.div
-            className="flex items-center justify-between p-3 rounded-lg bg-muted/30 border border-border/40 relative overflow-hidden"
-            animate={{
-              x: phase >= 1 ? -10 : 0,
-              opacity: phase >= 1 ? 0.3 : 1
-            }}
-            transition={{ duration: 0.4 }}
-          >
+          <div className="flex items-center justify-between p-3 rounded-lg bg-muted/30 border border-border/40 relative overflow-hidden">
             <span className="text-xs text-muted-foreground">🍪 Cookie Banner</span>
-            <span className="text-xs text-red-500 font-semibold">
-              NOISE
-            </span>
-            {/* Strikethrough animation */}
-            {phase >= 1 && (
-              <motion.div
-                className="absolute inset-0 border-t-2 border-red-500 top-1/2"
-                initial={{ scaleX: 0 }}
-                animate={{ scaleX: 1 }}
-                transition={{ duration: 0.3 }}
-              />
-            )}
-          </motion.div>
-
-          {/* Enterprise Plan Card */}
+            <span className="text-xs text-red-500 font-semibold">NOISE</span>
+          </div>
           <div className="p-4 rounded-lg bg-background border border-border">
             <p className="text-sm font-semibold text-foreground mb-2">Enterprise Plan</p>
             <p className="text-2xl font-bold text-[hsl(var(--burgundy))]">$99/mo</p>
           </div>
-
-          {/* Timestamp - with strikethrough */}
-          <motion.div
-            className="flex items-center justify-between p-3 rounded-lg bg-muted/30 border border-border/40 relative overflow-hidden"
-            animate={{
-              x: phase >= 1 ? -10 : 0,
-              opacity: phase >= 1 ? 0.3 : 1
-            }}
-            transition={{ duration: 0.4, delay: 0.1 }}
-          >
+          <div className="flex items-center justify-between p-3 rounded-lg bg-muted/30 border border-border/40 relative overflow-hidden">
             <span className="text-xs text-muted-foreground">⏰ Last updated: 10:23 AM</span>
-            <span className="text-xs text-red-500 font-semibold">
-              NOISE
-            </span>
-            {/* Strikethrough animation */}
-            {phase >= 1 && (
-              <motion.div
-                className="absolute inset-0 border-t-2 border-red-500 top-1/2"
-                initial={{ scaleX: 0 }}
-                animate={{ scaleX: 1 }}
-                transition={{ duration: 0.3, delay: 0.1 }}
-              />
-            )}
-          </motion.div>
+            <span className="text-xs text-red-500 font-semibold">NOISE</span>
+          </div>
         </motion.div>
 
-        {/* Phase 1-3: Filtered + Highlighted Signal */}
+        {/* Phase 1-3: Signal */}
         {phase >= 1 && (
           <motion.div
-            initial={{ opacity: 0, scale: 0.85, rotateX: -15 }}
-            animate={{
-              opacity: 1,
-              scale: 1,
-              rotateX: 0
-            }}
-            transition={{
-              duration: 0.6,
-              ease: [0.22, 1, 0.36, 1],
-              scale: { type: 'spring', stiffness: 300, damping: 20 }
-            }}
+            initial={{ opacity: 0, scale: 0.85 }}
+            animate={{ opacity: 1, scale: 1 }}
             className="absolute inset-0 flex items-center justify-center p-8"
           >
-            <motion.div
-              className="w-full p-6 rounded-2xl bg-white dark:bg-zinc-950 border-2 border-[hsl(var(--teal))] dark:border-zinc-800 shadow-2xl relative overflow-hidden"
-              animate={{
-                boxShadow: [
-                  '0 20px 60px rgba(20, 184, 166, 0.1)',
-                  '0 20px 80px rgba(20, 184, 166, 0.2)',
-                  '0 20px 60px rgba(20, 184, 166, 0.1)'
-                ]
-              }}
-              transition={{ duration: 2, repeat: Infinity }}
-            >
-              {/* Animated corner accent */}
-              <motion.div
-                className="absolute top-0 right-0 w-20 h-20 bg-[hsl(var(--teal))]/5 rounded-bl-full"
-                animate={{ scale: [1, 1.1, 1] }}
-                transition={{ duration: 2, repeat: Infinity }}
-              />
-
-              <div className="relative z-10">
-                <div className="flex items-center justify-between mb-2">
-                  <motion.span
-                    className="text-xs font-bold uppercase tracking-wider text-[hsl(var(--teal))] dark:text-[hsl(var(--teal))]"
-                    animate={{ opacity: [1, 0.7, 1] }}
-                    transition={{ duration: 1.5, repeat: Infinity }}
-                  >
-                    ✓ SIGNAL DETECTED
-                  </motion.span>
-                  <div className="flex items-center gap-1.5 text-xs font-medium text-[hsl(var(--teal))] dark:text-[hsl(var(--teal))]">
-                    <Filter className="h-3 w-3" />
-                    Filtered
-                  </div>
+            <div className="w-full p-6 rounded-2xl bg-white dark:bg-zinc-950 border-2 border-[hsl(var(--teal))] shadow-2xl relative">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-bold uppercase tracking-wider text-[hsl(var(--teal))]">✓ SIGNAL DETECTED</span>
+                <div className="flex items-center gap-1.5 text-xs text-[hsl(var(--teal))]">
+                  <Filter className="h-3 w-3" /> Filtered
                 </div>
-                <p className="text-sm font-semibold text-muted-foreground dark:text-zinc-400 mb-3">Enterprise Plan</p>
-                <div className="flex items-baseline gap-3">
-                  <p className="text-3xl font-bold text-foreground dark:text-zinc-600/50">$99/mo</p>
+              </div>
+              <p className="text-sm font-semibold text-muted-foreground mb-3">Enterprise Plan</p>
+              <div className="flex items-baseline gap-3">
+                <p className="text-3xl font-bold text-foreground">$99/mo</p>
+                {phase >= 2 && (
                   <motion.p
-                    initial={{ opacity: 0, x: -10, scale: 0.9 }}
-                    animate={{
-                      opacity: phase >= 2 ? 1 : 0,
-                      x: phase >= 2 ? 0 : -10,
-                      scale: phase >= 2 ? 1 : 0.9
-                    }}
-                    transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
-                    className="text-lg text-[hsl(var(--burgundy))] dark:text-red-500 font-bold flex items-center gap-1"
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="text-3xl text-[hsl(var(--burgundy))] font-bold"
                   >
-                    <span>→</span>
-                    <motion.span
-                      animate={{ scale: phase === 2 ? [1, 1.1, 1] : 1 }}
-                      transition={{ duration: 0.5 }}
-                      className="text-3xl"
-                    >
-                      $79/mo
-                    </motion.span>
+                    → $79/mo
                   </motion.p>
-                </div>
-
-                {/* Alert badge */}
-                {phase >= 3 && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    className="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30 dark:bg-red-500/10 dark:border-red-500/20"
-                  >
-                    <Bell className="h-3 w-3 text-[hsl(var(--burgundy))] dark:text-red-500" />
-                    <span className="text-[10px] font-bold text-[hsl(var(--burgundy))] dark:text-red-500 uppercase tracking-wider">
-                      Alert Sent
-                    </span>
-                  </motion.div>
                 )}
               </div>
-            </motion.div>
+              {phase >= 3 && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[hsl(var(--burgundy))]/10 border border-[hsl(var(--burgundy))]/30"
+                >
+                  <Bell className="h-3 w-3 text-[hsl(var(--burgundy))]" />
+                  <span className="text-[10px] font-bold text-[hsl(var(--burgundy))] uppercase tracking-wider">Alert Sent</span>
+                </motion.div>
+              )}
+            </div>
           </motion.div>
         )}
 
-
         {/* Phase Indicator */}
         <div className="absolute bottom-4 right-4 flex gap-1.5">
           {[0, 1, 2, 3].map(i => (
-            <motion.div
+            <div
               key={i}
-              animate={{
-                width: phase === i ? 24 : 6,
-                backgroundColor: phase === i ? 'hsl(var(--teal))' : 'hsl(var(--border))'
-              }}
-              transition={{ duration: 0.3 }}
-              className="h-1.5 rounded-full"
+              className={`h-1.5 rounded-full transition-all duration-300 ${phase === i ? 'w-6 bg-[hsl(var(--teal))]' : 'w-1.5 bg-border'}`}
             />
           ))}
         </div>
-      </div >
-    </motion.div >
+      </div>
+    </motion.div>
   )
 }
 
 // ============================================
-// 2. USE CASE SHOWCASE - SEO, Competitor, Policy
+// 2. USE CASE SHOWCASE
 // ============================================
 export function UseCaseShowcase() {
   const useCases = [
@@ -445,7 +376,6 @@ export function UseCaseShowcase() {
       problem: 'Your rankings drop before you know why.',
       example: 'Track when competitors update meta descriptions or add new content sections that outrank you.',
       color: 'teal',
-      gradient: 'from-[hsl(var(--teal))]/10 to-transparent',
       demoComponent: <SEODemoVisual />
     },
     {
@@ -454,7 +384,6 @@ export function UseCaseShowcase() {
       problem: 'Competitor launches slip past your radar.',
       example: 'Monitor pricing pages, product launches, and promotional campaigns in real-time.',
       color: 'primary',
-      gradient: 'from-[hsl(var(--primary))]/10 to-transparent',
       demoComponent: <CompetitorDemoVisual />
     },
     {
@@ -463,83 +392,55 @@ export function UseCaseShowcase() {
       problem: 'Regulatory updates appear without warning.',
       example: 'Track policy changes, terms updates, and legal text modifications with audit-proof history.',
       color: 'burgundy',
-      gradient: 'from-[hsl(var(--burgundy))]/10 to-transparent',
       demoComponent: <PolicyDemoVisual />
     }
   ]
 
   return (
-    <section className="py-32 bg-[hsl(var(--section-bg-3))] relative overflow-hidden">
-      {/* Background Decor - Enhanced Grid */}
+    <section className="py-32 relative overflow-hidden">
       <div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border))_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-30 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
 
       <div className="mx-auto max-w-7xl px-6 relative z-10">
-        {/* Section Header */}
-        <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
-          className="text-center mb-20"
-        >
-          <motion.div variants={fadeInUp} className="inline-flex items-center gap-2 rounded-full bg-secondary border border-border px-4 py-1.5 text-sm font-medium text-foreground mb-6">
-            <Eye className="h-4 w-4" />
-            Who This Is For
+        <div className="text-center mb-20">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="inline-flex items-center gap-2 rounded-full bg-secondary border border-border px-4 py-1.5 text-sm font-medium text-foreground mb-6"
+          >
+            <Eye className="h-4 w-4" /> Who This Is For
           </motion.div>
-          <motion.h2 variants={fadeInUp} custom={1} className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
-            Built for teams who need results,{' '}
-            <span className="text-muted-foreground">not demos.</span>
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6"
+          >
+            Built for teams who need results, <span className="text-muted-foreground">not demos.</span>
           </motion.h2>
-        </motion.div>
+        </div>
 
-        {/* Use Case Cards - Diagonal Cascade */}
         <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
           {useCases.map((useCase, i) => (
             <motion.div
               key={i}
-              initial={{ opacity: 0, y: 40, rotateX: 10 }}
-              whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
-              transition={{ delay: i * 0.15, duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
-              whileHover={{ y: -12, scale: 1.02, transition: { duration: 0.3 } }}
-              className="group relative glass-card rounded-3xl shadow-xl hover:shadow-2xl transition-all overflow-hidden"
+              transition={{ delay: i * 0.15 }}
+              className="group relative glass-card rounded-3xl p-8 shadow-xl transition-all"
             >
-              {/* Gradient Background */}
-              <div className={`absolute inset-0 rounded-3xl bg-gradient-to-br ${useCase.gradient} opacity-0 group-hover:opacity-100 transition-opacity`} />
-
-              <div className="relative z-10 p-8 space-y-6">
-                {/* Icon */}
-                <motion.div
-                  whileHover={{ rotate: 5, scale: 1.1 }}
-                  transition={{ duration: 0.2 }}
-                  className={`inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-[hsl(var(--${useCase.color}))]/10 text-[hsl(var(--${useCase.color}))] border border-[hsl(var(--${useCase.color}))]/20`}
-                >
-                  {useCase.icon}
-                </motion.div>
-
-                {/* Title */}
-                <h3 className="text-2xl font-display font-bold text-foreground">
-                  {useCase.title}
-                </h3>
-
-                {/* Problem Statement */}
-                <p className="text-sm font-semibold text-muted-foreground">
-                  {useCase.problem}
-                </p>
-
-                {/* Animated Demo Visual */}
-                <div className="!mt-6 rounded-xl overflow-hidden border border-border/50 shadow-inner">
-                  {useCase.demoComponent}
-                </div>
-
-                {/* Example Scenario */}
-                <div className="pt-4 border-t border-border">
-                  <p className="text-xs uppercase tracking-wider font-bold text-muted-foreground mb-2">
-                    Example:
-                  </p>
-                  <p className="text-sm text-foreground leading-relaxed">
-                    {useCase.example}
-                  </p>
-                </div>
+              <div className={`inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-[hsl(var(--${useCase.color}))]/10 text-[hsl(var(--${useCase.color}))] border border-[hsl(var(--${useCase.color}))]/20 mb-6`}>
+                {useCase.icon}
+              </div>
+              <h3 className="text-2xl font-display font-bold text-foreground mb-4">{useCase.title}</h3>
+              <p className="text-sm font-semibold text-muted-foreground mb-6">{useCase.problem}</p>
+              <div className="rounded-xl overflow-hidden border border-border/50 shadow-inner mb-6 h-[280px]">
+                {useCase.demoComponent}
+              </div>
+              <div className="pt-4 border-t border-border">
+                <p className="text-xs uppercase tracking-wider font-bold text-muted-foreground mb-2">Example:</p>
+                <p className="text-sm text-foreground leading-relaxed">{useCase.example}</p>
               </div>
             </motion.div>
           ))}
@@ -550,7 +451,7 @@ export function UseCaseShowcase() {
 }
 
 // ============================================
-// 3. HOW IT WORKS - 4 Stage Flow
+// 3. HOW IT WORKS
 // ============================================
 export function HowItWorks() {
   const stages = [
@@ -561,69 +462,33 @@ export function HowItWorks() {
   ]
 
   return (
-    <section className="py-32 bg-gradient-to-b from-[hsl(var(--section-bg-4))] to-[hsl(var(--section-bg-5))] relative overflow-hidden">
-      {/* Subtle Diagonal Stripe Decoration */}
-      <div className="absolute inset-0 opacity-5" style={{ backgroundImage: 'repeating-linear-gradient(45deg, hsl(var(--primary)), hsl(var(--primary)) 2px, transparent 2px, transparent 40px)' }} />
+    <section className="py-32 relative overflow-hidden">
       <div className="mx-auto max-w-7xl px-6 relative z-10">
-        {/* Section Header */}
-        <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true }}
-          className="text-center mb-20"
-        >
-          <motion.h2 variants={fadeInUp} className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
-            How it works
-          </motion.h2>
-          <motion.p variants={fadeInUp} custom={1} className="text-xl text-muted-foreground max-w-2xl mx-auto">
-            Four simple steps to never miss an important change again.
-          </motion.p>
-        </motion.div>
+        <div className="text-center mb-20">
+          <h2 className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">How it works</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">Four simple steps to never miss an important change again.</p>
+        </div>
 
-        {/* Horizontal Flow */}
-        <div className="relative">
-          {/* Connecting Line */}
-          <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-border to-transparent -translate-y-1/2 hidden lg:block" />
-
-          <div className="grid lg:grid-cols-4 gap-8 lg:gap-4">
-            {stages.map((stage, i) => (
-              <motion.div
-                key={i}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.1, duration: 0.5 }}
-                className="relative flex flex-col items-center text-center group"
-              >
-                {/* Large Number Background */}
-                <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-8xl font-display font-bold text-border/20 pointer-events-none">
-                  {String(i + 1).padStart(2, '0')}
-                </div>
-
-                {/* Circle Container */}
-                <div className="relative z-10 mb-6 flex h-20 w-20 items-center justify-center rounded-full border-2 border-border bg-card shadow-lg group-hover:shadow-2xl group-hover:border-[hsl(var(--primary))] group-hover:bg-[hsl(var(--primary))]/5 transition-all">
-                  <div className="text-[hsl(var(--primary))]">
-                    {stage.icon}
-                  </div>
-                </div>
-
-                {/* Text */}
-                <h3 className="text-lg font-bold text-foreground mb-2">
-                  {stage.title}
-                </h3>
-                <p className="text-sm text-muted-foreground max-w-[200px]">
-                  {stage.desc}
-                </p>
-
-                {/* Arrow (not on last) */}
-                {i < stages.length - 1 && (
-                  <div className="hidden lg:block absolute top-10 -right-4 text-border">
-                    <ChevronRight className="h-6 w-6" />
-                  </div>
-                )}
-              </motion.div>
-            ))}
-          </div>
+        <div className="grid lg:grid-cols-4 gap-8">
+          {stages.map((stage, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.1 }}
+              className="relative flex flex-col items-center text-center group"
+            >
+              <div className="absolute -top-4 left-1/2 -translate-x-1/2 text-8xl font-display font-bold text-border/20 pointer-events-none">
+                {String(i + 1).padStart(2, '0')}
+              </div>
+              <div className="relative z-10 mb-6 flex h-20 w-20 items-center justify-center rounded-full border-2 border-border bg-card shadow-lg transition-all group-hover:border-[hsl(var(--primary))]">
+                <div className="text-[hsl(var(--primary))]">{stage.icon}</div>
+              </div>
+              <h3 className="text-lg font-bold text-foreground mb-2">{stage.title}</h3>
+              <p className="text-sm text-muted-foreground max-w-[200px]">{stage.desc}</p>
+            </motion.div>
+          ))}
         </div>
       </div>
     </section>
@@ -631,7 +496,7 @@ export function HowItWorks() {
 }
 
 // ============================================
-// 4. DIFFERENTIATORS - Why We're Better
+// 4. DIFFERENTIATORS
 // ============================================
 export function Differentiators() {
   const features = [
@@ -640,31 +505,19 @@ export function Differentiators() {
     { feature: 'Integrations', others: 'Email only', us: 'Slack, Webhooks, Teams', icon: <Slack className="h-5 w-5" /> },
     { feature: 'History & Proof', others: '7-30 days', us: 'Unlimited snapshots', icon: <History className="h-5 w-5" /> },
     { feature: 'Setup Time', others: '15+ min', us: '2 minutes', icon: <Zap className="h-5 w-5" /> },
-    { feature: 'Pricing', others: '$29-99/mo', us: 'Fair pay-per-use', icon: <Shield className="h-5 w-5" /> }
+    { feature: 'Pricing', others: '$29-99/mo', us: 'Free plan + fair scaling', icon: <Shield className="h-5 w-5" /> }
   ]
 
   return (
-    <section className="py-32 bg-[hsl(var(--section-bg-5))] relative overflow-hidden">
-      {/* Radial Gradient Overlay */}
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,hsl(var(--teal))_0%,transparent_50%)] opacity-5" />
+    <section className="py-32 relative overflow-hidden">
       <div className="mx-auto max-w-6xl px-6 relative z-10">
-        {/* Section Header */}
-        <motion.div
-          initial="hidden"
-          whileInView="visible"
-          viewport={{ once: true }}
-          className="text-center mb-20"
-        >
-          <motion.h2 variants={fadeInUp} className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
-            Why we're{' '}
-            <span className="text-[hsl(var(--teal))]">different</span>
-          </motion.h2>
-          <motion.p variants={fadeInUp} custom={1} className="text-xl text-muted-foreground max-w-2xl mx-auto">
-            Not all monitoring tools are created equal. Here's what sets us apart.
-          </motion.p>
-        </motion.div>
+        <div className="text-center mb-20">
+          <h2 className="text-4xl lg:text-5xl font-display font-bold text-foreground mb-6">
+            {"Why we're"} <span className="text-[hsl(var(--teal))]">different</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{"Not all monitoring tools are created equal. Here's what sets us apart."}</p>
+        </div>
 
-        {/* Feature Cards Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           {features.map((item, i) => (
             <motion.div
@@ -672,20 +525,13 @@ export function Differentiators() {
               initial={{ opacity: 0, scale: 0.95 }}
               whileInView={{ opacity: 1, scale: 1 }}
               viewport={{ once: true }}
-              transition={{ delay: i * 0.05, duration: 0.4 }}
-              className="group relative glass-card rounded-2xl p-6 hover:border-[hsl(var(--teal))]/30 hover:shadow-xl transition-all hover:-translate-y-1"
+              transition={{ delay: i * 0.05 }}
+              className="glass-card rounded-2xl p-6 hover:border-[hsl(var(--teal))]/30 transition-all"
             >
-              {/* Icon */}
-              <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[hsl(var(--teal))]/10 text-[hsl(var(--teal))] mb-4 group-hover:scale-110 transition-transform">
+              <div className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-[hsl(var(--teal))]/10 text-[hsl(var(--teal))] mb-4">
                 {item.icon}
               </div>
-
-              {/* Feature Name */}
-              <h3 className="text-lg font-bold text-foreground mb-4">
-                {item.feature}
-              </h3>
-
-              {/* Comparison */}
+              <h3 className="text-lg font-bold text-foreground mb-4">{item.feature}</h3>
               <div className="space-y-3">
                 <div className="flex items-start gap-2">
                   <span className="text-xs uppercase tracking-wider font-bold text-muted-foreground flex-shrink-0 mt-0.5">Others:</span>
@@ -705,69 +551,36 @@ export function Differentiators() {
 }
 
 // ============================================
-// 6. FINAL CTA - Get Started
+// 6. FINAL CTA
 // ============================================
 export function FinalCTA() {
   return (
     <section className="relative overflow-hidden py-32">
-      {/* Animated Gradient Mesh Background - More dramatic */}
-      <div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--primary))]/30 via-[hsl(var(--burgundy))]/20 to-[hsl(var(--teal))]/30 opacity-70" />
+      <div className="absolute inset-0 gradient-velvet opacity-90" />
       <div className="absolute inset-0 grain-texture" />
 
-      {/* Animated Orbs - Enhanced */}
-      <motion.div
-        animate={{
-          scale: [1, 1.3, 1],
-          opacity: [0.4, 0.6, 0.4],
-          rotate: [0, 180, 360]
-        }}
-        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-        className="absolute top-1/4 -left-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--primary))] blur-[60px]"
-      />
-      <motion.div
-        animate={{
-          scale: [1, 1.2, 1],
-          opacity: [0.4, 0.5, 0.4],
-          rotate: [360, 180, 0]
-        }}
-        transition={{ duration: 15, repeat: Infinity, ease: "linear", delay: 2 }}
-        className="absolute bottom-1/4 -right-20 h-[500px] w-[500px] rounded-full bg-[hsl(var(--teal))] blur-[60px]"
-      />
-
       <div className="mx-auto max-w-4xl px-6 text-center relative z-10">
         <motion.div
-          initial="hidden"
-          whileInView="visible"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           className="space-y-8"
         >
-          {/* Headline */}
-          <motion.h2 variants={fadeInUp} className="text-5xl lg:text-6xl font-display font-bold leading-tight text-foreground">
-            Stop missing the changes{' '}
-            <span className="text-[hsl(var(--primary))]">that matter.</span>
-          </motion.h2>
-
-          {/* Subheadline */}
-          <motion.p variants={fadeInUp} custom={1} className="text-xl lg:text-2xl text-muted-foreground max-w-2xl mx-auto">
+          <h2 className="text-5xl lg:text-6xl font-display font-bold leading-tight text-foreground">
+            Stop missing the changes <span className="text-[hsl(var(--primary))]">that matter.</span>
+          </h2>
+          <p className="text-xl lg:text-2xl text-muted-foreground max-w-2xl mx-auto">
             Join the waitlist and be first to experience monitoring that actually works.
-          </motion.p>
-
-          {/* Waitlist Form */}
-          <motion.div variants={fadeInUp} custom={2} className="pt-4 max-w-lg mx-auto">
+          </p>
+          <div className="pt-4 max-w-lg mx-auto">
             <WaitlistForm />
-          </motion.div>
-
-          {/* Social Proof Indicator */}
-          <motion.div
-            variants={fadeInUp}
-            custom={3}
-            className="flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground"
-          >
+          </div>
+          <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground">
             <div className="flex items-center gap-2">
               <Star className="h-4 w-4 fill-current text-[hsl(var(--primary))]" />
-              <span>Early access</span>
+              <span>Join the waitlist for early access</span>
             </div>
-          </motion.div>
+          </div>
         </motion.div>
       </div>
     </section>