Composant de galerie de produits
Un composant de galerie de produits réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux plates-formes de divertissement/médias.
HTML Code
<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">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</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">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</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">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</span>
<span class="text-stone-400 dark:text-stone-500">★</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">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</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>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif conçu avec un style de neumorphisme et une palette de couleurs triadique, adapté à la présentation de travaux ou de produits, avec prise en charge du thème sombre.
Composant de galerie de produits
Un composant de galerie de produits simple et réactif avec un style de conception glassmorphism, une palette de couleurs noir et blanc avec un accent vif, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.
ProductGalleryComponent
Galerie de produits Composant au design brutaliste, prise en charge réactive et en mode sombre.