{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/footer/Footer01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Boxes, Github, Linkedin, Twitter } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nconst newsletter = ref('')\nconst subscribed = ref(false)\n\nfunction subscribe() {\n  if (!newsletter.value) return\n  subscribed.value = true\n  newsletter.value = ''\n}\n</script>\n\n<template>\n  <footer data-slot=\"footer-01\" class=\"bg-background border-t\">\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              <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.prevent=\"subscribe\">\n            <Input v-model=\"newsletter\" type=\"email\" placeholder=\"you@company.com\" required class=\"flex-1\" />\n            <Button type=\"submit\">Subscribe</Button>\n          </form>\n          <p v-if=\"subscribed\" class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>\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\">Changelog</a>\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</a\n                >\n              </li>\n              <li><a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">API</a></li>\n              <li>\n                <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                  >Help center</a\n                >\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><a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">DPA</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n\n      <Separator class=\"my-10\" />\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            <Github class=\"size-4\" />\n          </a>\n          <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n            <Twitter class=\"size-4\" />\n          </a>\n          <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n            <Linkedin class=\"size-4\" />\n          </a>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/footer/Footer01.vue"
    },
    {
      "path": "packages/registry-vue/blocks/footer/FooterBrandStatement.vue",
      "content": "<script setup lang=\"ts\">\nimport { Github, Layers, Linkedin } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\n\nconst sections = [\n  { heading: 'Platform', links: ['Metric layer', 'Governance', 'Alerting', 'Embedding'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Resources', links: ['Documentation', 'Guides', 'Benchmarks', 'Status'] },\n]\n</script>\n\n<template>\n  <footer data-slot=\"footer-brand-statement\" class=\"border-border bg-background border-t\">\n    <div class=\"mx-auto max-w-6xl px-6 py-16\">\n      <a href=\"#top\" class=\"flex w-fit items-center gap-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <!-- The statement is the only oversized type on the page. Keep it to one\n           sentence; at this size a second one stops being read. -->\n      <p class=\"mt-8 max-w-3xl text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl\">\n        Every number your company acts on should have one definition, one owner, and a history you can read.\n      </p>\n      <p class=\"text-muted-foreground mt-4 max-w-xl text-sm leading-relaxed\">\n        That is the whole product. Everything else here is detail.\n      </p>\n\n      <Separator class=\"my-12\" />\n\n      <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\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\n      <Separator class=\"my-10\" />\n\n      <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n          <span>© 2026 Northwind Data, Inc.</span>\n          <a href=\"#privacy\" class=\"hover:text-foreground transition-colors\">Privacy</a>\n          <a href=\"#terms\" class=\"hover:text-foreground transition-colors\">Terms</a>\n          <a href=\"mailto:hello@northwind.example\" class=\"hover:text-foreground transition-colors\">\n            hello@northwind.example\n          </a>\n        </div>\n        <div class=\"flex items-center gap-2 sm:ml-auto\">\n          <Badge variant=\"outline\">SOC 2 Type II</Badge>\n          <Badge variant=\"outline\">GDPR</Badge>\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        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/footer/FooterBrandStatement.vue"
    },
    {
      "path": "packages/registry-vue/blocks/footer/FooterDeveloperDenseGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { Github, Globe, Twitter } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\n\ninterface FooterColumn {\n  title: string\n  links: { label: string; href: string; badge?: string }[]\n}\n\nconst columns: FooterColumn[] = [\n  {\n    title: 'UI Primitives',\n    links: [\n      { label: 'Button & Controls', href: '#' },\n      { label: 'Dialog & Overlays', href: '#' },\n      { label: 'Data Table & Virtual', href: '#' },\n      { label: 'Charts & Sparklines', href: '#' },\n      { label: 'Form Controls & Inputs', href: '#' },\n      { label: 'KpiGrid & Metric Tiles', href: '#' },\n    ],\n  },\n  {\n    title: 'Marketing Blocks',\n    links: [\n      { label: 'Hero Sandboxes', href: '#' },\n      { label: 'Feature Workbenches', href: '#' },\n      { label: 'Pricing Matrix & ROI', href: '#' },\n      { label: 'Social Proof Tickers', href: '#' },\n      { label: 'Testimonial Masonry', href: '#' },\n      { label: 'Interactive Demos', href: '#', badge: 'New' },\n    ],\n  },\n  {\n    title: 'Ecosystem Templates',\n    links: [\n      { label: 'HRMS Nuxt Template', href: '#' },\n      { label: 'HMS Clinical Dashboard', href: '#' },\n      { label: 'Shipment Tracking Live', href: '#' },\n      { label: 'Fintech Banking Portal', href: '#' },\n      { label: 'AI LLM Workspace', href: '#' },\n    ],\n  },\n  {\n    title: 'Developer DX',\n    links: [\n      { label: 'CLI Installation Guide', href: '#' },\n      { label: 'Tailwind CSS v4 Tokens', href: '#' },\n      { label: 'Dual-Framework Parity', href: '#' },\n      { label: 'Reka UI Primitives', href: '#' },\n      { label: 'Radix UI Primitives', href: '#' },\n      { label: 'Changelog Timeline', href: '#' },\n    ],\n  },\n]\n</script>\n\n<template>\n  <footer data-slot=\"footer-developer-dense-grid\" class=\"border-border bg-card text-foreground border-t\">\n    <div class=\"mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n      <!-- Top Grid: Brand & Categorized Columns -->\n      <div class=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n        <!-- Brand Info (4 Cols) -->\n        <div class=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n          <div class=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n            <span\n              class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\"\n            >\n              U\n            </span>\n            <span>UIPKGE.DEV</span>\n          </div>\n\n          <p class=\"text-muted-foreground max-w-sm text-xs leading-relaxed\">\n            The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens, pure\n            AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n          </p>\n\n          <!-- Social links -->\n          <div class=\"flex items-center gap-2 pt-2\">\n            <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\">\n              <Github class=\"size-3.5\" />\n            </Button>\n            <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\">\n              <Twitter class=\"size-3.5\" />\n            </Button>\n            <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\">\n              <Globe class=\"size-3.5\" />\n            </Button>\n          </div>\n        </div>\n\n        <!-- 4 Links Columns (8 Cols total, 2 cols each) -->\n        <div v-for=\"(col, idx) in columns\" :key=\"idx\" class=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n          <h4 class=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">\n            {{ col.title }}\n          </h4>\n          <ul class=\"text-muted-foreground space-y-2 font-mono text-xs\">\n            <li v-for=\"(link, lIdx) in col.links\" :key=\"lIdx\">\n              <a :href=\"link.href\" class=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\">\n                <span>{{ link.label }}</span>\n                <span\n                  v-if=\"link.badge\"\n                  class=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\"\n                >\n                  {{ link.badge }}\n                </span>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      <!-- Bottom Operational Status & Copyright Bar -->\n      <div\n        class=\"border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left\"\n      >\n        <!-- Live System Telemetry Status -->\n        <div class=\"flex items-center gap-2.5\">\n          <span class=\"relative flex size-2\">\n            <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n            <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n          </span>\n          <span class=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n          <span class=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n        </div>\n\n        <!-- Right Copyright & MIT Notice -->\n        <div class=\"flex items-center gap-3\">\n          <span>MIT Licensed &bull; Unbundled Code</span>\n          <span>&copy; {{ new Date().getFullYear() }} UIPKGE</span>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/footer/FooterDeveloperDenseGrid.vue"
    },
    {
      "path": "packages/registry-vue/blocks/footer/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/footer/FooterMegaNewsletter.vue"
    },
    {
      "path": "packages/registry-vue/blocks/footer/FooterMinimalRow.vue",
      "content": "<script setup lang=\"ts\">\nimport { Github, Layers, Linkedin } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n  { label: 'Privacy', href: '#privacy' },\n  { label: 'Terms', href: '#terms' },\n]\n</script>\n\n<template>\n  <footer data-slot=\"footer-minimal-row\" class=\"border-border bg-background border-t\">\n    <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center\">\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-4\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <Separator orientation=\"vertical\" class=\"hidden h-4 sm:block\" />\n\n      <nav class=\"flex flex-wrap items-center gap-x-5 gap-y-2\" aria-label=\"Footer\">\n        <a\n          v-for=\"link in links\"\n          :key=\"link.href\"\n          :href=\"link.href\"\n          class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n        >\n          {{ link.label }}\n        </a>\n      </nav>\n\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        <span class=\"text-muted-foreground ml-2 text-xs\">© 2026 Northwind</span>\n      </div>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/footer/FooterMinimalRow.vue"
    },
    {
      "path": "packages/registry-vue/blocks/footer/FooterSitemapDense.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Github, Layers, Linkedin } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\nconst sections = [\n  { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'] },\n  { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },\n]\n\nconst region = ref('eu')\nconst currency = ref('eur')\n</script>\n\n<template>\n  <footer data-slot=\"footer-sitemap-dense\" class=\"border-border bg-background border-t\">\n    <div class=\"mx-auto max-w-6xl px-6 py-12\">\n      <div class=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\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-1.5\">\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\n      <Separator class=\"my-10\" />\n\n      <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n        <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n          <Layers class=\"text-primary size-4\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Select v-model=\"region\">\n            <SelectTrigger class=\"h-8 w-40 text-xs\" aria-label=\"Data region\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"eu\">EU (Frankfurt)</SelectItem>\n              <SelectItem value=\"us\">US (Virginia)</SelectItem>\n              <SelectItem value=\"au\">AU (Sydney)</SelectItem>\n            </SelectContent>\n          </Select>\n\n          <Select v-model=\"currency\">\n            <SelectTrigger class=\"h-8 w-28 text-xs\" aria-label=\"Currency\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"eur\">EUR €</SelectItem>\n              <SelectItem value=\"usd\">USD $</SelectItem>\n              <SelectItem value=\"gbp\">GBP £</SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-3 lg:ml-auto\">\n          <!-- Status dot is a live indicator, so it carries its own text for\n               screen readers rather than relying on colour alone. -->\n          <a href=\"#status\" class=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n            <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n            <span class=\"text-muted-foreground text-xs\">All systems operational</span>\n          </a>\n          <Badge variant=\"outline\">SOC 2</Badge>\n          <Badge variant=\"outline\">GDPR</Badge>\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        </div>\n      </div>\n\n      <p class=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n    </div>\n  </footer>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/footer/FooterSitemapDense.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/select.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ]
}