{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-4",
  "description": "A mission, vision, and values section as three editorial columns, each with an icon, an eyebrow label, a heading, and a short paragraph.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/about/4/about-block.tsx",
      "content": "import { RiCompass3Line, RiEyeLine, RiFlag2Line } from \"@remixicon/react\"\n\nimport { Separator } from \"@/components/ui/separator\"\n\nconst columns = [\n  {\n    icon: RiFlag2Line,\n    eyebrow: \"Mission\",\n    heading: \"Give every team production-grade UI\",\n    body: \"We exist so that a two-person startup and a thousand-person enterprise can ship the same caliber of interface — without rebuilding the basics every time.\",\n  },\n  {\n    icon: RiEyeLine,\n    eyebrow: \"Vision\",\n    heading: \"A web where good design is the default\",\n    body: \"We picture a world where accessible, consistent, well-crafted products are the norm, not the exception reserved for teams with a dedicated design system.\",\n  },\n  {\n    icon: RiCompass3Line,\n    eyebrow: \"Values\",\n    heading: \"Craft, clarity, and trust\",\n    body: \"We optimize for the long game: code others can maintain, decisions we can explain, and a product our customers can depend on in production.\",\n  },\n]\n\nexport default function AboutBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-20 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"mx-auto max-w-xl text-center\">\n          <span className=\"inline-block border border-border px-3 py-1 text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            Who we are\n          </span>\n          <h2 className=\"mt-4 text-3xl font-bold tracking-tight sm:text-4xl\">\n            What drives the work\n          </h2>\n        </div>\n\n        <div className=\"mt-14 grid grid-cols-1 gap-px border border-border bg-border md:grid-cols-3\">\n          {columns.map(({ icon: Icon, eyebrow, heading, body }) => (\n            <div\n              key={eyebrow}\n              className=\"flex flex-col gap-4 bg-background p-8\"\n            >\n              <Icon className=\"size-7 text-foreground\" aria-hidden=\"true\" />\n              <div className=\"flex flex-col gap-2\">\n                <span className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n                  {eyebrow}\n                </span>\n                <h3 className=\"text-lg font-bold tracking-tight\">{heading}</h3>\n              </div>\n              <Separator />\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                {body}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "520px",
    "tier": "free"
  },
  "categories": [
    "about"
  ],
  "type": "registry:block"
}