Composant de comparaison de produits

<div class="font-sans bg-amber-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-center text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-4 tracking-tight leading-none drop-shadow-sm transition-colors duration-300">
      Compare Learning Plans
    </h2>
    <p class="text-center text-lg text-amber-700 dark:text-amber-300 mb-12 max-w-2xl mx-auto leading-relaxed opacity-90 transition-colors duration-300">
      Find the perfect learning path that fits your budget and educational goals with a detailed side-by-side comparison.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Plan 1: Basic -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Starter</h3>
          <p class="text-amber-700 dark:text-amber-300">Get started with fundamental concepts.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$19</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>50+ Basic Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Access to Community Forum</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Email Support</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No Certificates</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Starter
          </a>
        </div>
      </div>

      <!-- Plan 2: Pro (Recommended) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-amber-500 dark:border-amber-400">
        <div class="absolute -top-3 -right-3 bg-amber-500 dark:bg-amber-400 text-white dark:text-zinc-900 px-4 py-1 rounded-full text-sm font-semibold rotate-3 shadow-lg glow-badge">
          Recommended
        </div>
        <div class="p-8 bg-gradient-to-br from-amber-200 to-amber-100 dark:from-zinc-600 dark:to-zinc-700 transition-colors duration-300 rounded-t-3xl border-b border-amber-300 dark:border-zinc-600">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Pro</h3>
          <p class="text-amber-700 dark:text-amber-300">Deep dive into advanced topics and projects.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$49</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>All Starter features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>200+ Advanced Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Premium Support (24/7)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Course Completion Certificates</span>
          </li>
           <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Pro
          </a>
        </div>
      </div>

      <!-- Plan 3: Enterprise -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Enterprise</h3>
          <p class="text-amber-700 dark:text-amber-300">Custom solutions for teams and organizations.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">Custom</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/solution</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>All Pro features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Unlimited Courses & Projects</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Dedicated Account Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Custom SSO Integration</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" filling="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>1-on-1 Mentorship Sessions</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Contact Sales
          </a>
        </div>
      </div>
    </div>

     <!-- Custom Styling for Glow Effects (add this to a <style> tag or CSS file if not using CDN for this) -->
    <style>
      @keyframes pulse-glow {
        0% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
        50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.5); }
        100% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
      }
      .glow-button:hover {
        animation: pulse-glow 1.5s infinite;
      }
      .glow-badge {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
      .dark .glow-badge {
         box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
    </style>
  </div>
</div>