{
  "name": "feature/bento-grid",
  "type": "registry:component",
  "description": "Feature grid using Card components and imagery",
  "files": [
    {
      "path": "example/Feature/SectionFeature_BentoGrid.astro",
      "type": "registry:component",
      "content": "---\nimport Card from '@@/components/ui/Card.astro';\nimport myImage from '@/assets/placeholder.png';\n---\n\n<section class=\"py-24 sm:py-32\" data-scheme=\"shift\">\n  <div class=\"mx-auto max-w-7xl px-6 lg:px-8\">\n    <div class=\"mb-10 text-center\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Deploy faster\n      </div>\n      <h2 class=\"h2 mb-4\">\n        Everything you need to <span class=\"sp-emphasis\">deploy</span> your app\n      </h2>\n      <p\n        class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\"\n\n      >\n        Modern workflow, integrations, security, and performance—ready to ship\n      </p>\n    </div>\n\n    <div\n      class=\"mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-8 lg:grid-rows-2\"\n    >\n      <!-- Tile 1: lg:col-span-5 -->\n      <div class=\"flex lg:col-span-5\">\n        <Card className=\"shadow-8 w-full lg:rounded-tl-2xl\">\n          <div class=\"w-full\">\n            <img\n              src={myImage.src}\n              width={myImage.width}\n              height={myImage.height}\n              alt=\"\"\n              class=\"h-[280px] w-full object-cover object-left sm:h-[320px]\"\n            />\n          </div>\n          <div class=\"p-5 md:p-7\">\n            <h3 class=\"typography-ui-12-regular color-text-secondary\">\n              Releases\n            </h3>\n            <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In\n              gravida justo et nulla efficitur, maximus egestas sem\n              pellentesque.\n            </p>\n          </div>\n        </Card>\n      </div>\n\n      <!-- Tile 2: lg:col-span-3 -->\n      <div class=\"flex lg:col-span-3\">\n        <Card className=\"shadow-8 w-full lg:rounded-tr-2xl\">\n          <div class=\"w-full\">\n            <img\n              src={myImage.src}\n              width={myImage.width}\n              height={myImage.height}\n              alt=\"\"\n              class=\"h-[280px] w-full object-cover sm:h-[320px]\"\n            />\n          </div>\n          <div class=\"p-5 md:p-7\">\n            <h3 class=\"typography-ui-12-regular color-text-secondary\">\n              Integrations\n            </h3>\n            <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n              Curabitur auctor, ex quis auctor venenatis, eros arcu rhoncus\n              massa.\n            </p>\n          </div>\n        </Card>\n      </div>\n\n      <!-- Tile 3: lg:col-span-3 -->\n      <div class=\"flex lg:col-span-3\">\n        <Card className=\"shadow-8 w-full lg:rounded-bl-2xl\">\n          <div class=\"w-full\">\n            <img\n              src={myImage.src}\n              width={myImage.width}\n              height={myImage.height}\n              alt=\"\"\n              class=\"h-[280px] w-full object-cover sm:h-[320px]\"\n            />\n          </div>\n          <div class=\"p-5 md:p-7\">\n            <h3 class=\"typography-ui-12-regular color-text-secondary\">\n              Security\n            </h3>\n            <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices\n              posuere cubilia.\n            </p>\n          </div>\n        </Card>\n      </div>\n\n      <!-- Tile 4: lg:col-span-5 -->\n      <div class=\"flex lg:col-span-5\">\n        <Card className=\"shadow-8 w-full lg:rounded-br-2xl\">\n          <div class=\"w-full\">\n            <img\n              src={myImage.src}\n              width={myImage.width}\n              height={myImage.height}\n              alt=\"\"\n              class=\"h-[280px] w-full object-cover sm:h-[320px]\"\n            />\n          </div>\n          <div class=\"p-5 md:p-7\">\n            <h3 class=\"typography-ui-12-regular color-text-secondary\">\n              Performance\n            </h3>\n            <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n              Sed congue eros non finibus molestie. Vestibulum euismod augue vel\n              commodo vulputate. Maecenas at augue sed elit dictum vulputate.\n            </p>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "card"
  ]
}