Interactive Dashboard Grid with Animated Feature Cards

<section class="min-h-[100svh] grid place-items-center px-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-6xl mx-auto w-full" 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 font-semibold text-white tracking-tight">
          Component Generator
        </h3>
      </div>
      <p class="text-sm text-neutral-400 mt-1">
        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">
                      <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">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"
              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"
              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">
                Preview • PricingCard.tsx
              </div>
              <pre
                class="px-3 py-2 font-mono text-[11px] leading-5 text-neutral-300 whitespace-pre-wrap">&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" 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 font-semibold text-white tracking-tight">
          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">
                    ⚡ +32%
                  </span>
      </div>
      <p class="text-sm text-neutral-400 mt-1">
        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">
                      optimize.ts
                    </span>
        </div>
        <div class="p-3 font-mono text-[11px] leading-5">
          <pre
            class="whitespace-pre-wrap"><span class="text-neutral-500">04</span> <span class="text-neutral-400">// Before</span>
<span class="text-neutral-500">05</span> <span class="px-1 rounded bg-rose-500/10 text-rose-300">- useEffect(() =&gt; fetchData(), [])</span>
<span class="text-neutral-500">06</span> <span class="text-neutral-400">// After</span>
<span class="text-neutral-500">07</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300">+ const data = await api.get('/data')</span>
<span class="text-neutral-500">08</span> <span class="px-1 rounded bg-emerald-500/10 text-emerald-300">+ 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">Analyzed</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-emerald-300">-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" 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">
                    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 font-semibold text-white tracking-tight">
        Theme Control
      </h3>
      <p class="text-sm text-neutral-400 mt-1">
        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">
          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">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">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">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">
                      Rounded
                    </span>
          <span class="text-[11px] px-2 py-1 rounded-full ring-1 ring-white/10 bg-white/5 text-neutral-300">
                      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">
                      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 font-semibold text-white tracking-tight">
        Team Collaboration
      </h3>
      <p class="text-sm text-neutral-400 mt-1">
        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-1544005313-94ddf0286df2?q=80&amp;w=120&amp;auto=format&amp;fit=crop" 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">
                      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">
                      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"
          style="animation-delay:.1s">
          Can we refactor this grid to a reusable
          <span class="text-blue-300">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">
                      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" 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 font-semibold text-white tracking-tight">
        Template Library
      </h3>
      <p class="text-sm text-neutral-400 mt-1">
        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">Pricing Section</p>
            <p class="text-[11px] text-neutral-500">
              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">
                      <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">Feature Grid</p>
            <p class="text-[11px] text-neutral-500">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">
                      Use
                    </button>
        </div>
      </div>
    </div>
  </div>
</div>