{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer-mega-newsletter",
  "title": "Footer — Mega with Newsletter",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/footer-mega-newsletter/footer-mega-newsletter.component.ts",
      "content": "// Large footer pairing a newsletter signup and status line with five link columns,\n// a social row, and a legal bar carrying the copyright and a compliance badge.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, Check, Github, Layers, Linkedin, LucideAngularModule, Youtube } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface MegaNewsletterSection {\n  heading: string\n  links: string[]\n}\n\nconst sections: MegaNewsletterSection[] = [\n  { heading: 'Product', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'Changelog'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'CLI', 'Status'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors'] },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-mega-newsletter, [ui-footer-mega-newsletter]',\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, UiBadgeComponent, UiButtonComponent, UiInputComponent, UiSeparatorComponent],\n  template: `\n    <footer data-slot=\"footer-mega-newsletter\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-14\">\n        <div class=\"grid gap-12 lg:grid-cols-[22rem_1fr] lg:gap-16\">\n          <div>\n            <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n              <lucide-icon [img]=\"Layers\" class=\"text-primary size-5\" aria-hidden=\"true\" />\n              Northwind\n            </a>\n            <p class=\"text-muted-foreground mt-3 max-w-sm text-sm leading-relaxed\">\n              One certified metric layer between your warehouse and everything downstream.\n            </p>\n\n            <form class=\"mt-6\" (submit)=\"subscribe($event)\">\n              <label for=\"footer-email\" class=\"text-sm font-medium\">Monthly engineering notes</label>\n              <div class=\"mt-2 flex gap-2\">\n                <ui-input\n                  id=\"footer-email\"\n                  [value]=\"email()\"\n                  (valueChange)=\"email.set($event)\"\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  autoComplete=\"email\"\n                  class=\"max-w-64\"\n                />\n                <button ui-button type=\"submit\">\n                  Subscribe\n                  <lucide-icon [img]=\"ArrowRight\" class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n                </button>\n              </div>\n              <!-- Status line reserves its own row, so confirming does not shift the columns. -->\n              <p class=\"text-muted-foreground mt-2 min-h-5 text-xs\">\n                @if (submitted()) {\n                  <span class=\"text-success inline-flex items-center gap-1.5\">\n                    <lucide-icon [img]=\"Check\" class=\"size-3\" aria-hidden=\"true\" />\n                    Check your inbox to confirm.\n                  </span>\n                } @else {\n                  <span>One email a month. Unsubscribe in one click.</span>\n                }\n              </p>\n            </form>\n          </div>\n\n          <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5\">\n            @for (section of sectionList; track section.heading) {\n              <div>\n                <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">\n                  {{ section.heading }}\n                </p>\n                <ul class=\"mt-3 space-y-2\">\n                  @for (link of section.links; track link) {\n                    <li>\n                      <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                        {{ link }}\n                      </a>\n                    </li>\n                  }\n                </ul>\n              </div>\n            }\n          </div>\n        </div>\n\n        <div ui-separator class=\"my-10\"></div>\n\n        <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n          <p class=\"text-muted-foreground text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n          <span ui-badge variant=\"outline\" class=\"w-fit\">SOC 2 Type II</span>\n          <div class=\"flex items-center gap-1 sm:ml-auto\">\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n              <lucide-icon [img]=\"Github\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n              <lucide-icon [img]=\"Linkedin\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <button ui-button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"YouTube\">\n              <lucide-icon [img]=\"Youtube\" class=\"size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterMegaNewsletterComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly Github = Github\n  protected readonly Layers = Layers\n  protected readonly Linkedin = Linkedin\n  protected readonly Youtube = Youtube\n\n  protected readonly sectionList = sections\n\n  readonly email = signal('')\n  readonly submitted = signal(false)\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-background border-t', this.className)\n  }\n\n  subscribe(event?: Event): void {\n    event?.preventDefault()\n    if (!this.email().trim()) return\n    this.submitted.set(true)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-mega-newsletter/footer-mega-newsletter.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/footer-mega-newsletter/index.ts",
      "content": "export { UiFooterMegaNewsletterComponent } from './footer-mega-newsletter.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-mega-newsletter/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/input.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Large footer pairing a newsletter signup and status line with five link columns, a social row, and a legal bar carrying the copyright and a compliance badge.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}