Composant de comparaison de produits - Aquarelle/Artistique

<div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans overflow-x-auto">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center text-indigo-900 dark:text-indigo-100 mb-8 sm:mb-12 tracking-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
      Industrial Product Comparison
    </h2>
    <p class="text-center text-lg text-indigo-700 dark:text-indigo-300 mb-10 sm:mb-16 max-w-2xl mx-auto leading-relaxed">
      Compare the features and specifications of our high-performance industrial equipment. Make an informed decision for your manufacturing needs.
    </p>

    <div class="w-full overflow-x-auto relative">
      <div class="flex space-x-6 pb-4 sm:pb-6 pr-4" style="min-width: fit-content;">
        <!-- Feature Column Header -->
        <div class="flex-shrink-0 w-64 min-w-[250px] bg-indigo-200/50 dark:bg-gray-700/50 rounded-lg p-6 flex flex-col justify-between shadow-lg border border-indigo-300 dark:border-gray-600 backdrop-blur-sm">
          <h3 class="text-2xl font-bold text-indigo-900 dark:text-indigo-100 mb-6">Features</h3>
          <ul class="space-y-4 text-indigo-800 dark:text-indigo-200 text-lg flex-grow">
            <li class="font-semibold py-2">Product Image</li>
            <li class="font-semibold py-2">Product Name</li>
            <li class="font-semibold py-2">Model Number</li>
            <li class="font-semibold py-2">Material Strength</li>
            <li class="font-semibold py-2">Operating Temperature Range</li>
            <li class="font-semibold py-2">Power Consumption (kW)</li>
            <li class="font-semibold py-2">Durability Rating</li>
            <li class="font-semibold py-2">Warranty (Years)</li>
            <li class="font-semibold py-2">Included Accessories</li>
            <li class="font-semibold py-2">Certification Standards</li>
            <li class="font-semibold py-2">Price</li>
          </ul>
          <div class="mt-8">
            <!-- Placeholder for alignment -->
          </div>
        </div>

        <!-- Product 1 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=1" alt="Industrial Machine Alpha" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">HydraFlex 3000i</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: HFX-3000i</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">HFX-3000i</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Titanium Alloy</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-20°C to 150°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">15 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.5/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">5 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Tool Kit, Manual </span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ISO 9001, CE Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$12,500</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=2" alt="Industrial Machine Beta" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">MegaPress X100</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: MP-X100</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">MP-X100</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Reinforced Steel</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">0°C to 200°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">20 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Superior (9.8/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">7 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Hydraulic Hoses, Filters</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ASTM, RoHS Compliant</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$18,000</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 3 (Optional extra product) -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=3" alt="Industrial Machine Gamma" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">QuantumFabricator</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: QFX-500</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">QFX-500</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Carbon Fiber Composite</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-5°C to 180°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">18 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.2/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">6 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Spare Parts Kit, Software</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">CE, UL Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$15,200</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

      </div>
    </div>

    <div class="mt-16 text-center">
      <p class="text-indigo-800 dark:text-indigo-200 text-lg sm:text-xl font-medium">
        Need assistance? Our experts are ready to help you choose the right solution.
      </p>
      <a href="#" class="inline-block mt-6 px-8 py-4 bg-indigo-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-70 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Contact Sales
      </a>
    </div>
  </div>
</div>