Responsive Header Navbar with Auth & Mobile Menu

<header class="w-full">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <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">Arcflow</span>
          </a>

          <nav class="hidden md:flex items-center gap-8 text-sm text-zinc-300">
            <a href="#" class="hover:text-zinc-100 transition-colors font-sans">Platform</a>
            <a href="#" class="hover:text-zinc-100 transition-colors font-sans">Solutions</a>
            <a href="#" class="hover:text-zinc-100 transition-colors font-sans">Pricing</a>
            <a href="#" class="hover:text-zinc-100 transition-colors font-sans">Docs</a>
            <a href="#" class="hover:text-zinc-100 transition-colors font-sans">Changelog</a>
          </nav>

          <div class="flex items-center gap-3">
            <button class="hidden sm:inline-flex gap-2 hover:text-zinc-100 hover:bg-white/5 ring-1 ring-white/5 text-sm text-zinc-300 rounded-md pt-1.5 pr-3 pb-1.5 pl-3 items-center">
              
              <span class="font-medium font-sans">Log in</span>
            </button>
            <button type="button" role="button" aria-label="Create Account" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(255,255,255,0.05)] hover:shadow-[0_12px_20px_-6px_rgba(255,255,255,0.1)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 transform-gpu hover:-translate-y-0.5 text-white rounded-lg pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center" style="background-image: linear-gradient(144deg,rgba(255,255,255,0.3), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));">
  <span class="flex items-center justify-center gap-2 leading-none min-w-[140px] w-full h-full transition-colors duration-300 group-hover:bg-black/50 font-medium bg-black/80 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3">
    <span class="text-sm">Create Account</span>
    
  </span>
</button>
            <button class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md ring-1 ring-white/10 hover:bg-white/5">
              <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>
      </div>
    </header>