{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "logo-cloud-grayscale",
  "title": "Logo Cloud — Grayscale Hover",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/logo-cloud-grayscale/logo-cloud-grayscale.component.ts",
      "content": "// Customer logo wall rendered in muted monochrome that resolves to full contrast\n// on hover, with a headline count and a segment line beneath. Port of the\n// Vue/React block 1:1 — swap the wordmarks for logo files; the hover treatment\n// carries over.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nconst customers: string[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-logo-cloud-grayscale, [ui-logo-cloud-grayscale]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <section data-slot=\"logo-cloud-grayscale\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-16\">\n        <div class=\"text-center\">\n          <span ui-badge variant=\"secondary\">Customers</span>\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          @for (customer of allCustomers; track 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          }\n        </ul>\n\n        <ui-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 ui-button variant=\"link\" class=\"h-auto p-0 text-sm\">Read their stories</button>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiLogoCloudGrayscaleComponent {\n  protected readonly allCustomers = customers\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/logo-cloud-grayscale/logo-cloud-grayscale.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/logo-cloud-grayscale/index.ts",
      "content": "export { UiLogoCloudGrayscaleComponent } from './logo-cloud-grayscale.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/logo-cloud-grayscale/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/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"
}