{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "trust-center-footer", "title": "Trust Center Footer", "description": "Compliance marks that expand to scope, over a logo row and link columns.", "registryDependencies": [ "button", "tooltip" ], "files": [ { "path": "components/spectrumui/blocks/footers/trust-center-footer.tsx", "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\nimport { IconArrowUpRight, IconShield, FooterBar, type FooterSocial } from './footer-kit';\n\ntype IconProps = React.SVGProps;\n\n/**\n * Six customer marks. Invented, not real companies — a logo row that ships with\n * somebody else's trademarks in it is wrong in every install. Straight lines,\n * rectangles and circles on a 24px grid, so the set stays crisp at 20px.\n */\nfunction MarkNorthwind(props: IconProps) {\n return (\n \n \n \n );\n}\n\nfunction MarkCobalt(props: IconProps) {\n return (\n \n \n \n );\n}\n\nfunction MarkMeridian(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nfunction MarkTessellate(props: IconProps) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MarkLinework(props: IconProps) {\n return (\n \n \n \n \n \n );\n}\n\nfunction MarkHollowCreek(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\n/* One word each. Two-word names truncate to an ellipsis in the two-column\n mobile grid, and a logo row of half-names reads as broken rather than tight. */\n/**\n * Certification marks, drawn rather than imported as images.\n *\n * The badges were five identical green dots, which told a procurement reader\n * nothing — the whole point of a compliance row is that the marks are\n * recognisable before you read the label. These are silhouettes in each\n * standard's own colours: the EU ring of twelve stars for GDPR, an audit seal\n * for SOC 2, a certification rosette for ISO, a shield and cross for HIPAA, a\n * locked card for PCI. Trademarks belong to their respective bodies; swap in\n * the official artwork you are licensed to display before shipping.\n */\nfunction MarkSoc2(props: IconProps) {\n return (\n \n \n \n \n \n );\n}\n\nfunction MarkIso(props: IconProps) {\n /* A certification rosette: twelve points around a disc. */\n const points = Array.from({ length: 12 }, (_, i) => {\n const a = (i / 12) * Math.PI * 2;\n return `${(12 + Math.cos(a) * 10).toFixed(2)},${(12 + Math.sin(a) * 10).toFixed(2)}`;\n }).join(' ');\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MarkGdpr(props: IconProps) {\n /* The EU ring: twelve gold stars on reflex blue. Reading it as stars at 22px\n needs discs, not five-point stars — the ring is what carries recognition. */\n const stars = Array.from({ length: 12 }, (_, i) => {\n const a = (i / 12) * Math.PI * 2 - Math.PI / 2;\n return { x: 12 + Math.cos(a) * 7.2, y: 12 + Math.sin(a) * 7.2 };\n });\n return (\n \n \n {stars.map((star, i) => (\n \n ))}\n \n );\n}\n\nfunction MarkHipaa(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nfunction MarkPci(props: IconProps) {\n return (\n \n \n \n \n \n \n );\n}\n\n/** Keyed on the badge id the fixture uses; anything unknown falls back to the shield. */\nconst BADGE_MARKS: Record> = {\n soc2: MarkSoc2,\n iso27001: MarkIso,\n gdpr: MarkGdpr,\n hipaa: MarkHipaa,\n pci: MarkPci,\n};\n\nconst DEFAULT_CUSTOMERS = [\n { name: 'Northwind', mark: MarkNorthwind },\n { name: 'Cobalt', mark: MarkCobalt },\n { name: 'Meridian', mark: MarkMeridian },\n { name: 'Tessellate', mark: MarkTessellate },\n { name: 'Linework', mark: MarkLinework },\n { name: 'Hollow', mark: MarkHollowCreek },\n];\n\nconst KEYFRAMES = `\n@keyframes su-trust-in { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }\n`;\n\nexport type TrustCenterFooterVariant = 'Badges' | 'Detailed';\n\nexport interface TrustBadge {\n id: string;\n label: string;\n scope: string;\n issued: string;\n href: string;\n}\n\nexport interface CustomerMark {\n name: string;\n mark: React.ComponentType;\n}\n\nexport interface TrustCenterFooterProps {\n socials?: FooterSocial[];\n brand: string;\n headline?: string;\n badges: TrustBadge[];\n /** Logos for the \"deployed inside\" row. Defaults to the bundled set. */\n customers?: CustomerMark[];\n customersLabel?: string;\n /** Link columns. A trust page is still a footer; without them it reads as a banner. */\n groups?: { title: string; links: { label: string; href: string }[] }[];\n requestLabel?: string;\n onRequestReport?: () => void;\n links?: { label: string; href: string }[];\n copyright?: string;\n variant?: TrustCenterFooterVariant;\n className?: string;\n}\n\nexport function TrustCenterFooter({\n socials,\n brand,\n headline = 'Audited, documented, and available for review.',\n badges,\n customers = DEFAULT_CUSTOMERS,\n customersLabel = 'Deployed inside',\n groups = [],\n requestLabel = 'Request full report',\n onRequestReport,\n links,\n copyright,\n variant = 'Badges',\n className,\n}: TrustCenterFooterProps) {\n const detailed = variant === 'Detailed';\n\n return (\n \n