{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-grayscale",
  "title": "Logo Cloud — Grayscale Hover",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/logo-cloud-grayscale/LogoCloudGrayscale.tsx",
      "content": "'use client'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\n\nconst customers = [\n  'Northwind',\n  'Halden',\n  'Verity',\n  'Calder',\n  'Ridgeway',\n  'Ashford',\n  'Brightmoor',\n  'Kesteven',\n  'Marlowe',\n  'Thornbury',\n  'Wexley',\n  'Alderton',\n]\n\nexport function LogoCloudGrayscale() {\n  return (\n    <section data-slot=\"logo-cloud-grayscale\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <div className=\"text-center\">\n          <Badge variant=\"secondary\">Customers</Badge>\n          <p className=\"mt-4 text-lg font-medium\">Running the close at 240 companies</p>\n          <p className=\"text-muted-foreground mt-1.5 text-sm\">\n            Freight, healthcare, retail, and manufacturing · median 1,100 staff\n          </p>\n        </div>\n\n        {/* Muted by default, full contrast on hover: the wall reads as texture\n            until someone looks for a specific name. */}\n        <ul className=\"mt-10 grid grid-cols-2 gap-x-8 gap-y-6 sm:grid-cols-3 lg:grid-cols-6\">\n          {customers.map((customer) => (\n            <li key={customer} className=\"flex items-center justify-center\">\n              <span className=\"text-muted-foreground/60 hover:text-foreground cursor-default text-sm font-semibold tracking-[0.18em] uppercase transition-colors\">\n                {customer}\n              </span>\n            </li>\n          ))}\n        </ul>\n\n        <Separator className=\"my-10\" />\n\n        <div className=\"flex flex-wrap items-center justify-center gap-4 text-center\">\n          <p className=\"text-muted-foreground text-sm\">Six of the ten largest UK freight forwarders.</p>\n          <Button variant=\"link\" className=\"h-auto p-0 text-sm\">\n            Read their stories\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/LogoCloudGrayscale.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Customer logo wall rendered in muted monochrome that resolves to full contrast on hover, with a headline count and a segment line beneath.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "logos"
}