Sticky Glassmorphic Navbar with CTA

<header class="relative z-50 sticky top-0 backdrop-blur-xl bg-[#0a0a12]/80 border-b border-white/5 w-full">
      <div 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="flex items-center gap-3">
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600 shadow-[0_0_0_2px_rgba(255,255,255,0.06)_inset]">
              <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" class="w-[24px] h-[24px]" style="width: 24px; height: 24px; color: rgb(244, 244, 245);"><path d="M10 9.5 8 12l2 2.5" class=""></path><path d="m14 9.5 2 2.5-2 2.5" class=""></path><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z" class=""></path></svg>
            </span>
            <span class="text-lg font-semibold tracking-tight font-sans" style="">Nova Chat</span>
          </a>

          <nav class="hidden md:flex gap-1 border-slate-50/5 border rounded-full px-4 items-center">
            <a href="#" class="hover:text-white text-sm font-medium text-zinc-300 pt-2 pr-3 pb-2 pl-3 font-sans" style="">Product</a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-zinc-300 hover:text-white font-sans" style="">Solutions</a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-zinc-300 hover:text-white font-sans" style="">Pricing</a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-zinc-300 hover:text-white font-sans" style="">Docs</a>
            <a href="#" class="px-3 py-2 text-sm font-medium text-zinc-300 hover:text-white font-sans" style="">Changelog</a>
          </nav>

          <div class="flex gap-2 items-center">
            <a href="#" class="text-sm font-medium text-zinc-300 hover:text-white px-3 py-2 font-sans" style="">Login</a>
            <button type="button" aria-label="Get started" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(151,65,252,0.2)] hover:shadow-[0_12px_20px_-6px_rgba(151,65,252,0.28)] 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-md p-[1px]" style="background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%, #00DDEB);">
              <span class="flex items-center justify-center gap-2 text-[14px] leading-none min-w-[110px] h-full transition-colors duration-300 group-hover:bg-transparent font-medium bg-[#0b0f17] rounded-md pt-2 pr-4 pb-2 pl-4 font-sans" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
                Get started
              </span>
            </button>
          </div>
        </div>
      </div>
    </header>