{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "footer-01",
  "title": "Footer 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/footer-01/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 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-xs text-[var(--success)]\">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/Footer01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/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"
  ]
}