Fintech Motion Hero Slide with Background Card

<section class="snap-center min-h-screen flex bg-zinc-100 w-full h-screen pt-16 pb-4 items-center justify-center"
  id="slide-1">
  <!-- Card Container: Full on mobile, fixed aspect on desktop -->
  <div
    class="md:max-w-md md:aspect-[3/4] md:h-auto overflow-hidden flex flex-col md:shadow-2xl md:shadow-zinc-200/50 bg-zinc-50 w-full h-full bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7ef34397-c7cf-417e-aa9f-e279bac8c59d_1600w.webp?w=800&amp;q=80)] bg-cover bg-center pt-8 pr-8 pb-8 pl-8 relative">

    <!-- Ambience -->
    <div class="absolute inset-0 vertical-lines opacity-50 pointer-events-none"></div>
    <div
      class="blur-[100px] bg-orange-500/10 mix-blend-multiply w-[80%] h-[80%] rounded-full absolute top-[-25%] right-[-25%] pointer-events-none">
    </div>
    <div class="grainy"></div>

    <!-- Header -->
    <div class="animate-item delay-1 flex justify-between items-center mb-8 relative z-10">
      <div class="flex items-center gap-2">
        <div class="w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.4)]"></div>
        <span class="text-[10px] font-semibold tracking-[0.2em] text-zinc-500 uppercase font-display">FF_LAB_1.0</span>
      </div>
      <span class="text-[10px] font-mono text-zinc-400">01 // 08</span>
    </div>

    <!-- Content -->
    <div class="flex-1 flex flex-col z-10 relative justify-center">
      <div
        class="animate-item delay-2 inline-flex items-center gap-2 border rounded-full pl-1 pr-3 py-1 w-fit mb-8 backdrop-blur-md border-zinc-200/50 bg-zinc-50/50">
        <div class="w-5 h-5 rounded-full bg-zinc-900 text-white flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="10" height="10"
            viewBox="0 0 24 24" data-icon="lucide:sparkles" data-width="10">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <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.594zM20 2v4m2-2h-4">
              </path>
              <circle cx="4" cy="20" r="2"></circle>
            </g>
          </svg>
        </div>
        <span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-600">Motion System</span>
      </div>

      <h1
        class="animate-item delay-3 leading-[0.9] text-6xl font-medium text-gray-950 tracking-tighter font-space-grotesk mb-6">
        Future
        <span class="font-medium text-zinc-400 tracking-tighter font-space-grotesk">Finance.</span>
      </h1>

      <p class="animate-item delay-4 text-sm leading-relaxed text-zinc-500 border-l border-orange-500/30 pl-4">
        Exploring the interaction patterns of next-gen fintech interfaces with fluid motion.
      </p>
    </div>

    <!-- Footer -->
    <div class="animate-item delay-5 pt-8 border-t border-zinc-100 flex items-center justify-between relative z-10">
      <div class="flex items-center gap-2">
        <span class="w-1 h-1 rounded-full bg-zinc-400"></span>
        <span class="text-[10px] text-zinc-400 tracking-wider font-mono">SCROLL TO EXPLORE</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24"
        data-icon="lucide:arrow-down" data-width="16">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M12 5v14m7-7l-7 7l-7-7"></path>
      </svg>
    </div>
  </div>
</section>