Non-profit Hero Section with Marquee Program Cards

<section class="sm:p-8 bg-neutral-950 max-w-7xl rounded-3xl mt-8 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 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)]" style="position: relative; overflow: hidden;">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
    <!-- Left: Heading + copy -->
    <div class="flex flex-col min-h-full justify-between">
      <div class="">
        <span class="text-sm font-normal text-zinc-300 font-geist">Global Impact Network</span>
        <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-zinc-100 mt-2 font-geist font-medium tracking-tighter">Transforming communities worldwide.</h2>

        <!-- Divider -->
        <div class="mt-8 relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full h-px bg-gradient-to-r from-black/5 via-black/10 to-black/5"></div>
          </div>
        </div>

        <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8">
          <div class="">
            <p class="text-sm text-zinc-100 font-medium tracking-tight font-geist">Creating lasting change together</p>
            <p class="mt-1 text-sm text-zinc-300 font-geist">Discover how our dedicated programs provide essential resources and support to communities in need across the globe.</p>
            <button class="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-zinc-200 transition font-geist">
              View Our Programs
              <span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
            </button>
          </div>

          <!-- Vertical divider -->
          <div class="relative">
            <div class="absolute left-0 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-black/10 to-transparent sm:block hidden">
            </div>
            <p class="text-base text-zinc-200 leading-relaxed sm:text-right sm:pl-8 font-geist">
              Our comprehensive approach combines
              <span class="font-medium text-zinc-100 font-geist">humanitarian excellence</span>
              with sustainable solutions that grow with community needs.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: Marquee Program grid -->
    <div class="relative h-[520px] overflow-hidden" style="mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);">
        <style>
            @keyframes marquee-vertical-aura-emfrv44j0 {
                from { transform: translateY(0); }
                to { transform: translateY(-50%); }
            }
            .animate-marquee-vertical-aura-emfrv44j0 {
                animation: marquee-vertical-aura-emfrv44j0 40s linear infinite;
            }
        </style>
        <div class="animate-marquee-vertical-aura-emfrv44j0">
            <div class="grid grid-cols-2 gap-4 mb-4">
                <!-- Program 1 -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d8a18803-85b3-44b8-8ded-36a46f674b9c_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Healthcare Aid</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">HealthReach</p>
                    </div>
                </article>

                <!-- Program 2 -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fed1b639-6302-4656-940e-0f519fb2348b_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Education Access</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">LearnForward</p>
                    </div>
                </article>

                <!-- Program 3 -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border-black/30 border rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c7e0c43a-8d25-4baf-aedb-f084dd7ecaa9_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Clean Water</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">WaterBridge</p>
                    </div>
                </article>

                <!-- Program 4 -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a64e6770-50ba-4159-829d-d5f20fab2595_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Shelter Support</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">SafeHaven</p>
                    </div>
                </article>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <!-- Program 1 Copy -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d8a18803-85b3-44b8-8ded-36a46f674b9c_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Healthcare Aid</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">HealthReach</p>
                    </div>
                </article>

                <!-- Program 2 Copy -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fed1b639-6302-4656-940e-0f519fb2348b_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Education Access</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">LearnForward</p>
                    </div>
                </article>

                <!-- Program 3 Copy -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c7e0c43a-8d25-4baf-aedb-f084dd7ecaa9_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Clean Water</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">WaterBridge</p>
                    </div>
                </article>

                <!-- Program 4 Copy -->
                <article class="relative overflow-hidden aspect-[4/3] bg-gradient-to-br from-zinc-800/50 to-zinc-900/50 border border-black/30 rounded-2xl">
                    <div class="absolute inset-0 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a64e6770-50ba-4159-829d-d5f20fab2595_800w.jpg)] bg-cover"></div>
                    <div class="absolute top-3 right-3">
                      <span class="px-2 py-1 rounded-md bg-black/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-black/30 font-geist">Shelter Support</span>
                    </div>
                    <div class="absolute bottom-3 left-3 right-3">
                      <p class="text-white text-lg font-medium tracking-tight leading-tight font-geist">SafeHaven</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
  </div>
</section>