Animated Tailwind Pricing Plans Section

<section class="max-w-7xl mt-20 mr-auto ml-auto pr-6 pb-20 pl-6">
  <div class="text-center mb-16 animate-slide-up">
    <h2 class="sm:text-4xl lg:text-5xl text-3xl font-semibold text-white tracking-tight font-bricolage mb-4" style="">
      Choose Your Training Path
    </h2>
    <p class="max-w-2xl text-lg text-neutral-300 mr-auto ml-auto" style="">
      From foundational skills to elite mastery. Every plan includes personalized coaching and progress tracking.
    </p>
  </div>

  <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
    <!-- Starter Plan -->
    <div
      class="rounded-3xl p-8 bg-neutral-800/40 border border-neutral-700/50 hover:border-neutral-600/50 transition-all animate-slide-up animate-delay-200">
      <div class="flex mb-6 items-center justify-between">
        <h3 class="text-xl font-semibold text-white font-sans" style="">Starter</h3>

      </div>
      <div class="mb-8">
        <div class="flex items-baseline gap-2 mb-2">
          <span class="text-3xl text-white font-bricolage font-semibold" style="">$29</span>
          <span class="text-neutral-400 font-sans" style="">/month</span>
        </div>
        <p class="text-sm text-neutral-400 font-sans" style="">Perfect for beginners and youth players</p>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Basic skill modules (10+)</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Progress tracking</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Community access</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Mobile app access</span>
        </li>
      </ul>
      <button class="w-full py-3 px-6 rounded-full border border-neutral-600 text-white font-medium hover:border-neutral-500 hover:bg-neutral-700/50 transition-all font-sans" style="">
                Get Started
            </button>
    </div>

    <!-- Pro Plan (Popular) -->
    <div
      class="hover:border-blue-400/50 transition-all animate-slide-up animate-delay-400 relative bg-gradient-to-b from-blue-900/20 to-indigo-900/20 border-blue-500/30 border rounded-3xl pt-8 pr-8 pb-8 pl-8 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)]">
      <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
        <span class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xs font-medium px-4 py-2 rounded-full font-sans" style="">
                    Most Popular
                </span>
      </div>
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-xl font-semibold text-white font-sans" style="">Pro</h3>

      </div>
      <div class="mb-8">
        <div class="flex items-baseline gap-2 mb-2">
          <span class="text-3xl text-white font-bricolage font-semibold" style="">$79</span>
          <span class="text-neutral-400 font-sans" style="">/month</span>
        </div>
        <p class="text-sm text-neutral-400 font-sans" style="">Advanced training for serious players</p>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">All skill modules (50+)</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">1-on-1 coach sessions</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Advanced analytics</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Custom training plans</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Performance certifications</span>
        </li>
      </ul>
      <button class="w-full py-3 px-6 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium hover:from-blue-500 hover:to-indigo-500 transition-all font-sans" style="">
                Start Free Trial
            </button>
    </div>

    <!-- Elite Plan -->
    <div
      class="rounded-3xl p-8 bg-neutral-800/40 border border-neutral-700/50 hover:border-indigo-500/50 transition-all animate-slide-up animate-delay-600">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-xl font-semibold text-white font-sans" style="">Elite</h3>

      </div>
      <div class="mb-8">
        <div class="flex items-baseline gap-2 mb-2">
          <span class="text-3xl text-white font-bricolage font-semibold" style="">$199</span>
          <span class="text-neutral-400 font-sans" style="">/month</span>
        </div>
        <p class="text-sm text-neutral-400 font-sans" style="">Professional-level training program</p>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Everything in Pro</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Weekly 1-on-1 sessions</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Elite coach mentorship</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Academy connections</span>
        </li>
        <li class="flex items-center gap-3 text-sm">
          <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"
            class="w-4 h-4 text-green-400 flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          <span class="text-neutral-300 font-sans" style="">Priority support</span>
        </li>
      </ul>
      <button class="w-full py-3 px-6 rounded-full border border-indigo-500/50 text-white font-medium hover:border-indigo-400 hover:bg-indigo-500/10 transition-all font-sans" style="">
                Contact Sales
            </button>
    </div>
  </div>

  <div class="text-center mt-12 animate-slide-up animate-delay-800">
    <div class="flex flex-wrap items-center justify-center gap-8 text-sm text-neutral-400">
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(74, 222, 128);">
          <path d="m11 17 2 2a1 1 0 1 0 3-3"></path>
          <path
            d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4">
          </path>
          <path d="m21 3 1 11h-2"></path>
          <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path>
          <path d="M3 4h8"></path>
        </svg>
        <span class="font-sans" style="">14-day free trial</span>
      </div>
      <div class="flex items-center gap-2">
        <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"
          class="w-4 h-4 text-green-400">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="font-sans" style="">Cancel anytime</span>
      </div>
      <div class="flex items-center gap-2">
        <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"
          class="w-4 h-4 text-green-400">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path>
        </svg>
        <span class="font-sans" style="">30-day money back guarantee</span>
      </div>
    </div>
  </div>
</section>