LujoTravelNavBar

<header class="bg-stone-100 dark:bg-stone-900 shadow-sm font-serif text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl md:text-3xl font-bold tracking-wide transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
      Voyage Lux
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#destinations" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Destinations
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#journeys" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Journeys
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#about" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        About Us
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#contact" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
    </nav>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-stone-800 dark:text-stone-200 focus:outline-none">
        <svg class="w-8 h-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>

  <!-- Mobile Menu (Hidden by default, show with JS) -->
  <nav id="mobile-menu" class="hidden md:hidden bg-stone-50 dark:bg-stone-800 py-4 shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#destinations" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Destinations</a>
      <a href="#journeys" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Journeys</a>
      <a href="#about" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">About Us</a>
      <a href="#contact" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Contact</a>
    </div>
  </nav>
</header>

<!-- Simple JavaScript to toggle mobile menu (for demonstration, not part of strict HTML/Tailwind only) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', () => {
        menu.classList.toggle('hidden');
      });
    }
  });
</script>