{
  "name": "feature/split-layout",
  "type": "registry:component",
  "description": "Split layout with media and content alignment",
  "files": [
    {
      "path": "example/Feature/SectionFeature_SplitLayout.astro",
      "type": "registry:component",
      "content": "---\nimport image1 from '@/assets/placeholder.png';\nimport image2 from '@/assets/placeholder.png';\nimport image3 from '@/assets/placeholder.png';\n\nconst features = [\n  {\n    id: 'agent',\n    title: 'Push to deploy',\n    description:\n      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',\n    image: image1,\n    imagePosition: 'right', // image on the right\n  },\n  {\n    id: 'ssl',\n    title: 'SSL certificates',\n    description:\n      'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',\n    image: image2,\n    imagePosition: 'left', // image on the left\n  },\n  {\n    id: 'backup',\n    title: 'Database backups',\n    description:\n      'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',\n    image: image3,\n    imagePosition: 'right', // image on the right\n  },\n];\n---\n\n<section class=\"section\" data-scheme=\"bg\">\n  <div class=\"container\">\n    <div class=\"mb-10 text-left\">\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        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Layout Gallery\n      </div>\n      <h2 class=\"h2 mb-4\">\n        Split Layout <span class=\"sp-emphasis\">Features</span>\n      </h2>\n      <p class=\"text-fg-sub max-w-3xl text-lg md:text-xl\">\n        Present your features in an alternating layout with images and descriptions side by side.\n      </p>\n    </div>\n\n    <div class=\"space-y-16\">\n      {\n        features.map((feature) => (\n        <div class=\"lg:grid-cols-24 grid grid-cols-1 grid-rows-[auto_1fr]\">\n          <div class=\"lg:grid-cols-24 col-span-full row-span-full grid grid-cols-1 gap-y-8 max-lg:grid-rows-subgrid lg:gap-y-0\">\n            {/* Visual area */}\n            <div\n              class:list={[\n                \"col-span-full row-start-1 row-end-2 lg:row-start-1 lg:row-end-3 lg:flex lg:items-center\",\n                feature.imagePosition === \"right\"\n                  ? \"lg:col-end-25 lg:col-start-10 lg:pl-8\"\n                  : \"lg:col-end-15 lg:col-start-1 lg:pr-8\",\n              ]}\n            >\n              <div class=\"w-full\">\n                <img\n                  src={feature.image.src}\n                  width={feature.image.width}\n                  height={feature.image.height}\n                  alt={`${feature.title} screenshot`}\n                  class=\"rounded-card shadow-8 block max-h-[600px] w-full object-cover\"\n                />\n              </div>\n            </div>\n\n            {/* Text content */}\n            <div\n              class:list={[\n                \"col-span-full row-start-2 row-end-3 lg:row-start-1 lg:row-end-3 lg:flex lg:items-center\",\n                feature.imagePosition === \"right\"\n                  ? \"lg:col-start-1 lg:col-end-10 lg:pr-8\"\n                  : \"lg:col-start-15 lg:col-end-25 lg:pl-8\",\n              ]}\n            >\n              <div class=\"w-full max-w-prose lg:justify-self-start\">\n                <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                  {feature.title}\n                </h3>\n                <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n                  {feature.description}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n        ))\n      }\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example"
}