{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-2",
  "title": "Footer 2: giant wordmark",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Brand, tagline and a live status pill beside three link columns, a legal bar with icon links, and an oversized wordmark that sinks into a fading gradient along the bottom.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/status-dot.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/footer-2/footer-2.tsx",
      "content": "// Ballmac UI: Footer 2. https://ui.ballmac.com/blocks/footer-2\nimport * as React from \"react\"\nimport { Globe, Mail, Rss } from \"lucide-react\"\n\nimport { StatusDot } from \"@/components/ballmac/status-dot\"\nimport { cn } from \"@/lib/utils\"\n\ntype Footer2Link = { label: string; href: string }\n\ntype Footer2Column = {\n  /** Column heading. */\n  title: string\n  links: Footer2Link[]\n}\n\ntype Footer2Social = {\n  /** Accessible name, e.g. \"Acme on GitHub\". */\n  label: string\n  href: string\n  /** Icon. Defaults to a globe. */\n  icon?: React.ReactNode\n}\n\ntype Footer2Props = React.ComponentProps<\"footer\"> & {\n  /** Brand name beside the tagline. */\n  brand?: string\n  /** One sentence under the brand. */\n  tagline?: string\n  /** Link columns. Three fit best. */\n  columns?: Footer2Column[]\n  /** Icon links. */\n  socials?: Footer2Social[]\n  /** Live status line. Pass null to hide it. */\n  status?: { label: string; href?: string; tone?: \"online\" | \"busy\" | \"away\" } | null\n  /** Legal text in the bottom bar. */\n  legal?: string\n  /** Legal links in the bottom bar. */\n  legalLinks?: Footer2Link[]\n  /** Giant word along the bottom. Defaults to the brand. */\n  wordmark?: string\n}\n\nconst defaultColumns: Footer2Column[] = [\n  { title: \"Product\", links: [{ label: \"Overview\", href: \"#\" }, { label: \"Pricing\", href: \"#\" }, { label: \"Changelog\", href: \"#\" }, { label: \"Integrations\", href: \"#\" }] },\n  { title: \"Company\", links: [{ label: \"About\", href: \"#\" }, { label: \"Careers\", href: \"#\" }, { label: \"Blog\", href: \"#\" }, { label: \"Contact\", href: \"#\" }] },\n  { title: \"Resources\", links: [{ label: \"Documentation\", href: \"#\" }, { label: \"Guides\", href: \"#\" }, { label: \"Help center\", href: \"#\" }, { label: \"Security\", href: \"#\" }] },\n]\n\nfunction Footer2({\n  brand = \"Acme\",\n  tagline = \"Finance tools that feel like a quiet room. Built by a small remote team.\",\n  columns = defaultColumns,\n  socials = [\n    { label: \"Acme website\", href: \"#\", icon: <Globe /> },\n    { label: \"Email Acme\", href: \"#\", icon: <Mail /> },\n    { label: \"Acme RSS feed\", href: \"#\", icon: <Rss /> },\n  ],\n  status = { label: \"All systems operational\", href: \"#\", tone: \"online\" },\n  legal = \"© 2026 Acme, Inc. All rights reserved.\",\n  legalLinks = [{ label: \"Privacy\", href: \"#\" }, { label: \"Terms\", href: \"#\" }, { label: \"Cookies\", href: \"#\" }],\n  wordmark,\n  className,\n  ...props\n}: Footer2Props) {\n  const word = wordmark ?? brand\n  // Size the word so it spans the footer: roughly 0.56em per character in a bold sans.\n  const fontSize = `min(${(96 / (Math.max(word.length, 1) * 0.74)).toFixed(2)}cqw, 40rem)`\n  return (\n    <footer data-slot=\"footer-2\" className={cn(\"relative overflow-hidden border-t\", className)} {...props}>\n      <div className=\"mx-auto max-w-6xl px-4 pt-16 sm:px-6 md:pt-20\">\n        <div className=\"grid gap-12 lg:grid-cols-[1.2fr_2fr] lg:gap-16\">\n          <div>\n            <a href=\"#\" className=\"focus-visible:ring-ring/50 rounded-md text-xl font-semibold tracking-tight outline-none focus-visible:ring-[3px]\">{brand}</a>\n            <p className=\"text-muted-foreground mt-3 max-w-xs text-sm leading-relaxed text-pretty\">{tagline}</p>\n            {status && (\n              <a href={status.href} className=\"hover:bg-accent focus-visible:ring-ring/50 mt-6 inline-flex rounded-full border px-3 py-1.5 outline-none transition-colors focus-visible:ring-[3px]\">\n                <StatusDot status={status.tone ?? \"online\"} label={status.label} pulse className=\"text-xs\" />\n              </a>\n            )}\n          </div>\n          <nav aria-label=\"Footer\" className=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n            {columns.map((c) => (\n              <div key={c.title}>\n                <h2 className=\"text-sm font-semibold\">{c.title}</h2>\n                <ul className=\"mt-4 space-y-3 text-sm\">\n                  {c.links.map((l) => (\n                    <li key={l.label}>\n                      <a href={l.href} className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 rounded-sm outline-none transition-colors focus-visible:ring-[3px]\">\n                        {l.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </nav>\n        </div>\n\n        <div className=\"mt-14 flex flex-col gap-5 border-t pt-6 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-sm\">\n            <p>{legal}</p>\n            <ul className=\"flex gap-4\">\n              {legalLinks.map((l) => (\n                <li key={l.label}>\n                  <a href={l.href} className=\"hover:text-foreground focus-visible:ring-ring/50 rounded-sm outline-none transition-colors focus-visible:ring-[3px]\">{l.label}</a>\n                </li>\n              ))}\n            </ul>\n          </div>\n          {socials.length > 0 && (\n            <ul className=\"flex gap-1\">\n              {socials.map((s) => (\n                <li key={s.label}>\n                  <a href={s.href} aria-label={s.label} className=\"text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:ring-ring/50 flex size-9 items-center justify-center rounded-full outline-none transition-colors focus-visible:ring-[3px] [&_svg]:size-4.5\">\n                    {s.icon ?? <Globe />}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </div>\n\n      <div aria-hidden=\"true\" className=\"@container mt-6 select-none\">\n        <div\n          className=\"mx-auto max-w-[90rem] overflow-hidden bg-gradient-to-b from-foreground/90 to-foreground/5 bg-clip-text text-center leading-[0.82] font-semibold tracking-[-0.06em] whitespace-nowrap text-transparent [-webkit-background-clip:text]\"\n          style={{ fontSize, height: \"0.58em\" }}\n        >\n          {word}\n        </div>\n      </div>\n    </footer>\n  )\n}\n\nexport { Footer2, type Footer2Props, type Footer2Column, type Footer2Link, type Footer2Social }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/footer-2/footer-2.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "footer",
      "wordmark",
      "links",
      "status",
      "brand"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "A confident site footer. Pass columns, socials, legal and legalLinks; the wordmark scales to the footer width from its length.",
      "whenToUse": [
        "Brand-led marketing sites",
        "Pages that end with a big visual moment"
      ],
      "whenNotToUse": [
        "Footers that need a newsletter form (use footer-1)"
      ],
      "composesWith": [
        "cta-3",
        "cta-1",
        "faq-2",
        "header-2"
      ],
      "a11y": [],
      "customization": [
        "wordmark: text for the big word (defaults to brand)",
        "status: null hides the pill",
        "columns / socials / legalLinks"
      ]
    },
    "examples": [
      "footer-2-demo",
      "footer-2-long"
    ],
    "url": "https://ui.ballmac.com/components/footer-2"
  },
  "categories": [
    "blocks",
    "footer"
  ],
  "type": "registry:block"
}