{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-footer",
  "title": "Site Footer",
  "description": "The navy marketing footer with a watermark, hairline divider, link columns and an optional theme toggle.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/button",
    "@nx-ui/nx-emblem",
    "@nx-ui/theme-toggle",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/site-footer.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowRight } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { NxEmblem } from \"@/components/blocks/nx-emblem\"\nimport { ThemeToggle } from \"@/components/blocks/theme-toggle\"\n\n/**\n * SiteFooter — the full navy marketing footer. Its reusable design DNA: a top\n * hairline gradient divider (so it separates cleanly from a brand CTA above), a\n * giant watermark mark bottom-right, a brand block (logo slot + tagline + CTAs)\n * beside link columns, an optional company-facts row, and a bottom legal bar\n * with an optional theme toggle.\n *\n * Everything is props-driven — pass your own `logo`, `columns`, `legalLinks`,\n * `ctas`, `watermark` and copy.\n */\n\nexport interface FooterLink {\n  label: string\n  href: string\n  external?: boolean\n}\n\nexport interface FooterColumn {\n  heading: string\n  links: FooterLink[]\n}\n\ninterface SiteFooterProps {\n  /** Logo node for the brand block. */\n  logo?: React.ReactNode\n  tagline?: string\n  columns: FooterColumn[]\n  legalLinks?: FooterLink[]\n  ctas?: { primary?: FooterLink; secondary?: FooterLink }\n  /** A large decorative watermark node, placed bottom-right at very low opacity. */\n  watermark?: React.ReactNode\n  copyright?: string\n  showThemeToggle?: boolean\n  className?: string\n}\n\n/** The default watermark — the Nexus arrow emblem (single source of truth). */\nfunction DefaultWatermark({ className }: { className?: string }) {\n  // Neutralise the emblem's two-tone defaults: the watermark inherits the\n  // footer's currentColor at low opacity in both colour modes.\n  return (\n    <NxEmblem\n      weight=\"regular\"\n      className={cn(\"text-current dark:text-current\", className)}\n    />\n  )\n}\n\nfunction SiteFooter({\n  logo,\n  tagline,\n  columns,\n  legalLinks,\n  ctas,\n  watermark,\n  copyright = `© ${new Date().getFullYear()}. All rights reserved.`,\n  showThemeToggle = true,\n  className,\n}: SiteFooterProps) {\n  return (\n    <footer\n      data-slot=\"site-footer\"\n      className={cn(\"relative overflow-hidden bg-brand-600 text-white\", className)}\n    >\n      {/* Hairline divider — separates the footer from a brand CTA above. */}\n      <div\n        aria-hidden=\"true\"\n        className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n      />\n\n      {/* Watermark, bottom-right. */}\n      <div className=\"pointer-events-none absolute -right-24 -bottom-24 text-white/[0.03] md:-right-16 md:-bottom-16\">\n        {watermark ?? (\n          <DefaultWatermark className=\"size-[460px] md:size-[520px]\" />\n        )}\n      </div>\n\n      <div className=\"relative mx-auto w-full max-w-container px-4 pt-20 pb-10 md:px-8 md:pt-28 md:pb-12\">\n        <div className=\"grid gap-14 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-20\">\n          {/* Brand block */}\n          <div className=\"flex flex-col gap-7\">\n            {logo}\n            {tagline ? (\n              <p className=\"max-w-md text-lg text-white/75\">{tagline}</p>\n            ) : null}\n            {ctas?.primary || ctas?.secondary ? (\n              <div className=\"flex flex-wrap items-center gap-3\">\n                {ctas.primary ? (\n                  <Button\n                    variant=\"accent\"\n                    size=\"lg\"\n                    className=\"cta-arrow\"\n                    nativeButton={false}\n                    render={<a href={ctas.primary.href} />}\n                  >\n                    <span data-text>{ctas.primary.label}</span>\n                    <ArrowRight data-icon />\n                  </Button>\n                ) : null}\n                {ctas.secondary ? (\n                  <Button\n                    variant=\"secondary-on-brand\"\n                    size=\"lg\"\n                    nativeButton={false}\n                    render={<a href={ctas.secondary.href} />}\n                  >\n                    <span data-text>{ctas.secondary.label}</span>\n                  </Button>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n\n          {/* Link columns */}\n          <div className=\"grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3\">\n            {columns.map((column) => (\n              <div key={column.heading} className=\"flex flex-col gap-4\">\n                <p className=\"text-sm font-semibold tracking-wide text-white uppercase\">\n                  {column.heading}\n                </p>\n                <ul className=\"flex flex-col gap-3\">\n                  {column.links.map((link) => (\n                    <li key={link.label}>\n                      <a\n                        href={link.href}\n                        {...(link.external\n                          ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n                          : {})}\n                        className=\"text-sm text-white/70 transition duration-100 ease-linear hover:text-white\"\n                      >\n                        {link.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Bottom bar */}\n        <div className=\"mt-16 flex flex-col gap-4 border-t border-white/10 pt-8 md:flex-row md:items-center md:justify-between\">\n          <p className=\"text-sm text-white/60\">{copyright}</p>\n          <div className=\"flex flex-wrap items-center gap-x-5 gap-y-3 md:gap-x-6\">\n            {legalLinks && legalLinks.length > 0 ? (\n              <ul className=\"flex flex-wrap items-center gap-x-5 gap-y-2\">\n                {legalLinks.map((link) => (\n                  <li key={link.label}>\n                    <a\n                      href={link.href}\n                      className=\"text-sm text-white/60 transition duration-100 ease-linear hover:text-white\"\n                    >\n                      {link.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            ) : null}\n            {showThemeToggle ? (\n              <ThemeToggle className=\"text-white/70 hover:bg-white/10 hover:text-white\" />\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n\nexport { SiteFooter }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/site-footer.tsx"
    }
  ],
  "type": "registry:block"
}