Finance SaaS Hero Section with Email Signup

<main class="sm:px-8 sm:mt-24 max-w-7xl mt-16 mr-auto ml-auto pr-4 pl-4">
  <div class="grid grid-cols-1 lg:grid-cols-12 lg:gap-16 gap-x-10 gap-y-10 items-center">
    <!-- Left: Text -->
    <div class="lg:col-span-5">


      <h1
        class="text-[clamp(2rem,6vw,4rem)] leading-[0.95] text-white [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] font-light tracking-tight font-geist">
        Take control of your finances</h1>
      <p class="text-neutral-400 leading-8 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] text-lg font-geist mt-6">
        Moneo helps you track spending, set
        savings
        goals, and make smarter financial decisions with real-time insights and personalized recommendations.</p>

      <form action="#" class="[animation:fadeSlideIn_0.8s_ease-out_0.4s_both] w-full max-w-2xl">
        <label for="moneo-email" class="sr-only font-geist">Work email</label>

        <div
          class="group flex flex-row ring-1 rounded-full p-2 relative shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_rgba(0,0,0,0.35)] backdrop-blur-xl gap-3 items-center mt-6 bg-white/5 ring-white/15">
          <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full blur-md opacity-30 bg-white/5"></span>

          <input type="email" inputmode="email" autocomplete="email" placeholder="What's your work email?" class="flex-1 placeholder:text-white/60 outline-none text-base tracking-tight bg-transparent py-3 px-4 relative z-10 text-white/90" required="" id="moneo-email">

          <!-- Desktop: Full button with text -->
          <a href="#"
            class="hidden md:inline-flex items-center justify-center gap-2 select-none ring-1 rounded-full px-6 py-3 backdrop-blur-xl transition-all duration-300 shadow-[0_8px_25px_rgba(0,0,0,0.4)] group relative overflow-hidden shrink-0 text-white/90 bg-white/5 hover:bg-white/10 ring-white/20 hover:ring-cyan-400/40"
            style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -10px 25px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.35);">
            <!-- Inner gradient shine -->
            <span aria-hidden="true" class="absolute inset-px rounded-full bg-gradient-to-b from-white/[0.18] via-white/[0.08] to-white/[0.05] pointer-events-none"></span>

            <!-- Highlight glow -->
            <span aria-hidden="true" class="absolute left-1 right-1 top-1 h-1/2 rounded-full bg-gradient-to-b to-transparent pointer-events-none from-white/70"></span>

            <!-- Animated cyan ring -->
            <span aria-hidden="true" class="absolute inset-0 rounded-full ring-2 group-hover:ring-cyan-400/40 blur-sm transition-all duration-500 ring-cyan-400/0"></span>

            <!-- Text -->
            <span class="relative z-10 text-sm font-medium tracking-tight font-geist">Get Started</span>

            <!-- Arrow Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 w-4 h-4" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>

          <!-- Mobile: Icon-only button -->
          <a href="#"
            class="md:hidden relative inline-flex items-center justify-center select-none ring-1 rounded-full w-12 h-12 backdrop-blur-xl transition-all duration-300 shadow-[0_8px_25px_rgba(0,0,0,0.4)] group overflow-hidden shrink-0 text-white/90 bg-white/5 hover:bg-white/10 ring-white/20 hover:ring-cyan-400/40"
            style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -10px 25px rgba(0,0,0,0.3), 0 8px 25px rgba(0,0,0,0.35);">
            <!-- Inner gradient shine -->
            <span aria-hidden="true" class="absolute inset-px rounded-full bg-gradient-to-b from-white/[0.18] via-white/[0.08] to-white/[0.05] pointer-events-none"></span>

            <!-- Highlight glow -->
            <span aria-hidden="true" class="absolute left-1 right-1 top-1 h-1/2 rounded-full bg-gradient-to-b to-transparent pointer-events-none from-white/70"></span>

            <!-- Animated cyan ring -->
            <span aria-hidden="true" class="absolute inset-0 rounded-full ring-2 group-hover:ring-cyan-400/40 blur-sm transition-all duration-500 ring-cyan-400/0"></span>

            <!-- Arrow Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 w-5 h-5" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>
      </form>

      <div class="flex [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] mt-10 gap-x-8 gap-y-8 items-center" style="">
        <div class="gap-x-8 gap-y-8">
          <div class="text-2xl font-light text-white tracking-tight font-geist">50K+</div>
          <div class="text-sm dark:text-neutral-400 font-geist text-neutral-600">Active users</div>
        </div>
        <div class="w-px bg-neutral-800 h-12"></div>
        <div class="">
          <div class="text-2xl font-light text-white tracking-tight font-geist">$2.4M</div>
          <div class="text-sm dark:text-neutral-400 font-geist text-neutral-600">Money saved</div>
        </div>
        <div class="w-px bg-neutral-800 h-12"></div>

        <div class="">
          <div class="text-2xl font-light text-white tracking-tight font-geist">4.8★</div>
          <div class="text-sm dark:text-neutral-400 font-geist text-neutral-600">User rating</div>
        </div>
      </div>
    </div>

    <!-- Right: Credit Cards Stack -->
    <div
      class="lg:col-span-7 grid [grid-template-areas:'stack'] place-items-center [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] opacity-100">

      <!-- Card 1 - Emerald Gradient -->
      <div
        class="relative w-[28rem] h-52 rounded-3xl transition-all duration-700 [grid-area:stack] hover:-translate-y-10 select-none backdrop-blur-2xl shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
        style="background: linear-gradient(135deg, rgba(16,185,129,0.45) 0%, rgba(5,150,105,0.35) 100%);">
        <div class="absolute inset-0 rounded-3xl ring-1 pointer-events-none ring-white/30"></div>
        <div class="absolute inset-0 rounded-3xl pointer-events-none"
          style="background: radial-gradient(80% 90% at 30% 20%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 50%, transparent 80%);">
        </div>

        <div class="relative h-full flex flex-col justify-between p-7">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">

              <span class="text-base font-semibold tracking-tight font-geist text-white/95">Moneo Card</span>
            </div>
            <svg width="38" height="24" viewBox="0 0 28 18" class="opacity-80">
              <circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.5)" class=""></circle>
              <circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.3)" class=""></circle>
            </svg>
          </div>

          <div class="">
            <div class="text-2xl mb-5 font-geist font-light tracking-tight text-white" style="">
              4521 •••• •••• 8934
            </div>

            <div class="flex items-end justify-between">
              <div class="">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Card Holder</div>
                <div class="text-base font-medium font-geist text-white/95">Alex Rivera</div>
              </div>
              <div class="text-right">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Expires</div>
                <div class="text-base font-medium font-geist text-white/95">12/28</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 - Cyan Gradient -->
      <div
        class="relative w-[28rem] h-52 rounded-3xl transition-all duration-700 [grid-area:stack] translate-x-20 translate-y-12 hover:-translate-y-1 select-none backdrop-blur-2xl shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
        style="background: linear-gradient(135deg, rgba(34,211,238,0.45) 0%, rgba(6,182,212,0.35) 100%);">
        <div class="absolute inset-0 rounded-3xl ring-1 pointer-events-none ring-white/30"></div>
        <div class="absolute inset-0 rounded-3xl pointer-events-none"
          style="background: radial-gradient(85% 95% at 50% 30%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 60%, transparent 85%);">
        </div>

        <div class="relative h-full flex flex-col justify-between p-7">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">

              <span class="text-base font-semibold tracking-tight font-geist text-white/95">Moneo Pro</span>
            </div>
            <svg width="38" height="24" viewBox="0 0 28 18" class="opacity-80">
              <circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.5)" class=""></circle>
              <circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.3)" class=""></circle>
            </svg>
          </div>

          <div class="">
            <div class="text-2xl mb-5 font-geist font-light tracking-tight text-white" style="">
              5249 •••• •••• 2761
            </div>

            <div class="flex items-end justify-between">
              <div class="">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Card Holder</div>
                <div class="text-base font-medium font-geist text-white/95">Jordan Lee</div>
              </div>
              <div class="text-right">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Expires</div>
                <div class="text-base font-medium font-geist text-white/95">08/29</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 - Lime Gradient -->
      <div
        class="relative w-[28rem] h-52 rounded-3xl transition-all duration-700 [grid-area:stack] translate-x-40 translate-y-24 hover:translate-y-12 select-none backdrop-blur-2xl shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
        style="background: linear-gradient(135deg, rgba(163,230,53,0.45) 0%, rgba(132,204,22,0.35) 100%);">
        <div class="absolute inset-0 rounded-3xl ring-1 pointer-events-none ring-white/30"></div>
        <div class="absolute inset-0 rounded-3xl pointer-events-none"
          style="background: radial-gradient(90% 100% at 70% 25%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 55%, transparent 80%);">
        </div>

        <div class="relative h-full flex flex-col justify-between p-7">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">

              <span class="text-base font-semibold tracking-tight font-geist text-white/95">Moneo Plus</span>
            </div>
            <svg width="38" height="24" viewBox="0 0 28 18" class="opacity-80">
              <circle cx="10" cy="9" r="7" fill="rgba(255,255,255,0.5)" class=""></circle>
              <circle cx="18" cy="9" r="7" fill="rgba(255,255,255,0.3)" class=""></circle>
            </svg>
          </div>

          <div class="">
            <div class="text-2xl mb-5 font-geist font-light tracking-tight text-white" style="">
              6019 •••• •••• 4582
            </div>

            <div class="flex items-end justify-between">
              <div class="">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Card Holder</div>
                <div class="text-base font-medium font-geist text-white/95">Taylor Chen</div>
              </div>
              <div class="text-right">
                <div class="text-[11px] uppercase tracking-wider font-geist text-white/60">Expires</div>
                <div class="text-base font-medium font-geist text-white/95">03/27</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>