{
  "name": "feature/offset-cards",
  "type": "registry:component",
  "description": "Offset card layout showcasing features",
  "files": [
    {
      "path": "example/Feature/SectionFeature_OffsetCards.astro",
      "type": "registry:component",
      "content": "---\nimport Card from '@@/components/ui/Card.astro';\nimport image1 from '@/assets/placeholder.png';\nimport image2 from '@/assets/placeholder.png';\nimport image3 from '@/assets/placeholder.png';\nimport image4 from '@/assets/placeholder.png';\n---\n\n<section class=\"py-24 sm:py-32\" data-scheme=\"shift\">\n  <div class=\"container\">\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        <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 class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\">\n        Modern workflow, integrations, security, and performance—ready to ship\n      </p>\n    </div>\n\n    <!-- Two columns; right column shifted down. Ensures equal horizontal/vertical gaps. -->\n    <div class=\"mt-10 grid items-stretch gap-6 sm:mt-16 lg:grid-cols-2\">\n      <!-- Left column -->\n      <div class=\"flex flex-col gap-6\">\n        <div class=\"js-equal-card flex\">\n          <Card className=\"shadow-8 h-full w-full flex-1 lg:rounded-2xl\">\n            <div class=\"w-full\">\n              <img\n                src={image1.src}\n                width={image1.width}\n                height={image1.height}\n                alt=\"\"\n                class=\"w-full object-cover\"\n                style=\"aspect-ratio: 4/3;\"\n              />\n            </div>\n            <div class=\"p-4 md:p-6\">\n              <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                Direct editing\n              </h3>\n              <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n                Drag-and-drop, rearrange, and do more with elements directly in\n                the editor.\n              </p>\n            </div>\n          </Card>\n        </div>\n\n        <div class=\"js-equal-card flex\">\n          <Card className=\"shadow-8 h-full w-full flex-1 lg:rounded-2xl\">\n            <div class=\"w-full\">\n              <img\n                src={image2.src}\n                width={image2.width}\n                height={image2.height}\n                alt=\"\"\n                class=\"w-full object-cover\"\n                style=\"aspect-ratio: 4/3;\"\n              />\n            </div>\n            <div class=\"p-4 md:p-6\">\n              <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                Components\n              </h3>\n              <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n                Customize reusable components that you can swap-out across\n                websites.\n              </p>\n            </div>\n          </Card>\n        </div>\n      </div>\n\n      <!-- Right column (shifted down more) -->\n      <div class=\"flex flex-col gap-6 lg:mt-24\">\n        <div class=\"js-equal-card flex\">\n          <Card className=\"shadow-8 h-full w-full flex-1 lg:rounded-2xl\">\n            <div class=\"w-full\">\n              <img\n                src={image3.src}\n                width={image3.width}\n                height={image3.height}\n                alt=\"\"\n                class=\"w-full object-cover\"\n                style=\"aspect-ratio: 4/3;\"\n              />\n            </div>\n            <div class=\"p-4 md:p-6\">\n              <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                Brand compliance\n              </h3>\n              <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n                Make your fonts, colors, and styles all speak the same language.\n              </p>\n            </div>\n          </Card>\n        </div>\n\n        <div class=\"js-equal-card flex\">\n          <Card className=\"shadow-8 h-full w-full flex-1 lg:rounded-2xl\">\n            <div class=\"w-full\">\n              <img\n                src={image4.src}\n                width={image4.width}\n                height={image4.height}\n                alt=\"\"\n                class=\"w-full object-cover\"\n                style=\"aspect-ratio: 4/3;\"\n              />\n            </div>\n            <div class=\"p-4 md:p-6\">\n              <h3 class=\"typography-ui-12-regular color-text-secondary\">\n                Layers\n              </h3>\n              <p class=\"text-fg-sub mt-2 max-w-[42rem]\">\n                Select elements with precision and control.\n              </p>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<script>\n  const section =\n    document.currentScript && document.currentScript.previousElementSibling;\n  const syncHeights = () => {\n    const wrappers = document.querySelectorAll(\".js-equal-card\");\n    let max = 0;\n    wrappers.forEach((w) => {\n      const card = w.querySelector(\"[data-type]\");\n      if (card) {\n        (card as HTMLElement).style.height = \"auto\";\n        const h = (card as HTMLElement).offsetHeight;\n        if (h > max) max = h;\n      }\n    });\n    wrappers.forEach((w) => {\n      const card = w.querySelector(\"[data-type]\");\n      if (card) (card as HTMLElement).style.height = max + \"px\";\n    });\n  };\n  window.addEventListener(\"load\", syncHeights, { once: true });\n  window.addEventListener(\"resize\", () => {\n    window.requestAnimationFrame(syncHeights);\n  });\n</script>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "card"
  ]
}