{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "before-after-side-by-side",
  "title": "Before & After — Side by Side",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/before-after-side-by-side/BeforeAfterSideBySide.tsx",
      "content": "'use client'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst panels = [\n  {\n    label: 'Before',\n    caption: 'Four exports reconciled by hand',\n    rows: [\n      { text: 'revenue_q1_final_v3.xlsx', note: '1' },\n      { text: 'revenue_q1_FINAL_v3b.xlsx', note: '1' },\n      { text: 'refunds_manual_adj.csv', note: '2' },\n      { text: 'fx_rates_pasted.csv', note: '3' },\n    ],\n  },\n  {\n    label: 'After',\n    caption: 'One certified definition',\n    rows: [\n      { text: 'metrics/revenue_net.yml', note: '1' },\n      { text: '  joins: refunds, fx_rates', note: '2' },\n      { text: '  owner: finance-analytics', note: '3' },\n      { text: '  reconciled: 4 quarters', note: '' },\n    ],\n  },\n]\n\nconst annotations = [\n  { id: '1', text: 'Two files claiming to be final, differing by 40k in net revenue.' },\n  { id: '2', text: 'Refund adjustments applied by hand, with no record of who applied them.' },\n  { id: '3', text: 'FX rates pasted from a second system on a date nobody logged.' },\n]\n\nexport function BeforeAfterSideBySide() {\n  return (\n    <section data-slot=\"before-after-side-by-side\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Before and after</Badge>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">The same close, two quarters apart</h2>\n\n        {/* items-stretch so both panels share a height; a slider would hide one\n            side at a time and make the annotations unreadable. */}\n        <div className=\"mt-10 grid items-stretch gap-4 md:grid-cols-2\">\n          {panels.map((panel) => (\n            <Card key={panel.label}>\n              <CardContent className=\"flex h-full flex-col p-0\">\n                <div className=\"border-border flex items-center justify-between gap-3 border-b px-4 py-2.5\">\n                  <span className=\"text-sm font-semibold\">{panel.label}</span>\n                  <span className=\"text-muted-foreground text-xs\">{panel.caption}</span>\n                </div>\n                <ul className=\"flex-1 space-y-2 p-4\">\n                  {panel.rows.map((row) => (\n                    <li key={row.text} className=\"flex items-start gap-2\">\n                      {row.note ? (\n                        <span className=\"border-border text-muted-foreground mt-px flex size-4 shrink-0 items-center justify-center rounded-full border font-mono text-xs\">\n                          {row.note}\n                        </span>\n                      ) : (\n                        <span className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n                      )}\n                      <span className=\"min-w-0 font-mono text-xs break-all\">{row.text}</span>\n                    </li>\n                  ))}\n                </ul>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <ol className=\"space-y-3\">\n          {annotations.map((annotation) => (\n            <li key={annotation.id} className=\"flex items-start gap-3 text-sm\">\n              <span className=\"border-border text-muted-foreground mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border font-mono text-xs\">\n                {annotation.id}\n              </span>\n              <span className=\"text-muted-foreground leading-relaxed\">{annotation.text}</span>\n            </li>\n          ))}\n        </ol>\n\n        <Button className=\"mt-8\">Read the full case study</Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/BeforeAfterSideBySide.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Two labelled panels set side by side at equal height with a shared annotation row beneath, for comparisons a slider would make harder rather than clearer.",
  "categories": [
    "marketing"
  ]
}