{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "corporate-footer",
  "type": "registry:ui",
  "title": "Corporate Footer",
  "description": "A card-based corporate footer with decorative watermark, column navigation, and whisper-quiet typography.",
  "files": [
    {
      "path": "registry/ruixenui/corporate-footer.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 CorporateFooterProps {\n  /** Custom brand mark — any ReactNode (SVG, icon, emoji). Falls back to a default geometric mark. */\n  brandMark?: React.ReactNode;\n  brandName?: string;\n  tagline?: string;\n  columns?: FooterColumn[];\n  socials?: FooterSocial[];\n  copyright?: string;\n}\n\n/* ── decorative watermark ─────────────────────────────────────── */\nfunction Watermark() {\n  return (\n    <svg\n      className=\"pointer-events-none absolute inset-0 size-full translate-y-2/3 text-muted-foreground/[0.035]\"\n      viewBox=\"0 0 180 220\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <rect width=\"100\" height=\"100\" rx=\"28\" fill=\"currentColor\" />\n      <rect\n        x=\"80\"\n        y=\"80\"\n        width=\"100\"\n        height=\"140\"\n        rx=\"28\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\n/* ── default mark ─────────────────────────────────────────────── */\nfunction DefaultMark() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 18 18\"\n      fill=\"none\"\n      className=\"size-[18px]\"\n      aria-hidden=\"true\"\n    >\n      <rect width=\"18\" height=\"18\" rx=\"5\" className=\"fill-foreground\" />\n    </svg>\n  );\n}\n\n/* ── defaults ─────────────────────────────────────────────────── */\nconst defaults = {\n  brandName: \"ruixen ui\",\n  tagline: \"Modern components for modern interfaces.\",\n  columns: [\n    {\n      title: \"Product\",\n      links: [\n        { label: \"Components\", href: \"#\" },\n        { label: \"Templates\", href: \"#\" },\n        { label: \"Pro\", href: \"#\" },\n        { label: \"Changelog\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Resources\",\n      links: [\n        { label: \"Documentation\", href: \"#\" },\n        { label: \"API Reference\", href: \"#\" },\n        { label: \"Guides\", href: \"#\" },\n        { label: \"Examples\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Company\",\n      links: [\n        { label: \"About\", href: \"#\" },\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Careers\", href: \"#\" },\n        { label: \"Press\", href: \"#\" },\n      ],\n    },\n  ] as FooterColumn[],\n  socials: [] as FooterSocial[],\n  copyright: `\\u00A9 ${new Date().getFullYear()} ruixen ui`,\n};\n\n/* ── component ────────────────────────────────────────────────── */\nexport function CorporateFooter(props?: CorporateFooterProps) {\n  const brandMark = props?.brandMark;\n  const brandName = props?.brandName ?? defaults.brandName;\n  const tagline = props?.tagline ?? defaults.tagline;\n  const columns = props?.columns ?? defaults.columns;\n  const socials = props?.socials ?? defaults.socials;\n  const copyright = props?.copyright ?? defaults.copyright;\n\n  return (\n    <footer className=\"bg-background px-6 py-14 lg:py-20\">\n      <div className=\"relative mx-auto max-w-5xl overflow-hidden rounded-2xl bg-card p-10 shadow-lg shadow-black/[0.04] ring-1 ring-border/50 dark:shadow-black/20 md:px-16 md:py-14\">\n        {/* decorative watermark */}\n        <Watermark />\n\n        {/* content — sits above watermark */}\n        <div className=\"relative\">\n          {/* ── brand ──────────────────────────────────────────── */}\n          <div className=\"flex items-center gap-2.5\">\n            {brandMark ?? <DefaultMark />}\n            <span className=\"text-[16px] font-[590] tracking-[-0.02em] text-card-foreground\">\n              {brandName}\n            </span>\n          </div>\n          <p className=\"mt-3 max-w-sm text-[13px] leading-[1.6] text-card-foreground/45\">\n            {tagline}\n          </p>\n\n          {/* ── separator ─────────────────────────────────────── */}\n          <div className=\"my-8 h-px bg-border/50\" />\n\n          {/* ── columns ───────────────────────────────────────── */}\n          <div className=\"grid grid-cols-2 gap-x-8 gap-y-8 sm:grid-cols-3 lg:grid-cols-4\">\n            {columns.map((col) => (\n              <div key={col.title}>\n                <p className=\"text-[11px] font-medium uppercase tracking-[0.1em] text-card-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=\"group/link inline-flex items-center text-[13px] text-card-foreground/50 transition-colors duration-150 hover:text-card-foreground\"\n                      >\n                        <span className=\"transition-transform duration-150 group-hover/link:translate-x-0.5\">\n                          {link.label}\n                        </span>\n                      </Link>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n\n          {/* ── separator ─────────────────────────────────────── */}\n          <div className=\"mt-10 h-px bg-border/50\" />\n\n          {/* ── bottom bar ────────────────────────────────────── */}\n          <div className=\"mt-5 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center\">\n            <p className=\"text-[12px] text-card-foreground/25\">{copyright}</p>\n\n            {socials.length > 0 && (\n              <div className=\"flex items-center gap-4\">\n                {socials.map(({ icon: Icon, href, label }, idx) => (\n                  <Link\n                    key={idx}\n                    href={href}\n                    aria-label={label}\n                    className=\"text-card-foreground/25 transition-colors duration-150 hover:text-card-foreground/50\"\n                  >\n                    <Icon className=\"size-3.5\" />\n                  </Link>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/corporate-footer.tsx"
    }
  ]
}