{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-01",
  "title": "Classic top bar",
  "description": "Logo + flat nav links with an active-state chip + Login / Get-started CTAs — the bread-and-butter site header.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/header/header-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Menu, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst navItems = [\n  { label: \"Product\", href: \"#product\", active: true },\n  { label: \"Solutions\", href: \"#solutions\" },\n  { label: \"Pricing\", href: \"#pricing\" },\n  { label: \"Company\", href: \"#company\" },\n]\n\nexport default function Header01() {\n  const [menuOpen, setMenuOpen] = React.useState(false)\n\n  return (\n    <section className=\"bg-background\">\n      <header className=\"mx-auto flex max-w-7xl items-center justify-between px-6 py-4 sm:px-10\">\n        <a\n          href=\"#\"\n          className=\"flex items-center gap-2 font-semibold tracking-tight text-foreground\"\n        >\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            src=\"https://blockus.lndevui.com/brand/logo.svg\"\n            alt=\"blockus\"\n            className=\"size-6 dark:invert\"\n          />\n          blockus\n        </a>\n\n        <nav className=\"hidden items-center gap-1 md:flex\">\n          {navItems.map((item) => (\n            <a\n              key={item.label}\n              href={item.href}\n              className={\n                item.active\n                  ? \"rounded-md bg-foreground/5 px-3 py-1.5 text-sm font-medium text-foreground\"\n                  : \"rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground\"\n              }\n            >\n              {item.label}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"flex items-center gap-2\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            className=\"hidden rounded-md sm:inline-flex\"\n          >\n            Login\n          </Button>\n          <Button size=\"sm\" className=\"rounded-md\">\n            Get started\n            <ArrowRight />\n          </Button>\n          <button\n            type=\"button\"\n            onClick={() => setMenuOpen(true)}\n            aria-label=\"Open menu\"\n            className=\"grid size-9 place-items-center rounded-full border border-border text-foreground md:hidden\"\n          >\n            <Menu className=\"size-4\" />\n          </button>\n        </div>\n      </header>\n\n      {menuOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div\n            aria-hidden\n            className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n            onClick={() => setMenuOpen(false)}\n          />\n          <div className=\"absolute inset-x-4 top-4 overflow-hidden rounded-2xl border border-border bg-card p-5 shadow-2xl shadow-black/30\">\n            <div className=\"flex items-center justify-between\">\n              <a\n                href=\"#\"\n                className=\"inline-flex items-center gap-2 font-semibold tracking-tight text-foreground\"\n              >\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src=\"https://blockus.lndevui.com/brand/logo.svg\"\n                  alt=\"blockus\"\n                  className=\"size-6 dark:invert\"\n                />\n                blockus\n              </a>\n              <button\n                type=\"button\"\n                onClick={() => setMenuOpen(false)}\n                aria-label=\"Close menu\"\n                className=\"grid size-9 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n\n            <ul className=\"mt-5 flex flex-col\">\n              {navItems.map((item) => (\n                <li key={item.label}>\n                  <a\n                    href={item.href}\n                    onClick={() => setMenuOpen(false)}\n                    className={\n                      item.active\n                        ? \"flex items-center rounded-md bg-muted/60 px-3 py-2.5 text-sm font-medium text-foreground\"\n                        : \"flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted\"\n                    }\n                  >\n                    {item.label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n\n            <div className=\"mt-5 flex flex-col gap-2 border-t border-border pt-5\">\n              <Button variant=\"outline\" className=\"w-full rounded-md\">\n                Login\n              </Button>\n              <Button className=\"w-full rounded-md\">\n                Get started\n                <ArrowRight />\n              </Button>\n            </div>\n\n            <a\n              href=\"#status\"\n              className=\"mt-4 inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground\"\n            >\n              <span className=\"relative grid size-1.5 place-items-center\">\n                <span className=\"size-1.5 rounded-full bg-emerald-500\" />\n                <span\n                  aria-hidden\n                  className=\"absolute inset-0 animate-ping rounded-full bg-emerald-500/50\"\n                />\n              </span>\n              All systems operational\n            </a>\n          </div>\n        </div>\n      )}\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/header-01.tsx"
    }
  ],
  "categories": [
    "header"
  ],
  "type": "registry:block"
}