Glass Transparent Navbar

export default function NavbarGlassTransparent() {
  return (
    <section className="relative overflow-hidden bg-zinc-950 px-6 py-16 md:py-24">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-600/40 via-fuchsia-500/20 to-amber-400/30"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -left-24 top-10 h-72 w-72 rounded-full bg-amber-400/30 blur-3xl"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -right-16 bottom-0 h-72 w-72 rounded-full bg-indigo-500/40 blur-3xl"
      />

      <header className="relative mx-auto max-w-6xl">
        <nav
          aria-label="Primary"
          className="flex items-center justify-between gap-6 rounded-2xl border border-white/20 bg-white/10 px-5 py-3 shadow-lg backdrop-blur-md"
        >
          <a
            href="#"
            className="flex items-center gap-2 text-lg font-semibold tracking-tight text-white"
          >
            <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white ring-1 ring-inset ring-white/30">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <circle cx="12" cy="12" r="9" />
                <path d="M12 3a15 15 0 0 1 0 18" />
                <path d="M12 3a15 15 0 0 0 0 18" />
                <path d="M3.5 9h17M3.5 15h17" />
              </svg>
            </span>
            Horizon
          </a>

          <ul className="hidden items-center gap-8 text-sm font-medium text-white/80 md:flex">
            <li>
              <a href="#" className="transition hover:text-white">
                Features
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-white">
                Pricing
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-white">
                About
              </a>
            </li>
          </ul>

          <div className="flex items-center gap-3">
            <a
              href="#"
              className="hidden text-sm font-medium text-white/80 transition hover:text-white sm:inline"
            >
              Sign in
            </a>
            <a
              href="#"
              className="rounded-full bg-white px-5 py-2.5 text-sm font-semibold text-zinc-900 shadow-sm transition hover:bg-white/90"
            >
              Join now
            </a>
          </div>
        </nav>
      </header>
    </section>
  );
}