Animated 3-Card Marketing Grid Section

<section class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full max-w-6xl">
  <!-- Card A -->
  <div
    class="flex flex-col min-h-[420px] lg:col-span-1 animate-scale-fade delay-900 text-white bg-slate-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6edaf09b-bdf5-452f-a440-01295e678315_800w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-xl justify-between">
    <div class="space-y-6">
      <div class="flex items-center justify-between animate-fade-slide delay-1000">
        <span class="text-sm opacity-70 font-sans" style="">Platform</span>
        <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="plus"
          class="lucide lucide-plus w-5 h-5">
          <path d="M5 12h14" class=""></path>
          <path d="M12 5v14" class=""></path>
        </svg>
      </div>
      <h2 class="display text-4xl leading-tight uppercase font-manrope font-medium animate-fade-blur delay-1100"
        style="">Transform Your Data Pipeline</h2>
    </div>
    <div class="flex items-center gap-4 pt-6 animate-fade-slide delay-1200">
      <button class="p-3 rounded-full bg-orange-500 hover:bg-orange-600 transition-colors"><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="zap" class="lucide lucide-zap w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg></button>
      <button class="p-3 rounded-full bg-white text-slate-900 hover:bg-slate-200 transition-colors"><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-4 h-4"><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></button>
      <button class="p-3 rounded-full bg-lime-500 hover:bg-lime-600 transition-colors"><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="trending-up" class="lucide lucide-trending-up w-4 h-4"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg></button>
    </div>
  </div>

  <!-- Card B -->
  <div
    class="lg:col-span-1 flex flex-col min-h-[420px] relative overflow-hidden animate-scale-fade delay-1000 text-white bg-indigo-600 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b8ba6eb9-a1b0-449f-95b8-463faad7dc74_800w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-xl justify-between">
    <div class="space-y-6 z-10">
      <p class="text-sm opacity-80 font-sans animate-fade-slide delay-1100" style="">Real-time&nbsp;processing</p>
      <h2
        class="display text-3xl sm:text-4xl leading-tight uppercase font-manrope font-medium animate-fade-blur delay-1200"
        style="">Scale Without Limits Today</h2>
      <a href="#"
        class="inline-flex items-center gap-3 px-5 py-3 rounded-full bg-white text-slate-900 hover:bg-slate-100 transition-colors text-sm self-start font-sans animate-fade-slide delay-1300"
        style="">
        Start Trial
      </a>
    </div>
  </div>

  <!-- Card C -->
  <div
    class="flex flex-col min-h-[420px] lg:col-span-1 animate-scale-fade delay-1100 bg-white bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/670079cb-5d0f-4dd6-928c-c02024729de1_800w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-xl justify-between">
    <div class="space-y-6">
      <p class="text-sm text-slate-500 font-sans animate-fade-slide delay-1200" style="">Join thousands</p>
      <h2
        class="display sm:text-4xl leading-tight uppercase text-3xl font-medium text-slate-900 font-manrope animate-fade-blur delay-1300"
        style="">Begin Your Journey Now</h2>
    </div>
    <form class="flex flex-col gap-4 pt-6 animate-fade-slide delay-1400">
      <input type="email" required="" placeholder="work@company.com" class="flex-1 px-5 py-3 rounded-full border border-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm placeholder:text-slate-400">
      <button type="submit" class="px-6 py-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition-colors text-white text-sm flex items-center justify-center gap-2 font-sans" style="">
            <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 w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            Continue
          </button>
    </form>
  </div>
</section>