AI Product Hero Section with Bento Feature Grid

<section class="sm:px-6 lg:px-8 md:pb-24 lg:pt-24 max-w-7xl mr-auto ml-auto pt-8 pr-4 pb-16 pl-4">
    <!-- Pill -->
    <div class="mx-auto w-fit mb-6 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate">
      <div class="inline-flex items-center gap-2 rounded-full border-gradient bg-white/5 px-3 py-1.5 text-xs text-neutral-300" style="border-radius: 9999px;">
        <span class="inline-flex items-center justify-center rounded-full bg-blue-400/20 text-blue-300 px-2 py-0.5">
          New
        </span>
        <span class="font-medium">Simple pricing</span>
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="solar:star-fall-minimalistic-2-bold-duotone" data-width="14" data-height="14" style="color: rgb(96, 165, 250);" class=""><path fill="currentColor" d="M11.811 6.727C12.825 4.909 13.331 4 14.09 4c.757 0 1.264.909 2.277 2.727l.262.47c.288.517.432.775.657.945c.224.17.504.234 1.063.36l.51.116c1.967.445 2.95.667 3.185 1.42s-.437 1.537-1.778 3.106l-.347.406c-.381.445-.572.668-.658.944s-.057.573 0 1.168l.053.541c.203 2.094.305 3.14-.308 3.605s-1.534.041-3.377-.807l-.476-.22c-.524-.24-.786-.361-1.063-.361c-.278 0-.54.12-1.063.361l-.477.22c-1.842.848-2.763 1.272-3.376.807s-.511-1.511-.309-3.605l.053-.541c.057-.595.086-.892 0-1.168s-.276-.498-.657-.944l-.347-.406C6.57 11.575 5.9 10.79 6.135 10.038s1.218-.975 3.185-1.42l.51-.116c.559-.126.838-.19 1.063-.36s.368-.428.656-.945z" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M8.745 5.202c-1.981-.57-4.107-.269-6.158.932l-.208.122a.75.75 0 0 1-.758-1.294l.208-.122C4.19 3.457 6.737 3.063 9.161 3.76l.208.06a.75.75 0 0 1-.416 1.441zM4.836 9.936a.75.75 0 0 1-.683.811c-.154.014-.27.02-.37.027a3 3 0 0 0-.444.048c-.196.038-.452.117-.915.349a.75.75 0 1 1-.67-1.342c.537-.268.926-.408 1.302-.48c.247-.048.502-.064.731-.08l.238-.016a.75.75 0 0 1 .811.683m1.082 5.92a3.99 3.99 0 0 0-3.365.733a.75.75 0 1 1-.928-1.178a5.49 5.49 0 0 1 4.635-1.015a.75.75 0 0 1-.342 1.46" clip-rule="evenodd" opacity=".5" class=""></path></svg>
      </div>
    </div>

    <!-- Heading -->
    <div class="[animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-center animate">
      <h1 class="mx-auto max-w-4xl text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tighter">
        Powering the next wave of AI‑driven products
      </h1>
      <p class="mx-auto mt-5 max-w-2xl text-base sm:text-lg text-neutral-300">
        Fluxora helps ambitious teams prototype, launch, and scale with reliable infrastructure and human‑centered design.
      </p>

      <!-- CTAs -->
      <div class="flex flex-col sm:flex-row gap-3 mt-8 items-center justify-center">
        <button class="inline-flex items-center gap-2 rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-semibold shadow-[0_1px_0_0_rgba(255,255,255,0.4)_inset,0_1px_2px_rgba(0,0,0,0.2)] hover:-translate-y-0.5 transition-all" style="border-radius: 9999px;">
          Start Free
        </button>
        
        <div class="inline-block group relative">
          <button class="inline-flex gap-2 border-gradient hover:text-white transition-all hover:-translate-y-0.5 text-sm font-medium text-white/80 bg-white/5 rounded-full pt-3 pr-5 pb-3 pl-5 backdrop-blur-xl gap-x-2 gap-y-2 items-center" style="border-radius: 9999px">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:play-circle-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118" class=""></path></svg>
            Watch demo
          </button>
          <span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 rounded-full opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-100" style="background: radial-gradient(60% 100% at 50% 50%, rgba(59,130,246,.55), rgba(59,130,246,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
        </div>
      </div>
    </div>

    <!-- Bento Grid -->
    <div class="grid grid-cols-1 auto-rows-[200px] md:mt-16 md:grid-cols-6 md:gap-6 lg:grid-cols-12 lg:mt-32 overflow-hidden h-[800px] mt-16 gap-4" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 60%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 60%, transparent);">
      
      <!-- Team Image Card -->
      <div class="relative overflow-hidden rounded-3xl border-gradient md:col-span-3 lg:col-span-6 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <img class="h-full w-full object-cover opacity-90" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/357cb3d1-9f65-4810-884b-f0072a65193d_1600w.webp" alt="Product team">
        <div class="absolute inset-0 bg-gradient-to-t from-neutral-950/60 to-transparent"></div>
        <div class="absolute left-4 top-4">
          <span class="inline-flex items-center gap-1 text-[11px] border-gradient text-slate-300 bg-white/5 rounded-full px-2.5 py-1 backdrop-blur" style="border-radius: 9999px;">
            Product Team
          </span>
        </div>
        <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <div class="h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden">
              <img class="h-full w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/61cab6ed-0aeb-4671-824c-5b8a0cf236ca_320w.webp" alt="avatar">
            </div>
            <div class="h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden -ml-2">
              <img class="h-full w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f999a94-8031-4c3e-b64e-836c1b4f5be0_320w.webp" alt="avatar">
            </div>
            <div class="h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden -ml-2">
              <img class="w-full h-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/08b00610-61b2-45b5-b8fc-e9305c15b460_320w.webp" alt="avatar">
            </div>
          </div>
          <span class="text-xs text-neutral-200 font-medium">Design sync at 10:00</span>
        </div>
      </div>

      <!-- Stat Card -->
      <div class="rounded-3xl bg-white text-neutral-900 p-6 border-gradient md:col-span-3 lg:col-span-3 [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.95) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.95) 100%); border-radius: 24px;">
        <p class="text-4xl tracking-tighter">140+</p>
        <p class="mt-2 text-sm text-neutral-600 font-medium">Active customers</p>
        <div class="mt-4 flex items-center gap-2 text-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:graph-up-bold-duotone" data-width="16" data-height="16" class=""><path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5" class=""></path><path fill="currentColor" d="M14.5 10.75a.75.75 0 0 1 0-1.5H17a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-.69l-2.013 2.013a1.75 1.75 0 0 1-2.474 0l-1.586-1.586a.25.25 0 0 0-.354 0L7.53 14.53a.75.75 0 0 1-1.06-1.06l2.293-2.293a1.75 1.75 0 0 1 2.474 0l1.586 1.586a.25.25 0 0 0 .354 0l2.012-2.013z" class=""></path></svg>
          <span class="text-xs font-medium">Q4 growth 23%</span>
        </div>
      </div>

      <!-- Code Card -->
      <article class="overflow-hidden border-gradient rounded-3xl relative md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <div class="h-full p-6 relative flex flex-col">
          <div class="relative mx-auto h-full w-full flex items-center justify-center flex-1">
            <div class="scale-[0.75] w-full">
              <div class="backdrop-blur-[2px] bg-white/[0.03] border-gradient rounded-2xl">
                <div class="px-4 py-3 border-b border-white/10 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="solar:code-bold-duotone" data-width="16" data-height="16" style="color: rgba(255,255,255,0.7);" class=""><path fill="currentColor" d="M16.443 7.328a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.663 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 1 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.817c0-.196-.072-.425-.402-.818c-.344-.409-.875-.889-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 0 0-1.004-1.115L4.761 8.836c-.737.663-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 1 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.817c0-.196.072-.425.402-.818c.344-.409.875-.889 1.663-1.598z" class=""></path><path fill="currentColor" d="M14.182 4.276a.75.75 0 0 1 .53.918l-3.974 14.83a.75.75 0 1 1-1.449-.389l3.974-14.83a.75.75 0 0 1 .919-.53" opacity=".5" class=""></path></svg>
                  <span class="text-[11px] font-medium text-white/80">config.tsx</span>
                  <span class="ml-auto text-[10px] text-white/50">modified</span>
                </div>
                <pre class="text-[11px] leading-relaxed text-white/80 p-4">export const appConfig = {
  framework: "next",
  runtime: "edge",
  regions: ["sfo1", "iad1"],
  env: {
    DATABASE_URL: process.env.DB,
    REDIS_TOKEN: process.env.CACHE
  }
}

deploy(appConfig)</pre>
              </div>
            </div>
          </div>
          <div class="relative pt-2">
            <h3 class="text-lg font-semibold tracking-tight text-white/95">Deploy instantly</h3>
            <p class="mt-2 text-sm text-white/70">Push to production in seconds with zero configuration.</p>
          </div>
        </div>
      </article>

      <!-- Chart Card -->
      <div class="rounded-3xl border-gradient p-6 md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <h3 class="text-base font-semibold tracking-tight">Delivery success</h3>
        <p class="mt-1 text-sm text-neutral-300">Last 30 days</p>
        <div class="mt-4 rounded-xl bg-black/30 p-3 border-gradient">
          <div class="relative w-full h-28">
            <canvas id="successChart" width="428" height="224" style="display: block; box-sizing: border-box; height: 112px; width: 214px;" class=""></canvas>
          </div>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="flex items-center gap-2 text-blue-400">
            <span class="h-2 w-2 rounded-full bg-blue-400"></span>
            <span class="text-sm font-semibold tracking-tight">97.8%</span>
          </div>
          <span class="text-xs text-neutral-300 font-medium">SLA met</span>
        </div>
      </div>

      <!-- Global Card -->
      <div class="relative overflow-hidden rounded-3xl border-gradient md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <div class="p-6">
          <p class="text-3xl tracking-tighter">35+</p>
          <p class="mt-1 text-sm text-neutral-300">Global launches this year</p>
          <div class="mt-4 flex flex-wrap gap-2">
            <span class="inline-flex items-center rounded-full bg-blue-400/15 text-blue-300 px-2.5 py-1 text-xs font-medium border-gradient" style="border-radius: 9999px;">Japan</span>
            <span class="inline-flex items-center rounded-full bg-blue-400/15 text-blue-300 px-2.5 py-1 text-xs font-medium border-gradient" style="border-radius: 9999px;">Canada</span>
            <span class="inline-flex items-center rounded-full bg-blue-400/15 text-blue-300 px-2.5 py-1 text-xs font-medium border-gradient" style="border-radius: 9999px;">Portugal</span>
          </div>
        </div>
        <div class="px-6 pb-6">
          <div class="overflow-hidden rounded-2xl border-gradient">
            <img class="h-40 w-full object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d25a1767-0ea8-4aac-b981-6afd67dc79a6_800w.webp" alt="Globe">
          </div>
        </div>
      </div>

      <!-- AI Card -->
      <article class="relative overflow-hidden hover:bg-white/[0.08] transition-all group rounded-3xl border-gradient md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.8s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <div class="flex p-6 items-center justify-between">
          <h4 class="text-base font-semibold tracking-tight">Custom AI Agents</h4>
          <span class="inline-flex items-center gap-1 text-[11px] border-gradient text-slate-300 bg-white/5 rounded-full px-2.5 py-1" style="border-radius: 9999px;">
            AI-Powered
          </span>
        </div>
        <div class="flex-1 flex p-6 pt-0 items-center">
          <div class="relative w-full">
            <div class="hover:bg-black/50 transition-all bg-black/60 border-gradient rounded-xl p-3 backdrop-blur">
              <div class="flex gap-1 mb-2 items-center">
                <span class="h-2.5 w-2.5 rounded-full bg-rose-400/80"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-amber-400/80"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-blue-400/80"></span>
              </div>
              <div class="overflow-x-auto">
                <pre class="text-[10px] leading-tight min-w-max text-slate-300"><code># AI Agent
class BusinessAgent:
  def __init__(self):
    self.mode = "adaptive"

  def analyze(self):
    return insights
</code></pre>
              </div>
            </div>
          </div>
        </div>
      </article>

      <!-- Orbit Card -->
      <section class="group relative overflow-hidden border-gradient rounded-3xl md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_0.9s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <div class="relative h-full overflow-hidden flex flex-col">
          <div class="flex-1 relative overflow-hidden">
            <div class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <div class="absolute left-1/2 top-1/2 h-[240px] w-[240px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse" style="animation-delay:0s;"></div>
              <div class="absolute left-1/2 top-1/2 h-[200px] w-[200px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse" style="animation-delay:.6s;"></div>
              <div class="absolute left-1/2 top-1/2 h-[280px] w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/10 animate-pulse" style="animation-delay:1.2s;"></div>
            </div>
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
              <div class="relative flex h-28 w-28 items-center justify-center rounded-full border-gradient bg-neutral-900/70 backdrop-blur-md transition-transform duration-300 group-hover:scale-105" style="border-radius: 9999px;">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="48" height="48" viewBox="0 0 24 24" data-icon="solar:widget-6-bold-duotone" data-width="48" data-height="48" class=""><path fill="currentColor" d="M2 17.5A4.5 4.5 0 0 1 6.5 13h2.7c.63 0 .945 0 1.186.123c.211.107.384.28.491.491c.123.24.123.556.123 1.186v2.7a4.5 4.5 0 1 1-9 0m11-11a4.5 4.5 0 1 1 4.5 4.5h-3.214c-.15 0-.224 0-.287-.007a1.125 1.125 0 0 1-.992-.992C13 9.938 13 9.864 13 9.714z" class=""></path><path fill="currentColor" d="M2 6.5a4.5 4.5 0 0 1 9 0v3c0 .349 0 .523-.038.666a1.13 1.13 0 0 1-.796.796C10.023 11 9.85 11 9.5 11h-3A4.5 4.5 0 0 1 2 6.5m11 8c0-.349 0-.523.038-.666c.104-.388.408-.692.796-.796c.143-.038.317-.038.666-.038h3a4.5 4.5 0 1 1-4.5 4.5z" opacity=".5" class=""></path></svg>
              </div>
            </div>
          </div>
          <div class="relative border-t border-white/10">
            <div class="p-6">
              <h3 class="text-xl tracking-tight font-semibold text-slate-100">Adaptive Automations</h3>
              <p class="leading-relaxed text-slate-400 mt-3 text-sm">Event‑driven flows across your stack.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Testimonial Card -->
      <div class="flex flex-col rounded-3xl border-gradient p-6 backdrop-blur-md transition md:col-span-3 lg:col-span-3 md:row-span-2 [animation:fadeSlideIn_0.8s_ease-out_1s_both] animate-on-scroll animate" style="background:linear-gradient(225deg,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.0) 100%); border-radius: 24px;">
        <div class="mb-4 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/67ea0bb9-359c-4e9a-a90d-b44f079e8cf7_320w.webp" alt="" class="h-10 w-10 rounded-full object-cover">
            <div class="">
              <p class="text-xs font-semibold text-white">Serena Cardenas</p>
              <p class="text-[10px] text-white/60">Design Ops</p>
            </div>
          </div>
        </div>
        <p class="leading-snug text-sm font-medium mb-4 text-white">
          "Animations feel organic, copy is on point, and accessibility is baked in from day one."
        </p>
        <div class="mb-4 rounded-lg border-gradient p-3">
          <p class="text-xs text-white/80 mb-2 font-medium">Key Results:</p>
          <ul class="text-xs text-white/70 space-y-1">
            <li>• 127% user engagement</li>
            <li>• 43% fewer tickets</li>
            <li>• 98% compliance</li>
          </ul>
        </div>
      </div>

    </div>
  </section>