{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logos-marquee",
  "title": "Logo marquee",
  "description": "A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover.",
  "registryDependencies": [
    "utils",
    "https://velora.colorlib.com/r/marquee.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/logos-marquee.tsx",
      "content": "import { Marquee } from \"@/components/velora/marquee\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Fictional brands drawn as simple geometric marks. Marks paint with the\n * brand ramp, so they pick up your colours when a logo is hovered. Swap an\n * entry's `mark` for an <img> or your customer's SVG.\n */\nconst LOGOS: { name: string; wordmark: string; mark: React.ReactNode }[] = [\n  {\n    name: \"Acme\",\n    wordmark: \"font-bold uppercase tracking-[0.2em] text-lg\",\n    mark: (\n      <>\n        <path d=\"M12 3 21.5 20h-19z\" fill=\"var(--brand-from)\" />\n        <path d=\"M12 10.5 16.5 18.5h-9z\" fill=\"var(--background)\" />\n      </>\n    ),\n  },\n  {\n    name: \"Northwind\",\n    wordmark: \"font-semibold tracking-tight\",\n    mark: (\n      <>\n        <rect x=\"3\" y=\"13\" width=\"4.5\" height=\"8\" rx=\"1\" fill=\"var(--brand-to)\" />\n        <rect x=\"9.75\" y=\"8\" width=\"4.5\" height=\"13\" rx=\"1\" fill=\"var(--brand-via)\" />\n        <rect x=\"16.5\" y=\"3\" width=\"4.5\" height=\"18\" rx=\"1\" fill=\"var(--brand-from)\" />\n      </>\n    ),\n  },\n  {\n    name: \"Lumen\",\n    wordmark: \"font-medium lowercase tracking-tight\",\n    mark: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"4.5\" fill=\"var(--brand-via)\" />\n        <path\n          d=\"M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1\"\n          stroke=\"var(--brand-to)\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </>\n    ),\n  },\n  {\n    name: \"Orbit\",\n    wordmark: \"font-mono font-semibold lowercase\",\n    mark: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\".35\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3.5\" fill=\"var(--brand-from)\" />\n        <circle cx=\"18.9\" cy=\"8\" r=\"2.5\" fill=\"var(--brand-to)\" />\n      </>\n    ),\n  },\n  {\n    name: \"Halcyon\",\n    wordmark: \"font-serif italic tracking-tight text-xl\",\n    mark: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"9.5\" fill=\"var(--brand-to)\" opacity=\".35\" />\n        <path d=\"M12 2.5a9.5 9.5 0 0 1 0 19z\" fill=\"var(--brand-from)\" />\n      </>\n    ),\n  },\n  {\n    name: \"Kestrel\",\n    wordmark: \"font-extrabold tracking-tighter\",\n    mark: (\n      <>\n        <path d=\"M12 2 22 12 12 22 2 12z\" fill=\"var(--brand-via)\" />\n        <path d=\"M12 7 17 12 12 17 7 12z\" fill=\"var(--background)\" opacity=\".85\" />\n      </>\n    ),\n  },\n  {\n    name: \"Quartzite\",\n    wordmark: \"font-semibold uppercase tracking-widest text-sm\",\n    mark: (\n      <>\n        <path d=\"M12 2 20.7 7v10L12 22l-8.7-5V7z\" fill=\"var(--brand-from)\" />\n        <path d=\"M12 2v20M3.3 7 12 12l8.7-5\" stroke=\"var(--background)\" strokeWidth=\"1.5\" fill=\"none\" opacity=\".6\" />\n      </>\n    ),\n  },\n  {\n    name: \"Tidewater\",\n    wordmark: \"font-semibold tracking-tight\",\n    mark: (\n      <path\n        d=\"M2 9c2.5-2.7 5-2.7 7.5 0s5 2.7 7.5 0 3.6-2 5-1M2 16c2.5-2.7 5-2.7 7.5 0s5 2.7 7.5 0 3.6-2 5-1\"\n        stroke=\"var(--brand-to)\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        fill=\"none\"\n      />\n    ),\n  },\n  {\n    name: \"Foxglove\",\n    wordmark: \"font-serif font-medium text-xl\",\n    mark: (\n      <>\n        <circle cx=\"9\" cy=\"9\" r=\"6\" fill=\"var(--brand-from)\" opacity=\".85\" />\n        <circle cx=\"15\" cy=\"9\" r=\"6\" fill=\"var(--brand-to)\" opacity=\".7\" />\n        <circle cx=\"12\" cy=\"15\" r=\"6\" fill=\"var(--brand-via)\" opacity=\".7\" />\n      </>\n    ),\n  },\n  {\n    name: \"Meridian\",\n    wordmark: \"font-light uppercase tracking-[0.3em] text-sm\",\n    mark: (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"var(--brand-via)\" strokeWidth=\"2\" />\n        <ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\" fill=\"none\" stroke=\"var(--brand-via)\" strokeWidth=\"2\" />\n        <path d=\"M3 12h18\" stroke=\"var(--brand-via)\" strokeWidth=\"2\" />\n      </>\n    ),\n  },\n];\n\n/**\n * Logo strip for under a hero: a short trust line over a slow marquee of\n * customer logos. Logos rest in grayscale and take their colour on hover;\n * the strip pauses on hover and focus, and becomes a static wrapped row\n * under `prefers-reduced-motion`.\n */\nexport function LogosMarquee() {\n  return (\n    <section className=\"px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto max-w-5xl\">\n        <h2 className=\"text-center text-sm font-medium text-balance text-muted-foreground sm:text-base\"\n        >\n          Trusted by product teams at{\" \"}\n          <span className=\"text-foreground\">4,000+ companies</span>, from\n          seed-stage startups to the Fortune 500\n        </h2>\n\n        <div className=\"relative mt-10\">\n          <div\n            aria-hidden\n            className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-border to-transparent\"\n          />\n          <Marquee\n            pauseOnHover\n            repeat={3}\n            role=\"list\"\n            aria-label=\"Customer logos\"\n            className=\"py-8 [--duration:45s] [--gap:2.5rem] sm:[--gap:4.5rem]\"\n          >\n            {LOGOS.map((logo) => (\n              <div\n                key={logo.name}\n                role=\"listitem\"\n                className=\"flex shrink-0 items-center gap-2.5 text-muted-foreground opacity-80 grayscale transition duration-300 hover:text-foreground hover:opacity-100 hover:grayscale-0 motion-reduce:transition-none\"\n              >\n                <svg viewBox=\"0 0 24 24\" aria-hidden className=\"size-7 shrink-0\">\n                  {logo.mark}\n                </svg>\n                <span className={cn(\"text-lg whitespace-nowrap\", logo.wordmark)}>\n                  {logo.name}\n                </span>\n              </div>\n            ))}\n          </Marquee>\n          <div\n            aria-hidden\n            className=\"absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-border to-transparent\"\n          />\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/logos-marquee.tsx"
    }
  ],
  "categories": [
    "logo-clouds"
  ],
  "type": "registry:block"
}