{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "before-after-side-by-side",
  "title": "Before & After — Side by Side",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/before-after-side-by-side/BeforeAfterSideBySide.vue",
      "content": "<script setup lang=\"ts\">\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\n// Annotations are numbered and referenced from both panels, which is what makes\n// a side-by-side legible where a drag slider hides half the evidence.\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</script>\n\n<template>\n  <section data-slot=\"before-after-side-by-side\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Before and after</Badge>\n      <h2 class=\"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 class=\"mt-10 grid items-stretch gap-4 md:grid-cols-2\">\n        <Card v-for=\"panel in panels\" :key=\"panel.label\">\n          <CardContent class=\"flex h-full flex-col p-0\">\n            <div class=\"border-border flex items-center justify-between gap-3 border-b px-4 py-2.5\">\n              <span class=\"text-sm font-semibold\">{{ panel.label }}</span>\n              <span class=\"text-muted-foreground text-xs\">{{ panel.caption }}</span>\n            </div>\n            <ul class=\"flex-1 space-y-2 p-4\">\n              <li v-for=\"row in panel.rows\" :key=\"row.text\" class=\"flex items-start gap-2\">\n                <span\n                  v-if=\"row.note\"\n                  class=\"border-border text-muted-foreground mt-px flex size-4 shrink-0 items-center justify-center rounded-full border font-mono text-xs\"\n                >\n                  {{ row.note }}\n                </span>\n                <span v-else class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n                <span class=\"min-w-0 font-mono text-xs break-all\">{{ row.text }}</span>\n              </li>\n            </ul>\n          </CardContent>\n        </Card>\n      </div>\n\n      <Separator class=\"my-8\" />\n\n      <ol class=\"space-y-3\">\n        <li v-for=\"annotation in annotations\" :key=\"annotation.id\" class=\"flex items-start gap-3 text-sm\">\n          <span\n            class=\"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          >\n            {{ annotation.id }}\n          </span>\n          <span class=\"text-muted-foreground leading-relaxed\">{{ annotation.text }}</span>\n        </li>\n      </ol>\n\n      <Button class=\"mt-8\">Read the full case study</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BeforeAfterSideBySide.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}