{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logos-grid",
  "title": "Logo grid",
  "description": "Bordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/spotlight-card.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/logos-grid.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\";\n\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { SpotlightCard } from \"@/components/velora/spotlight-card\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Fictional brands drawn as simple geometric marks, painted with the brand\n * ramp. Swap an 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]\",\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(--card)\" />\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-lg\",\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(--card)\" opacity=\".85\" />\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-lg\",\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\n/**\n * Customer logos on a hairline grid beside a short pitch. Each cell lights\n * up under the cursor with a soft brand spotlight and brings its logo into\n * colour; the grid reflows from two to four columns.\n */\nexport function LogosGrid() {\n  return (\n    <section className=\"px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto grid max-w-7xl items-center gap-12 xl:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] xl:gap-16\">\n        <BlurFade className=\"max-w-2xl\">\n          <p className=\"text-sm font-semibold text-brand\">Customers</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            The teams behind products you use every day\n          </h2>\n          <p className=\"mt-5 text-lg text-pretty text-muted-foreground\">\n            More than 4,000 companies plan, build and ship with Acme — from\n            seed-stage startups to public companies with hundreds of teams.\n          </p>\n          <a\n            href=\"#\"\n            className=\"group/link mt-8 inline-flex items-center gap-1.5 rounded-sm text-sm font-semibold text-brand focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background focus-visible:outline-none\"\n          >\n            See customer stories\n            <ArrowRightIcon\n              aria-hidden\n              className=\"size-4 transition-transform group-hover/link:translate-x-0.5 motion-reduce:transition-none\"\n            />\n          </a>\n        </BlurFade>\n\n        <ul\n          aria-label=\"Customer logos\"\n          className=\"grid grid-cols-2 gap-px overflow-hidden rounded-2xl border bg-border sm:grid-cols-4\"\n        >\n          {LOGOS.map((logo) => (\n            <li key={logo.name} className=\"bg-card\">\n              <SpotlightCard\n                radius={180}\n                className=\"h-full rounded-none border-0 bg-transparent\"\n              >\n                <div className=\"flex h-28 items-center justify-center gap-2 px-3 text-muted-foreground opacity-80 grayscale transition duration-300 group-hover/spotlight:text-foreground group-hover/spotlight:opacity-100 group-hover/spotlight:grayscale-0 motion-reduce:transition-none sm:h-32\">\n                  <svg viewBox=\"0 0 24 24\" aria-hidden className=\"size-6 shrink-0\">\n                    {logo.mark}\n                  </svg>\n                  <span className={cn(\"text-base whitespace-nowrap\", logo.wordmark)}>\n                    {logo.name}\n                  </span>\n                </div>\n              </SpotlightCard>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/logos-grid.tsx"
    }
  ],
  "categories": [
    "logo-clouds"
  ],
  "type": "registry:block"
}