{
  "name": "hero/side",
  "type": "registry:component",
  "description": "Side-by-side hero layout with imagery",
  "files": [
    {
      "path": "example/Hero/SectionHero_Side.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\nimport Button from '@@/components/ui/Button.astro';\nimport { Icon } from 'astro-icon/components';\nimport myImage from '@/assets/placeholder.png';\n---\n\n<section\n  class=\"hero-section relative flex min-h-screen flex-col items-center justify-center px-6 py-32\"\n>\n  <BackgroundEffect />\n\n  <div class=\"container\">\n    <div\n      class=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16\"\n    >\n      <!-- Left: Text Content -->\n      <div class=\"text-left\">\n        <h1 class=\"text-fg mb-6\">\n          Deploy to the cloud with confidence\n        </h1>\n        <p\n          class=\"text-fg-sub mb-8 text-lg\"\n\n        >\n          Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem\n          cupidatat commodo. Elit sunt amet fugiat veniam occaecat.\n        </p>\n        <div class=\"flex items-center gap-4\">\n          <Button size=\"md\">Get started</Button>\n          <Button type=\"secondary\" size=\"md\">\n            Learn more\n            <Icon name=\"lucide:chevron-right\" />\n          </Button>\n        </div>\n      </div>\n\n      <!-- Right: Image -->\n      <div class=\"flex items-center justify-center\">\n        <img\n          src={myImage.src}\n          width={myImage.width}\n          height={myImage.height}\n          alt=\"Product screenshot\"\n          class=\"w-full\"\n        />\n      </div>\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example"
}