Luxury_Vibrant_Travel_Navigation

<nav class="bg-gradient-to-r from-purple-700 via-pink-600 to-orange-500 shadow-xl dark:from-purple-900 dark:via-pink-800 dark:to-orange-700 transition-colors duration-500 ease-in-out">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-white font-serif text-3xl font-extrabold tracking-wider animate-pulse transition-transform duration-300 hover:scale-105
        bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-sky-300 to-lime-300 inline-block py-1 rounded-lg px-2
        dark:from-yellow-200 dark:via-sky-200 dark:to-lime-200">
        LUXVoyage
      </a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-yellow-300 transition-colors duration-300 relative group">
        Destinations
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-sky-300 transition-colors duration-300 relative group">
        Packages
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-sky-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-lime-300 transition-colors duration-300 relative group">
        Experiences
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-lime-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white text-lg font-semibold tracking-wide hover:text-orange-300 transition-colors duration-300 relative group">
        About Us
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-orange-300 group-hover:w-full transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm w-36 lg:w-48">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" 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>
      </div>

      <button class="flex items-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 transition-all duration-300 ease-in-out
        shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300 select-none">
        <span class="font-medium hidden lg:inline">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <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"></path>
        </svg>
      </button>

       <button id="dark-mode-toggle" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>

    <div class="md:hidden flex items-center">
      <button id="mobile-menu-button" class="p-2 text-white hover:text-yellow-300 focus:outline-none focus:text-yellow-300 transition-colors duration-300" aria-label="Open mobile menu">
        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden pb-4">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Destinations
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Packages
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        Experiences
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-white hover:bg-opacity-30 transition-colors duration-300 w-full text-center hover:scale-105">
        About Us
      </a>
      <div class="relative w-full px-4 mt-2">
        <input type="text" placeholder="Search..." class="w-full py-2 pl-4 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:bg-opacity-30 dark:bg-black dark:bg-opacity-20 dark:placeholder-gray-300 dark:focus:ring-yellow-300 transition-all duration-300 ease-in-out text-sm">
        <svg class="absolute right-7 top-1/2 -translate-y-1/2 h-5 w-5 text-white" 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>
      </div>
      <button class="flex items-center justify-center space-x-2 text-white bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full px-4 py-2 mt-2 w-full mx-4 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-yellow-300">
        <span class="font-medium">Account</span>
        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <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"></path>
        </svg>
      </button>
      <button id="dark-mode-toggle-mobile" class="p-2 rounded-full text-white bg-white bg-opacity-20 hover:bg-opacity-30 transition-all duration-300 ease-in-out shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-yellow-300 mt-2" aria-label="Toggle dark mode">
        <svg class="h-6 w-6 hidden dark:block" fill="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 3v1m0 16v1m9-9h1M3 12H2m15.325 5.5l.707.707M6.707 6.707l-.707-.707M16.95 7.05l.707-.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
        </svg>
        <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

<script>
  // JavaScript for mobile menu toggle
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

  mobileMenuButton.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });

  // JavaScript for dark mode toggle
  function toggleDarkMode() {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.remove('dark');
      localStorage.theme = 'light';
    } else {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }
  }

  // Initial check for dark mode preference
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
  document.getElementById('dark-mode-toggle-mobile').addEventListener('click', toggleDarkMode);
</script>