Banking Hero Section with CTAs, Metrics & Image Cards

<section class="z-10 xl:py-24 mt-24 pt-12 pb-12 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(3) &gt; section:nth-of-type(2)">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="grid gap-10 lg:grid-cols-12 items-start">
      <!-- Left copy -->
      <div class="lg:col-span-5">
        <div class="inline-flex items-center gap-2 rounded-full border-gradient before:rounded-full bg-white/5 px-3 py-1.5 backdrop-blur [animation:fadeSlideIn_0.5s_ease-in-out_0.1s_both] animate-on-scroll">
          <span class="text-xs text-white/70 font-geist">Empowering customers in 30+ countries</span>
          <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-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="arrow-right" class="lucide lucide-arrow-right h-3.5 w-3.5 text-white/60"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </span>
        </div>

        <h2 class="mt-5 text-4xl sm:text-xl md:text-6xl text-white drop-shadow-xl [animation:fadeSlideIn_0.5s_ease-in-out_0.2s_both] animate-on-scroll font-geist tracking-tighter" style="">
          We turn everyday banking into effortless momentum
        </h2>

        <p class="md:text-lg [animation:fadeSlideIn_0.5s_ease-in-out_0.3s_both] animate-on-scroll text-base text-white/70 max-w-xl mt-6 font-geist">
          Automate savings, analyze spending, and move money instantly—securely and intelligently. Wallet gives you the clarity and control to grow what matters.
        </p>

        <div class="mt-7 flex flex-wrap items-center gap-3 [animation:fadeSlideIn_0.5s_ease-in-out_0.4s_both] animate-on-scroll">
          <a href="#" class="inline-flex items-center gap-2 border-gradient before:rounded-full hover:bg-orange-400/90 transition text-sm font-semibold text-black bg-orange-300 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] font-geist">
            Contact Us
            <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="message-circle" class="lucide lucide-message-circle h-4 w-4"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
          </a>
          <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 pt-2 pr-4 pb-2 pl-4 font-geist">
            Why Wallet
            <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 text-white/70"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </a>
        </div>

        <!-- Metrics -->
        <div class="mt-10 grid grid-cols-2 gap-6 [animation:fadeSlideIn_0.5s_ease-in-out_0.5s_both] animate-on-scroll">
          <div class="flex gap-3 gap-x-3 gap-y-3 items-start">
            <div class="flex border-gradient before:rounded-lg bg-white/5 w-9 h-9 rounded-lg items-center justify-center">
  <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 w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(203, 213, 225);"><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>
</div>
            <div class="">
              <p class="text-2xl sm:text-3xl text-white font-geist tracking-tighter" style="">12M+</p>
              <p class="text-xs text-white/60 font-geist">Transfers processed monthly</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <div class="flex border-gradient before:rounded-lg bg-white/5 w-9 h-9 rounded-lg items-center justify-center">
              <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="smile" class="lucide lucide-smile w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(203, 213, 225);"><circle cx="12" cy="12" r="10" class=""></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" class=""></path><line x1="9" x2="9.01" y1="9" y2="9" class=""></line><line x1="15" x2="15.01" y1="9" y2="9" class=""></line></svg>
            </div>
            <div class="">
              <p class="text-2xl sm:text-3xl text-white font-geist tracking-tighter" style="">98%</p>
              <p class="text-xs text-white/60 font-geist">Satisfaction rate</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right visual grid -->
      <div class="lg:col-span-7">
        <div class="grid grid-cols-2 gap-4 [animation:fadeSlideIn_0.5s_ease-in-out_0.55s_both] animate-on-scroll">
          <!-- Card 1 -->
          <div class="relative h-56 md:h-72 overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5 backdrop-blur">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6d7852ab-5a08-4da9-b5b5-554b75eb2462_800w.webp" alt="Team collaborating on laptop" class="opacity-80 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
 <div class="absolute inset-x-0 bottom-0 p-4">
              <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-4 py-3 border-gradient before:rounded-xl">
                <p class="text-sm font-semibold text-white font-geist">Partnership Over Projects</p>
                <p class="mt-1 text-xs text-white/70 font-geist">We grow balances, not just complete tasks.</p>
              </div>
            </div>
          </div>
          <!-- Card 2 -->
          <div class="relative h-56 md:h-72 overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2c958486-bfef-4917-862a-7e3de9f9e62c_800w.webp" altminimal="" desk="" with="" phone="" and="" card="" class="opacity-80 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
            <div class="absolute left-0 top-0 m-4 rounded-full bg-neutral-900/70 backdrop-blur px-3 py-1.5">
              <span class="text-xs text-white/80 inline-flex items-center gap-1 font-geist">
                <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="sparkles" class="lucide lucide-sparkles w-[14px] h-[24px]" data-icon-replaced="true" style="color: rgb(255, 255, 255); width: 14px; height: 24px;"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
                New
              </span>
            </div>
            <div class="absolute inset-x-0 bottom-0 p-4">
              <div class="rounded-xl bg-neutral-900/70 backdrop-blur px-4 py-3 border-gradient before:rounded-xl">
                <p class="text-sm font-semibold text-white font-geist">Data‑Driven Decisions</p>
                <p class="mt-1 text-xs text-white/70 font-geist">Every move is backed by insight.</p>
              </div>
            </div>
          </div>
          <!-- Card 3 -->
          <div class="relative col-span-2 h-48 md:h-56 overflow-hidden rounded-2xl border-gradient before:rounded-2xl bg-white/5">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/37527329-8639-4134-aa32-d84f57b80390_1600w.webp" alt="Calm mountains minimal" class="opacity-70 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0">
            <div class="absolute inset-x-0 bottom-0 p-4">
              <div class="flex border-gradient before:rounded-xl bg-neutral-900/70 rounded-xl pt-3 pr-4 pb-3 pl-4 backdrop-blur items-center justify-between">
                <div>
                  <p class="text-sm font-semibold text-white font-geist">Instant Transfers</p>
                  <p class="mt-1 text-xs text-white/70 font-geist">Move money globally in seconds.</p>
                </div>
                <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="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>