{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-3",
  "description": "A values and principles grid with a left-aligned heading and a bordered grid of icon, title, and description cards. A static company-values section.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/about/3/about-block.tsx",
      "content": "import {\n  RiCompass3Line,\n  RiHeart3Line,\n  RiLightbulbLine,\n  RiShieldCheckLine,\n  RiSparkling2Line,\n  RiTeamLine,\n} from \"@remixicon/react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst values = [\n  {\n    icon: RiCompass3Line,\n    title: \"Start with the problem\",\n    description:\n      \"We earn the right to build by understanding the job first. Every feature answers a real need, not a hunch.\",\n  },\n  {\n    icon: RiShieldCheckLine,\n    title: \"Default to trust\",\n    description:\n      \"Security, privacy, and reliability are not features you toggle — they are the floor we build everything on.\",\n  },\n  {\n    icon: RiLightbulbLine,\n    title: \"Simple beats clever\",\n    description:\n      \"The best solution is the one a teammate can understand in a minute and change without fear.\",\n  },\n  {\n    icon: RiTeamLine,\n    title: \"Own the outcome\",\n    description:\n      \"We hand off results, not tasks. If it ships with our name on it, we stand behind how it works.\",\n  },\n  {\n    icon: RiHeart3Line,\n    title: \"Care in the details\",\n    description:\n      \"Craft is cumulative. Small, considered choices are what make the whole product feel effortless.\",\n  },\n  {\n    icon: RiSparkling2Line,\n    title: \"Stay a beginner\",\n    description:\n      \"We stay curious, ask the obvious questions, and treat every launch as the start of the next iteration.\",\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=\"max-w-xl\">\n          <span className=\"inline-block border border-border px-3 py-1 text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            What we believe\n          </span>\n          <h2 className=\"mt-4 text-3xl font-bold tracking-tight sm:text-4xl\">\n            The principles behind every decision\n          </h2>\n          <p className=\"mt-4 text-base text-muted-foreground\">\n            A short list we actually use — in reviews, in hiring, and in the\n            hard calls where trade-offs matter most.\n          </p>\n        </div>\n\n        <div className=\"mt-12 grid grid-cols-1 gap-px border border-border bg-border sm:grid-cols-2 lg:grid-cols-3\">\n          {values.map(({ icon: Icon, title, description }) => (\n            <Card\n              key={title}\n              className=\"gap-0 border-0 bg-card p-6 transition-colors duration-200 hover:bg-muted\"\n            >\n              <CardContent className=\"flex flex-col gap-3 p-0\">\n                <Icon className=\"size-6 text-foreground\" aria-hidden=\"true\" />\n                <h3 className=\"text-base font-semibold tracking-tight\">\n                  {title}\n                </h3>\n                <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                  {description}\n                </p>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "620px",
    "tier": "free"
  },
  "categories": [
    "about"
  ],
  "type": "registry:block"
}