Composante des composantes interactives

<div class="bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 p-4 min-h-screen flex items-center justify-center dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 relative z-10 animate-fade-in-down dark:text-gray-100">
      <span class="block">Explore Our <span class="text-indigo-600 dark:text-indigo-400">Collection</span></span>
      <span class="block text-2xl md:text-3xl text-purple-600 dark:text-purple-400 mt-2">Experience 3D Depth</span>
      <div class="absolute inset-0 flex items-center justify-center -z-10">
        <div class="w-32 h-32 md:w-48 md:h-48 bg-purple-200 dark:bg-purple-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-slow"></div>
        <div class="w-48 h-48 md:w-64 md:h-64 bg-indigo-200 dark:bg-indigo-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-reverse-slow"></div>
      </div>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/157/400/300" alt="Elegant Watch" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 right-3 text-sm px-3 py-1 bg-purple-600 text-white rounded-full font-semibold shadow-md">New Arrival</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">AstroPulse Watch</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Precision, Elegance, Future.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">$299</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$349</p>
            </div>
            <button class="w-full py-3 px-6 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Crafted with aerospace-grade sapphire glass and a sustainable recycled titanium casing.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Water Resistance: 100m</li>
              <li>Battery Life: 30 days</li>
              <li>Smart Notifications</li>
              <li>Eco-Friendly Materials</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Customize Now
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-pink-600 dark:from-indigo-700 dark:to-pink-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/29/400/300" alt="Wireless Headphones" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 left-3 text-sm px-3 py-1 bg-indigo-600 text-white rounded-full font-semibold shadow-md">Limited Offer</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">SonicWave Headphones</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Immersive Sound, Unrivaled Comfort.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$189</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$220</p>
            </div>
            <button class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:bg-indigo-800 dark:hover:bg-indigo-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Experience crystal-clear audio with adaptive noise cancellation and 40-hour battery life.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Noise Cancellation: Adaptive</li>
              <li>Battery Life: 40 hours</li>
              <li>Ergonomic Design</li>
              <li>Bluetooth 5.2</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Read Reviews
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-pink-500/50 dark:hover:shadow-pink-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/27/400/300" alt="Smart Speaker" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute bottom-3 right-3 text-sm px-3 py-1 bg-pink-600 text-white rounded-full font-semibold shadow-md">Best Seller</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">EchoSphere Speaker</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Intelligent Audio, Seamless Integration.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$129</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$150</p>
            </div>
            <button class="w-full py-3 px-6 bg-pink-600 text-white rounded-lg hover:bg-pink-700 dark:bg-pink-800 dark:hover:bg-pink-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Your smart home hub with voice assistant integration and 360-degree sound.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Voice Assistant: AI Powered</li>
              <li>Audio: 360° Omnidirectional</li>
              <li>Smart Home Integration</li>
              <li>Multi-room Audio</li>
            </ul>
            <button class="w-full py-3 px-6 bg-purple-500 text-white rounded-lg hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Explore Features
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Base styles for the 3D card */
  .perspective-1000 {
    perspective: 1000px;
  }

  .card-3d-container {
    position: relative;
    width: 100%;
    height: 100%; /* Ensure container has height for children */
    display: flex; /* Make it a flex container to center child */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 480px; /* Minimum height for cards */
  }

  .card-3d {
    position: relative;
    width: 100%;
    height: auto; /* Adjust height based on content */
    min-height: 480px; /* Ensure a consistent minimum height */
    transform-origin: center center; /* Ensure consistent rotation origin */
  }

  /* Front and back faces */
  .backface-hidden {
    backface-visibility: hidden;
  }

  .card-front,
  .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
  }

  .card-back {
    transform: rotateY(180deg);
  }

  /* Flip effect on hover */
  .card-3d-container:hover .card-3d {
    transform: rotateY(180deg);
  }

  /* Inner shadow effect for image */
  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 6px 0 rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-inner-lg {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 6px 0 rgba(0, 0, 0, 0.15);
  }

  /* Custom animations */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 1s ease-out forwards;
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spin-slow 15s linear infinite;
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 20s linear infinite;
  }

  /* Responsive adjustments for overall layout */
  @media (max-width: 767px) {
    .card-3d-container {
      min-height: 450px; /* Slightly reduce min-height for mobile */
    }
    .card-3d {
      min-height: 450px;
    }
    .card-front h3, .card-back h3 {
      font-size: 1.75rem; /* Equivalent to text-2xl */
    }
    .card-front p, .card-back p {
      font-size: 0.875rem; /* Equivalent to text-sm */
    }
    .card-front span.text-3xl {
      font-size: 2rem; /* Reduce price size slightly */
    }
  }

</style>