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 reaktionsschnelle Produktgalerie mit Retro-/Vintage-Ästhetik und Unterstützung für den Dunkelmodus. Es enthält Bilder und Avatare, die von Platzhalterdiensten generiert wurden.
Komponente "Produktgalerie"
Eine responsive Produktgalerie-Komponente, die Tailwind CSS mit einem neumorphischen Designstil, einem komplementären Farbschema und einem komplexen Layout verwendet, das für Unternehmenswebsites geeignet ist. Enthält Unterstützung für den Dunkelmodus und verwendet Bilder von picsum.photos.
Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie-Komponente, die im Brutalismus-Stil mit einem pastellfarbenen Farbschema gestaltet ist, das für soziale Medien geeignet ist. Es zeichnet sich durch einen hohen Kontrast und auffällige Designelemente aus und ist für den Dunkelmodus optimiert.