Composant de galerie de produits

<div class="p-4 sm:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-bold text-center mb-12 relative text-stone-800 dark:text-stone-200 leading-tight tracking-tight">
      Featured Releases
      <span class="block w-24 h-1.5 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-4 rounded-full"></span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">The Echoing Abyss</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">Immerse yourself in a gripping narrative of mystery and suspense. A true cinematic masterpiece.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$19.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            View Details
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-yellow-600 dark:bg-yellow-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          New
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Whispers of the Stars</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">An epic journey through cosmic wonders and ancient prophecies. Visually stunning!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$24.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Pre-order Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-purple-600 dark:bg-purple-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Pre-order
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/10/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Lost in the Glitch</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A mind-bending sci-fi thriller exploring virtual realities and forgotten memories.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$16.50</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1060/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Chronicles of Eldoria</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A classic fantasy adventure, now remastered in breathtaking 4K UHD. Limited Edition!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$29.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Buy Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-red-600 dark:bg-red-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Limited
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <button class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400">
        Explore All Products
      </button>
    </div>

  </div>
</div>

<style>
/* Simple 'paper curl' effect for cards (optional, for visual flair) */
.print-effect {
  position: relative;
  /* filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); */
}

.print-effect::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5%;
  width: 90%;
  height: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
  transition: transform 0.3s ease-out;
}

.print-effect:hover::before {
  transform: scale(1.05);
  background: rgba(0,0,0,0.1);
}

/* Custom animation for badges */
@keyframes pulse-once {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pulse-once {
  animation: pulse-once 1.2s ease-out 1;
}
</style>