Composants du commerce électronique

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-950 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-2xl overflow-hidden shadow-xl dark:shadow-2xl border-4 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-1.5 transform transition-transform duration-500 hover:scale-[1.01] animate-gradient-border">
    <div class="bg-white dark:bg-gray-800 rounded-xl relative p-4 sm:p-6 lg:p-8 flex flex-col h-full">

      <!-- Seller Info & Art Deco Border -->
      <div class="absolute inset-0 border-8 border-transparent pointer-events-none rounded-xl">
        <div class="absolute top-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-l-4 rounded-tl-xl border-indigo-600 dark:border-indigo-400"></div>
        <div class="absolute top-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-r-4 rounded-tr-xl border-purple-600 dark:border-purple-400"></div>
        <div class="absolute bottom-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-l-4 rounded-bl-xl border-pink-600 dark:border-pink-400"></div>
        <div class="absolute bottom-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-r-4 rounded-br-xl border-red-600 dark:border-red-400"></div>
      </div>

      <div class="flex items-center mb-4 sm:mb-5 lg:mb-6 z-10">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-3" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Seller Avatar">
        <div>
          <p class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-100">Artisan Emporium</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Verified Seller</p>
        </div>
      </div>

      <!-- Product Image -->
      <div class="w-full aspect-w-16 aspect-h-9 relative mb-4 sm:mb-5 lg:mb-6 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 shadow-sm">
        <img src="https://picsum.photos/id/111/600/400" alt="Product Image" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <span class="absolute top-2 right-2 bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs px-2.5 py-1 rounded-full font-bold shadow-md">NEW</span>
      </div>

      <!-- Product Details -->
      <h3 class="text-xl sm:text-2xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 leading-tight gradient-text-effect">
        Geometric Abstract Pendant
      </h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2 mb-4 sm:mb-5 lg:mb-6">
        Handcrafted Art Deco inspired pendant with intricate geometric patterns, perfect for adding a touch of vintage elegance.
      </p>

      <div class="flex items-center justify-between mb-4 sm:mb-5 lg:mb-6">
        <div class="flex items-baseline">
          <span class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mr-2">$129.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$149.99</span>
        </div>
        <div class="flex items-center text-yellow-500 dark:text-yellow-400 text-sm sm:text-base">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.729c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <span>4.8</span>
          <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-1">(128)</span>
        </div>
      </div>

      <!-- Call to Action Buttons -->
      <div class="mt-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 border-transparent rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg 
                       hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3.056-6.112A1 1 0 0019 3H4.32L4 1H3zM6 16a2 2 0 11-4 0 2 2 0 014 0zM16 16a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-400 dark:text-fuchsia-400 
                       hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 
                       hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.586l1.172-1.172a4 4 0 115.656 5.656L10 17.656l-6.828-6.828a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          Wishlist
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  @keyframes gradient-border-animation {
    0% { border-color: #a78bfa; }
    25% { border-color: #f472b6; }
    50% { border-color: #ef4444; }
    75% { border-color: #f97316; }
    100% { border-color: #a78bfa; }
  }
  .animate-gradient-border {
    animation: gradient-border-animation 6s ease-in-out infinite alternate;
  }

  .gradient-text-effect {
    background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientText 3s ease infinite;
  }

  .dark .gradient-text-effect {
    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
  }

  @keyframes gradientText {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
</style>
              

                <div class="min-h-screen bg-gradient-to-br from-stone-200 to-stone-300 p-4 font-sans text-stone-800 transition-colors duration-300 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 lg:p-8">

  <!-- Section Title (Neumorphic) -->
  <h1 class="mb-8 text-center text-4xl font-extrabold tracking-tight drop-shadow-sm md:text-5xl lg:text-6xl">
    <span class="inline-block rounded-2xl bg-gradient-to-br from-stone-100 to-stone-200 px-6 py-3 shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:from-stone-50 hover:to-stone-100 dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:from-stone-700 dark:hover:to-stone-850">
      Support a Cause Today
    </span>
  </h1>

  <!-- Main Grid Layout -->
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Product Card 1 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1015/400/300" alt="Education Support" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Education for All</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Provide essential learning materials and tuition for underprivileged children.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $10,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $6,500
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 65%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/10/400/300" alt="Healthcare Initiative" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Health & Wellness</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Support medical camps and provide essential health services to remote communities.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $15,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $12,800
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 85%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1043/400/300" alt="Environmental Conservation" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Environmental Protection</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Fund reforestation projects and initiatives to protect endangered species.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $8,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $4,200
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 53%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 4 (Featured/Highlighted) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-xl ring-4 ring-amber-400 ring-offset-4 ring-offset-stone-200 transition-all duration-300 ease-in-out hover:shadow-2xl dark:ring-offset-stone-900">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-amber-700 to-amber-800 shadow-inner">
        <img src="https://picsum.photos/id/351/400/300" alt="Disaster Relief" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20
"></div>
        <span class="absolute right-4 top-4 rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase backdrop-blur-sm">Urgent</span>

      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-bold text-white">Disaster Relief Fund</h3>
        <p class="mb-4 text-sm text-amber-100">Provide immediate aid and long-term recovery support to communities affected by natural disasters.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-medium text-amber-100">
            Goal: $20,000
          </span>
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-bold text-amber-100">
            Raised: $18,900
          </span>
        </div>

        <div class="neumorphic-progress-bar-featured mb-4 h-2 rounded-full shadow-inner">
          <div class="h-full rounded-full bg-gradient-to-r from-white to-amber-200" style="width: 94%;"></div>
        </div>

        <button class="neumorphic-button-alt w-full">
          Contribute Now
        </button>
      </div>
    </div>

    <!-- Add more product cards as needed (using the first card's structure) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1060/400/300" alt="Food Security" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Food Security Program</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Help end hunger by providing nutritious meals and sustainable food sources.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $12,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $9,100
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 76%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/401/400/300" alt="Community Development" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Community Development</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Invest in local infrastructure and sustainable livelihood projects.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $9,500
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $5,300
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 56%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

  </div>

  <!-- Helper Classes for Neumorphism (can be defined in a CSS file or as @apply in Tailwind CSS config) -->
  <style>
    .neumorphic-button-primary {
      @apply relative rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 px-6 py-3 font-semibold text-stone-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-stone-200 hover:to-stone-300 active:translate-y-0.5 active:scale-95 active:shadow-inner dark:from-stone-700 dark:to-stone-800 dark:text-stone-200 dark:shadow-stone-950/70 dark:hover:from-stone-600 dark:hover:to-stone-750 dark:active:shadow-stone-950/90;
    }
    .neumorphic-button-primary:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
      @apply dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)];
    }

    .neumorphic-button-alt {
      @apply relative rounded-xl bg-gradient-to-br from-white to-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-amber-50 hover:to-white active:translate-y-0.5 active:scale-95 active:shadow-inner;
    }
    .neumorphic-button-alt:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
    }

    .neumorphic-badge-light {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px rgba(255,255,255,0.8); /* manual neumorphic shadow for badges */
      @apply dark:shadow-[2px_2px_4px_rgba(0,0,0,0.5),-2px_-2px_4px_rgba(255,255,255,0.1)];
    }

    .neumorphic-badge-dark {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.15); /* manual neumorphic shadow for badges */
    }

    .neumorphic-progress-bar-featured {
      background: linear-gradient(145deg, #cc8000, #ff9900);
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.2);
    }
  </style>

</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-warm-gray-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-2 border-stone-200 dark:border-stone-700 relative">
    <!-- Paper texture overlay (pseudo-element for better control) -->
    <div class="absolute inset-0 z-0 pointer-events-none opacity-40 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20 20.5a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5zM20 0a.5.5 0 011 0v20a.5.5 0 01-1 0V0zM0 20a.5.5 0 010 1h20a.5.5 0 010-1H0zM0 0a.5.5 0 010 1h20a.5.5 0 010-1H0zM20 0a.5.5 0 01.5-.5h-1a.5.5 0 01.5.5zM0 20a.5.5 0 01-.5-.5v1a.5.5 0 01.5-.5z\'%3E%3C/path%3E%3C/svg%3E'); background-size: 10px 10px; opacity: 0.1; background-color: rgba(255, 255, 255, 0.5);">
    </div>

    <div class="relative z-10">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Property Thumbnail">
      <div class="absolute top-2 right-2 bg-stone-700/80 text-white text-xs px-2 py-1 rounded-sm tracking-wide font-sans">
        FOR SALE
      </div>

      <div class="p-4">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">
          Charming Suburban Retreat
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 tracking-wide">
          123 Harmony Lane, Willow Creek
        </p>

        <div class="flex items-center justify-between mb-4">
          <span class="text-2xl font-extrabold text-green-700 dark:text-green-400">
            $450,000
          </span>
          <div class="flex space-x-3 text-stone-700 dark:text-stone-300">
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1.586l3.293 3.293a1 1 0 01-1.414 1.414L10 6.414 7.121 9.293a1 1 0 11-1.414-1.414L9 4.586V3a1 1 0 011-1zM2 10a8 8 0 1116 0 8 8 0 01-16 0zm8 4a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              3 Beds
            </div>
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110 4 2 2 0 010-4z"></path><path fill-rule="evenodd" d="M4 0h12a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2zm0 2v5h12V2H4zM2 9v9a2 2 0 002 2h12a2 2 0 002-2V9H2z" clip-rule="evenodd"></path></svg>

              2 Baths
            </div>
          </div>
        </div>

        <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200 shadow-sm
                       dark:bg-orange-600 dark:hover:bg-orange-700">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-950 dark:to-stone-900 p-4 sm:p-6 lg:p-8 font-sans text-gray-900 dark:text-gray-100 relative overflow-hidden">

  <!-- Glow background effects -->
  <div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-amber-600"></div>
  <div class="absolute -bottom-24 -right-24 w-72 h-72 bg-red-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-red-800"></div>
  <div class="absolute top-1/4 left-1/2 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-orange-600"></div>

  <div class="container mx-auto relative z-10">
    <!-- Header/Navigation Placeholder -->
    <header class="mb-8 flex flex-col sm:flex-row justify-between items-center bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-orange-200 uppercase tracking-widest text-shadow-glow dark:text-amber-400 mb-4 sm:mb-0">
        Wanderlust Expeditions
      </h1>
      <nav class="flex gap-4 sm:gap-6">
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Destinations
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Tours
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          About Us
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </nav>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Left Sidebar - Filters -->
      <aside class="lg:col-span-1 p-6 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
        <h2 class="text-xl font-bold mb-6 text-orange-200 text-shadow-glow dark:text-amber-400">Filter Your Adventure</h2>

        <div class="mb-6">
          <label for="destination" class="block text-orange-300 text-sm font-medium mb-2">Destination</label>
          <select id="destination" class="w-full p-3 rounded-lg bg-orange-900 text-orange-100 border border-orange-700 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 shadow-inner glow-inset-orange">
            <option>All Destinations</option>
            <option>Sahara Desert</option>
            <option>Himalayan Peaks</option>
            <option>Amazon Rainforest</option>
            <option>Nordic Fjords</option>
          </select>
        </div>

        <div class="mb-6">
          <label for="price-range" class="block text-orange-300 text-sm font-medium mb-2">Price Range</label>
          <input type="range" id="price-range" min="100" max="5000" value="2500" class="w-full h-2 bg-orange-700 accent-amber-500 rounded-lg appearance-none cursor-pointer glow-inset-orange">
          <div class="flex justify-between text-xs text-orange-200 mt-2">
            <span>$100</span>
            <span>$5000</span>
          </div>
        </div>

        <div class="mb-6">
          <label class="block text-orange-300 text-sm font-medium mb-2">Activities</label>
          <div class="space-y-2">
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Hiking & Trekking</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Cultural Immersion</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Wildlife Safaris</span>
            </label>
          </div>
        </div>

        <button class="w-full py-3 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-lg hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
          Apply Filters
        </button>
      </aside>

      <!-- Main Product Grid -->
      <section class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1015/400/300" alt="Desert Safari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Popular</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Sahara Desert Trek</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Experience the majestic dunes and endless skies of the Sahara on this unforgettable journey.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1200</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(240 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 7 Days</li>
                    <li>&#x2022; Difficulty: Moderate</li>
                    <li>&#x2022; Group Size: Max 12</li>
                    <li>&#x2022; Best Season: October - March</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 2 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/292/400/300" alt="Himalayan Peaks" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">New!</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Himalayan Basecamp</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Conquer breathtaking peaks and witness stunning panoramic views in the Himalayas.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2500</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(180 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 14 Days</li>
                    <li>&#x2022; Difficulty: Advanced</li>
                    <li>&#x2022; Group Size: Max 8</li>
                    <li>&#x2022; Best Season: April - June</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 3 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1077/400/300" alt="Amazon River" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-orange-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Low Spots Remaining</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Amazon Wildlife Tour</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Navigate the mighty Amazon river and encounter unique wildlife in their natural habitat.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.7 <span class="text-xs ml-1">(310 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 10 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 15</li>
                    <li>&#x2022; Best Season: May - September</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Add more product cards here following the same structure -->
        <!-- Product Card 4 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1029/400/300" alt="Nordic Fjords" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Featured</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Nordic Fjords Cruise</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Cruise through breathtaking fjords and explore charming Nordic villages.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(200 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 8 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 20</li>
                    <li>&#x2022; Best Season: June - August</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 5 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1083/400/300" alt="Bali Beaches" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Relaxation</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Bali Beach Retreat</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Unwind on pristine beaches and immerse yourself in the serene culture of Bali.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$950</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.6 <span class="text-xs ml-1">(450 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 5 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Any</li>
                    <li>&#x2022; Best Season: All Year</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 6 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1043/400/300" alt="Kyoto Temples" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Cultural</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Kyoto Cultural Journey</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Explore ancient temples, traditional gardens, and vibrant history in Japan's cultural heart.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2100</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(290 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 9 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 10</li>
                    <li>&#x2022; Best Season: March - May</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

      </section>
    </div>

    <!-- Testimonial/Call to Action Section -->
    <section class="mt-12 p-8 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 text-center dark:bg-stone-900 dark:border-stone-700">
      <h2 class="text-3xl font-extrabold mb-4 text-orange-200 text-shadow-glow dark:text-amber-400">Ready for Your Next Adventure?</h2>
      <p class="text-lg text-orange-300 mb-8">Join thousands of happy explorers who've crafted unforgettable memories with us.</p>
      <div class="flex flex-wrap justify-center items-center gap-6 mb-8">
        <div class="flex flex-col items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-2 border-amber-500 shadow-lg glow-avatar">
          <p class="text-amber-400 text-sm mt-2 font-semibold">Jane D.</p>
        </div>
        <div class="text-orange-200 italic max-w-md">"My trip to the Himalayas was beyond words. The organization was flawless, and the guides were exceptional. Highly recommend!"</div>
      </div>
      <a href="#contact" class="inline-block py-4 px-8 bg-gradient-to-r from-amber-500 to-orange-600 text-brown-900 font-bold text-xl rounded-full shadow-2xl hover:from-amber-600 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-lg">
        Contact Our Travel Experts
      </a>
    </section>

  </div>

  <!-- Custom Styles for Neon/Glow Effects and Card Flip -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 165, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.4);
    }

    .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4);
    }

    .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
    }

    /* General Button Glow */
    .button-glow {
      box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
    }

    .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.7);
    }

    .button-glow-sm {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    }

    .button-glow-sm:hover {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 190, 0, 0.8);
    }

    .button-glow-lg {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.7);
    }
    
    .button-glow-lg:hover {
      box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 165, 0, 0.9);
    }

    .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }

    .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-tag {
        box-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
    }

    .price-glow {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }


    /* 3D Card Flip Effect */
    .perspective-card {
      perspective: 1000px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    .group:hover .card-inner {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
    }
    .card-front {
      background-color: transparent;
      z-index: 2;
    }
    .card-back {
      background-color: #5a2e00; /* Darker brown for back */
      transform: rotateY(180deg);
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
    }

    /* Dark Mode Overrides */
    .dark .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 190, 0, 0.7), 0 0 15px rgba(255, 160, 0, 0.5);
    }

    .dark .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 190, 0, 0.5);
    }

    .dark .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 215, 0, 0.9);
    }

    .dark .button-glow {
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }

    .dark .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 190, 0, 0.8);
    }

    .dark .price-glow {
        text-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
    }
    .dark .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .dark .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 215, 0, 1);
    }
    .dark .glow-tag {
        box-shadow: 0 0 5px rgba(200, 0, 0, 0.9);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
    }

  </style>
