{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-columns",
  "title": "Link columns footer",
  "description": "Footer with logo, tagline and social links, four link columns and a copyright bar with legal links.",
  "registryDependencies": [
    "utils",
    "badge"
  ],
  "files": [
    {
      "path": "src/components/blocks/footer-columns.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\";\n\nconst BRAND = \"Acme\";\nconst TAGLINE =\n  \"The calm workspace for product teams — plan, build and ship in one place.\";\n\nconst COLUMNS = [\n  {\n    title: \"Product\",\n    links: [\n      { label: \"Features\" },\n      { label: \"Integrations\" },\n      { label: \"Pricing\" },\n      { label: \"Changelog\" },\n      { label: \"AI assistant\", badge: \"New\" },\n    ],\n  },\n  {\n    title: \"Resources\",\n    links: [{ label: \"Documentation\" }, { label: \"Guides\" }, { label: \"API reference\" }, { label: \"Community\" }, { label: \"Status\" }],\n  },\n  {\n    title: \"Company\",\n    links: [{ label: \"About\" }, { label: \"Customers\" }, { label: \"Careers\", badge: \"Hiring\" }, { label: \"Press\" }, { label: \"Contact\" }],\n  },\n  {\n    title: \"Solutions\",\n    links: [{ label: \"Startups\" }, { label: \"Enterprise\" }, { label: \"Agencies\" }, { label: \"Nonprofits\" }],\n  },\n];\n\nconst LEGAL = [\"Privacy\", \"Terms\", \"Cookies\", \"Security\"];\n\nconst SOCIAL = [\n  {\n    label: \"X\",\n    path: \"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\",\n  },\n  {\n    label: \"GitHub\",\n    path: \"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\",\n  },\n  {\n    label: \"LinkedIn\",\n    path: \"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.062 2.062 0 0 1 0 4.125zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\",\n  },\n  {\n    label: \"YouTube\",\n    path: \"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\",\n  },\n];\n\nconst focusRing =\n  \"rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\";\n\n/**\n * Classic site footer: brand, tagline and social links on the left, four\n * link columns on the right, and a bottom bar with the copyright notice and\n * legal links. Edit the consts above to make it yours.\n */\nexport function FooterColumns() {\n  return (\n    <footer className=\"border-t bg-background px-6 pt-20 pb-10 sm:pt-24 lg:px-8\">\n      <h2 className=\"sr-only\">Footer</h2>\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-16\">\n          <div className=\"max-w-xs\">\n            <a href=\"#\" className={`inline-flex items-center gap-2.5 text-lg font-semibold tracking-tight ${focusRing}`}>\n              <span aria-hidden className=\"grid size-8 place-items-center rounded-[0.6rem] bg-linear-to-br from-brand-from to-brand-to text-brand-foreground\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"size-4.5\">\n                  <path d=\"M5 20 12 4l7 16M8 14h8\" />\n                </svg>\n              </span>\n              {BRAND}\n            </a>\n            <p className=\"mt-5 text-sm leading-relaxed text-pretty text-muted-foreground\">{TAGLINE}</p>\n            <ul className=\"mt-6 flex gap-2\">\n              {SOCIAL.map(({ label, path }) => (\n                <li key={label}>\n                  <a\n                    href=\"#\"\n                    aria-label={`${BRAND} on ${label}`}\n                    className=\"grid size-9 place-items-center rounded-full border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n                  >\n                    <svg aria-hidden viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                      <path d={path} />\n                    </svg>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <nav aria-label=\"Footer\" className=\"grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4\">\n            {COLUMNS.map((column) => (\n              <div key={column.title}>\n                <h3 className=\"text-sm font-semibold\">{column.title}</h3>\n                <ul className=\"mt-4 space-y-3 text-sm\">\n                  {column.links.map((link) => (\n                    <li key={link.label} className=\"flex items-center gap-2\">\n                      <a href=\"#\" className={`text-muted-foreground transition-colors hover:text-foreground ${focusRing}`}>\n                        {link.label}\n                      </a>\n                      {link.badge && (\n                        <Badge variant=\"secondary\" className=\"h-5 bg-primary/10 px-1.5 text-[0.7rem] text-primary\">\n                          {link.badge}\n                        </Badge>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </nav>\n        </div>\n\n        <div className=\"mt-16 flex flex-col-reverse gap-4 border-t pt-8 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between\">\n          <p>© 2026 {BRAND}, Inc. All rights reserved.</p>\n          <nav aria-label=\"Legal\">\n            <ul className=\"flex flex-wrap gap-x-6 gap-y-2\">\n              {LEGAL.map((label) => (\n                <li key={label}>\n                  <a href=\"#\" className={`transition-colors hover:text-foreground ${focusRing}`}>\n                    {label}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/footer-columns.tsx"
    }
  ],
  "categories": [
    "footers"
  ],
  "type": "registry:block"
}