Componente de componentes de comercio electrónico - Documentación/Estilo Wiki

<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">&rarr;</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 &rarr;</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>&copy; 2023 Artistic E-commerce Wiki. All rights reserved. Crafted with <span class="text-red-500">&hearts;</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>