Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie-Komponente mit einem von Papier/Druck inspirierten Design, einem warmen neutralen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Unterhaltungs-/Medienplattformen.
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>Verwandte Komponenten
Komponente "Produktgalerie"
Eine komplexe, reaktionsschnelle Produktgaleriekomponente mit 3D-Designästhetik und sepia/braunem Farbschema, geeignet für Technologie-/SaaS-Anwendungen. Enthält mehrere interaktive Elemente und Unterstützung für den Dunkelmodus.
Komponente "Produktgalerie"
Eine responsive Produktgalerie-Komponente mit Material-Design-Ästhetik, mit einem rasterbasierten Layout und interaktiven Elementen, die sich für die Präsentation von Produkten oder eines Portfolios eignen. Enthält Unterstützung für den Dunkelmodus und verwendet ein analoges Farbschema.
Komponente "Produktgalerie"
Glassmorphism Product Gallery Component mit responsiven Effekten und Unterstützung für dunkle Themen.