{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-enterprise",
  "type": "registry:ui",
  "title": "Footer Enterprise",
  "description": "An enterprise-grade footer with three-tier layout, wide column grid, and whisper-quiet typography.",
  "files": [
    {
      "path": "registry/ruixenui/footer-enterprise.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\n/* ── types ─────────────────────────────────────────────────────── */\ninterface FooterLink {\n  label: string;\n  href: string;\n}\n\ninterface FooterColumn {\n  title: string;\n  links: FooterLink[];\n}\n\ninterface FooterSocial {\n  icon: React.ComponentType<{ className?: string }>;\n  href: string;\n  label?: string;\n}\n\ninterface FooterEnterpriseProps {\n  /** Custom brand mark — any ReactNode (SVG, icon, emoji). Falls back to a default geometric mark. */\n  brandMark?: React.ReactNode;\n  brandName?: string;\n  description?: string;\n  columns?: FooterColumn[];\n  socials?: FooterSocial[];\n  bottomLinks?: FooterLink[];\n  copyright?: string;\n}\n\n/* ── default mark ─────────────────────────────────────────────── */\nfunction DefaultMark() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      className=\"size-5\"\n      aria-hidden=\"true\"\n    >\n      <rect width=\"20\" height=\"20\" rx=\"5\" className=\"fill-foreground\" />\n      <rect\n        x=\"5\"\n        y=\"5\"\n        width=\"10\"\n        height=\"10\"\n        rx=\"2.5\"\n        className=\"fill-background\"\n      />\n    </svg>\n  );\n}\n\n/* ── defaults ─────────────────────────────────────────────────── */\nconst defaults = {\n  brandName: \"ruixen ui\",\n  description:\n    \"Modern, fast, and customizable React components — built with Tailwind CSS, TypeScript, and accessibility in mind.\",\n  columns: [\n    {\n      title: \"Product\",\n      links: [\n        { label: \"Components\", href: \"#\" },\n        { label: \"Templates\", href: \"#\" },\n        { label: \"Pro\", href: \"#\" },\n        { label: \"Pricing\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Solutions\",\n      links: [\n        { label: \"Startups\", href: \"#\" },\n        { label: \"Enterprise\", href: \"#\" },\n        { label: \"Developers\", href: \"#\" },\n        { label: \"Designers\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Developers\",\n      links: [\n        { label: \"Documentation\", href: \"#\" },\n        { label: \"API Reference\", href: \"#\" },\n        { label: \"CLI\", href: \"#\" },\n        { label: \"Changelog\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Resources\",\n      links: [\n        { label: \"Guides\", href: \"#\" },\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Templates\", href: \"#\" },\n        { label: \"Community\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Company\",\n      links: [\n        { label: \"About\", href: \"#\" },\n        { label: \"Careers\", href: \"#\" },\n        { label: \"Press\", href: \"#\" },\n        { label: \"Contact\", href: \"#\" },\n      ],\n    },\n  ] as FooterColumn[],\n  socials: [] as FooterSocial[],\n  bottomLinks: [\n    { label: \"Privacy\", href: \"#\" },\n    { label: \"Terms\", href: \"#\" },\n  ] as FooterLink[],\n  copyright: `\\u00A9 ${new Date().getFullYear()} ruixen ui. All rights reserved.`,\n};\n\n/* ── component ────────────────────────────────────────────────── */\nexport function FooterEnterprise(props?: FooterEnterpriseProps) {\n  const brandMark = props?.brandMark;\n  const brandName = props?.brandName ?? defaults.brandName;\n  const description = props?.description ?? defaults.description;\n  const columns = props?.columns ?? defaults.columns;\n  const socials = props?.socials ?? defaults.socials;\n  const bottomLinks = props?.bottomLinks ?? defaults.bottomLinks;\n  const copyright = props?.copyright ?? defaults.copyright;\n\n  return (\n    <footer className=\"border-t border-foreground/[0.06] bg-background\">\n      <div className=\"mx-auto max-w-7xl px-6 py-14 lg:py-20\">\n        {/* ── top tier: brand + socials ──────────────────────── */}\n        <div className=\"flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"max-w-sm\">\n            <div className=\"flex items-center gap-2.5\">\n              {brandMark ?? <DefaultMark />}\n              <span className=\"text-[16px] font-[590] tracking-[-0.02em] text-foreground\">\n                {brandName}\n              </span>\n            </div>\n            <p className=\"mt-3 text-[13px] leading-[1.6] text-foreground/40\">\n              {description}\n            </p>\n          </div>\n\n          {socials.length > 0 && (\n            <div className=\"flex items-center gap-3.5\">\n              {socials.map(({ icon: Icon, href, label }, idx) => (\n                <Link\n                  key={idx}\n                  href={href}\n                  aria-label={label}\n                  className=\"text-foreground/25 transition-colors duration-150 hover:text-foreground/60\"\n                >\n                  <Icon className=\"size-4\" />\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* ── separator ───────────────────────────────────────── */}\n        <div className=\"my-10 h-px bg-foreground/[0.06]\" />\n\n        {/* ── middle tier: columns ────────────────────────────── */}\n        <div className=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5\">\n          {columns.map((col) => (\n            <div key={col.title}>\n              <p className=\"text-[11px] font-medium uppercase tracking-[0.1em] text-foreground/30\">\n                {col.title}\n              </p>\n              <ul className=\"mt-3.5 space-y-2.5\">\n                {col.links.map((link) => (\n                  <li key={link.label}>\n                    <Link\n                      href={link.href}\n                      className=\"text-[13px] text-foreground/45 transition-colors duration-150 hover:text-foreground\"\n                    >\n                      {link.label}\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n\n        {/* ── separator ───────────────────────────────────────── */}\n        <div className=\"mt-14 h-px bg-foreground/[0.06]\" />\n\n        {/* ── bottom tier: copyright + legal ──────────────────── */}\n        <div className=\"mt-5 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center\">\n          <p className=\"text-[11px] text-foreground/20\">{copyright}</p>\n\n          {bottomLinks.length > 0 && (\n            <div className=\"flex items-center gap-5\">\n              {bottomLinks.map((link) => (\n                <Link\n                  key={link.label}\n                  href={link.href}\n                  className=\"text-[11px] text-foreground/25 transition-colors duration-150 hover:text-foreground/50\"\n                >\n                  {link.label}\n                </Link>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/footer-enterprise.tsx"
    }
  ]
}