极简大地色调导航组件

<nav class="bg-stone-100 dark:bg-stone-900 shadow-sm transition-colors duration-300 w-full">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-tight">
      ConsultPro
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-500" aria-label="Toggle navigation">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Services
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        About Us
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Case Studies
      </a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
        Blog
      </a>
      <a href="#" class="bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white px-5 py-2 rounded-full text-base font-medium transition-colors duration-200 shadow-md">
        Contact Us
      </a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled with JS) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Services
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Case Studies
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-800 transition-colors duration-200">
        Blog
      </a>
      <a href="#" class="block mt-2 px-3 py-2 rounded-full text-base font-medium text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 shadow-md transition-colors duration-200 text-center">
        Contact Us
      </a>
    </div>
  </div>
</nav>