Luxury_Premium_Dating_Social_NavBar

<nav class="bg-gradient-to-r from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black shadow-lg py-4 px-6 md:px-12 fixed w-full z-50 top-0">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white font-serif text-3xl md:text-4xl font-extrabold tracking-wider hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out">
      LuxeMatch
    </a>

    <!-- Navigation Links (Hidden on small screens, shown on medium and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Matches
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        <i class="fas fa-heart text-red-400 mr-2"></i>Explore
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Messages
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Actions (Profile, Notifications, Menu Icon) -->
    <div class="flex items-center space-x-6">
      <!-- Notification Icon -->
      <div class="relative">
        <button class="text-white hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out focus:outline-none">
          <svg class="h-7 w-7 md:h-8 md:w-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" clip-rule="evenodd" fill-rule="evenodd"></path>
          </svg>
        </button>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </div>

      <!-- Profile Avatar -->
      <a href="#" class="block relative rounded-full group focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <img class="h-10 w-10 md:h-12 md:w-12 rounded-full object-cover border-2 border-white dark:border-gray-500 transform transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
      </a>

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <svg class="h-8 w-8" 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>
  </div>
</nav>