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