{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer",
  "title": "Site footer",
  "description": "A marketing footer with brand blurb, link columns, and legal links.",
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/footer.tsx",
      "content": "import { Separator } from '@/components/ui/separator'\n\nconst columns = [\n  { title: 'Product', links: ['Overview', 'Components', 'Tokens', 'Changelog'] },\n  { title: 'Resources', links: ['Docs', 'Guides', 'Figma kit', 'Support'] },\n  { title: 'Company', links: ['About', 'Blog', 'Careers', 'Contact'] },\n]\n\n/** A marketing footer with brand blurb, link columns, and legal links. */\nexport function Footer() {\n  return (\n    <footer className=\"w-full bg-background px-6 py-12 text-foreground\">\n      <div className=\"flex flex-col gap-10 md:flex-row md:justify-between\">\n        <div className=\"flex max-w-xs flex-col gap-2\">\n          <span className=\"font-[family-name:var(--font-fraunces,Georgia,serif)] text-xl\">Quill</span>\n          <p className=\"text-sm text-muted-foreground\">\n            A calm, editorial design system for building by hand.\n          </p>\n        </div>\n        <div className=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n          {columns.map((col) => (\n            <nav key={col.title} aria-label={col.title} className=\"flex flex-col gap-2\">\n              <span className=\"text-sm font-medium\">{col.title}</span>\n              {col.links.map((l) => (\n                <a key={l} href=\"#\" className=\"text-sm text-muted-foreground hover:text-foreground\">\n                  {l}\n                </a>\n              ))}\n            </nav>\n          ))}\n        </div>\n      </div>\n      <Separator className=\"my-8\" />\n      <div className=\"flex flex-col items-center justify-between gap-2 text-xs text-muted-foreground sm:flex-row\">\n        <span>© 2026 Quill. All rights reserved.</span>\n        <div className=\"flex gap-4\">\n          <a href=\"#\" className=\"hover:text-foreground\">Privacy</a>\n          <a href=\"#\" className=\"hover:text-foreground\">Terms</a>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/footer.tsx"
    }
  ],
  "meta": {
    "intent": [
      "marketing",
      "navigation"
    ],
    "use_when": "You need a site-wide footer with link columns, a brand blurb, and legal links."
  },
  "docs": "A marketing footer with brand blurb, link columns, and legal links. Do: Wrap each link column in its own <nav aria-label>, as this block already does, so screen-reader users can jump between them. Don't: Render link columns as bare, unlabeled <div> lists that all announce as one undifferentiated block. Do: Separate the bottom legal row (copyright, Privacy, Terms) from the link columns with a visible Separator, as this block does. Don't: Rely on extra margin alone with no divider — the legal row reads as just another link column, not a distinct footer end-cap. Use sidebar-nav when the links are primary in-app navigation, not secondary site-wide links at the page's end. Use navbar when the links belong at the top of the page as primary navigation, not the bottom as reference.",
  "categories": [
    "marketing",
    "navigation"
  ],
  "type": "registry:block"
}