Impact Training Program Promo Section with Cards & Stats

<section
  class="sm:p-8 sm:py-8 bg-white max-w-7xl border-black/5 border rounded-3xl mt-32 mr-auto mb-20 ml-auto pt-12 pr-6 pb-12 pl-6 relative"
  id="training-program">
  <!-- Header -->
  <div class="max-w-3xl mx-auto text-center transition-all duration-700 ease-out" data-animate="">
    <h2
      class="sm:text-5xl lg:text-6xl leading-[1.05] text-4xl font-medium text-neutral-900 tracking-tighter font-geist">
      Join our Impact Training Program</h2>
    <p class="sm:text-lg text-base text-neutral-600 mt-4 font-geist">Learn how to maximize your charitable impact and
      become a skilled changemaker. Transform your good intentions into measurable results.</p>

    <div class="mt-6 flex items-center justify-center gap-3">
      <a href="#enroll"
        class="inline-flex items-center gap-2 hover:bg-neutral-800 transition text-sm font-medium text-white font-geist bg-neutral-900 h-11 rounded-full pr-5 pl-5 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)]">
        Start Learning
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
      </a>
      <a href="#curriculum"
        class="inline-flex items-center justify-center h-11 px-5 rounded-full text-sm font-medium text-neutral-900 bg-white ring-1 ring-black/10 hover:bg-neutral-50 transition font-geist">
        View Programs
      </a>
    </div>
  </div>

  <!-- Feature Cards -->
  <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Card 1 -->
    <article
      class="bg-white rounded-3xl ring-1 ring-black/5 shadow-lg overflow-hidden transition-all duration-700 ease-out delay-150"
      data-animate="">
      <div class="bg-black rounded-2xl mx-4 mt-4 overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e202b3bf-44a7-4067-870b-90bf6761a2da_800w.jpg" alt="Community volunteer training">
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5">
        <h3 class="text-lg font-semibold tracking-tight text-neutral-900 font-geist">Hands-on training</h3>
        <p class="text-sm text-neutral-600 mt-2 font-geist">Learn directly from experienced humanitarian workers and
          community leaders worldwide.</p>
      </div>
    </article>

    <!-- Card 2 -->
    <article
      class="bg-white rounded-3xl ring-1 ring-black/5 shadow-lg overflow-hidden transition-all duration-700 ease-out delay-300"
      data-animate="">
      <div class="bg-black rounded-2xl mx-4 mt-4 overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/03a90f56-64e4-4b02-9e04-1bb0f51de74c_800w.jpg" alt="Impact measurement workshop">
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5">
        <h3 class="text-lg font-semibold tracking-tight text-neutral-900 font-geist">Impact measurement</h3>
        <p class="text-sm text-neutral-600 mt-2 font-geist">Master the tools and techniques to track, measure, and
          amplify your charitable impact.</p>
      </div>
    </article>

    <!-- Card 3 -->
    <article
      class="bg-white rounded-3xl ring-1 ring-black/5 shadow-lg overflow-hidden transition-all duration-700 ease-out delay-[450ms]"
      data-animate="">
      <div class="bg-black rounded-2xl mx-4 mt-4 overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ede50f82-0ad0-4579-a4ae-3a942856d03b_800w.jpg" alt="Global changemaker network">
      </div>
      <div class="pt-5 pr-5 pb-5 pl-5">
        <h3 class="text-lg font-semibold tracking-tight text-neutral-900 font-geist">Global network</h3>
        <p class="text-sm text-neutral-600 mt-2 font-geist">Connect with passionate changemakers, share experiences, and
          collaborate on projects.</p>
      </div>
    </article>
  </div>

  <!-- Stats -->
  <div
    class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 transition-all duration-700 ease-out delay-[600ms]"
    data-animate="">
    <div class="bg-neutral-100/50 ring-black/5 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6">
      <p class="text-3xl font-semibold tracking-tight text-neutral-900 font-geist">12</p>
      <p class="text-sm text-neutral-600 mt-1 font-geist">training modules</p>
    </div>
    <div class="bg-neutral-100/50 ring-black/5 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6">
      <p class="text-3xl font-semibold tracking-tight text-neutral-900 font-geist">500+</p>
      <p class="text-sm text-neutral-600 mt-1 font-geist">trained volunteers</p>
    </div>
    <div class="bg-neutral-100/50 ring-black/5 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6">
      <p class="text-3xl font-semibold tracking-tight text-neutral-900 font-geist">50+</p>
      <p class="text-sm text-neutral-600 mt-1 font-geist">countries reached</p>
    </div>
    <div class="bg-neutral-100/50 ring-black/5 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6">
      <p class="text-3xl font-semibold text-neutral-900 tracking-tight font-geist">Free</p>
      <p class="text-sm text-neutral-600 font-geist mt-1">for all members</p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const targetEl = document.getElementById('training-program');
      if (!targetEl) return;

      const animateElements = targetEl.querySelectorAll('[data-animate]');

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            animateElements.forEach(element => {
              // Remove animation start states to trigger the transition
              element.classList.remove('opacity-0', 'translate-y-8', 'blur-md');
            });
            // Stop observing once the animation has been triggered
            observer.unobserve(targetEl);
          }
        });
      }, {
        threshold: 0.1 // Trigger when 10% of the element is visible
      });

      observer.observe(targetEl);
    });
  </script>
</section>