{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer-01",
  "title": "Multi-Column Footer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/footer-01/footer-01.component.ts",
      "content": "// Site footer with brand mark + newsletter form on the left and four link columns\n// (Product / Company / Resources / Legal) on the right. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Boxes, Github, Linkedin, LucideAngularModule, Twitter } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-01, [ui-footer-01]',\n  standalone: true,\n  // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent, UiInputComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-01\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <div class=\"grid gap-10 lg:grid-cols-12\">\n          <div class=\"space-y-4 lg:col-span-4\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n                <lucide-icon [img]=\"Boxes\" class=\"size-4\" />\n              </div>\n              <span class=\"text-base font-semibold\">Acme</span>\n            </div>\n            <p class=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-vue. Get product updates monthly.</p>\n            <form class=\"flex max-w-sm gap-2\" (submit)=\"subscribe($event)\">\n              <ui-input\n                [value]=\"newsletter()\"\n                (valueChange)=\"newsletter.set($event)\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                required\n                class=\"flex-1\"\n              />\n              <button ui-button type=\"submit\">Subscribe</button>\n            </form>\n            @if (subscribed()) {\n              <p class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>\n            }\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Product</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                    >Changelog</a\n                  >\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Roadmap</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Company</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">About</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Careers</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Contact</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Resources</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Documentation\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">API</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Help center\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Status</a>\n                </li>\n              </ul>\n            </div>\n            <div class=\"space-y-3\">\n              <h3 class=\"text-sm font-semibold\">Legal</h3>\n              <ul class=\"space-y-2\">\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Terms</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Privacy</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Security</a>\n                </li>\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">DPA</a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-wrap items-center justify-between gap-4\">\n          <p class=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n          <div class=\"flex items-center gap-3\">\n            <a href=\"#\" aria-label=\"GitHub\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Twitter\" class=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" />\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooter01Component {\n  protected readonly Boxes = Boxes\n  protected readonly Github = Github\n  protected readonly Linkedin = Linkedin\n  protected readonly Twitter = Twitter\n\n  @Input('class') className?: string\n\n  readonly newsletter = signal('')\n  readonly subscribed = signal(false)\n\n  get rootClass(): string {\n    return cn('bg-background border-t', this.className)\n  }\n\n  subscribe(event?: Event): void {\n    event?.preventDefault()\n    if (!this.newsletter()) return\n    this.subscribed.set(true)\n    this.newsletter.set('')\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-01/footer-01.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/footer-01/index.ts",
      "content": "export { UiFooter01Component } from './footer-01.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-01/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/input.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}