{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/footer/Footer01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Boxes } from 'lucide-react'\n\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Twitter = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z\" />\n  </svg>\n)\n\nconst Linkedin = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\" />\n  </svg>\n)\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nexport function Footer01() {\n  const [newsletter, setNewsletter] = React.useState('')\n  const [subscribed, setSubscribed] = React.useState(false)\n\n  function subscribe(e: React.FormEvent) {\n    e.preventDefault()\n    if (!newsletter) return\n    setSubscribed(true)\n    setNewsletter('')\n  }\n\n  return (\n    <footer data-slot=\"footer-01\" className=\"bg-background border-t\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <div className=\"grid gap-10 lg:grid-cols-12\">\n          <div className=\"space-y-4 lg:col-span-4\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n                <Boxes className=\"size-4\" />\n              </div>\n              <span className=\"text-base font-semibold\">Acme</span>\n            </div>\n            <p className=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-vue. Get product updates monthly.</p>\n            <form className=\"flex max-w-sm gap-2\" onSubmit={subscribe}>\n              <Input\n                value={newsletter}\n                onChange={(e) => setNewsletter(e.target.value)}\n                type=\"email\"\n                placeholder=\"you@company.com\"\n                required\n                className=\"flex-1\"\n              />\n              <Button type=\"submit\">Subscribe</Button>\n            </form>\n            {subscribed && <p className=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>}\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n            <div className=\"space-y-3\">\n              <h3 className=\"text-sm font-semibold\">Product</h3>\n              <ul className=\"space-y-2\">\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Features\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Pricing\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Changelog\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Roadmap\n                  </a>\n                </li>\n              </ul>\n            </div>\n            <div className=\"space-y-3\">\n              <h3 className=\"text-sm font-semibold\">Company</h3>\n              <ul className=\"space-y-2\">\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    About\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Blog\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Careers\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Contact\n                  </a>\n                </li>\n              </ul>\n            </div>\n            <div className=\"space-y-3\">\n              <h3 className=\"text-sm font-semibold\">Resources</h3>\n              <ul className=\"space-y-2\">\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Documentation\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    API\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Help center\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Status\n                  </a>\n                </li>\n              </ul>\n            </div>\n            <div className=\"space-y-3\">\n              <h3 className=\"text-sm font-semibold\">Legal</h3>\n              <ul className=\"space-y-2\">\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Terms\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Privacy\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    Security\n                  </a>\n                </li>\n                <li>\n                  <a href=\"#\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                    DPA\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-wrap items-center justify-between gap-4\">\n          <p className=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n          <div className=\"flex items-center gap-3\">\n            <a href=\"#\" aria-label=\"GitHub\" className=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <Github className=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"Twitter\" className=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <Twitter className=\"size-4\" />\n            </a>\n            <a href=\"#\" aria-label=\"LinkedIn\" className=\"text-muted-foreground hover:text-foreground transition-colors\">\n              <Linkedin className=\"size-4\" />\n            </a>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/Footer01.tsx"
    },
    {
      "path": "packages/registry-react/blocks/footer/FooterBrandStatement.tsx",
      "content": "'use client'\n\nimport { Layers } from 'lucide-react'\n\n// lucide-react no longer ships brand glyphs, so they are inlined here the\n// same way footer-01 and the other shipped React blocks do it.\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Linkedin = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\" />\n  </svg>\n)\n\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\nexport function FooterBrandStatement() {\n  return (\n    <footer data-slot=\"footer-brand-statement\" className=\"border-border bg-background border-t\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <a href=\"#top\" className=\"flex w-fit items-center gap-2 font-semibold tracking-tight\">\n          <Layers className=\"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 className=\"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 className=\"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 className=\"my-12\" />\n\n        <div className=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n          {sections.map((section) => (\n            <div key={section.heading}>\n              <p className=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{section.heading}</p>\n              <ul className=\"mt-3 space-y-2\">\n                {section.links.map((link) => (\n                  <li key={link}>\n                    <a href=\"#\" className=\"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\n        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n          <div className=\"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\" className=\"hover:text-foreground transition-colors\">\n              Privacy\n            </a>\n            <a href=\"#terms\" className=\"hover:text-foreground transition-colors\">\n              Terms\n            </a>\n            <a href=\"mailto:hello@northwind.example\" className=\"hover:text-foreground transition-colors\">\n              hello@northwind.example\n            </a>\n          </div>\n          <div className=\"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\" className=\"size-8\" aria-label=\"GitHub\">\n              <Github className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"LinkedIn\">\n              <Linkedin className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/FooterBrandStatement.tsx"
    },
    {
      "path": "packages/registry-react/blocks/footer/FooterDeveloperDenseGrid.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Globe } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Twitter = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z\" />\n  </svg>\n)\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\nexport interface FooterDeveloperDenseGridProps {\n  className?: string\n}\n\nexport function FooterDeveloperDenseGrid({ className }: FooterDeveloperDenseGridProps) {\n  return (\n    <footer\n      data-slot=\"footer-developer-dense-grid\"\n      className={cn('border-border bg-card text-foreground border-t', className)}\n    >\n      <div className=\"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 className=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n          {/* Brand Info (4 Cols) */}\n          <div className=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n            <div className=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n              <span className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\">\n                U\n              </span>\n              <span>UIPKGE.DEV</span>\n            </div>\n\n            <p className=\"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,\n              pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n            </p>\n\n            {/* Social links */}\n            <div className=\"flex items-center gap-2 pt-2\">\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Github className=\"size-3.5\" />\n              </Button>\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Twitter className=\"size-3.5\" />\n              </Button>\n              <Button size=\"sm\" variant=\"outline\" className=\"size-8 rounded-lg p-0\">\n                <Globe className=\"size-3.5\" />\n              </Button>\n            </div>\n          </div>\n\n          {/* 4 Links Columns (8 Cols total, 2 cols each) */}\n          {columns.map((col, idx) => (\n            <div key={idx} className=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n              <h4 className=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">{col.title}</h4>\n              <ul className=\"text-muted-foreground space-y-2 font-mono text-xs\">\n                {col.links.map((link, lIdx) => (\n                  <li key={lIdx}>\n                    <a\n                      href={link.href}\n                      className=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\"\n                    >\n                      <span>{link.label}</span>\n                      {link.badge && (\n                        <span className=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\">\n                          {link.badge}\n                        </span>\n                      )}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        {/* Bottom Operational Status & Copyright Bar */}\n        <div className=\"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          {/* Live System Telemetry Status */}\n          <div className=\"flex items-center gap-2.5\">\n            <span className=\"relative flex size-2\">\n              <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n            </span>\n            <span className=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n            <span className=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n          </div>\n\n          {/* Right Copyright & MIT Notice */}\n          <div className=\"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  )\n}\nexport default FooterDeveloperDenseGrid\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/FooterDeveloperDenseGrid.tsx"
    },
    {
      "path": "packages/registry-react/blocks/footer/FooterMegaNewsletter.tsx",
      "content": "'use client'\n\nimport { useState, type FormEvent } from 'react'\nimport { ArrowRight, Check, Layers } from 'lucide-react'\n\n// lucide-react no longer ships brand glyphs, so they are inlined here the\n// same way footer-01 and the other shipped React blocks do it.\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Linkedin = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\" />\n  </svg>\n)\n\nconst Youtube = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 00.5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 002.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z\" />\n  </svg>\n)\n\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\nexport function FooterMegaNewsletter() {\n  const [email, setEmail] = useState('')\n  const [submitted, setSubmitted] = useState(false)\n\n  function subscribe(event: FormEvent) {\n    event.preventDefault()\n    if (!email.trim()) return\n    setSubmitted(true)\n  }\n\n  return (\n    <footer data-slot=\"footer-mega-newsletter\" className=\"border-border bg-background border-t\">\n      <div className=\"mx-auto max-w-6xl px-6 py-14\">\n        <div className=\"grid gap-12 lg:grid-cols-[22rem_1fr] lg:gap-16\">\n          <div>\n            <a href=\"#top\" className=\"flex items-center gap-2 font-semibold tracking-tight\">\n              <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n              Northwind\n            </a>\n            <p className=\"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 className=\"mt-6\" onSubmit={subscribe}>\n              <label htmlFor=\"footer-email\" className=\"text-sm font-medium\">\n                Monthly engineering notes\n              </label>\n              <div className=\"mt-2 flex gap-2\">\n                <Input\n                  id=\"footer-email\"\n                  value={email}\n                  onChange={(event) => setEmail(event.target.value)}\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  autoComplete=\"email\"\n                  className=\"max-w-64\"\n                />\n                <Button type=\"submit\">\n                  Subscribe\n                  <ArrowRight className=\"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 className=\"text-muted-foreground mt-2 min-h-5 text-xs\">\n                {submitted ? (\n                  <span className=\"text-success inline-flex items-center gap-1.5\">\n                    <Check className=\"size-3\" aria-hidden=\"true\" />\n                    Check your inbox to confirm.\n                  </span>\n                ) : (\n                  <span>One email a month. Unsubscribe in one click.</span>\n                )}\n              </p>\n            </form>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5\">\n            {sections.map((section) => (\n              <div key={section.heading}>\n                <p className=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">\n                  {section.heading}\n                </p>\n                <ul className=\"mt-3 space-y-2\">\n                  {section.links.map((link) => (\n                    <li key={link}>\n                      <a href=\"#\" className=\"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        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n          <p className=\"text-muted-foreground text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n          <Badge variant=\"outline\" className=\"w-fit\">\n            SOC 2 Type II\n          </Badge>\n          <div className=\"flex items-center gap-1 sm:ml-auto\">\n            <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"GitHub\">\n              <Github className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"LinkedIn\">\n              <Linkedin className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"YouTube\">\n              <Youtube className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/FooterMegaNewsletter.tsx"
    },
    {
      "path": "packages/registry-react/blocks/footer/FooterMinimalRow.tsx",
      "content": "'use client'\n\nimport { Layers } from 'lucide-react'\n\n// lucide-react no longer ships brand glyphs, so they are inlined here the\n// same way footer-01 and the other shipped React blocks do it.\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Linkedin = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\" />\n  </svg>\n)\n\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\nexport function FooterMinimalRow() {\n  return (\n    <footer data-slot=\"footer-minimal-row\" className=\"border-border bg-background border-t\">\n      <div className=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-4\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-4 sm:block\" />\n\n        <nav className=\"flex flex-wrap items-center gap-x-5 gap-y-2\" aria-label=\"Footer\">\n          {links.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"flex items-center gap-1 sm:ml-auto\">\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"GitHub\">\n            <Github className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"LinkedIn\">\n            <Linkedin className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <span className=\"text-muted-foreground ml-2 text-xs\">© 2026 Northwind</span>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/FooterMinimalRow.tsx"
    },
    {
      "path": "packages/registry-react/blocks/footer/FooterSitemapDense.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Layers } from 'lucide-react'\n\n// lucide-react no longer ships brand glyphs, so they are inlined here the\n// same way footer-01 and the other shipped React blocks do it.\nconst Github = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\" />\n  </svg>\n)\n\nconst Linkedin = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\" />\n  </svg>\n)\n\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\nexport function FooterSitemapDense() {\n  const [region, setRegion] = useState('eu')\n  const [currency, setCurrency] = useState('eur')\n\n  return (\n    <footer data-slot=\"footer-sitemap-dense\" className=\"border-border bg-background border-t\">\n      <div className=\"mx-auto max-w-6xl px-6 py-12\">\n        <div className=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\n          {sections.map((section) => (\n            <div key={section.heading}>\n              <p className=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{section.heading}</p>\n              <ul className=\"mt-3 space-y-1.5\">\n                {section.links.map((link) => (\n                  <li key={link}>\n                    <a href=\"#\" className=\"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\n        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n          <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n            <Layers className=\"text-primary size-4\" aria-hidden=\"true\" />\n            Northwind\n          </a>\n\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Select value={region} onValueChange={setRegion}>\n              <SelectTrigger className=\"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 value={currency} onValueChange={setCurrency}>\n              <SelectTrigger className=\"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 className=\"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\" className=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n              <span className=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n              <span className=\"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\" className=\"size-8\" aria-label=\"GitHub\">\n              <Github className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" aria-label=\"LinkedIn\">\n              <Linkedin className=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n\n        <p className=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/footer/FooterSitemapDense.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/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"
  ]
}