Full-Screen Testimonial Hero Section

<section class="isolate overflow-hidden h-screen relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)">
  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6b428a64-0de1-4837-bab2-9729ce2e28c2_3840w.jpg" alt="Atmospheric mountain landscape" class="pointer-events-none absolute inset-0 h-full w-full object-cover" style="">
  <div class="z-10 flex h-full relative items-center" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3) &gt; div:nth-of-type(1)">
    <div class="md:px-8 text-center max-w-4xl mr-auto ml-auto pr-6 pl-6">
      <span class="inline-flex items-center gap-2 text-[11px] uppercase ring-white/10 ring-1 animate-on-scroll text-white/70 tracking-[0.18em] bg-white/5 rounded-full pt-1 pr-3 pb-1 pl-3" style="animation: fadeSlideIn 1.0s ease-out 0.1s both;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="quote" class="lucide lucide-quote h-3.5 w-3.5"><path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" class=""></path></svg>
        Customer Story
      </span>

      <p class="sm:text-4xl md:text-5xl animate-on-scroll text-3xl font-medium text-white tracking-tight font-manrope mt-6 drop-shadow-xl" style="animation: fadeSlideIn 1.0s ease-out 0.2s both;">
        “Axiom gave us end‑to‑end visibility and guardrails—our team shipped reliable AI workflows to production 3× faster.”
      </p>

      <div class="flex animate-on-scroll mt-6 gap-x-3 gap-y-3 items-center justify-center" style="animation: fadeSlideIn 1.0s ease-out 0.3s both;">
        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user h-4.5 w-4.5 text-white/80"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
        </span>
        <div class="text-left">
          <div class="text-sm font-medium text-white/90">Mara Chen</div>
          <div class="text-xs text-white/60">VP, Data Platform at Vertex Labs</div>
        </div>
      </div>
    </div>
  </div><div class="pointer-events-none absolute inset-0 bg-[radial-gradient(65%_60%_at_50%_40%,rgba(0,0,0,0.05),rgba(0,0,0,0.7)),linear-gradient(to_top,rgba(0,0,0,0.85),rgba(0,0,0,0.35))]"></div>

  

  <div class="absolute inset-x-0 bottom-8 z-10">
    <div class="flex flex-wrap animate-on-scroll text-white/55 max-w-5xl mr-auto ml-auto gap-x-10 gap-y-4 items-center justify-center" style="animation: fadeSlideIn 1.0s ease-out 0.4s both;">
      <span class="inline-flex items-center gap-2 text-sm">
        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-3.5 w-3.5"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
        </span>
        PulseOne
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain h-3.5 w-3.5"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
        </span>
        Mindspace
      </span>
      <span class="inline-flex items-center gap-2 text-sm">
        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="waves" class="lucide lucide-waves h-3.5 w-3.5"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
        </span>
        Serenity
      </span>
    </div>
  </div>

  <div class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black to-transparent"></div>
</section>