</div>
              

                <div class="font-sans bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <!-- Header/Navigation Placeholder -->
  <header class="flex justify-between items-center bg-stone-200 dark:bg-stone-800 p-4 mb-8 shadow-md rounded-lg border-b-4 border-amber-600 dark:border-amber-400">
    <h1 class="text-2xl font-bold text-amber-700 dark:text-amber-300">RAW Goods</h1>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 1116 0 2 2 0 0116 0z"></path></svg>
      </button>
      <button class="md:hidden p-2 rounded-md bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
         <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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-amber-500 dark:border-amber-700">
      <h2 class="text-xl font-semibold mb-6 text-amber-700 dark:text-amber-300">Filters</h2>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Category</h3>
        <ul class="space-y-2 text-stone-600 dark:text-stone-400">
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Metalwork</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Woodcraft</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Textiles</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Concrete</a></li>
        </ul>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Price Range</h3>
        <input type="range" min="0" max="500" value="250" class="w-full accent-amber-600 dark:accent-amber-400 h-2 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 mb-2">
        <div class="flex justify-between text-sm text-stone-600 dark:text-stone-400">
          <span>$0</span>
          <span>$500+</span>
        </div>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Material</h3>
        <div class="space-y-2">
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Steel
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Oak
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Copper
          </label>
        </div>
      </div>
      <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 shadow-md">
        Apply Filters
      </button>
    </aside>

    <!-- Product Grid -->
    <section class="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 auto-rows-min">
      
      <!-- Product Card 1 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/67/300/200" alt="Industrial Lamp" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Forged Iron Lamp</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-forged from recycled steel, a raw and powerful statement piece for any industrial space.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$189.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.8</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1025/300/200" alt="Concrete Planter" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Brutalist Concrete Planter</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">A sturdy, minimalist design crafted from raw concrete, perfect for modern urban gardens.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$75.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.5</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1084/300/200" alt="Reclaimed Wood Table" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Reclaimed Oak Console</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Each piece unique, crafted from distressed reclaimed oak, showcasing its natural imperfections.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$499.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/401/300/200" alt="Copper Pendant Light" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Patina Copper Pendant</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-hammered copper with a natural patina, perfect for adding warmth to any room.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$210.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.7</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/353/300/200" alt="Industrial Stool" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Raw Steel Stool</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Minimalist design, maximum durability. Crafted from solid steel for a truly industrial feel.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$120.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.6</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/345/300/200" alt="Canvas Bag" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Waxed Canvas Tote</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Durable and water-resistant, made from heavy-duty waxed canvas with copper rivets.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$95.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-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 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

    </section>

  </main>

  <!-- Pagination Placeholder -->
  <nav class="flex justify-center items-center space-x-2 mt-12" aria-label="Pagination">
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" 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="M15 19l-7-7 7-7"></path></svg>
    </a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-amber-600 dark:bg-amber-400 text-white font-bold shadow-md">1</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">2</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">3</a>
    <span class="text-stone-600 dark:text-stone-400">...</span>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">10</a>
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
    </a>
  </nav>

  <!-- Footer Placeholder -->
  <footer class="mt-12 text-center text-stone-600 dark:text-stone-400 text-sm border-t-4 border-amber-600 dark:border-amber-400 pt-8">
    <p>&copy; 2023 RAW Goods. All rights reserved.</p>
  </footer>

