Glassmorphism_Wishlist_Component

<div class="min-h-screen p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl rounded-3xl backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 p-6 sm:p-8 lg:p-10 shadow-2xl border border-white/50 dark:border-gray-700/50 overflow-hidden relative">

    <!-- Glassmorphism Overlay Elements -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute top-1/4 left-1/3 w-96 h-96 bg-blue-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
      <div class="absolute bottom-1/4 right-1/3 w-96 h-96 bg-indigo-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
      <div class="absolute top-1/2 left-1/4 w-80 h-80 bg-sky-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-sky-500 drop-shadow-lg">
      Your Wishlist ❤️
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 text-gray-700 dark:text-gray-300">
      People you've liked who resonated with you. Send a message to connect!
    </p>

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

      <!-- Wishlist Item 1 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Eleanor R.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">28, New York</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Loves hiking, indie music, and cozy coffee shops.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <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>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Michael B.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">30, Los Angeles</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Software engineer who enjoys surfing and playing guitar.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <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>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Sophia L.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">26, Chicago</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Passionate chef, loves exploring new cuisines and traveling.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <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>
            </button>
          </div>
        </div>
      </div>

      <!-- Add more wishlist items as needed -->

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 dark:from-sky-500 dark:to-blue-600 dark:hover:from-sky-600 dark:hover:to-blue-700 text-white text-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Discover More People
      </button>
    </div>

  </div>
</div>

<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.68, -0.55, 0.27, 1.55);
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>