{
  "name": "ContrastPair",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ContrastPair.tsx",
  "chapterTag": "14 Platform Narrative",
  "chapter": "14-platform-narrative.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ContrastPair",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ContrastPairProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ContrastPanel",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ContrastPair } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "eyebrow",
      "optional": true,
      "type": "ReactNode",
      "doc": "Small mono kicker above the title — e.g. \"01 · ARCHITECTURE\"."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Pair title. May contain `<em>…</em>` for the Fraunces accent."
    },
    {
      "name": "body",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body paragraphs above the pair (typically 2–3 short paragraphs)."
    },
    {
      "name": "left",
      "optional": true,
      "type": "ContrastPanel",
      "doc": "Left panel — the \"category default\" / muted side."
    },
    {
      "name": "right",
      "optional": true,
      "type": "ContrastPanel",
      "doc": "Right panel — the \"MagicBlocks way\" / accent-tinted side."
    },
    {
      "name": "cta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional CTA link rendered under the pair (`.cp-cta`)."
    },
    {
      "name": "reversed",
      "optional": true,
      "type": "boolean",
      "doc": "When `true`, swaps which side gets the accent treatment."
    }
  ],
  "classesUsed": [
    "contrast-pair",
    "cp-body",
    "cp-cta",
    "cp-eyebrow",
    "cp-h2",
    "cp-head",
    "cp-pair",
    "cp-panel",
    "cp-panel-bullets",
    "cp-panel-eyebrow",
    "cp-panel-stat",
    "cp-panel-title",
    "cp-panel-visual",
    "title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".contrast-pair {\n  display: grid;\n  gap: var(--s-6);\n  max-width: 920px;\n}\n\n.cp-body {\n  display: flex; flex-direction: column; gap: var(--s-4);\n}\n\n.cp-cta {\n  display: inline-flex; align-items: center; gap: 6px;\n  align-self: flex-start;\n  font: 500 14px/1 var(--f-body);\n  color: var(--accent-text);\n  text-decoration: none;\n  border-bottom: 1px dashed currentColor;\n  padding-bottom: 2px;\n}\n\n.cp-eyebrow {\n  font: 500 11px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  margin: 0;\n}\n\n.cp-h2 {\n  font: 600 32px/1.15 var(--f-display);\n  letter-spacing: -0.02em;\n  color: var(--fg);\n  margin: 0;\n}\n\n.cp-head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 70ch; }\n\n.cp-pair {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--s-5);\n}\n\n.cp-panel {\n  border-radius: var(--r-md);\n  padding: var(--s-5);\n  display: flex; flex-direction: column; gap: var(--s-3);\n  min-height: 200px;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);\n}\n\n.cp-panel-bullets {\n  list-style: none; margin: 0; padding: 0;\n  display: flex; flex-direction: column; gap: 6px;\n}\n\n.cp-panel-eyebrow {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  margin: 0;\n}\n\n.cp-panel-stat {\n  font: 500 14px/1.2 var(--f-mono);\n  font-variant-numeric: tabular-nums;\n  margin: 0;\n  margin-top: auto;\n}\n\n.cp-panel-title {\n  font: 600 19px/1.3 var(--f-display);\n  margin: 0;\n}\n\n.cp-panel-visual {\n  width: 100%;\n  height: 80px;\n  display: flex; align-items: center; justify-content: center;\n  margin: var(--s-2) 0;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}