{
  "name": "FounderGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/FounderGrid.tsx",
  "chapterTag": "09 Content Blocks",
  "chapter": "10-content-blocks.html",
  "sectionId": "founder-cards",
  "elName": "Two-up founder profiles",
  "demoUrl": "https://brand.magicblocks.ai/components/10-content-blocks#founder-cards",
  "hasLiveDemo": false,
  "description": "Founder grid — richer 2-up profile-card variant for founders specifically.\nWraps `.founder-grid` from chapter 09. Square headshot, display-font name,\nmono-accent role, body-copy bio, optional social pills.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "FounderGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "FounderCard",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "FounderGridProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "FounderCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "FounderProfile",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "FounderLink",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { FounderGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "items",
      "optional": true,
      "type": "FounderProfile[]",
      "doc": "Founder profiles. The grid is 2-up on desktop, 1-up on phone."
    }
  ],
  "classesUsed": [
    "founder-bio",
    "founder-card",
    "founder-grid",
    "founder-links",
    "founder-name",
    "founder-photo",
    "founder-role"
  ],
  "examples": {
    "react": "<FounderGrid\n  items={[\n    {\n      name: \"Jay Stockwell\",\n      role: \"Co-founder · CEO\",\n      bio: \"Sales and product leader. Built multiple AI-sales tools; now building the one that actually feels human.\",\n      photoSrc: \"/founders/jay-stockwell-400.png\",\n      photoSrcSet: \"/founders/jay-stockwell-800.png 2x\",\n      photoAlt: \"Jay Stockwell\",\n      links: [\n        { label: \"LinkedIn\", href: \"https://linkedin.com/…\", ariaLabel: \"Jay Stockwell on LinkedIn\" },\n        { label: \"X\",        href: \"https://x.com/…\",        ariaLabel: \"Jay Stockwell on Twitter\" },\n      ],\n    },\n    {\n      name: \"Sean Clark\",\n      role: \"Co-founder · CTO\",\n      bio: \"Engineering leader with a decade in conversational AI.\",\n      photoSrc: \"/founders/sean-clark-400.png\",\n      photoSrcSet: \"/founders/sean-clark-800.png 2x\",\n      photoAlt: \"Sean Clark\",\n    },\n  ]}\n/>",
    "html": "<div class=\"founder-grid\">\n  <article class=\"founder-card\">\n    <div class=\"founder-photo\">\n      <img src=\"../06-brand-assets/founders/jay-stockwell-400.png\" srcset=\"../06-brand-assets/founders/jay-stockwell-800.png 2x\" alt=\"Jay Stockwell\">\n    </div>\n    <h3 class=\"founder-name\">Jay Stockwell</h3>\n    <div class=\"founder-role\">Co-founder · CEO</div>\n    <p class=\"founder-bio\">Sales and product leader. Built multiple AI-sales tools; now building the one that actually feels human.</p>\n    <div class=\"founder-links\">\n      <a href=\"#\" aria-label=\"Jay Stockwell on LinkedIn\">LinkedIn</a>\n      <a href=\"#\" aria-label=\"Jay Stockwell on Twitter\">X</a>\n    </div>\n  </article>\n  <article class=\"founder-card\">\n    <div class=\"founder-photo\">\n      <img src=\"../06-brand-assets/founders/sean-clark-400.png\" srcset=\"../06-brand-assets/founders/sean-clark-800.png 2x\" alt=\"Sean Clark\">\n    </div>\n    <h3 class=\"founder-name\">Sean Clark</h3>\n    <div class=\"founder-role\">Co-founder · CTO</div>\n    <p class=\"founder-bio\">Engineering leader with a decade in conversational AI. Obsessed with memory, context, and low-latency orchestration.</p>\n    <div class=\"founder-links\">\n      <a href=\"#\" aria-label=\"Sean Clark on LinkedIn\">LinkedIn</a>\n      <a href=\"#\" aria-label=\"Sean Clark on GitHub\">GitHub</a>\n    </div>\n  </article>\n</div>",
    "css": ".founder-bio {\n  font: 400 14px/1.55 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n}\n\n.founder-card {\n  display: flex; flex-direction: column; gap: var(--s-3);\n  padding: var(--s-5);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  text-align: center;\n}\n\n.founder-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--s-6);\n  width: 100%;\n  max-width: min(720px, 100%);\n  margin: 0 auto;\n}\n\n.founder-links {\n  display: inline-flex; gap: var(--s-3); justify-content: center;\n  margin-top: var(--s-2);\n}\n\n.founder-name {\n  font: 600 20px/1.2 var(--f-display);\n  letter-spacing: -0.01em;\n  color: var(--fg);\n  margin: 0;\n}\n\n.founder-photo {\n  width: 100%; aspect-ratio: 1;\n  border-radius: var(--r-md);\n  overflow: hidden;\n  background: var(--bg-sunk);\n}\n\n.founder-role {\n  font: 500 11.5px/1 var(--f-mono);\n  text-transform: uppercase; letter-spacing: 0.08em;\n  color: var(--accent-text);\n}"
  }
}