{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-1",
  "title": "Footer 1: columns with newsletter",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Site footer with brand and tagline, an optional newsletter form, up to four link columns and a legal bar.",
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/input.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/footer-1/footer-1.tsx",
      "content": "// Ballmac UI: Footer 1. https://ui.ballmac.com/blocks/footer-1\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { cn } from \"@/lib/utils\"\n\ntype LinkGroup = { title: string; links: { label: string; href: string }[] }\n\ntype Footer1Props = React.ComponentProps<\"footer\"> & {\n  /** Brand name or logo. */\n  brand?: React.ReactNode\n  /** One line under the brand. */\n  tagline?: string\n  /** Link columns. */\n  groups?: LinkGroup[]\n  /** Called with the email from the newsletter form. Omit to hide the form. */\n  onSubscribe?: (email: string) => void\n  /** Text in the bottom bar, e.g. copyright. */\n  legal?: React.ReactNode\n}\n\nconst defaults: LinkGroup[] = [\n  { title: \"Product\", links: [{ label: \"Features\", href: \"#\" }, { label: \"Pricing\", href: \"#\" }, { label: \"Changelog\", href: \"#\" }] },\n  { title: \"Company\", links: [{ label: \"About\", href: \"#\" }, { label: \"Blog\", href: \"#\" }, { label: \"Careers\", href: \"#\" }] },\n  { title: \"Resources\", links: [{ label: \"Docs\", href: \"#\" }, { label: \"Support\", href: \"#\" }, { label: \"Status\", href: \"#\" }] },\n  { title: \"Legal\", links: [{ label: \"Privacy\", href: \"#\" }, { label: \"Terms\", href: \"#\" }] },\n]\n\nfunction Footer1({\n  brand = \"Acme\",\n  tagline = \"Software for teams who ship.\",\n  groups = defaults,\n  onSubscribe,\n  legal = \"© 2026 Acme, Inc. All rights reserved.\",\n  className,\n  ...props\n}: Footer1Props) {\n  const id = React.useId()\n  const [sent, setSent] = React.useState(false)\n  return (\n    <footer data-slot=\"footer-1\" className={cn(\"border-t\", className)} {...props}>\n      <div className=\"mx-auto grid max-w-6xl gap-12 px-4 py-16 sm:px-6 lg:grid-cols-[1.3fr_2fr]\">\n        <div className=\"max-w-sm\">\n          <div className=\"text-lg font-semibold tracking-tight\">{brand}</div>\n          <p className=\"mt-2 text-sm text-muted-foreground\">{tagline}</p>\n          {onSubscribe && (\n            <form\n              className=\"mt-6 flex gap-2\"\n              onSubmit={(e) => {\n                e.preventDefault()\n                const email = new FormData(e.currentTarget).get(\"email\")\n                if (typeof email === \"string\" && email) {\n                  onSubscribe(email)\n                  setSent(true)\n                }\n              }}\n            >\n              <label htmlFor={`${id}-email`} className=\"sr-only\">\n                Email address\n              </label>\n              <Input id={`${id}-email`} name=\"email\" type=\"email\" required placeholder=\"you@company.com\" autoComplete=\"email\" />\n              <Button type=\"submit\">Subscribe</Button>\n            </form>\n          )}\n          <p aria-live=\"polite\" className=\"mt-2 text-sm text-muted-foreground\">\n            {sent ? \"Thanks! Check your inbox to confirm.\" : \"\"}\n          </p>\n        </div>\n        <nav aria-label=\"Footer\" className=\"grid grid-cols-2 gap-8 sm:grid-cols-4\">\n          {groups.map((g) => (\n            <div key={g.title}>\n              <h2 className=\"text-sm font-medium\">{g.title}</h2>\n              <ul className=\"mt-4 space-y-3 text-sm\">\n                {g.links.map((l) => (\n                  <li key={l.label}>\n                    <a href={l.href} className=\"rounded-sm text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\">\n                      {l.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </nav>\n      </div>\n      <div className=\"border-t\">\n        <p className=\"mx-auto max-w-6xl px-4 py-6 text-xs text-muted-foreground sm:px-6\">{legal}</p>\n      </div>\n    </footer>\n  )\n}\n\nexport { Footer1, type Footer1Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/footer-1/footer-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "footer",
      "newsletter",
      "navigation",
      "links"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "The bottom of every marketing page. Pass groups of links; pass onSubscribe to show the newsletter form (you handle the email).",
      "whenToUse": [
        "Marketing sites and landing pages"
      ],
      "whenNotToUse": [
        "App screens behind login (keep chrome minimal)"
      ],
      "composesWith": [
        "header-1",
        "cta-1"
      ],
      "a11y": [],
      "customization": [
        "groups: { title, links: { label, href }[] }[]",
        "brand, tagline, legal props",
        "onSubscribe(email) shows the newsletter form"
      ]
    },
    "examples": [
      "footer-1-demo"
    ],
    "url": "https://ui.ballmac.com/components/footer-1"
  },
  "categories": [
    "blocks",
    "footer"
  ],
  "type": "registry:block"
}