3D_Earth_Tone_Dating_Social_Navigation

<nav class="bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-xl relative z-40 rounded-b-xl overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-stone-700 dark:text-stone-300 font-bold text-2xl lg:text-3xl tracking-tight relative">
          <span class="block transform -translate-y-1 -translate-x-1 font-extrabold text-stone-500 opacity-20 dark:text-stone-400">LOV3D</span>
          <span class="absolute top-0 left-0 text-amber-700 dark:text-amber-500">LOV3D</span>
        </a>
      </div>

      <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Matches
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Messages
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Discover
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </div>

      <div class="flex items-center space-x-4">
        <div class="relative hidden sm:block">
          <label for="search-input" class="sr-only">Search</label>
          <input
            type="text"
            id="search-input"
            placeholder="Search..."
            class="pl-10 pr-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-50 dark:bg-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 w-36 lg:w-48 transition-all duration-300 ease-in-out shadow-inner dark:shadow-none"
          />
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" 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>

        <div class="relative group">
          <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-amber-400 dark:focus:ring-offset-stone-800">
            <span class="sr-only">Open user menu</span>
            <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400 shadow-md transform transition-transform duration-300 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
            <span class="absolute -bottom-1 -right-1 block h-3 w-3 rounded-full bg-green-500 border-2 border-stone-100 dark:border-stone-900"></span>
          </button>
          <!-- Dropdown for profile, settings (hidden by default, can be toggled with JS) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white dark:bg-stone-700 ring-1 ring-black ring-opacity-5 focus:outline-none"></div> -->
        </div>

        <!-- Mobile menu button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="bg-amber-600 dark:bg-amber-700 inline-flex items-center justify-center p-2 rounded-md text-stone-100 dark:text-stone-300 transition duration-150 ease-in-out hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
            <!-- Icon when menu is open. -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute w-full bg-gradient-to-b from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-lg pb-4 pt-2 -mt-1 transform transition-transform duration-300 ease-out scale-y-0 origin-top" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Home</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Matches</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Messages</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Discover</a>
    </div>
    <div class="border-t border-stone-300 dark:border-stone-700 pt-4 pb-3">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-stone-800 dark:text-stone-200">John Doe</div>
          <div class="text-sm font-medium text-stone-500 dark:text-stone-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This is a placeholder for JS-driven interactivity to toggle the mobile menu. */
  /* For dynamic demo, you might add a class like 'mobile-menu-open' to 'nav' and manage its visibility. */
  #mobile-menu {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  /* Example of how it would look when open with JS */
  /* nav.mobile-menu-open #mobile-menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  } */
</style>