Animated Features Section with CTA (Tailwind)

<section class="sm:px-6 lg:px-8 sm:py-24 animate-on-scroll max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4" id="features">
      <div class="border-gradient sm:p-8 rounded-3xl pt-6 pr-6 pb-6 pl-6">
        <div class="mb-12 relative [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">
          <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 gap-x-6 gap-y-6 items-start">
            <!-- Number + Eyebrow -->
            <div class="lg:col-span-2 flex items-center lg:justify-start justify-between">
              <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 ring-1 ring-white/10 bg-white/[0.03]">
                <span class="text-[11px] font-medium tracking-widest text-zinc-300 font-geist">
                  01
                </span>
                <span class="h-3 w-px bg-white/10"></span>
                <span class="text-[11px] tracking-wide text-zinc-400 font-geist">
                  Features
                </span>
              </span>
            </div>

            <!-- Title + Subtitle -->
            <div class="lg:col-span-7">
              <h2 class="text-4xl sm:text-5xl lg:text-6xl leading-[0.95] text-zinc-100 font-geist font-light tracking-tighter" style="">
                Powerful features,
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400 font-geist font-light tracking-tighter" style="">
                  simple workflow
                </span>
              </h2>
              <p class="mt-4 text-sm sm:text-base text-zinc-400 max-w-2xl font-geist">
                DesignFlow turns ideas into production-ready UI — generate,
                tweak, and ship with a clean developer experience that stays out
                of your way.
              </p>
            </div>

            <!-- CTA Group -->
            <div class="lg:col-span-3 lg:justify-end flex flex-col sm:flex-row gap-2 sm:items-center">
              <!-- Primary: cleaner, higher-contrast pill with subtle inner glass -->
              <button class="group inline-flex min-w-[180px] cursor-pointer overflow-hidden transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white text-base font-medium text-neutral-300 tracking-tight bg-white/5 h-[48px] border-white/15 border rounded-full pt-3 pr-6 pb-3 pl-6 relative items-center justify-center">
                <!-- Front Text -->
                <span class="relative z-10 transition-all duration-500 ease-out group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md font-geist">
                  Get Started
                </span>
                <!-- Hover Text -->
                <span class="z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium opacity-0 absolute top-0 right-0 bottom-0 left-0 font-geist">
                  Try For Free
                </span>
                <!-- Bottom Glow Line -->
                <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 rounded-full bg-gradient-to-r from-transparent via-white/70 to-transparent transition-all duration-[1000ms] opacity-70 blur-[2px]"></span>
                <!-- Glass Gradient Overlay -->
                <span aria-hidden="true" class="absolute inset-0 rounded-full pointer-events-none bg-gradient-to-t from-white/15 via-white/10 to-transparent"></span>
              </button>

              <!-- Secondary: neutral/ghost with crisp hover -->
            </div>
          </div>

          <!-- Under-title micro row -->
        </div>

        <section class="sm:px-6 lg:pl-0 lg:pr-0 max-w-7xl mx-auto pr-0 pl-0 relative">
          <!-- Section header -->

          <!-- Grid -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4" data-animate-children="true">
            <!-- ========== Large Card: Component Generator ========== -->
            <div class="lg:col-span-2 overflow-hidden transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn bg-neutral-900/60 ring-white/10 ring-1 rounded-2xl relative backdrop-blur [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll" style="">
              <div class="pointer-events-none absolute inset-0 rounded-2xl shimmer" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 40px 120px rgba(37,99,235,0.18);"></div>

              <div class="sm:p-6 pt-5 pr-5 pb-5 pl-5">
                <div class="flex items-center gap-2">
                  <h3 class="sm:text-2xl text-xl text-white font-geist font-light tracking-tighter" style="">
                    Component Generator
                  </h3>
                </div>
                <p class="text-sm text-neutral-400 mt-1 font-geist">
                  Create production-ready UI components from prompts or designs.
                </p>

                <!-- Chat field (compact) -->
                <div class="mt-4 relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-zinc-950/80 animate-fadeSlideIn" style="animation-delay:.08s">
                  <!-- header -->
                  <div class="flex items-center justify-between px-4 py-2.5 border-b border-white/5">
                    <span class="inline-flex items-center gap-2 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-3 py-0.5 ring-1 ring-blue-700 font-geist">
                      <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-breathe"></span>
                      Active
                      <span class="typing-dots">
                        <i></i>
                        <i></i>
                        <i></i>
                      </span>
                    </span>
                    <span class="text-[11px] text-neutral-400 font-geist">DF-Gen v3</span>
                  </div>

                  <!-- messages -->
                  <div class="px-4 py-3 space-y-2 max-h-48 overflow-auto">
                    <!-- assistant -->
                    <div class="flex items-start gap-2">
                      <div class="w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc36a88f-5106-416e-82ac-ea0cd24cf358_320w.webp)] bg-cover ring-white/10 ring-1 rounded-full animate-floatSlow" style="animation-duration:7s"></div>
                      <div class="max-w-[80%] rounded-xl bg-neutral-900 ring-1 ring-white/10 px-3 py-1.5 text-xs text-neutral-200 animate-fadeSlideIn font-geist" style="animation-delay:.12s">
                        Describe a component + props. I’ll return typed code.
                      </div>
                    </div>
                    <!-- user -->
                    <div class="flex justify-end">
                      <div class="max-w-[80%] rounded-xl px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_6px_18px_rgba(59,130,246,0.35)] animate-glowPulse font-geist" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
                        PricingCard with title, price, features[], CTA
                      </div>
                    </div>
                    <!-- preview -->
                    <div class="flex items-start gap-2">
                      <div class="w-6 h-6 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc36a88f-5106-416e-82ac-ea0cd24cf358_320w.webp)] bg-cover ring-white/10 ring-1 rounded-full animate-floatSlow" style="animation-duration:7s; animation-delay:.1s"></div>
                      <div class="max-w-[80%] rounded-xl bg-neutral-900 ring-1 ring-white/10 overflow-hidden animate-fadeSlideIn" style="animation-delay:.16s">
                        <div class="px-3 py-1.5 border-b border-white/5 text-[11px] text-neutral-400 caret font-geist">
                          Preview • PricingCard.tsx
                        </div>
                        <pre class="px-3 py-2 font-mono text-[11px] leading-5 text-neutral-300 whitespace-pre-wrap font-geist">&lt;PricingCard title="Pro" price="$29/mo" features={[...]} /&gt;</pre>
                      </div>
                    </div>
                  </div>

                  <!-- input -->
                  <div class="px-4 py-2.5 border-t border-white/5 flex items-center gap-2">
                    <div class="flex-1 flex items-center gap-2 bg-neutral-900 rounded-full ring-1 ring-white/10 px-3 py-1.5 text-xs text-neutral-400">
                      <svg class="w-3.5 h-3.5 animate-tilt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 5v14M5 12h14" class=""></path>
                      </svg>
                      <input class="bg-transparent outline-none flex-1 placeholder-neutral-500 text-neutral-300" placeholder="Type your prompt…">
                    </div>
                    <button class="px-3 py-1.5 text-xs rounded-full text-white ring-1 ring-blue-400 shadow-[0_6px_18px_rgba(59,130,246,0.35)] animate-glowPulse font-geist" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
                      Generate
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- ========== Card 1: Code Optimizer ========== -->
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll" style="animation-delay:.05s">
              <div class="pointer-events-none absolute inset-0 rounded-2xl shimmer" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 24px 70px rgba(37,99,235,0.12);"></div>
              <div class="p-4 sm:p-5">
                <div class="flex items-center justify-between">
                  <h3 class="sm:text-2xl text-xl text-white font-geist font-light tracking-tighter" style="">
                    Code Optimizer
                  </h3>
                  <span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full ring-1 ring-blue-500/40 bg-blue-500/10 text-blue-200 animate-breathe font-geist">
                    ⚡ +32%
                  </span>
                </div>
                <p class="text-sm text-neutral-400 mt-1 font-geist">
                  Refactor to cleaner, faster code.
                </p>

                <div class="mt-4 rounded-xl overflow-hidden ring-1 ring-white/10 bg-zinc-950/80">
                  <div class="flex items-center gap-1.5 px-3 py-2 bg-neutral-900/70">
                    <span class="w-2 h-2 rounded-full bg-rose-500/80 animate-breathe"></span>
                    <span class="w-2 h-2 rounded-full bg-amber-400/80 animate-breathe" style="animation-delay:.1s"></span>
                    <span class="w-2 h-2 rounded-full bg-emerald-500/80 animate-breathe" style="animation-delay:.2s"></span>
                    <span class="ml-3 text-[11px] text-neutral-400 caret font-geist">
                      optimize.ts
                    </span>
                  </div>
                  <div class="p-3 font-mono text-[11px] leading-5">
                    <pre class="whitespace-pre-wrap"><span class="text-neutral-500 font-geist">04</span> <span class="text-neutral-400 font-geist">// Before</span>
