Gradient Feature Cards Section with On-Scroll Animation

<section class="z-10 xl:py-24 mt-24 pt-12 pb-12 relative w-full max-w-7xl">
  <!-- Header -->
  <div class="max-w-3xl [animation:fadeSlideIn_0.5s_ease-in-out_0.1s_both] animate-on-scroll">
    <div
      class="inline-flex gap-2 border-gradient before:rounded-full bg-white/5 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 backdrop-blur gap-x-2 gap-y-2 items-center">
      <span class="text-[11px] uppercase text-white/60 tracking-wider font-geist">Features</span>
    </div>
    <h2 class="md:text-6xl text-4xl text-white mt-5 drop-shadow-xl font-geist tracking-tighter" style="">
      Discover Wallet’s most powerful features
    </h2>
    <p class="md:text-lg text-base text-white/70 mt-4 font-geist">
      More than a banking app—Wallet is your assistant for faster payments, smarter savings, and complete clarity over
      your money.
    </p>
  </div>

  <!-- Feature cards -->
  <div class="grid grid-cols-1 md:grid-cols-3 lg:gap-6 mt-10 gap-x-4 gap-y-4">
    <!-- Card 1: Security -->
    <div
      class="overflow-hidden border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-in-out_0.2s_both] animate-on-scroll bg-white/5 h-[420px] rounded-2xl relative">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/17785de9-639e-4183-80b5-d7b64fc193cf_800w.jpg" alt="Secure padlock abstract" class="absolute inset-0 w-full h-full object-cover opacity-70">
      <div class="bg-gradient-to-t from-black/70 via-black/30 to-transparent absolute top-0 right-0 bottom-0 left-0">
      </div>
      <div
        class="absolute left-0 top-0 m-4 rounded-full bg-neutral-900/70 backdrop-blur px-3 py-1.5 border-gradient before:rounded-full">
        <span class="text-xs text-white/80 inline-flex items-center gap-1 font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3.5 h-3.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
            Secure by Design
          </span>
      </div>
      <div class="absolute inset-x-0 bottom-0 p-5">
        <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-5 py-4 border-gradient before:rounded-xl">
          <p class="text-xl font-semibold tracking-tight text-white font-geist">Bank‑grade protection</p>
          <p class="mt-1.5 text-sm text-white/70 font-geist">
            End‑to‑end encryption, passkeys, and live fraud detection keep every transfer and card swipe protected.
          </p>
          <div class="mt-3 inline-flex items-center gap-2 text-[11px] text-emerald-300 font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="fingerprint" class="lucide lucide-fingerprint w-3.5 h-3.5">
              <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" class=""></path>
              <path d="M14 13.12c0 2.38 0 6.38-1 8.88" class=""></path>
              <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" class=""></path>
              <path d="M2 12a10 10 0 0 1 18-6" class=""></path>
              <path d="M2 16h.01" class=""></path>
              <path d="M21.8 16c.2-2 .131-5.354 0-6" class=""></path>
              <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" class=""></path>
              <path d="M8.65 22c.21-.66.45-1.32.57-2" class=""></path>
              <path d="M9 6.8a6 6 0 0 1 9 5.2v2" class=""></path>
            </svg>
            Passkey &amp; biometric sign‑in
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2: Transfers -->
    <div
      class="relative overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5 h-[420px] [animation:fadeSlideIn_0.5s_ease-in-out_0.25s_both] animate-on-scroll">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6404686d-555a-42fd-9813-5e65f946ea91_800w.webp" alt="Minimal mountains gradient" class="absolute inset-0 w-full h-full object-cover opacity-75">
      <div class="bg-gradient-to-t from-black/70 via-black/30 to-transparent absolute top-0 right-0 bottom-0 left-0">
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5 absolute right-0 bottom-0 left-0">
        <div class="border-gradient before:rounded-xl bg-neutral-900/70 rounded-xl pt-4 pr-5 pb-4 pl-5 backdrop-blur">
          <p class="text-xl font-semibold tracking-tight text-white font-geist">Seamless money movement</p>
          <p class="mt-1.5 text-sm text-white/70 font-geist">
            Move funds instantly across accounts and pay anyone—local or international—with clear, upfront fees.
          </p>
          <div class="mt-3 flex items-center gap-2">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send-horizontal" class="lucide lucide-send-horizontal w-4 h-4 text-white/90"><path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z" class=""></path><path d="M6 12h16" class=""></path></svg>
              </span>
            <p class="text-xs text-white/70 font-geist">Domestic transfers are fee‑free</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3 Automations -->
    <div
      class="overflow-hidden border-gradient before:rounded-2xl [animation:fadeSlideIn_0.5s_ease-in-out_0.3s_both] animate-on-scroll bg-white/5 h-[420px] rounded-2xl relative">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/90e25be1-60dc-4486-9134-43e1f41d7e97_800w.jpg" alt="3D render abstract gradients" class="absolute inset-0 w-full h-full object-cover opacity-70">
      <div class="bg-gradient-to-t from-black/70 via-black/30 to-transparent absolute top-0 right-0 bottom-0 left-0">
      </div>
      <div
        class="absolute left-0 top-0 m-4 rounded-full bg-neutral-900/70 backdrop-blur px-3 py-1.5 border-gradient before:rounded-full">
        <span class="text-xs text-white/80 inline-flex items-center gap-1 font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow w-3.5 h-3.5"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
            Automations
          </span>
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5 absolute right-0 bottom-0 left-0">
        <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-5 py-4 border-gradient before:rounded-xl">
          <p class="text-xl font-semibold tracking-tight text-white font-geist">Your money, on autopilot</p>
          <p class="mt-1.5 text-sm text-white/70 font-geist">
            Build rules to round up purchases, auto‑save toward goals, and schedule bills—no spreadsheets required.
          </p>
          <div class="mt-3 grid grid-cols-3 gap-2">
            <div class="rounded-lg bg-white/5 px-3 py-2 text-center border-gradient before:rounded-lg">
              <p class="text-sm font-semibold text-white tracking-tight font-geist">+10%</p>
              <p class="text-[11px] text-white/60 font-geist">Saved</p>
            </div>
            <div class="rounded-lg bg-white/5 px-3 py-2 text-center border-gradient before:rounded-lg">
              <p class="text-sm font-semibold text-white tracking-tight font-geist">0 overd.</p>
              <p class="text-[11px] text-white/60 font-geist">Fees</p>
            </div>
            <div class="rounded-lg bg-white/5 px-3 py-2 text-center border-gradient before:rounded-lg">
              <p class="text-sm font-semibold text-white tracking-tight font-geist">24/7</p>
              <p class="text-[11px] text-white/60 font-geist">Running</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CTA -->
  <div class="mt-8 [animation:fadeSlideIn_0.5s_ease-in-out_0.35s_both] animate-on-scroll">
    <a href="#"
      class="inline-flex items-center gap-2 border-gradient before:rounded-full hover:bg-white/10 transition text-sm font-medium text-white/80 bg-white/5 rounded-full px-4 py-2 font-geist">
      Explore all features
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
        class="lucide lucide-arrow-right w-4 h-4 text-white/70">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </a>
  </div>
  </div>
</section>