{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-01",
  "title": "Uniform 3-column grid",
  "description": "Straightforward 3-column image grid with aspect-video tiles and a minimal section header.",
  "files": [
    {
      "path": "content/components/gallery/gallery-01.tsx",
      "content": "const images = [\n  {\n    id: 1,\n    alt: \"Architecture overview\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.72 0.10 250), oklch(0.55 0.14 260))\" },\n  },\n  {\n    id: 2,\n    alt: \"Dashboard interface\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.68 0.12 200), oklch(0.52 0.16 215))\" },\n  },\n  {\n    id: 3,\n    alt: \"Mobile layout\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.70 0.11 290), oklch(0.54 0.15 305))\" },\n  },\n  {\n    id: 4,\n    alt: \"Data visualisation\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.72 0.09 160), oklch(0.56 0.13 175))\" },\n  },\n  {\n    id: 5,\n    alt: \"Settings panel\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.68 0.11 30), oklch(0.52 0.15 45))\" },\n  },\n  {\n    id: 6,\n    alt: \"Onboarding flow\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.70 0.10 330), oklch(0.54 0.14 345))\" },\n  },\n  {\n    id: 7,\n    alt: \"Component library\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.72 0.10 80), oklch(0.56 0.13 95))\" },\n  },\n  {\n    id: 8,\n    alt: \"API explorer\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.68 0.12 140), oklch(0.52 0.16 155))\" },\n  },\n  {\n    id: 9,\n    alt: \"Analytics report\",\n    aspect: \"aspect-video\",\n    style: { background: \"linear-gradient(135deg, oklch(0.70 0.11 220), oklch(0.54 0.15 235))\" },\n  },\n]\n\nexport default function Gallery01() {\n  return (\n    <section className=\"bg-background py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-(--breakpoint-xl) px-6 sm:px-10\">\n        <div className=\"mb-12 max-w-xl\">\n          <span className=\"font-mono text-[11px] uppercase tracking-widest text-muted-foreground\">\n            Gallery\n          </span>\n          <h2 className=\"mt-3 text-balance text-3xl font-semibold tracking-tight sm:text-4xl\">\n            Built to ship at scale.\n          </h2>\n          <p className=\"mt-4 text-pretty text-muted-foreground\">\n            Every screen refined until there&apos;s nothing left to cut.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {images.map((img) => (\n            <div\n              key={img.id}\n              className={`${img.aspect} w-full overflow-hidden rounded-2xl border border-border`}\n              style={img.style}\n              role=\"img\"\n              aria-label={img.alt}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/blocks/gallery-01.tsx"
    }
  ],
  "categories": [
    "gallery"
  ],
  "type": "registry:block"
}