Animated Course Overview Section with Pricing & Modules

<section class="sm:px-8 mt-20 mb-20" id="course">
  <div class="sm:py-28 max-w-7xl mr-auto ml-auto pt-20 pb-20">
    <div class="sm:p-8 sm:py-8 bg-neutral-100/50 border-neutral-200/50 border rounded-3xl pt-6 pr-6 pb-6 pl-6">
      <!-- Header -->
      <div class="text-center transition-all duration-700 ease-out" data-animate="">
        <span class="inline-flex items-center ring-1 ring-neutral-200 text-sm font-medium text-neutral-600 font-geist bg-white rounded-full pt-1 pr-3 pb-1 pl-3">Training Program</span>
        <h2 class="sm:text-5xl lg:text-6xl text-4xl font-normal text-neutral-900 tracking-tighter font-geist mt-4">
          Master impactful giving and volunteering</h2>
      </div>

      <!-- Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-10 mt-10 items-start">
        <!-- Left: Program Card -->
        <div class="lg:col-span-5 transition-all duration-700 ease-out delay-150" data-animate="">
          <div class="bg-white rounded-[28px] ring-1 ring-black/5 overflow-hidden shadow-lg">
            <!-- Program header -->
            <div class="bg-blue-600 p-6 sm:p-8">
              <p class="text-white/90 text-sm font-geist">Training Program</p>
              <p class="mt-2 text-white text-5xl sm:text-6xl font-semibold tracking-tight font-geist">Free</p>
              <p class="mt-2 text-white/80 text-sm font-geist">For all active Sense members</p>
            </div>

            <!-- Program details -->
            <div class="p-5 sm:p-6">
              <div class="sm:p-5 bg-neutral-100/50 ring-black/5 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
                <h3 class="text-neutral-900 font-semibold tracking-tight font-geist">Impact Training: Maximizing Your
                  Charitable Contribution</h3>
                <p class="text-neutral-700 text-sm mt-2 font-geist">Learn evidence-based approaches to philanthropy and
                  volunteering that create lasting positive change in communities.</p>
                <div class="mt-3 flex items-center gap-3">
                  <div class="flex -space-x-2">
                    <img class="ring-2 ring-white w-7 h-7 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e36aef18-f0f2-42d8-bcc3-86e5433f18f9_320w.jpg" alt="Participant 1">
                    <img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/79e0a89c-b04e-4a65-b214-cc33e9601ecb_320w.jpg" alt="Participant 2">
                    <img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/075e4814-03ac-46d1-bfeb-bb23651c0d08_320w.jpg" alt="Participant 3">
                  </div>
                  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs text-neutral-700 ring-1 ring-black/10 font-geist">
                500+ enrolled
              </span>
                </div>
              </div>

              <!-- What's included -->
              <div class="mt-6">
                <p class="text-xs uppercase tracking-wider text-neutral-500 font-medium font-geist">What's included</p>
                <ul class="mt-3 space-y-3">
                  <li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="check-circle-2"
                      class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                    30 hours comprehensive training
                  </li>
                  <li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="check-circle-2"
                      class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                    Mentorship from experts
                  </li>
                  <li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="check-circle-2"
                      class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                    Community network access
                  </li>
                  <li class="flex items-start gap-3 text-neutral-900 text-sm font-geist">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="check-circle-2"
                      class="lucide lucide-check-circle-2 text-blue-600 mt-0.5 flex-shrink-0">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                    Impact certification
                  </li>
                </ul>
              </div>
            </div>

            <!-- CTA -->
            <div class="pr-5 pb-5 pl-5">
              <a href="#enroll"
                class="inline-flex items-center justify-center hover:bg-neutral-800 transition text-sm font-medium text-white font-geist bg-neutral-900 w-full h-12 rounded-2xl 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)]">
                Join Training Program
                <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 ml-2">
                  <path d="M5 12h14" class=""></path>
                  <path d="m12 5 7 7-7 7" class=""></path>
                </svg>
              </a>
            </div>
          </div>
        </div>

        <!-- Center: Divider -->
        <div class="lg:col-span-1 flex items-center justify-center transition-all duration-700 ease-out delay-300"
          data-animate="">
          <div
            class="h-full w-px bg-gradient-to-b from-transparent via-neutral-300 to-transparent min-h-96 hidden lg:block">
          </div>
          <div class="w-full h-px bg-gradient-to-r from-transparent via-neutral-300 to-transparent lg:hidden"></div>
        </div>

        <!-- Right: Modules -->
        <div class="lg:col-span-6 space-y-4">
          <!-- Module 1 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[450ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 1: Understanding Global Impact</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">4 hours, 2 case studies, 5 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>

          <!-- Divider -->
          <div class="flex items-center px-5 transition-all duration-700 ease-out delay-[500ms]" data-animate="">
            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
          </div>

          <!-- Module 2 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[550ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 2: Strategic Philanthropy</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">5 hours, 3 projects, 4 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>

          <!-- Divider -->
          <div class="flex items-center px-5 transition-all duration-700 ease-out delay-[600ms]" data-animate="">
            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
          </div>

          <!-- Module 3 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[650ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 3: Community Engagement</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">6 hours, 2 fieldwork, 6 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>

          <!-- Divider -->
          <div class="flex items-center px-5 transition-all duration-700 ease-out delay-[700ms]" data-animate="">
            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
          </div>

          <!-- Module 4 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[750ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 4: Measuring Social Impact</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">4 hours, 1 capstone, 3 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>

          <!-- Divider -->
          <div class="flex items-center px-5 transition-all duration-700 ease-out delay-[800ms]" data-animate="">
            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
          </div>

          <!-- Module 5 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[850ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 5: Volunteer Leadership</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">5 hours, 2 workshops, 4 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>

          <!-- Divider -->
          <div class="flex items-center px-5 transition-all duration-700 ease-out delay-[900ms]" data-animate="">
            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent"></div>
          </div>

          <!-- Module 6 -->
          <button type="button" class="hover:bg-neutral-50 transition flex text-left bg-white w-full ring-black/5 ring-1 rounded-2xl pt-4 pr-5 pb-4 pl-5 shadow-lg items-center justify-between transition-all duration-700 ease-out delay-[950ms]" data-animate="">
        <div class="min-w-0">
          <p class="text-neutral-900 font-medium tracking-tight font-geist">Module 6: Building Sustainable Change</p>
          <p class="text-neutral-600 text-sm mt-1 font-geist">6 hours, 1 capstone, 5 resources</p>
        </div>
        <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 text-neutral-400 h-6 w-6 flex-shrink-0"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
      </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const targetEl = document.getElementById('course');
      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>