{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud",
  "title": "Logo Cloud",
  "description": "A social-proof logo band as a CSS marquee (auto-scroll, reduced-motion aware) or a static grid.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/logo-cloud.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * LogoCloud — a social-proof band of client logos. `variant=\"marquee\"` (default)\n * auto-scrolls an edge-faded, seamless loop that pauses on hover and stops under\n * `prefers-reduced-motion` (pure CSS, shipped in the theme — no JS). `\"static-grid\"`\n * lays the logos out in a centred, wrapping row.\n *\n * Pass `logos` as an array of nodes (e.g. `<img>`, inline SVG). On the default\n * `tone=\"brand\"` band, render logos white/reversed.\n */\n\ninterface LogoCloudProps {\n  /** The logos, as nodes. Render white/reversed for the dark brand band. */\n  logos: React.ReactNode[]\n  title?: string\n  variant?: \"marquee\" | \"static-grid\"\n  tone?: \"brand\" | \"muted\"\n  className?: string\n}\n\nfunction LogoRow({\n  logos,\n  ariaHidden,\n}: {\n  logos: React.ReactNode[]\n  ariaHidden?: boolean\n}) {\n  return (\n    <ul\n      aria-hidden={ariaHidden}\n      className=\"flex shrink-0 items-center gap-x-12 pr-12 md:gap-x-16 md:pr-16\"\n    >\n      {logos.map((logo, i) => (\n        <li key={i} className=\"flex items-center justify-center\">\n          {logo}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nfunction LogoCloud({\n  logos,\n  title = \"Trusted by teams across the industry\",\n  variant = \"marquee\",\n  tone = \"brand\",\n  className,\n}: LogoCloudProps) {\n  const onBrand = tone === \"brand\"\n  return (\n    <section\n      data-slot=\"logo-cloud\"\n      className={cn(\n        \"border-y py-12 md:py-14\",\n        onBrand\n          ? \"border-white/10 bg-brand-700\"\n          : \"border-border-secondary bg-bg-secondary\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col items-center gap-9\">\n        {title ? (\n          <p\n            className={cn(\n              \"px-4 text-center text-sm font-medium\",\n              onBrand ? \"text-white/55\" : \"text-text-tertiary\"\n            )}\n          >\n            {title}\n          </p>\n        ) : null}\n\n        {variant === \"marquee\" ? (\n          <div\n            className=\"logo-marquee group relative w-full overflow-hidden\"\n            style={{\n              maskImage:\n                \"linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)\",\n              WebkitMaskImage:\n                \"linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)\",\n            }}\n          >\n            <div className=\"logo-marquee-track flex w-max\">\n              <LogoRow logos={logos} />\n              <LogoRow logos={logos} ariaHidden />\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 px-4 md:gap-x-16\">\n            {logos.map((logo, i) => (\n              <div key={i} className=\"flex items-center justify-center\">\n                {logo}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n\nexport { LogoCloud }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/logo-cloud.tsx"
    }
  ],
  "type": "registry:block"
}