제품 비교 구성 요소

<div class="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-950 dark:to-teal-950 py-16 px-4 sm:px-6 lg:px-8 font-sans overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-green-800 dark:text-green-300 mb-12 sm:mb-16 tracking-tight drop-shadow-lg leading-tight">
      Trophy Showdown: Choose Your Champion
    </h2>

    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-12 items-stretch justify-center">

      <!-- Product 1: Elite Performance -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden mb-12 lg:mb-0 transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-green-400 dark:border-green-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-100/50 to-blue-100/50 dark:from-gray-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-green-500 dark:bg-green-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform -rotate-3 hover:rotate-3 transition-transform duration-300">Elite Performance</span>
            <h3 class="text-3xl font-bold text-green-900 dark:text-green-200 mb-2 leading-tight">Apex Athlete Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Unleash your full potential.</p>
          </div>

          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-green-200 to-blue-200 dark:from-green-800 dark:to-blue-800">
            <img src="https://picsum.photos/400/300?random=1" alt="Apex Athlete Pro product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Dynamic Bio-feedback System</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">AI-Powered Training Coach</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Hydro-Resistant Durability</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">One Year Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Trusted by 100K+ athletes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Select Apex Pro
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Comparison Connector -->
      <div class="flex justify-center items-center mx-auto text-center w-full lg:w-auto mb-12 lg:mb-0">
        <div class="w-24 h-24 lg:w-32 lg:h-32 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-700 dark:to-blue-700 rounded-full flex items-center justify-center text-white text-3xl font-bold border-4 border-white dark:border-gray-900 shadow-2xl animate-pulse flex-shrink-0">
          VS
        </div>
        <div class="hidden lg:block w-4 h-full bg-gradient-to-t from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600 rounded-full mx-4 xl:mx-8 shadow-inner"></div>
      </div>

      <!-- Product 2: Peak Challenger -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-blue-400 dark:border-blue-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-orange-100/50 dark:from-gray-900/50 dark:to-orange-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-blue-500 dark:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform rotate-3 hover:-rotate-3 transition-transform duration-300">Peak Challenger</span>
            <h3 class="text-3xl font-bold text-blue-900 dark:text-blue-200 mb-2 leading-tight">Zenith Force Max</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Conquer new limits.</p>
          </div>
          
          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800">
            <img src="https://picsum.photos/400/300?random=2" alt="Zenith Force Max product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Advanced Calorie Tracking</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Real-time Heart Rate Monitoring</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Adaptive Workout Routines</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Six Months Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar 4" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar 5" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Empowering 75K+ successes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Choose Zenith Max
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-green-900 dark:text-green-300 mb-6">Need more detail?</h3>
      <p class="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto mb-8">
        Dive deeper into the specifications with our comprehensive chart below or contact our sports tech experts for personalized advice.
      </p>
      <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 dark:from-green-700 dark:to-blue-700 dark:hover:from-green-800 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-green-600 transform hover:-translate-y-1 transition-all duration-300 ease-out">
        <svg class="-ml-1 mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        View Full Comparison Chart
      </button>
    </div>

  </div>
</div>