Componente Componenti E-commerce - Documentazione/Stile Wiki
Un componente di e-commerce complesso e reattivo "Documentazione/Wiki" con texture morbide e dipinte ed elementi artistici con una combinazione di colori caramelle/dolci (rosa bubblegum, verde menta). Include il supporto per la modalità scura ed elementi interattivi per una documentazione o un sito di knowledge base.
Codice HTML
<div class="font-sans bg-pink-50/70 dark:bg-slate-900 min-h-screen p-4 sm:p-8 relative overflow-hidden">
<!-- Background elements for 'watercolor/artistic' feel -->
<div class="absolute top-0 left-0 w-64 h-64 bg-pink-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob dark:bg-pink-700/30"></div>
<div class="absolute top-1/4 right-0 w-80 h-80 bg-green-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 dark:bg-green-700/30"></div>
<div class="absolute bottom-0 left-1/4 w-72 h-72 bg-purple-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 dark:bg-purple-700/30"></div>
<div class="relative max-w-7xl mx-auto z-10">
<!-- Header/Title Section -->
<header class="text-center mb-10 md:mb-16">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight mb-4 tracking-tighter drop-shadow-lg [text-shadow:_0_2px_2px_rgb(0_0_0_/_10%)]">
Artistic E-commerce Components Wiki
</h1>
<p class="text-lg sm:text-xl text-pink-800 dark:text-pink-200 max-w-3xl mx-auto leading-relaxed opacity-90">
Explore a collection of visually rich and responsive e-commerce components, crafted with a whimsical, artistic touch, perfect for your documentation site.
</p>
</header>
<!-- Main Navigation/Category Section -->
<nav class="mb-12">
<div class="overflow-x-auto scrollbar-hide">
<ul class="flex justify-center flex-wrap gap-2 md:gap-4 p-2 bg-white/70 backdrop-blur-sm rounded-full shadow-lg dark:bg-slate-800/70 border border-pink-200 dark:border-pink-900">
<li>
<a href="#product-cards" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 bg-pink-50 dark:bg-pink-900/40 relative group overflow-hidden">
<span class="relative z-10">Product Cards</span>
<span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
</a>
</li>
<li>
<a href="#product-details" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
<span class="relative z-10">Product Details</span>
<span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
</a>
</li>
<li>
<a href="#cart-elements" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
<span class="relative z-10">Cart Elements</span>
<span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
</a>
</li>
<li>
<a href="#filters-sorting" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
<span class="relative z-10">Filters & Sorting</span>
<span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Section: Product Cards -->
<section id="product-cards" class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2 flex items-center justify-between">
Product Cards <span class="text-base text-pink-500 font-normal ml-4 hidden sm:inline">(Interactive Examples)</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="group bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden transform transition-transform duration-500 hover:scale-[1.02] hover:shadow-2xl relative border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600">
<div class="absolute inset-0 bg-gradient-to-br from-pink-100 to-green-100 opacity-20 dark:from-pink-900/30 dark:to-green-900/30 transition-opacity duration-500 group-hover:opacity-40"></div>
<div class="relative z-10">
<div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-pink-100 dark:border-pink-700">
<img src="https://picsum.photos/400/300?random=1" alt="Watercolor Painting" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
</div>
<h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-2 truncate">Dreamy Watercolor Landscape</h3>
<p class="text-pink-600 dark:text-pink-300 text-sm mb-3 line-clamp-2">An original watercolor piece capturing the serenity of nature with soft hues.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-pink-700 dark:text-pink-100 drop-shadow-sm">$120.00</span>
<div class="flex items-center text-pink-500 dark:text-pink-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<span class="ml-1 text-sm">4.8 (8 Reviews)</span>
</div>
</div>
<button class="w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 transition-all duration-300 transform hover:scale-105 active:scale-95 group-hover:scale-103">
Add to Palette
</button>
</div>
</div>
<!-- Product Card 2 (with Badge) -->
<div class="group bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden transform transition-transform duration-500 hover:scale-[1.02] hover:shadow-2xl relative border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600">
<div class="absolute inset-0 bg-gradient-to-br from-green-100 to-blue-100 opacity-20 dark:from-green-900/30 dark:to-blue-900/30 transition-opacity duration-500 group-hover:opacity-40"></div>
<div class="relative z-10">
<span class="absolute top-0 right-0 m-4 px-3 py-1 bg-green-500 text-white text-xs font-bold rounded-full shadow-md z-20 rotate-3 transform origin-top-right">New Arrival</span>
<div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-green-100 dark:border-green-700">
<img src="https://picsum.photos/400/300?random=2" alt="Artistic Sketchbook" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
</div>
<h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-2 truncate">Abstract Floral Sketchbook</h3>
<p class="text-pink-600 dark:text-pink-300 text-sm mb-3 line-clamp-2">A vibrant, hand-drawn sketchbook featuring expressive floral designs.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-pink-700 dark:text-pink-100 drop-shadow-sm">$45.00</span>
<div class="flex items-center text-pink-500 dark:text-pink-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<span class="ml-1 text-sm">5.0 (2 Reviews)</span>
</div>
</div>
<button class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:from-green-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-300 transform hover:scale-105 active:scale-95 group-hover:scale-103">
Discover More
</button>
</div>
</div>
<!-- Product Card 3 (Out of Stock) -->
<div class="group bg-white/50 dark:bg-slate-900/50 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden relative border-2 border-transparent">
<div class="absolute inset-0 bg-neutral-100 dark:bg-slate-700 opacity-70"></div>
<div class="relative z-10 opacity-70 grayscale">
<span class="absolute top-0 right-0 m-4 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full shadow-md z-20 -rotate-3 transform origin-top-right">Sold Out</span>
<div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-red-100 dark:border-red-700">
<img src="https://picsum.photos/400/300?random=3" alt="Ceramic Vase" class="w-full h-full object-cover" loading="lazy">
</div>
<h3 class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2 truncate">Hand-Painted Ceramic Vase</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-3 line-clamp-2">A unique, artisan-crafted vase with delicate floral paintings.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-gray-500 dark:text-gray-400">$75.00</span>
<div class="flex items-center text-gray-400 dark:text-gray-500">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<span class="ml-1 text-sm">4.9 (5 Reviews)</span>
</div>
</div>
<button class="w-full bg-gray-400 text-white font-bold py-3 px-6 rounded-full shadow-lg cursor-not-allowed" disabled>
Sold Out
</button>
</div>
</div>
</div>
</section>
<!-- Section: Product Details Component -->
<section id="product-details" class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
Detailed Product View
</h2>
<div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-pink-100/50 to-green-100/50 dark:from-pink-900/20 dark:to-green-900/20"></div>
<div class="relative z-10 flex-shrink-0 w-full lg:w-2/5">
<div class="aspect-w-16 aspect-h-12 rounded-2xl overflow-hidden shadow-lg border-4 border-pink-200 dark:border-pink-700 mb-4">
<img src="https://picsum.photos/600/450?random=4" alt="Detailed Floral Canvas" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" loading="lazy">
</div>
<div class="grid grid-cols-4 gap-3">
<img src="https://picsum.photos/100/80?random=5" alt="Thumb 1" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
<img src="https://picsum.photos/100/80?random=6" alt="Thumb 2" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
<img src="https://picsum.photos/100/80?random=7" alt="Thumb 3" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
<img src="https://picsum.photos/100/80?random=8" alt="Thumb 4" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
</div>
</div>
<div class="relative z-10 lg:w-3/5">
<h2 class="text-3xl sm:text-4xl font-extrabold text-pink-800 dark:text-pink-200 mb-4 leading-snug drop-shadow-sm">Vibrant Abstract Expression Canvas</h2>
<p class="text-pink-600 dark:text-pink-300 text-lg mb-6 leading-relaxed">An exquisite original oil painting, capturing dynamic brushstrokes and a harmonious blend of sweet, bright colors. Perfect for adding a pop of artistic flair to any space.</p>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-pink-700 dark:text-pink-100 mr-4 drop-shadow-md">$499.00</span>
<span class="text-lg text-pink-500 dark:text-pink-400 line-through">$650.00</span>
<span class="ml-4 px-3 py-1 bg-green-500 text-white text-sm font-bold rounded-full shadow">30% OFF</span>
</div>
<div class="flex items-center mb-6 text-pink-500 dark:text-pink-400">
<div class="flex">
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
<svg class="w-6 h-6 fill-current text-current opacity-50" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
</div>
<span class="ml-2 text-pink-700 dark:text-pink-300 font-semibold">4.5 (156 Reviews)</span>
</div>
<div class="mb-6">
<p class="text-pink-700 dark:text-pink-300 font-semibold mb-2">Dimensions:</p>
<div class="flex gap-3">
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">24"x36"</button>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400 bg-pink-100 dark:bg-pink-900/50">36"x48"</button>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">60"x40"</button>
</div>
</div>
<button class="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white font-bold py-4 px-8 rounded-full shadow-xl hover:from-pink-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 transform hover:scale-105 active:scale-95">
Add to Canvas <span class="ml-2 text-xl">→</span>
</button>
<div class="mt-8 p-4 bg-pink-50/70 dark:bg-slate-900/50 rounded-2xl border border-pink-200 dark:border-pink-700 shadow-inner">
<h3 class="text-lg font-bold text-pink-800 dark:text-pink-200 mb-2 flex items-center">
<svg class="w-5 h-5 mr-2 text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
Artist Guarantee
</h3>
<p class="text-pink-700 dark:text-pink-300 text-sm">Hand-signed, museum-quality finish, and a 30-day satisfaction guarantee. Free shipping on all original artworks.</p>
</div>
</div>
</div>
</section>
<!-- Section: Cart Elements -->
<section id="cart-elements" class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
Cart & Checkout Flow
</h2>
<div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm relative overflow-hidden flex flex-col lg:flex-row gap-8">
<div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-pink-100/50 dark:from-purple-900/20 dark:to-pink-900/20"></div>
<div class="relative z-10 lg:w-2/3">
<h3 class="text-2xl font-bold text-pink-800 dark:text-pink-200 mb-5 pb-3 border-b border-pink-200 dark:border-pink-700">Your Artistic Cart (3 Items)</h3>
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center gap-4 py-4 border-b border-pink-100 dark:border-pink-800 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden shadow-md border border-pink-200 dark:border-pink-700">
<img src="https://picsum.photos/150/150?random=9" alt="Item 1" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="flex-grow text-center sm:text-left">
<h4 class="font-semibold text-pink-800 dark:text-pink-200 text-lg">Dreamy Watercolor Landscape</h4>
<p class="text-pink-600 dark:text-pink-300 text-sm">Size: 24"x36"</p>
<p class="text-pink-700 dark:text-pink-100 font-bold mt-1">$120.00</p>
</div>
<div class="flex items-center gap-2">
<button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Decrease quantity</span>-</button>
<input type="text" value="1" class="w-12 text-center bg-transparent border-b border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none px-1 py-0.5" aria-label="Quantity">
<button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Increase quantity</span>+</button>
</div>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200 ml-0 sm:ml-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"/></svg>
<span class="sr-only">Remove item</span>
</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center gap-4 py-4 border-b border-pink-100 dark:border-pink-800 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden shadow-md border border-pink-200 dark:border-pink-700">
<img src="https://picsum.photos/150/150?random=10" alt="Item 2" class="w-full h-full object-cover" loading="lazy">
</div>
<div class="flex-grow text-center sm:text-left">
<h4 class="font-semibold text-pink-800 dark:text-pink-200 text-lg">Abstract Floral Sketchbook</h4>
<p class="text-pink-600 dark:text-pink-300 text-sm">Bundle: Basic</p>
<p class="text-pink-700 dark:text-pink-100 font-bold mt-1">$45.00</p>
</div>
<div class="flex items-center gap-2">
<button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Decrease quantity</span>-</button>
<input type="text" value="2" class="w-12 text-center bg-transparent border-b border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none px-1 py-0.5" aria-label="Quantity">
<button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Increase quantity</span>+</button>
</div>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200 ml-0 sm:ml-4">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"/></svg>
<span class="sr-only">Remove item</span>
</button>
</div>
<div class="mt-6">
<label for="promo-code" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Apply Promo Code:</label>
<div class="flex">
<input type="text" id="promo-code" class="flex-grow px-4 py-2 border border-pink-300 dark:border-pink-600 rounded-l-lg bg-pink-50/50 dark:bg-slate-900/50 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400" placeholder="SWEETART20">
<button class="bg-gradient-to-r from-pink-500 to-purple-500 text-white font-semibold py-2 px-6 rounded-r-lg shadow hover:from-pink-600 hover:to-purple-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
Apply
</button>
</div>
</div>
</div>
<div class="relative z-10 lg:w-1/3 bg-pink-50/70 dark:bg-slate-900/50 p-6 rounded-2xl shadow-inner border border-pink-200 dark:border-pink-700">
<h3 class="text-2xl font-bold text-pink-800 dark:text-pink-200 mb-5 pb-3 border-b border-pink-200 dark:border-pink-700">Order Summary</h3>
<div class="flex justify-between mb-3 text-pink-700 dark:text-pink-300">
<span>Subtotal:</span>
<span class="font-medium">$210.00</span>
</div>
<div class="flex justify-between mb-3 text-pink-700 dark:text-pink-300">
<span>Shipping:</span>
<span class="font-medium text-green-600 dark:text-green-400">FREE</span>
</div>
<div class="flex justify-between mb-6 text-pink-700 dark:text-pink-300 border-b border-pink-200 dark:border-pink-700 pb-3">
<span>Discount:</span>
<span class="font-medium text-red-500 dark:text-red-400">-$21.00</span>
</div>
<div class="flex justify-between items-center mb-8 text-pink-800 dark:text-pink-100">
<span class="text-xl font-bold">Total:</span>
<span class="text-3xl font-extrabold">$189.00</span>
</div>
<button class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold py-4 rounded-full shadow-lg hover:from-green-600 hover:to-teal-600 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transform hover:scale-105 active:scale-95">
Proceed to Checkout
</button>
<p class="text-center text-xs text-pink-600 dark:text-pink-400 mt-4">Secure payment via a palette of options.</p>
</div>
</div>
</section>
<!-- Section: Filters & Sorting -->
<section id="filters-sorting" class="mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
Art Discovery Tools
</h2>
<div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-teal-100/50 to-purple-100/50 dark:from-teal-900/20 dark:to-purple-900/20"></div>
<div class="relative z-10 flex flex-col md:flex-row md:items-start gap-6 lg:gap-10">
<!-- Filters Column -->
<div class="w-full md:w-1/3 lg:w-1/4 flex-shrink-0">
<h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Filter by Style</h3>
<div class="space-y-3">
<label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
<span class="ml-2 text-base">Watercolor</span>
</label>
<label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600" checked>
<span class="ml-2 text-base">Abstract</span>
</label>
<label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
<span class="ml-2 text-base">Figurative</span>
</label>
<label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
<span class="ml-2 text-base">Impressionist</span>
</label>
<label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
<span class="ml-2 text-base">Minimalist</span>
</label>
</div>
<h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mt-8 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Price Range</h3>
<div class="flex items-center gap-3">
<input type="number" placeholder="Min" class="w-24 px-3 py-2 rounded-lg bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
<span class="text-pink-700 dark:text-pink-300">-</span>
<input type="number" placeholder="Max" class="w-24 px-3 py-2 rounded-lg bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
</div>
</div>
<!-- Sorting and Search Column -->
<div class="w-full md:w-2/3 lg:w-3/4">
<h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Search & Sort</h3>
<div class="mb-6">
<label for="search-components" class="sr-only">Search components</label>
<div class="relative">
<input type="text" id="search-components" placeholder="Search for an artistic component..." class="w-full px-5 py-3 pr-12 rounded-full border border-pink-300 dark:border-pink-600 bg-pink-50/50 dark:bg-slate-900/50 text-pink-800 dark:text-pink-200 placeholder-pink-400 dark:placeholder-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-400 shadow-sm">
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-pink-600 dark:text-pink-400 hover:text-pink-800 dark:hover:text-pink-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-300 rounded-full p-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<span class="sr-only">Search</span>
</button>
</div>
</div>
<div class="mb-6">
<label for="sort-by" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Sort by:</label>
<div class="relative group">
<select id="sort-by" class="block w-full px-4 py-3 rounded-xl bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 appearance-none focus:outline-none focus:ring-2 focus:ring-pink-400 transition-all duration-200 pr-10 shadow-sm">
<option value="featured">Featured (Default)</option>
<option value="latest">Newest Arrivals</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="reviews">Average Customer Review</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-pink-600 dark:text-pink-400 transition-transform duration-200 group-focus-within:rotate-180">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</div>
</div>
<div>
<p class="text-pink-700 dark:text-pink-300 text-sm mb-2">Viewing 1-12 of 85 Artworks.</p>
<div class="flex justify-center flex-wrap gap-2">
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400 bg-pink-100 dark:bg-pink-900/50">1</button>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">2</button>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">3</button>
<span class="px-4 py-2 text-pink-700 dark:text-pink-300">...</span>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">10</button>
<button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">Next →</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonial / Community Section -->
<section class="text-center py-12 mb-8">
<h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)]">
What Our Artists Say
</h2>
<div class="max-w-2xl mx-auto bg-green-50/70 dark:bg-slate-900/50 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-green-100 dark:ring-green-900 backdrop-blur-sm relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-pink-100/30 to-purple-100/30 dark:from-pink-900/10 dark:to-purple-900/10"></div>
<div class="relative z-10">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-6 border-4 border-pink-300 dark:border-pink-600 shadow-md transition-all duration-300 hover:scale-105">
<p class="text-lg sm:text-xl italic text-pink-800 dark:text-pink-200 leading-relaxed mb-6">
"This wiki is a masterpiece! The components are not just functional, they are truly inspiring. It makes building beautiful e-commerce sites feel like painting on a fresh canvas."
</p>
<p class="font-bold text-pink-700 dark:text-pink-300 text-lg">Anya Petrova</p>
<p class="text-pink-600 dark:text-pink-400 text-sm">Digital Canvas Artist</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center text-pink-700 dark:text-pink-300 py-8 border-t border-pink-200 dark:border-pink-800 mt-12">
<p>© 2023 Artistic E-commerce Wiki. All rights reserved. Crafted with <span class="text-red-500">♥</span></p>
<div class="flex justify-center gap-4 mt-4 text-pink-500 dark:text-pink-400">
<a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Privacy Policy</a>
<a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Terms of Service</a>
<a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Contact Us</a>
</div>
</footer>
</div>
</div>
<style>
/* Custom animations for the watercolor blob effect */
@keyframes blob {
0% { transform: scale(1) translate(0px, 0px); }
33% { transform: scale(1.1) translate(30px, -50px); }
66% { transform: scale(0.9) translate(-20px, 20px); }
100% { transform: scale(1) translate(0px, 0px); }
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Hide scrollbar for nav, but keep scrollability */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
</style>Componenti correlati
Componente Componenti E-commerce
Componente e-commerce per un sito web aziendale minimalista, con design reattivo e supporto per temi scuri.
Forum_Community_Component
Un componente di discussione forum/community reattivo e tematico con uno stile di design aziendale/professionale e una combinazione di colori oceano/blu, incluso il supporto per la modalità scura.
Componente e-commerce
Un componente e-commerce reattivo con colori Glassmorphism e Pastel, adatto per le interfacce dei social media, con supporto per temi scuri.