{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-01",
  "title": "Footer with mission statement",
  "description": "Left column carries a punchy serif brand statement, right column groups three nav lists.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/footer/footer-01.tsx",
      "content": "import { ArrowUpRight, ShieldCheck } from \"lucide-react\"\n\nconst columns: { title: string; links: { label: string; href: string }[] }[] =\n  [\n    {\n      title: \"Product\",\n      links: [\n        { label: \"Blocks\", href: \"#blocks\" },\n        { label: \"Pricing\", href: \"#pricing\" },\n        { label: \"Docs\", href: \"#docs\" },\n        { label: \"Changelog\", href: \"#changelog\" },\n      ],\n    },\n    {\n      title: \"Studio\",\n      links: [\n        { label: \"About\", href: \"#about\" },\n        { label: \"Process\", href: \"#process\" },\n        { label: \"Customers\", href: \"#customers\" },\n        { label: \"Contact\", href: \"#contact\" },\n      ],\n    },\n    {\n      title: \"Legal\",\n      links: [\n        { label: \"License\", href: \"#license\" },\n        { label: \"Privacy\", href: \"#privacy\" },\n        { label: \"Terms\", href: \"#terms\" },\n      ],\n    },\n  ]\n\nconst socials = [\n  {\n    label: \"X\",\n    path: \"M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.5L4.7 21H1.5l7.5-8.5L1.1 3h6.5l4.5 6 5.4-6Zm-1.1 16h1.8L7.6 4.9H5.7L16.4 19Z\",\n  },\n  {\n    label: \"GitHub\",\n    path: \"M12 .5C5.6.5.5 5.6.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2.1c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-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.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.4-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.3 2.8.1 3.1.8.8 1.2 1.9 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.6 18.4.5 12 .5Z\",\n  },\n  {\n    label: \"BlueSky\",\n    path: \"M12 7c-1.6-2-4-4.4-7-4.4C3 2.6 2 4.2 2 6c0 2 1 6 7 6-6 0-7 4-7 6 0 1.8 1 3.4 3 3.4 3 0 5.4-2.4 7-4.4 1.6 2 4 4.4 7 4.4 2 0 3-1.6 3-3.4 0-2-1-6-7-6 6 0 7-4 7-6 0-1.8-1-3.4-3-3.4-3 0-5.4 2.4-7 4.4Z\",\n  },\n]\n\nexport default function Footer01() {\n  const year = new Date().getFullYear()\n\n  return (\n    <footer className=\"bg-background text-foreground\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 sm:px-10 sm:py-24\">\n        <div className=\"grid gap-12 lg:grid-cols-[1.4fr_1fr]\">\n          <div className=\"flex flex-col gap-6\">\n            <a href=\"#\" className=\"inline-flex items-center gap-2 font-semibold tracking-tight\">\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                src=\"https://blockus.lndevui.com/brand/logo.svg\"\n                alt=\"blockus\"\n                className=\"size-6 dark:invert\"\n              />\n              blockus\n            </a>\n            <span className=\"inline-flex w-fit items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n              <span className=\"size-1.5 rounded-full bg-foreground\" />\n              The studio behind blockus\n            </span>\n            <p\n              className=\"text-balance text-2xl leading-tight text-foreground sm:text-3xl\"\n              style={{\n                fontFamily: \"ui-serif, Georgia, 'Times New Roman', serif\",\n                letterSpacing: \"-0.01em\",\n              }}\n            >\n              We build the kind of UI we wish more products shipped — quiet,\n              opinionated, ready for the real world.\n            </p>\n            <a\n              href=\"#about\"\n              className=\"group inline-flex w-fit items-center gap-1 text-sm font-medium text-foreground\"\n            >\n              <span className=\"underline-offset-4 group-hover:underline\">\n                Read the manifesto\n              </span>\n              <ArrowUpRight className=\"size-3.5 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5\" />\n            </a>\n\n            <div className=\"mt-2 flex items-center gap-1.5\">\n              {socials.map((s) => (\n                <a\n                  key={s.label}\n                  href={`#${s.label.toLowerCase()}`}\n                  aria-label={s.label}\n                  className=\"grid size-9 place-items-center rounded-full border border-border bg-card text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <svg viewBox=\"0 0 24 24\" className=\"size-4 fill-current\">\n                    <path d={s.path} />\n                  </svg>\n                </a>\n              ))}\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-10 sm:grid-cols-3\">\n            {columns.map((column) => (\n              <div key={column.title} className=\"flex flex-col gap-3\">\n                <h4 className=\"text-xs font-medium uppercase tracking-widest text-muted-foreground\">\n                  {column.title}\n                </h4>\n                <ul className=\"flex flex-col gap-2\">\n                  {column.links.map((link) => (\n                    <li key={link.label}>\n                      <a\n                        href={link.href}\n                        className=\"text-sm text-foreground/80 transition-colors hover:text-foreground\"\n                      >\n                        {link.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"mt-20 flex flex-col items-start justify-between gap-4 border-t border-border pt-6 text-xs text-muted-foreground sm:flex-row sm:items-center\">\n          <p>&copy; {year} blockus. Built with care, shipped on Friday.</p>\n          <div className=\"flex flex-wrap items-center gap-4\">\n            <a\n              href=\"#status\"\n              className=\"group inline-flex items-center gap-1.5 transition-colors hover:text-foreground\"\n            >\n              <span className=\"relative grid size-2 place-items-center\">\n                <span className=\"size-2 rounded-full bg-emerald-500\" />\n                <span\n                  aria-hidden\n                  className=\"absolute inset-0 animate-ping rounded-full bg-emerald-500/50\"\n                />\n              </span>\n              All systems operational\n              <ArrowUpRight className=\"size-3 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5\" />\n            </a>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <ShieldCheck className=\"size-3 text-emerald-500\" />\n              SOC 2 · GDPR\n            </span>\n            <p className=\"font-mono uppercase tracking-widest\">\n              Lat. 46.2 · Lon. 6.14\n            </p>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/footer-01.tsx"
    }
  ],
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}