{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "footer-developer-dense-grid",
  "title": "Footer Developer Dense Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/footer-developer-dense-grid/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\n    data-slot=\"footer-developer-dense-grid\"\n    class=\"border-border bg-card/60 text-foreground border-t backdrop-blur-md\"\n  >\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/FooterDeveloperDenseGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json"
  ],
  "description": "Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}