{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid-1",
  "title": "Bento Grid 1",
  "description": "Feature-rich layout with dynamic grid showcasing product features",
  "registryDependencies": [
    "card",
    "https://shadcndesign-free.vercel.app/r/styles.json",
    "https://shadcndesign-free.vercel.app/r/tagline.json"
  ],
  "files": [
    {
      "path": "components/pro-blocks/landing-page/bento-grids/bento-grid-1.tsx",
      "content": "\"use client\";\n\nimport { Card, CardHeader, CardContent } from \"@/components/ui/card\";\nimport Image from \"next/image\";\nimport { Tagline } from \"@/components/pro-blocks/landing-page/tagline\";\n\nexport function BentoGrid1() {\n  return (\n    <section className=\"bg-muted section-padding-y\">\n      <div className=\"container-padding-x mx-auto flex max-w-7xl flex-col gap-10 md:gap-12\">\n        <div className=\"section-title-gap-lg mx-auto flex max-w-xl flex-col items-center text-center\">\n          <Tagline>Bento Grid Section</Tagline>\n          <h2 className=\"heading-lg\">\n            Feature-rich layout that captures attention\n          </h2>\n          <p className=\"text-muted-foreground text-lg/8 text-pretty\">\n            Add a concise value statement that highlights your product's key\n            features and benefits in a visually dynamic grid.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3\">\n          <Card className=\"rounded-xl shadow-xs lg:row-span-2\">\n            <CardHeader>\n              <h3 className=\"heading-sm\">Feature title</h3>\n              <p className=\"text-muted-foreground\">\n                Shortly describe how this feature solves a specific user\n                problem.\n              </p>\n            </CardHeader>\n            <CardContent className=\"flex h-full flex-col\">\n              <Image\n                src=\"https://ui.shadcn.com/placeholder.svg\"\n                alt=\"Placeholder\"\n                width={1000}\n                height={1000}\n                className=\"h-full w-full object-cover\"\n              />\n            </CardContent>\n          </Card>\n          <Card className=\"rounded-xl shadow-xs\">\n            <CardHeader>\n              <h3 className=\"heading-sm\">Feature title</h3>\n              <p className=\"text-muted-foreground\">\n                Shortly describe how this feature solves a specific user\n                problem.\n              </p>\n            </CardHeader>\n            <CardContent className=\"flex h-full flex-col\">\n              <Image\n                src=\"https://ui.shadcn.com/placeholder.svg\"\n                alt=\"Placeholder\"\n                width={1000}\n                height={1000}\n                className=\"h-full w-full object-cover md:aspect-[4/3]\"\n              />\n            </CardContent>\n          </Card>\n          <Card className=\"rounded-xl shadow-xs lg:col-start-2\">\n            <CardHeader>\n              <h3 className=\"heading-sm\">Feature title</h3>\n              <p className=\"text-muted-foreground\">\n                Shortly describe how this feature solves a specific user\n                problem.\n              </p>\n            </CardHeader>\n            <CardContent className=\"flex h-full flex-col\">\n              <Image\n                src=\"https://ui.shadcn.com/placeholder.svg\"\n                alt=\"Placeholder\"\n                width={1000}\n                height={1000}\n                className=\"h-full w-full object-cover md:aspect-[4/3]\"\n              />\n            </CardContent>\n          </Card>\n          <Card className=\"rounded-xl shadow-xs lg:col-start-3 lg:row-span-2 lg:row-start-1\">\n            <CardHeader>\n              <h3 className=\"heading-sm\">Feature title</h3>\n              <p className=\"text-muted-foreground\">\n                Shortly describe how this feature solves a specific user\n                problem.\n              </p>\n            </CardHeader>\n            <CardContent className=\"flex h-full flex-col\">\n              <Image\n                src=\"https://ui.shadcn.com/placeholder.svg\"\n                alt=\"Placeholder\"\n                width={1000}\n                height={1000}\n                className=\"h-full w-full object-cover\"\n              />\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pro-blocks/landing-page/bento-grids/bento-grid-1.tsx"
    }
  ],
  "type": "registry:component"
}