{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-02",
  "title": "2-column grid with captions",
  "description": "Two-column gallery where every tile carries a title and subtitle caption below the image.",
  "files": [
    {
      "path": "content/components/gallery/gallery-02.tsx",
      "content": "const images = [\n  {\n    id: 1,\n    caption: \"Dashboard overview\",\n    sub: \"Primary workspace with real-time metrics\",\n    style: { background: \"linear-gradient(160deg, oklch(0.74 0.10 250), oklch(0.58 0.14 265))\" },\n  },\n  {\n    id: 2,\n    caption: \"Component explorer\",\n    sub: \"Browse and preview every UI primitive\",\n    style: { background: \"linear-gradient(160deg, oklch(0.70 0.11 195), oklch(0.54 0.15 210))\" },\n  },\n  {\n    id: 3,\n    caption: \"Deployment pipeline\",\n    sub: \"Track builds from push to production\",\n    style: { background: \"linear-gradient(160deg, oklch(0.72 0.10 285), oklch(0.56 0.14 300))\" },\n  },\n  {\n    id: 4,\n    caption: \"Analytics board\",\n    sub: \"Session, retention, and conversion at a glance\",\n    style: { background: \"linear-gradient(160deg, oklch(0.70 0.09 155), oklch(0.54 0.12 170))\" },\n  },\n  {\n    id: 5,\n    caption: \"User settings\",\n    sub: \"Account, billing, and team management\",\n    style: { background: \"linear-gradient(160deg, oklch(0.72 0.11 35), oklch(0.56 0.15 50))\" },\n  },\n  {\n    id: 6,\n    caption: \"Notification centre\",\n    sub: \"Grouped alerts with one-click resolve\",\n    style: { background: \"linear-gradient(160deg, oklch(0.70 0.10 325), oklch(0.54 0.14 340))\" },\n  },\n]\n\nexport default function Gallery02() {\n  return (\n    <section className=\"bg-muted/30 py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-(--breakpoint-xl) px-6 sm:px-10\">\n        <div className=\"mb-12 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between\">\n          <div className=\"max-w-lg\">\n            <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n              Showcase\n            </span>\n            <h2 className=\"mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n              Every screen, considered.\n            </h2>\n          </div>\n          <p className=\"text-sm text-muted-foreground sm:text-right\">\n            Six interfaces. Zero clutter.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n          {images.map((img) => (\n            <figure key={img.id} className=\"group flex flex-col gap-3\">\n              <div\n                className=\"aspect-video w-full overflow-hidden rounded-2xl border border-border transition-transform duration-300 group-hover:scale-[1.01]\"\n                style={img.style}\n                role=\"img\"\n                aria-label={img.caption}\n              />\n              <figcaption className=\"px-1\">\n                <p className=\"text-sm font-medium text-foreground\">{img.caption}</p>\n                <p className=\"mt-0.5 text-xs text-muted-foreground\">{img.sub}</p>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/gallery-02.tsx"
    }
  ],
  "categories": [
    "gallery"
  ],
  "type": "registry:block"
}