{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "logo-cloud-grayscale",
  "title": "Logo Cloud — Grayscale Hover",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/logo-cloud-grayscale/LogoCloudGrayscale.svelte",
      "content": "<script lang=\"ts\">\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n\n  const 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</script>\n\n<section data-slot=\"logo-cloud-grayscale\" class=\"bg-background\">\n  <div class=\"mx-auto max-w-6xl px-6 py-16\">\n    <div class=\"text-center\">\n      <Badge variant=\"secondary\">Customers</Badge>\n      <p class=\"mt-4 text-lg font-medium\">Running the close at 240 companies</p>\n      <p class=\"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 class=\"mt-10 grid grid-cols-2 gap-x-8 gap-y-6 sm:grid-cols-3 lg:grid-cols-6\">\n      {#each customers as customer (customer)}\n        <li class=\"flex items-center justify-center\">\n          <span\n            class=\"text-muted-foreground/60 hover:text-foreground cursor-default text-sm font-semibold tracking-[0.18em] uppercase transition-colors\"\n          >\n            {customer}\n          </span>\n        </li>\n      {/each}\n    </ul>\n\n    <Separator class=\"my-10\" />\n\n    <div class=\"flex flex-wrap items-center justify-center gap-4 text-center\">\n      <p class=\"text-muted-foreground text-sm\">Six of the ten largest UK freight forwarders.</p>\n      <Button variant=\"link\" class=\"h-auto p-0 text-sm\">Read their stories</Button>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/logo-cloud-grayscale/LogoCloudGrayscale.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/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"
}