Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con un design ispirato alla carta/stampa, una combinazione di colori neutri caldi e supporto per la modalità scura, adatto per piattaforme di intrattenimento/multimediali.
Codice HTML
<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>Componenti correlati
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.
Componente della galleria dei prodotti
Un componente semplice e reattivo per la galleria di prodotti con uno stile di design glassmorphism, combinazione di colori in bianco e nero con un accento brillante, adatto per bacheche di lavoro o piattaforme di carriera. Include il supporto per la modalità oscura.
Componente della galleria dei prodotti
Componente della galleria prodotti reattivo con supporto per la modalità scura