Responsive Glassmorphic Navbar with Mobile Menu

<div
  class="relative max-w-7xl lg:px-8 ring-1 ring-white/10 bg-white/10 border-white/20 border rounded-2xl mr-auto ml-auto pr-6 pl-6 shadow-lg backdrop-blur-lg">
  <div class="flex h-20 items-center justify-between">
    <a href="#" class="group">
      <div class="flex items-center gap-2">
        <div
          class="group-hover:bg-white/20 transition-colors bg-white/15 border-white/30 border rounded-xl pt-2 pr-3 pb-2 pl-3 backdrop-blur-md">
          <span class="block text-lg font-semibold tracking-tight font-geist" style="">JC</span>
        </div>
      </div>
    </a>

    <nav class="hidden md:flex items-center gap-8">
      <a href="#work"
        class="text-sm font-medium text-gray-300 hover:text-white transition-colors duration-200 font-geist"
        style="">Work</a>
      <a href="#about"
        class="text-sm font-medium text-gray-300 hover:text-white transition-colors duration-200 font-geist"
        style="">About</a>
      <a href="#process"
        class="text-sm font-medium text-gray-300 hover:text-white transition-colors duration-200 font-geist"
        style="">Process</a>
      <a href="#journal"
        class="hover:text-white transition-colors duration-200 text-sm font-medium text-gray-300 font-geist"
        style="">Resume</a>
    </nav>

    <a href="#contact"
      class="hidden md:inline-flex items-center gap-2 rounded-full bg-white/90 text-black px-5 py-2.5 text-sm font-semibold hover:bg-white transition-all duration-200 hover:scale-105 backdrop-blur-md shadow-lg font-geist"
      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="arrow-right"
        class="lucide lucide-arrow-right w-4 h-4">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
      Let's connect
    </a>

    <button id="menuBtn" class="md:hidden rounded-xl bg-white/15 border border-white/30 p-2.5 text-white hover:bg-white/20 backdrop-blur-md">
      <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" stroke-line="round" class="lucide lucide-menu w-5 h-5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
    </button>
  </div>

  <!-- Mobile menu -->
  <div id="mobileNav"
    class="hidden md:hidden absolute top-full left-0 right-0 bg-black/80 backdrop-blur-xl border-b border-white/20 rounded-b-2xl shadow-lg ring-1 ring-white/10">
    <div class="px-6 py-6 space-y-4">
      <a href="#work"
        class="block rounded-xl px-4 py-3 text-base font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-colors font-geist"
        style="">Work</a>
      <a href="#about"
        class="block rounded-xl px-4 py-3 text-base font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-colors font-geist"
        style="">About</a>
      <a href="#process"
        class="block rounded-xl px-4 py-3 text-base font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-colors font-geist"
        style="">Process</a>
      <a href="#journal"
        class="block rounded-xl px-4 py-3 text-base font-medium text-gray-300 hover:bg-white/10 hover:text-white transition-colors font-geist"
        style="">Journal</a>
      <div class="pt-4 border-t border-white/20">
        <a href="#contact"
          class="flex items-center justify-center gap-2 rounded-xl bg-white/90 text-black px-6 py-3 text-base font-semibold backdrop-blur-md shadow-lg font-geist"
          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="arrow-right" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
          Let's connect
        </a>
      </div>
    </div>
  </div>
</div>