{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-02",
  "title": "Mega wordmark footer",
  "description": "Compact nav columns on top, a huge wordmark across the bottom serving as a visual anchor.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "content/components/footer/footer-02.tsx",
      "content": "import { ArrowUpRight, Mail } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\n\nconst links: { title: string; items: string[] }[] = [\n  { title: \"Product\", items: [\"Blocks\", \"Pricing\", \"Docs\", \"Changelog\"] },\n  { title: \"Resources\", items: [\"Guides\", \"Showcase\", \"Templates\", \"Roadmap\"] },\n  { title: \"Company\", items: [\"About\", \"Contact\", \"Press kit\"] },\n  { title: \"Legal\", items: [\"License\", \"Privacy\", \"Terms\"] },\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\nexport default function Footer02() {\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 pt-20 sm:px-10\">\n        <div className=\"flex flex-col items-start justify-between gap-6 border-b border-border pb-8 sm:flex-row sm:items-center\">\n          <div className=\"flex items-center gap-3\">\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=\"hidden text-xs text-muted-foreground sm:inline\">\n              by lndev-ui\n            </span>\n          </div>\n\n          <form className=\"flex w-full items-center gap-2 rounded-full border border-border bg-card p-1 sm:w-auto sm:min-w-[320px]\">\n            <Mail className=\"ml-2.5 size-4 text-muted-foreground\" />\n            <Input\n              type=\"email\"\n              placeholder=\"Get a new block in your inbox\"\n              className=\"h-9 flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:outline-none focus-visible:ring-0\"\n            />\n            <Button size=\"sm\" className=\"rounded-full\">\n              Subscribe\n            </Button>\n          </form>\n        </div>\n\n        <div className=\"mt-10 grid grid-cols-2 gap-x-10 gap-y-8 sm:grid-cols-4\">\n          {links.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.items.map((item) => (\n                  <li key={item}>\n                    <a\n                      href={`#${item.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                      className=\"text-sm text-foreground/80 transition-colors hover:text-foreground\"\n                    >\n                      {item}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-12 flex flex-col items-start justify-between gap-3 border-t border-border pt-6 pb-3 text-xs text-muted-foreground sm:flex-row sm:items-center\">\n          <p>&copy; {year} blockus. All rights reserved.</p>\n          <div className=\"flex 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 normal\n              <ArrowUpRight className=\"size-3 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5\" />\n            </a>\n            <div className=\"flex items-center gap-1\">\n              {socials.map((s) => (\n                <a\n                  key={s.label}\n                  href={`#${s.label.toLowerCase()}`}\n                  aria-label={s.label}\n                  className=\"grid size-7 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <svg viewBox=\"0 0 24 24\" className=\"size-3.5 fill-current\">\n                    <path d={s.path} />\n                  </svg>\n                </a>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div aria-hidden className=\"relative -mt-2 select-none overflow-hidden\">\n        <p\n          className=\"block w-full text-center font-semibold leading-none text-foreground\"\n          style={{\n            fontSize: \"clamp(4rem, 22vw, 18rem)\",\n            letterSpacing: \"-0.05em\",\n            background:\n              \"linear-gradient(180deg, hsl(var(--foreground) / 0.85) 0%, hsl(var(--background) / 0) 95%)\",\n            WebkitBackgroundClip: \"text\",\n            WebkitTextFillColor: \"transparent\",\n            backgroundClip: \"text\",\n          }}\n        >\n          blockus\n        </p>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/footer-02.tsx"
    }
  ],
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}