{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "footer-mega-newsletter",
  "title": "Footer — Mega with Newsletter",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/footer-mega-newsletter/FooterMegaNewsletter.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Check, Github, Layers, Linkedin, Youtube } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nconst sections = [\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\nconst email = ref('')\nconst submitted = ref(false)\n\nfunction subscribe() {\n  if (!email.value.trim()) return\n  submitted.value = true\n}\n</script>\n\n<template>\n  <footer data-slot=\"footer-mega-newsletter\" class=\"border-border bg-background border-t\">\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            <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.prevent=\"subscribe\">\n            <label for=\"footer-email\" class=\"text-sm font-medium\">Monthly engineering notes</label>\n            <div class=\"mt-2 flex gap-2\">\n              <Input\n                id=\"footer-email\"\n                v-model=\"email\"\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                autocomplete=\"email\"\n                class=\"max-w-64\"\n              />\n              <Button type=\"submit\">\n                Subscribe\n                <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              <span v-if=\"submitted\" class=\"text-success inline-flex items-center gap-1.5\">\n                <Check class=\"size-3\" aria-hidden=\"true\" />\n                Check your inbox to confirm.\n              </span>\n              <span v-else>One email a month. Unsubscribe in one click.</span>\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          <div v-for=\"section in sections\" :key=\"section.heading\">\n            <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{{ section.heading }}</p>\n            <ul class=\"mt-3 space-y-2\">\n              <li v-for=\"link in section.links\" :key=\"link\">\n                <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">{{ link }}</a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <Separator class=\"my-10\" />\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        <Badge variant=\"outline\" class=\"w-fit\">SOC 2 Type II</Badge>\n        <div class=\"flex items-center gap-1 sm:ml-auto\">\n          <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n            <Github class=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n            <Linkedin class=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"YouTube\">\n            <Youtube class=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FooterMegaNewsletter.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/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"
}