{
  "name": "feature/tiles",
  "type": "registry:component",
  "description": "Tile-based feature gallery with cards",
  "files": [
    {
      "path": "example/Feature/SectionFeature_Tiles.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\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=\"relative\">\n  <BackgroundEffect\n    gradientType=\"var(--gradient-top-fade-linear)\"\n    patternType=\"none\"\n    noiseType=\"none\"\n  />\n\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      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Features\n      </div>\n      <h2 class=\"h2 mb-4\">\n        Pablo is your new best friend\n      </h2>\n      <p\n        class=\"text-fg-sub mx-auto max-w-3xl text-lg md:text-xl\"\n\n      >\n        Pablo is a platform that allows you to create your site in minutes. No\n        coding required – launch your professional site in minutes.\n      </p>\n    </div>\n\n    <!-- Bento Grid Layout -->\n    <div class=\"flex flex-col gap-5\">\n      <!-- Top: Integration Banner -->\n      <Card size=\"md\" className=\"min-h-[200px] overflow-hidden\">\n        <div\n          class=\"flex flex-col gap-6 p-5 md:flex-row md:items-center md:justify-between md:gap-8 md:p-7\"\n        >\n          <div class=\"flex-shrink-0\">\n            <h3>\n              Seamless Integration\n            </h3>\n            <p\n              class=\"text-fg-sub mt-2 max-w-[400px]\"\n\n            >\n              Works with all your favorite tools and platforms out of the box.\n            </p>\n          </div>\n          <div class=\"w-full p-4 pb-0 md:max-w-[50%] md:flex-shrink\">\n            <img\n              src={image1.src}\n              alt=\"Pablo Logo\"\n              class=\"w-full\"\n              width={image1.width}\n              height={image1.height}\n            />\n          </div>\n        </div>\n      </Card>\n\n      <!-- Bottom: 3 Feature Cards -->\n      <div class=\"grid gap-5 md:grid-cols-3\">\n        <Card size=\"md\" className=\"flex h-full flex-col\">\n          <div class=\"w-full p-4 pb-0\">\n            <img\n              src={image2.src}\n              alt=\"Pablo Logo\"\n              class=\"w-full\"\n              width={image2.width}\n              height={image2.height}\n            />\n          </div>\n          <div class=\"flex flex-col gap-2 p-5\">\n            <h3>\n              Real-time Synchronization\n            </h3>\n            <p class=\"text-fg-sub\">\n              Connect your systems to access real-time data ranging from user\n              details to active subscriptions and beyond.\n            </p>\n          </div>\n        </Card>\n\n        <Card size=\"md\" className=\"flex h-full flex-col\">\n          <div class=\"w-full p-4 pb-0\">\n            <img\n              src={image3.src}\n              alt=\"Pablo Logo\"\n              class=\"w-full\"\n              width={image3.width}\n              height={image3.height}\n            />\n          </div>\n          <div class=\"flex flex-col gap-2 p-5\">\n            <h3>Smart Actions</h3>\n            <p class=\"text-fg-sub\">\n              Configure actions that your system can perform automatically, like\n              updating user preferences or processing requests.\n            </p>\n          </div>\n        </Card>\n\n        <Card size=\"md\" className=\"flex h-full flex-col\">\n          <div class=\"w-full p-4 pb-0\">\n            <img\n              src={image4.src}\n              alt=\"Pablo Logo\"\n              class=\"w-full\"\n              width={image4.width}\n              height={image4.height}\n            />\n          </div>\n          <div class=\"flex flex-col gap-2 p-5\">\n            <h3>\n              Advanced Analytics\n            </h3>\n            <p class=\"text-fg-sub\">\n              Gain insights with detailed analytics and reporting to optimize\n              performance.\n            </p>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "card"
  ]
}