{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-floating",
  "title": "Floating pill navbar",
  "description": "Full-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/resizable-navbar.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/navbar-floating.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ResizableNavbar } from \"@/components/velora/resizable-navbar\";\n\nconst BRAND = \"Lumen\";\n\nconst LINKS = [\n  { label: \"Product\", href: \"#product\" },\n  { label: \"Features\", href: \"#features\" },\n  { label: \"Pricing\", href: \"#pricing\" },\n  { label: \"Customers\", href: \"#customers\" },\n  { label: \"Changelog\", href: \"#changelog\" },\n];\n\nfunction Logo() {\n  return (\n    <a\n      href=\"#\"\n      className=\"flex items-center gap-2 rounded-full pr-1 text-[0.95rem] font-semibold tracking-tight focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n    >\n      <span\n        aria-hidden\n        className=\"grid size-7 place-items-center rounded-lg bg-linear-to-br from-brand-from via-brand-via to-brand-to text-brand-foreground shadow-sm shadow-brand/30\"\n      >\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" className=\"size-4\">\n          <circle cx=\"12\" cy=\"12\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\" />\n          <path d=\"M12 3.5v2M12 18.5v2M3.5 12h2M18.5 12h2M6 6l1.4 1.4M16.6 16.6 18 18M6 18l1.4-1.4M16.6 7.4 18 6\" />\n        </svg>\n      </span>\n      {BRAND}\n    </a>\n  );\n}\n\n/**\n * Full-width navbar that shrinks into a centred, blurred pill once the page\n * scrolls, with sign-in and sign-up actions. Below a 48rem container width\n * the links fold into a disclosure menu. The faded page underneath is\n * placeholder content — delete it and drop the navbar into your layout.\n */\nexport function NavbarFloating() {\n  return (\n    <div className=\"relative isolate overflow-x-clip\">\n      {/* Soft brand glow at the top of the page */}\n      <div\n        aria-hidden\n        className=\"absolute inset-x-0 top-0 -z-10 h-144 bg-radial-[ellipse_at_50%_0%] from-brand/15 via-brand/5 via-40% to-transparent to-70%\"\n      />\n\n      <ResizableNavbar\n        items={LINKS}\n        logo={<Logo />}\n        className=\"pt-3\"\n        cta={\n          <div className=\"grid grid-cols-2 gap-2 @3xl/navbar:flex @3xl/navbar:items-center @3xl/navbar:gap-1\">\n            <Button variant=\"ghost\" className=\"h-9 rounded-full px-4 @max-3xl/navbar:border-border\" asChild>\n              <a href=\"#\">Sign in</a>\n            </Button>\n            <Button className=\"h-9 rounded-full px-4\" asChild>\n              <a href=\"#\">\n                Get started <ArrowRightIcon data-icon=\"inline-end\" />\n              </a>\n            </Button>\n          </div>\n        }\n      />\n\n      {/* Placeholder page content, so there is something to scroll past */}\n      <div aria-hidden className=\"px-6 pt-20 pb-24 sm:pt-28 lg:px-8\">\n        <div className=\"mx-auto flex max-w-3xl flex-col items-center\">\n          <div className=\"h-7 w-48 rounded-full border bg-background/60\" />\n          <div className=\"mt-8 h-10 w-full max-w-xl rounded-xl bg-muted sm:h-14\" />\n          <div className=\"mt-3 h-10 w-4/5 max-w-md rounded-xl bg-muted sm:h-14\" />\n          <div className=\"mt-8 h-3 w-full max-w-lg rounded-full bg-muted/70\" />\n          <div className=\"mt-3 h-3 w-3/4 max-w-sm rounded-full bg-muted/70\" />\n          <div className=\"mt-10 flex gap-3\">\n            <div className=\"h-10 w-32 rounded-full bg-primary/25\" />\n            <div className=\"h-10 w-28 rounded-full border bg-background/60\" />\n          </div>\n        </div>\n\n        <div className=\"mx-auto mt-16 max-w-5xl rounded-2xl border bg-card/60 p-2 shadow-2xl shadow-foreground/5 sm:mt-20\">\n          <div className=\"grid h-72 grid-cols-[10rem_1fr] gap-2 overflow-hidden rounded-xl border bg-background/70 p-3 max-sm:grid-cols-1 sm:h-96\">\n            <div className=\"space-y-2 max-sm:hidden\">\n              <div className=\"h-6 w-3/4 rounded-md bg-muted\" />\n              {Array.from({ length: 6 }, (_, i) => (\n                <div key={i} className=\"h-4 rounded-md bg-muted/60\" style={{ width: `${90 - i * 8}%` }} />\n              ))}\n            </div>\n            <div className=\"grid grid-rows-[auto_1fr] gap-2\">\n              <div className=\"grid grid-cols-3 gap-2\">\n                {Array.from({ length: 3 }, (_, i) => (\n                  <div key={i} className=\"h-20 rounded-lg border bg-muted/40 sm:h-24\" />\n                ))}\n              </div>\n              <div className=\"flex items-end gap-2 rounded-lg border bg-muted/30 p-4\">\n                {[40, 65, 50, 80, 60, 92, 72, 58, 85, 68, 95, 76].map((h, i) => (\n                  <div\n                    key={i}\n                    className=\"flex-1 rounded-t-md bg-linear-to-t from-brand/10 to-brand/30\"\n                    style={{ height: `${h}%` }}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/navbar-floating.tsx"
    }
  ],
  "categories": [
    "navbars"
  ],
  "type": "registry:block"
}