Composant de conteneur

<div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
  <div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
    <div class="md:flex">
      <!-- Product Image Section -->
      <div class="md:flex-shrink-0 md:w-1/2 relative">
        <img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-6">
          <h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
          <p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
        </div>
        <span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
      </div>

      <!-- Product Details Section -->
      <div class="p-8 md:w-1/2 flex flex-col justify-between">
        <div>
          <span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
          <h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
          <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
          
          <div class="flex items-center mb-6">
            <span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
            <span class="text-xl text-gray-400 line-through">$1200</span>
            <span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
          </div>

          <!-- Color Options -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
            <div class="flex space-x-3">
              <button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
            </div>
          </div>

          <!-- Quantity Selector -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
            <div class="flex items-center space-x-3">
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
              <span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
          <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
        </div>
      </div>
    </div>
    
    <!-- Customer Reviews Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
          </p>
        </div>
        
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
          </p>
        </div>

        <!-- Review Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
          </p>
        </div>
      </div>
    </div>

    <!-- Related Products Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Related Product Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 4 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">