{
  "name": "hero/left-aligned",
  "type": "registry:component",
  "description": "Left aligned hero with primary CTA",
  "files": [
    {
      "path": "example/Hero/SectionHero_LeftAligned.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    <!-- Hero Content - Left Aligned -->\n    <div class=\"mb-16 max-w-4xl text-left\">\n      <h1\n        class=\"text-fg mb-6 text-balance\"\n        style=\"text-box-trim: trim-both; text-box-edge: cap alphabetic;\"\n      >\n        Built to make you <span class=\"sp-emphasis\"\n          >extraordinarily productive</span\n        >\n      </h1>\n\n      <p class=\"text-fg-sub mb-8 max-w-2xl text-lg\">\n        Pablo is the best way to create websites with AI. Build stunning sites\n        in minutes, not hours. No coding required.\n      </p>\n\n      <div class=\"flex flex-col items-start justify-start gap-4 sm:flex-row\">\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    </div>\n\n    <!-- Hero Image -->\n    <img\n      src={myImage.src}\n      alt=\"Pablo Product Demo\"\n      class=\"w-full\"\n      width={myImage.width}\n      height={myImage.height}\n    />\n  </div>\n</section>\n"
    }
  ],
  "category": "example"
}