</div>
              

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
  <div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
    <div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
      <img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
      <div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
        NEW
      </div>
    </div>
    <div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
      <a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
        Heirloom Seed Pack
      </a>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
        Premium quality heirloom seeds for robust yields and sustainable farming.
      </p>
      <div class="flex items-baseline justify-between mb-6">
        <span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
          $19.99
        </span>
        <span class="text-sm text-stone-500 dark:text-stone-400 line-through">
          $24.99
        </span>
      </div>
      <button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>
              

                <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>
              

                <div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              flex flex-col md:flex-row">

    <!-- Image Section -->
    <div class="md:w-1/2 overflow-hidden flex-shrink-0">
      <img class="w-full h-64 sm:h-72 md:h-full object-cover object-center transform hover:scale-105 transition duration-500 ease-in-out"
           src="https://picsum.photos/seed/industrial-blog/800/600" alt="Industrial Blog Post Image">
    </div>

    <!-- Content Section -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
      <div>
        <!-- Category & Date -->
        <div class="mb-3 flex items-center space-x-3 text-sm">
          <span class="px-3 py-1 rounded-full text-white bg-red-600 dark:bg-red-500 font-medium tracking-wide uppercase text-xs">
            Design
          </span>
          <span class="text-gray-600 dark:text-gray-400">• March 15, 2024</span>
        </div>

        <!-- Title -->
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
          The Raw Beauty of Industrial Design Principles
        </h1>

        <!-- Excerpt -->
        <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
          Explore how utilitarian aesthetics and exposed materials shape the future of modern architecture and product design, embracing honesty in construction.
        </p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2 mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Architecture</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Minimalism</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Materials</span>
        </div>
      </div>

      <!-- Author and Read More -->
      <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-red-600 dark:border-red-500"
               src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Lead Designer</p>
          </div>
        </div>

        <a href="#" class="inline-flex items-center text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-300 
                          font-medium transition-colors duration-200 text-base sm:text-lg group">
          Read Article
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-200"
               viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>
              

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-sky-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-blue-200 dark:border-blue-800">
    <div class="relative">
      <img class="w-full h-48 sm:h-56 md:h-64 object-cover object-center rounded-t-2xl" src="https://picsum.photos/600/400?random=1&seed=farming" alt="Fresh Organic Produce">
      <div class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform -rotate-3">Grows Fast!</div>
      <div class="absolute top-3 right-3 bg-green-400 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform rotate-3">Fresh Pick</div>
    </div>
    <div class="p-5 sm:p-6 md:p-7 space-y-4">
      <h3 class="text-xl sm:text-2xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight">Organic Heirloom Tomatoes</h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed">Cultivated with love and care, these juicy heirloom tomatoes are perfect for your summer salads and sauces.</p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-2xl sm:text-3xl font-extrabold text-green-600 dark:text-green-400">$5.99</span>
        <span class="text-lg text-gray-500 line-through dark:text-gray-600">$7.50</span>
      </div>
      <div class="flex items-center text-yellow-500 mt-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <span class="text-sm ml-1 text-gray-500 dark:text-gray-400">(4.5)</span>
      </div>
      <button type="button" class="w-full py-3 sm:py-4 px-6 mt-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 text-white font-bold rounded-full shadow-lg text-lg sm:text-xl transform transition-transform duration-200 hover:scale-[1.03] flex items-center justify-center space-x-2">
        <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span>Add to Basket</span>
      </button>
      <div class="flex items-center mt-5 p-3 bg-blue-50 dark:bg-gray-800 rounded-xl">
        <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Farmer John">
        <div>
          <p class="font-semibold text-blue-800 dark:text-blue-300">Harvested by Farmer John</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Local & Sustainable</p>
        </div>
      </div>
    </div>
  </div>
</div>