<span class="text-neutral-500 font-geist">05</span> <span class="px-1 rounded bg-rose-500/10 text-rose-300 font-geist">- useEffect(() =&gt; fetchData(), [])</span>
<span class="text-neutral-500 font-geist">06</span> <span class="text-neutral-400 font-geist">// After</span>
<span class="text-neutral-500 font-geist">07</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300 font-geist">+ const data = await api.get('/data')</span>
<span class="text-neutral-500 font-geist">08</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300 font-geist">+ useMemo(() =&gt; renderList(data), [data])</span></pre>
                  </div>
                  <div class="px-3 py-2 border-t border-white/5 flex items-center justify-between text-[11px]">
                    <div class="flex items-center gap-1.5">
                      <span class="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse"></span>
                      <span class="text-neutral-400 font-geist">Analyzed</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <span class="text-emerald-300 font-geist">-190ms</span>
                      <div class="h-1 w-14 bg-white/10 rounded-full overflow-hidden">
                        <div class="h-full w-2/3 bg-gradient-to-r from-cyan-400 to-blue-500 animate-fadeSlideIn" style="animation-duration:1.2s"></div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mt-3 flex items-center gap-2">
                  <button class="flex-1 rounded-full px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_6px_16px_rgba(59,130,246,0.35)] animate-glowPulse font-geist" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
                    Apply fix
                  </button>
                  <button class="flex-1 rounded-full px-3 py-1.5 text-xs text-neutral-200 ring-1 ring-white/10 bg-white/5 font-geist">
                    Copy patch
                  </button>
                </div>
              </div>
            </div>

            <!-- ========== Card 2: Theme Control ========== -->
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll" style="animation-delay:.1s">
              <div class="pointer-events-none absolute inset-0 rounded-2xl shimmer" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
              <div class="p-4 sm:p-5">
                <h3 class="sm:text-2xl text-xl text-white font-geist font-light tracking-tighter" style="">
                  Theme Control
                </h3>
                <p class="text-sm text-neutral-400 mt-1 font-geist">
                  Adjust styles with one click.
                </p>

                <div class="mt-4 rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3">
                  <p class="text-[11px] uppercase tracking-wide text-blue-200 mb-2 font-geist">
                    Select Theme
                  </p>
                  <div class="grid grid-cols-[1fr_auto] gap-3 items-center">
                    <div class="space-y-2">
                      <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-blue-400 animate-breathe"></span>
                        <span class="text-sm text-white font-geist">Dark</span>
                      </div>
                      <div class="flex items-center gap-2 opacity-70">
                        <span class="w-2 h-2 rounded-full bg-white/20"></span>
                        <span class="text-sm text-neutral-300 font-geist">Light</span>
                      </div>
                      <div class="flex items-center gap-2 opacity-70">
                        <span class="w-2 h-2 rounded-full bg-white/20"></span>
                        <span class="text-sm text-neutral-300 font-geist">System</span>
                      </div>
                    </div>
                    <div class="h-20 w-8 rounded-lg bg-white/5 ring-1 ring-white/10 relative overflow-hidden">
                      <div class="absolute left-1/2 -translate-x-1/2 top-1.5 w-1 h-[90%] bg-white/10 rounded-full"></div>
                      <div class="absolute left-1/2 -translate-x-1/2 bottom-3 w-4 h-4 rounded-full bg-blue-400 ring-1 ring-blue-300 animate-floatSlow"></div>
                    </div>
                  </div>

                  <div class="mt-3 flex flex-wrap items-center gap-2">
                    <span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-white/10 bg-white/5 text-neutral-300 font-geist">
                      Rounded
                    </span>
                    <span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-white/10 bg-white/5 text-neutral-300 font-geist">
                      Glass
                    </span>
                    <span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-blue-400/50 bg-blue-500/10 text-blue-200 animate-breathe font-geist">
                      Accent: Blue
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <!-- ========== Card 3: Team Collaboration ========== -->
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll" style="animation-delay:.15s">
              <div class="pointer-events-none absolute inset-0 rounded-2xl shimmer" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
              <div class="p-4 sm:p-5">
                <h3 class="sm:text-2xl text-xl text-white font-geist font-light tracking-tighter" style="">
                  Team Collaboration
                </h3>
                <p class="text-sm text-neutral-400 mt-1 font-geist">
                  Review and approve changes faster.
                </p>

                <div class="mt-4 rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3">
                  <div class="flex items-center gap-2">
                    <img class="w-6 h-6 rounded-full ring-1 ring-white/10 object-cover animate-floatSlow" src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&amp;q=80" alt="">
                    <img class="w-6 h-6 rounded-full ring-1 ring-white/10 object-cover -ml-2 animate-floatSlow" style="animation-delay:.1s" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&amp;w=120&amp;auto=format&amp;fit=crop" alt="">
                    <span class="ml-1 text-xs text-neutral-400 font-geist">
                      Alex • Dana
                    </span>
                    <span class="ml-auto inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full ring-1 ring-emerald-500/40 bg-emerald-500/10 text-emerald-300 animate-breathe font-geist">
                      2 new
                    </span>
                  </div>

                  <div class="mt-3 rounded-lg bg-neutral-900 ring-1 ring-white/10 p-3 text-sm text-neutral-200 animate-fadeSlideIn font-geist" style="animation-delay:.1s">
                    Can we refactor this grid to a reusable
                    <span class="text-blue-300 font-geist">Card</span>
                    component?
                  </div>

                  <div class="mt-3 flex items-center gap-2">
                    <button class="flex-1 rounded-full px-3 py-1.5 text-xs text-neutral-200 ring-1 ring-white/10 bg-white/5 font-geist">
                      Reply
                    </button>
                    <button class="flex-1 rounded-full px-3 py-1.5 text-xs text-white ring-1 ring-blue-400 shadow-[0_10px_24px_rgba(59,130,246,0.35)] transition hover:-translate-y-0.5 animate-glowPulse font-geist" style="background:linear-gradient(45deg,#06b6d4,#3b82f6,#2563eb);">
                      Approve
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- ========== Card 4: Template Library ========== -->
            <div class="relative overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900/60 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 animate-fadeSlideIn [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll" style="animation-delay:.2s">
              <div class="pointer-events-none absolute inset-0 rounded-2xl shimmer" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 80px rgba(37,99,235,0.10);"></div>
              <div class="p-4 sm:p-5">
                <h3 class="sm:text-2xl text-xl text-white font-geist font-light tracking-tighter" style="">
                  Template Library
                </h3>
                <p class="text-sm text-neutral-400 mt-1 font-geist">
                  Start with curated, reusable patterns.
                </p>

                <div class="mt-4 space-y-2">
                  <div class="rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3 flex items-center gap-3">
                    
                    <div class="flex-1">
                      <p class="text-sm text-neutral-200 font-geist">Pricing Section</p>
                      <p class="text-[11px] text-neutral-500 font-geist">
                        2 columns • CTA
                      </p>
                    </div>
                    <button class="inline-flex items-center gap-1 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-2 py-0.5 ring-1 ring-blue-700 animate-breathe font-geist">
                      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 5v14M5 12h14" class=""></path>
                      </svg>
                      Add
                    </button>
                  </div>
                  <div class="rounded-xl bg-zinc-950/80 ring-1 ring-white/10 p-3 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg ring-1 ring-white/10 bg-gradient-to-br from-blue-500/20 to-cyan-400/10 animate-floatSlow" style="animation-delay:.08s"></div>
                    <div class="flex-1">
                      <p class="text-sm text-neutral-200 font-geist">Feature Grid</p>
                      <p class="text-[11px] text-neutral-500 font-geist">3x3 cards</p>
                    </div>
                    <button class="inline-flex items-center gap-1 text-[11px] text-blue-200 bg-blue-900/30 rounded-full px-2 py-0.5 ring-1 ring-blue-700 font-geist">
                      Use
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>