"use client";

import { useState } from "react";

const NAV = [
  { label: "Product", href: "#product" },
  { label: "Solutions", href: "#solutions" },
  { label: "Pricing", href: "#pricing" },
  { label: "Docs", href: "#docs" },
  { label: "Changelog", href: "#changelog" },
];

export function MinimalSaasNavbar() {
  const [open, setOpen] = useState(false);

  return (
    <div className="bg-white text-zinc-900 font-sans antialiased">
      <header className="sticky top-0 z-40 border-b border-zinc-200/80 bg-white/80 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-6 px-5">
          <a
            href="#"
            className="flex items-center gap-2 text-[15px] font-semibold tracking-tight"
            aria-label="Lumen home"
          >
            <span className="grid h-6 w-6 place-items-center rounded-md bg-zinc-900 text-white text-[12px] font-bold">
              L
            </span>
            <span>Lumen</span>
          </a>

          <nav
            aria-label="Primary"
            className="hidden md:flex items-center gap-1 text-[13.5px]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-md px-3 py-1.5 text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="ml-auto hidden md:flex items-center gap-2">
            <a
              href="#signin"
              className="rounded-md px-3 py-1.5 text-[13.5px] text-zinc-700 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900"
            >
              Sign in
            </a>
            <a
              href="#start"
              className="rounded-md bg-zinc-900 px-3.5 py-1.5 text-[13.5px] font-medium text-white hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2"
            >
              Start free
            </a>
          </div>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="lumen-mobile"
            className="ml-auto md:hidden grid h-9 w-9 place-items-center rounded-md hover:bg-zinc-100"
            aria-label="Toggle menu"
          >
            <span aria-hidden className="relative block h-3 w-4">
              <span
                className={`absolute left-0 top-0 h-px w-full bg-zinc-900 transition-transform ${open ? "translate-y-1.5 rotate-45" : ""}`}
              />
              <span
                className={`absolute left-0 top-1.5 h-px w-full bg-zinc-900 transition-opacity ${open ? "opacity-0" : ""}`}
              />
              <span
                className={`absolute left-0 top-3 h-px w-full bg-zinc-900 transition-transform ${open ? "-translate-y-1.5 -rotate-45" : ""}`}
              />
            </span>
          </button>
        </div>

        {open && (
          <div
            id="lumen-mobile"
            className="md:hidden border-t border-zinc-200 bg-white"
          >
            <nav className="px-5 py-3 grid gap-1 text-[14px]">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="rounded-md px-2 py-2 text-zinc-700 hover:bg-zinc-100"
                >
                  {item.label}
                </a>
              ))}
              <div className="mt-2 grid grid-cols-2 gap-2">
                <a
                  href="#signin"
                  className="rounded-md border border-zinc-200 px-3 py-2 text-center text-[13.5px]"
                >
                  Sign in
                </a>
                <a
                  href="#start"
                  className="rounded-md bg-zinc-900 px-3 py-2 text-center text-[13.5px] text-white"
                >
                  Start free
                </a>
              </div>
            </nav>
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-6xl px-5 py-10">
        <div className="max-w-xl">
          <p className="text-[12px] font-medium uppercase tracking-[0.14em] text-zinc-500">
            Workspaces · v2.4
          </p>
          <h1 className="mt-3 text-[28px] font-semibold tracking-tight text-zinc-900">
            Ship customer feedback into every team meeting.
          </h1>
        </div>
      </div>
    </div>
  );
}
Minimal SaaS Navbar

Ship customer feedback into every team meeting.
