Sticky Gradient Navbar with Sign-In & Mobile Menu

<header class="w-full relative z-50 sticky top-0 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-slate-200/20 to-slate-800/80 border-white/20 border-b backdrop-blur-lg">
      <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/5 to-transparent"></div>
      <nav class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
        <div class="flex h-16 items-center justify-between">
          <a href="#" class="inline-flex items-center gap-2">
            <span class="inline-flex h-8 w-8 items-center justify-center ring-1 ring-white/10 bg-zinc-800 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="orbit" class="lucide lucide-orbit h-4 w-4 text-zinc-200"><path d="M20.341 6.484A10 10 0 0 1 10.266 21.85" class=""></path><path d="M3.659 17.516A10 10 0 0 1 13.74 2.152" class=""></path><circle cx="12" cy="12" r="3" class=""></circle><circle cx="19" cy="5" r="2" class=""></circle><circle cx="5" cy="19" r="2" class=""></circle></svg>
            </span>
            <span class="text-2xl font-semibold tracking-tight font-playfair">Marine</span>
          </a>
          <div class="hidden md:flex items-center space-x-8">
            <a class="text-sm/6 font-medium text-white/80 hover:text-white transition" href="#" style="">Fleet</a>
            <a class="text-sm/6 font-medium text-white/80 hover:text-white transition" href="#" style="">Charters</a>
            <a class="text-sm/6 font-medium text-white/80 hover:text-white transition" href="#" style="">Services</a>
            <a class="text-sm/6 font-medium text-white/80 hover:text-white transition" href="#" style="">Sales</a>
          </div>
          <div class="flex items-center space-x-4">
            <button class="hidden sm:inline-flex items-center gap-2 rounded-full bg-white/5 hover:bg-white/10 px-3 py-1.5 text-xs font-medium transition" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user h-4 w-4 text-slate-400" style=""><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
              Sign in
            </button>
            <button class="md:hidden inline-flex items-center justify-center h-9 w-9 rounded-lg bg-white/5 hover:bg-white/10" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
            </button>
          </div>
        </div>
      </nav>
    </header>