Product Gallery

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 bg-gradient-to-br from-pink-100 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-white/60 dark:bg-gray-800/60 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up">
    <div class="text-center py-8 px-4 sm:py-10 sm:px-6 md:py-12 lg:py-16">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-pink-600 dark:text-purple-300 drop-shadow-lg leading-tight">
        Soulmates in Art: Discover Your Perfect Match
      </h1>
      <p class="mt-3 text-lg sm:text-xl text-purple-700 dark:text-gray-300 max-w-2xl mx-auto">
        Explore unique profiles, each a masterpiece in their own right. Find beauty in connection.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-4 sm:p-6 md:p-8 lg:p-10">

      <!-- Profile Card 1 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-pink-200 dark:border-purple-600">
        <img src="https://picsum.photos/id/1025/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-pink-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300">Aurora, 28</h3>
            <p class="mt-1 text-sm text-purple-600 dark:text-gray-400">Painter | Dreamer | Coffee Lover</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"Seeking inspiration and genuine connections. My canvas is my soul, and I'd love to share its colors with you."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#AbstractArt</span>
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#NatureLover</span>
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#QuietNights</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-pink-500 text-white rounded-full font-semibold shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-500 flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.656 1.657A2 2 0 009.828 20H15a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1z"></path></svg>
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-mint-200 dark:border-emerald-600">
        <img src="https://picsum.photos/id/108/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-mint-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-mint-700 dark:text-emerald-300">Leo, 31</h3>
            <p class="mt-1 text-sm text-emerald-600 dark:text-gray-400">Musician | Wanderer | Storyteller</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"My life is a melody, always eager for new harmonies. Love exploring new places and deep conversations."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#IndieMusic</span>
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#RoadTrips</span>
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#Philosophy</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-mint-500 text-white rounded-full font-semibold shadow-md hover:bg-mint-600 focus:outline-none focus:ring-2 focus:ring-mint-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-500 flex items-center gap-2">
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-yellow-200 dark:border-orange-600">
        <img src="https://picsum.photos/id/1050/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-yellow-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-yellow-700 dark:text-orange-300">Skye, 26</h3>
            <p class="mt-1 text-sm text-orange-600 dark:text-gray-400">Photographer | Adventurer | Optimist</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"Capturing moments and building memories. Let's find beauty in the everyday, together."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#PhotoAddict</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#Hiking</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#GoodVibes</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-yellow-500 text-white rounded-full font-semibold shadow-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500 flex items-center gap-2">
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="py-8 px-4 sm:py-10 sm:px-6 text-center">
      <button class="px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold rounded-full text-lg shadow-lg hover:from-pink-600 hover:to-purple-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:from-purple-600 dark:to-teal-600 dark:hover:from-purple-700 dark:hover:to-teal-700 dark:focus:ring-teal-400">
        Discover More Masterpieces
        <svg class="inline-block ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
      </button>
    </div>

  </div>
</div>
              

                <div class="p-4 sm:p-8 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 min-h-screen font-sans transition-colors duration-300">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 tracking-tight leading-tight pt-4 dark:text-orange-300 text-teal-700">
    Featured Albums & Tracks
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">

    <!-- Album Card 1 -->
    <div class="relative bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1043/400/400" alt="Album Art - Chill Vibes" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Sunset Sessions</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Aurora Beats</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">50K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Golden Hour</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Ocean Breeze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Midnight Drive</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1070/400/400" alt="Album Art - Cosmic Sounds" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Starlight Symphony</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Cosmic Cadence</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">75K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Nebula Drift</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Pulsar Echoes</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Galactic Haze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1062/400/400" alt="Album Art - Indie Folk" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Forest Whispers</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Willow Creek</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">60K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Evergreen Path</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. River's Song</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Misted Dawn</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (usually in a CSS file or <style> block, but for a single HTML component, inline is shown for completeness) -->
  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px rgba(174, 174, 192, 0.4), -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.4), -7px -7px 15px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-pressed {
      box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.5), inset -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-pressed-dark {
      box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.08);
    }

    .shadow-inner-neumorphic {
      box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.03);
    }

    .shadow-neumorphic-button {
      box-shadow: 5px 5px 10px rgba(174, 174, 192, 0.4), -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-button-pressed {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.3);
    }
    .dark .shadow-neumorphic-button-pressed-dark {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.1);
    }
    /* Complementary colors (teal and orange-ish) */
    .text-teal-700 { color: #0f766e; } /* Deeper Teal for headings */
    .dark .text-orange-300 { color: #fdba74; } /* Lighter Orange for headings */
    .bg-teal-500 { background-color: #14b8a6; } /* Primary Teal for buttons */
    .dark .bg-orange-500 { background-color: #f97316; } /* Primary Orange for buttons */
    .dark .bg-orange-600 { background-color: #ea580c; } /* Darker Orange for buttons */
    .text-teal-600 { color: #0d9488; } /* Teal for links/icons */
    .hover\:text-teal-800:hover { color: #065f46; } /* Darker Teal on hover */
    .dark .text-orange-400 { color: #fb923c; } /* Orange for links/icons */
    .dark .hover\:text-orange-bright:hover { color: #ffedd5; } /* Brighter Orange on hover */
  </style>

</div>
              

                <div class="bg-stone-100 dark:bg-stone-900 py-8 sm:py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-stone-900 dark:text-stone-50 mb-8 text-center sm:text-4xl">Our Latest Creations</h2>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Forest Stream">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Enchanted Forest Canvas</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A breathtaking view captured on canvas, perfect for any nature lover's home.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$120.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Desert Landscape">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Desert Bloom Sculpture</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Handcrafted sculpture inspired by the resilient beauty of desert florals.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$95.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1004/400/300" alt="Mountain Peak">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Alpine Summit Print</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A stunning photographic print capturing the majesty of a mountain peak.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$80.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1020/400/300" alt="Beach Sunset">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Coastal Serenity Frame</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Bring the calming essence of the ocean into your space with this piece.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$110.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="container mx-auto p-4"">
  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
        <span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
      </div>

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

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
      <div>
        <strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
        <p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
      </div>
    </div>
  </div>
</div>
              

                <div class="dark:bg-gray-900">
  <div class="container mx-auto py-8 px-4">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-teal-500">$99.99</span>
            <button class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">View Details</button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-orange-500">$149.50</span>
            <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">View Details</button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-purple-500">$199.00</span>
            <button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 4</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-pink-500">$75.50</span>
            <button class="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 5</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-500">$120.00</span>
            <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">View Details</button>
          </div>
        </div>
      </div>

       <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 6</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-500">$250.80</span>
            <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">View Details</button>
          </div>
        </div>
      </div>

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

                <div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
    <h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
            <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
            <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
            <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
            <p class="text-gray-600 dark:text-gray-300">$59.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="mt-10 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>
              

                <div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>
              

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
        </div>
    </div>
</div>