{
  "name": "logo/cloud-simple",
  "type": "registry:component",
  "description": "Simple stacked logo cloud",
  "files": [
    {
      "path": "example/Logo/LogoCloudSimple.astro",
      "type": "registry:component",
      "content": "---\ninterface Props {\n  title?: string;\n  logos?: Array<{\n    name: string;\n    src?: string;\n  }>;\n}\n\nconst {\n  title = 'Trusted by leading companies',\n  logos = [\n    {\n      name: 'Stripe',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-132x53_0442ae34-055f-4801-98d6-0c1e0a0427b7.svg',\n    },\n    {\n      name: 'OpenAI',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_692339a2-5fff-4bd6-bd1f-309e5697ff07.svg',\n    },\n    {\n      name: 'Linear',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_fc50848e-eb55-4ec4-aeb7-0ad68a186f3b.svg',\n    },\n    {\n      name: 'Datadog',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_93dda93a-62c6-4aec-ba0a-6ba6285958da.svg',\n    },\n    {\n      name: 'Rippling',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_b85bd8d6-7b56-4343-9101-cdbafed6993a.svg',\n    },\n    {\n      name: 'Figma',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_b95207a4-f41c-4be9-98cc-0dcda004c65e.svg',\n    },\n    {\n      name: 'Ramp',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-132x53_0442ae34-055f-4801-98d6-0c1e0a0427b7.svg',\n    },\n    {\n      name: 'Adobe',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_692339a2-5fff-4bd6-bd1f-309e5697ff07.svg',\n    },\n  ],\n} = Astro.props;\n---\n\n<section class=\"w-full py-16\">\n  <div class=\"container mx-auto px-4\">\n    <p class=\"text-fg-sub mb-8 text-center text-sm font-medium tracking-wider\">\n      {title}\n    </p>\n    <div\n      class=\"flex flex-wrap items-center justify-center gap-x-12 gap-y-8 md:gap-x-16\"\n    >\n      {\n        logos.map((logo) => (\n          <div class=\"flex items-center justify-center\">\n            {logo.src ? (\n              <img\n                src={logo.src}\n                alt={logo.name}\n                class=\"h-auto w-auto opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0\"\n                style=\"max-height: 40px; object-fit: contain;\"\n              />\n            ) : (\n              <div class=\"text-fg-sub text-lg font-semibold opacity-60 transition-opacity hover:opacity-100\">\n                {logo.name}\n              </div>\n            )}\n          </div>\n        ))\n      }\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "brand-logo"
  ]
}