import { Button } from "@/components/ui/button"

export default function HeaderCentered() {
  const left = ["Product", "Docs"]
  const right = ["Pricing", "Blog"]

  return (
    <header className="border-b border-border px-6 py-5">
      <div className="flex items-center justify-center gap-8 text-sm text-muted">
        <nav className="hidden flex-1 justify-end gap-6 md:flex">
          {left.map((link) => (
            <a key={link} href="#" className="transition-colors hover:text-fg">
              {link}
            </a>
          ))}
        </nav>

        <a href="#" className="text-base font-semibold tracking-tight text-fg">
          Acme
        </a>

        <nav className="hidden flex-1 gap-6 md:flex">
          {right.map((link) => (
            <a key={link} href="#" className="transition-colors hover:text-fg">
              {link}
            </a>
          ))}
        </nav>
      </div>

      <div className="mt-4 flex justify-center gap-2 md:hidden">
        <Button size="sm" variant="outline">
          Sign in
        </Button>
        <Button size="sm">Get started</Button>
      </div>
    </header>
  )
}
Header

With navigation

Centered logo
