{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-image-section-tailwind",
  "type": "registry:item",
  "title": "Card Image Section (Tailwind)",
  "description": "A section with 4 image cards in a masonry layout.",
  "registryDependencies": [
    "https://roiui.com/r/button-tailwind.json",
    "https://roiui.com/r/card-tailwind.json"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/blocks/card-image-section/page.tsx",
      "content": "\"use client\";\nimport { CardImageSection } from \"./components/card-image-section\";\nimport data from \"./data.json\";\n\nexport default function Page() {\n  return <CardImageSection data={data} />;\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-image-section/page.tsx"
    },
    {
      "path": "registry/brook/tailwind/blocks/card-image-section/components/card-image-section.tsx",
      "content": "import { ArrowPointer, Button } from \"@/registry/brook/tailwind/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardImage,\n  CardTitle,\n} from \"@/registry/brook/tailwind/ui/card\";\n\ntype CardData = {\n  id: number;\n  imageSrc: string;\n  alt: string;\n  title: string;\n  description: string;\n  href?: string;\n};\n\ntype CardImageSectionProps = {\n  data: {\n    caption: string;\n    heading: string;\n    description: string;\n    cards: CardData[];\n  };\n};\n\nexport function CardImageSection({ data }: CardImageSectionProps) {\n  return (\n    <section className=\"mx-auto w-full max-w-[900px] px-6 py-12 max-sm:px-4 max-sm:py-8\">\n      <header className=\"mb-12 text-left max-sm:mb-8\">\n        <span className=\"mb-3 block font-medium text-[length:var(--font-size-sm)] text-[var(--accent)] uppercase tracking-[0.05em]\">\n          {data.caption}\n        </span>\n        <h2 className=\"m-0 mb-4 font-semibold text-[clamp(1.75rem,4vw,2.5rem)] text-[var(--foreground)] leading-[1.2] tracking-[-0.02em]\">\n          {data.heading}\n        </h2>\n        <p className=\"m-0 max-w-[600px] text-[var(--muted-foreground)] text-base leading-[1.6]\">{data.description}</p>\n      </header>\n\n      <div className=\"columns-1 sm:columns-2 sm:gap-x-6\">\n        {data.cards.map((card, index) => (\n          <Card\n            className={`mb-6 max-w-full break-inside-avoid rounded-[16px] [transform:translateZ(0)] sm:rounded-[20px] ${index === 0 ? \"sm:mt-[120px]\" : \"\"}`}\n            key={card.id}\n            variant=\"lift\"\n          >\n            <CardImage alt={card.alt} className=\"w-auto rounded-[8px] sm:rounded-[12px]\" src={card.imageSrc} />\n\n            <CardContent className=\"gap-2\">\n              <CardTitle className=\"m-0 max-sm:text-[1.125rem] max-sm:leading-[1.3]\">{card.title}</CardTitle>\n              <CardDescription className=\"mt-0\">{card.description}</CardDescription>\n            </CardContent>\n\n            <CardFooter>\n              <Button className=\"pl-0\" render={<a href={card.href ?? \"#\"} />} size=\"sm\" variant=\"link\">\n                Learn More\n                <ArrowPointer />\n              </Button>\n            </CardFooter>\n          </Card>\n        ))}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-image-section/card-image-section.tsx"
    },
    {
      "path": "registry/brook/blocks-shared-files/card-image-section/data.json",
      "content": "{\n  \"caption\": \"What We Offer\",\n  \"heading\": \"Four Pillars of Excellence\",\n  \"description\": \"Discover the foundational elements that drive our approach to creating exceptional digital experiences.\",\n  \"cards\": [\n    {\n      \"id\": 1,\n      \"imageSrc\": \"/p-01.svg\",\n      \"alt\": \"Feature 1 illustration\",\n      \"title\": \"Feature 1\",\n      \"description\": \"Add a description here to explain what this feature offers and why it matters to your users.\"\n    },\n    {\n      \"id\": 2,\n      \"imageSrc\": \"/p-02.svg\",\n      \"alt\": \"Feature 2 illustration\",\n      \"title\": \"Feature 2\",\n      \"description\": \"Add a description here to explain what this feature offers and why it matters to your users.\"\n    },\n    {\n      \"id\": 3,\n      \"imageSrc\": \"/p-03.svg\",\n      \"alt\": \"Feature 3 illustration\",\n      \"title\": \"Feature 3\",\n      \"description\": \"Add a description here to explain what this feature offers and why it matters to your users.\"\n    },\n    {\n      \"id\": 4,\n      \"imageSrc\": \"/p-04.svg\",\n      \"alt\": \"Feature 4 illustration\",\n      \"title\": \"Feature 4\",\n      \"description\": \"Add a description here to explain what this feature offers and why it matters to your users.\"\n    }\n  ]\n}\n",
      "type": "registry:file",
      "target": "~/components/blocks/card-image-section/data.json"
    }
  ]
}