Frosted Glass Fixed Top Navigation Bar

<nav class="fixed top-6 left-1/2 -translate-x-1/2 z-50">

  <div
    class="hidden lg:flex gap-1 bg-[#050505]/60 border border-white/10 rounded-full p-1.5 pl-6 shadow-[0_8px_32px_rgba(0,0,0,0.5)] backdrop-blur-xl items-center ring-1 ring-white/5">

    <div class="flex gap-8 text-[13px] font-medium text-neutral-400 mr-6">
      <a href="#" class="text-white relative group">
        Home
        <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-cyan-400 rounded-full shadow-[0_0_8px_#22d3ee]"></span>
      </a>
      <a href="#" class="hover:text-white transition-colors hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">DeFi
        App</a>
      <a href="#"
        class="hover:text-white transition-colors hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">Assets</a>
      <a href="#"
        class="hover:text-white transition-colors hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">Features</a>
      <a href="#"
        class="hover:text-white transition-colors hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">Pricing</a>
    </div>

    <button class="flex items-center gap-3 pl-5 pr-1.5 py-1.5 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/20 transition-all group active:scale-95">

            <span class="text-xs font-semibold text-neutral-200 tracking-wide">Get Protected</span>
            
            <div class="w-[1px] h-3 bg-white/10"></div>

            <div class="w-7 h-7 rounded-full bg-white text-black flex items-center justify-center shadow-[0_0_15px_rgba(255,255,255,0.3)] group-hover:scale-110 transition-transform duration-300">
                <iconify-icon icon="solar:shield-bold-duotone" width="14" class="text-black"></iconify-icon>
            </div>
      </button>

  </div>

</nav>