{
  "name": "hero/centered-with-logo-cloud",
  "type": "registry:component",
  "description": "Centered hero with supporting logo cloud",
  "files": [
    {
      "path": "example/Hero/SectionHero_CenteredWithLogoCloud.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\nimport Button from '@@/components/ui/Button.astro';\nimport ScrollRail from '@@/components/ui/ScrollRail.astro';\nimport WebglRgb from '@@/components/ui/WebglRgb.astro';\nimport { Icon } from 'astro-icon/components';\nimport myImage from '@/assets/placeholder.png';\n\nconst logos = [\n  {\n    name: 'Logo 1',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-132x53_0442ae34-055f-4801-98d6-0c1e0a0427b7.svg',\n    width: '132px',\n    height: '53px',\n  },\n  {\n    name: 'Logo 2',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_692339a2-5fff-4bd6-bd1f-309e5697ff07.svg',\n    width: '135px',\n    height: '31px',\n  },\n  {\n    name: 'Logo 3',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_fc50848e-eb55-4ec4-aeb7-0ad68a186f3b.svg',\n    width: '78px',\n    height: '59px',\n  },\n  {\n    name: 'Logo 4',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_93dda93a-62c6-4aec-ba0a-6ba6285958da.svg',\n    width: '135px',\n    height: '31px',\n  },\n  {\n    name: 'Logo 5',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_b85bd8d6-7b56-4343-9101-cdbafed6993a.svg',\n    width: '135px',\n    height: '31px',\n  },\n  {\n    name: 'Logo 6',\n    src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_b95207a4-f41c-4be9-98cc-0dcda004c65e.svg',\n    width: '78px',\n    height: '59px',\n  },\n];\n---\n\n<section\n  class=\"hero-section relative flex min-h-screen flex-col items-center justify-center px-6 pt-52 text-center\"\n>\n  <BackgroundEffect />\n  <WebglRgb />\n\n  <div class=\"container flex flex-col items-center\">\n    <h1\n      class=\"text-fg mb-[1.5rem]\"\n\n      style=\"text-box-trim: trim-both; text-box-edge: cap alphabetic;\"\n    >\n      Create your site with <span class=\"sp-emphasis\">Pablo</span>\n    </h1>\n\n    <p\n      class=\"text-fg-sub mb-[2rem] max-w-2xl text-lg\"\n\n    >\n      Meet Pablo, the AI-powered website builder that lets you create your site\n      in minutes. No coding required – launch your professional site in minutes.\n    </p>\n\n    <div\n      class=\"mb-16 flex flex-col items-center justify-center gap-4 sm:flex-row\"\n    >\n      <Button size=\"md\">Get Started</Button>\n      <Button type=\"secondary\" size=\"md\">\n        Watch Demo\n        <Icon name=\"lucide:chevron-right\" />\n      </Button>\n    </div>\n\n    <!-- Hero Image -->\n    <!-- <ImageGradient /> -->\n    <img\n      src={myImage.src}\n      alt=\"Pablo Logo\"\n      class=\"w-full\"\n      width={myImage.width}\n      height={myImage.height}\n    />\n\n    <!-- Logo Cloud -->\n    <div class=\"logo-cloud w-full py-12\">\n      <div class=\"container\">\n        <p\n          class=\"text-fg-sub mb-8 text-center text-sm font-medium uppercase tracking-wider\"\n        >\n          Trusted by leading companies\n        </p>\n        <ScrollRail\n          autoScroll={true}\n          duration=\"30s\"\n          gap=\"80px\"\n          class=\"items-center\"\n          useMask={true}\n        >\n          {\n            logos.map((logo) => (\n              <div class=\"flex flex-shrink-0 items-center justify-center\">\n                <img\n                  src={logo.src}\n                  alt={logo.name}\n                  width={logo.width || \"120\"}\n                  height={logo.height || \"40\"}\n                  class=\"h-auto opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0\"\n                  style={`width: ${logo.width || \"120px\"}; height: ${logo.height || \"40px\"}; object-fit: contain;`}\n                />\n              </div>\n            ))\n          }\n        </ScrollRail>\n      </div>\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "brand-logo"
  ]
}