{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "comparison-vs-alternatives",
  "title": "Comparison — Versus Alternatives",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/comparison-vs-alternatives/ComparisonVsAlternatives.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight } from 'lucide-vue-next'\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// Each row names a mechanism on both sides. Scoring a competitor invites the\n// reader to discount the whole table; describing how each works does not.\nconst rows = [\n  {\n    topic: 'Where the definition lives',\n    them: 'Inside each dashboard, duplicated per team',\n    us: 'One file in your repository, with an owner',\n  },\n  {\n    topic: 'How a change is reviewed',\n    them: 'Saved in place; the previous version is gone',\n    us: 'Pull request with a diff, reviewers, and a revert',\n  },\n  {\n    topic: 'Where access is decided',\n    them: 'Per dashboard, re-applied by hand on each new one',\n    us: 'Per query, resolved from your identity provider',\n  },\n  {\n    topic: 'What a shared link exposes',\n    them: 'Whatever the sender could see',\n    us: 'Whatever the recipient is scoped to see',\n  },\n  {\n    topic: 'How cost is controlled',\n    them: 'Reconciled from the warehouse invoice, monthly',\n    us: 'Budget enforced by the planner, before execution',\n  },\n  {\n    topic: 'What happens if you leave',\n    them: 'Definitions stay in the vendor’s format',\n    us: 'Definitions and history are already in your repo',\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"comparison-vs-alternatives\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">How it differs</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Against the way it is usually done</h2>\n        <p class=\"text-muted-foreground mt-3 text-lg\">\n          Both columns describe a mechanism. Neither is a score, because you can check a mechanism.\n        </p>\n      </div>\n\n      <Card class=\"mt-10\">\n        <CardContent class=\"p-0\">\n          <div\n            class=\"text-muted-foreground grid grid-cols-1 gap-4 px-6 py-3 text-xs font-medium sm:grid-cols-[1fr_1fr_1fr]\"\n          >\n            <span>Topic</span>\n            <span class=\"hidden sm:block\">Typical BI stack</span>\n            <span class=\"hidden sm:block\">This approach</span>\n          </div>\n          <Separator />\n\n          <div v-for=\"(row, index) in rows\" :key=\"row.topic\">\n            <div class=\"grid gap-3 px-6 py-4 sm:grid-cols-[1fr_1fr_1fr] sm:gap-4\">\n              <p class=\"text-sm font-medium\">{{ row.topic }}</p>\n              <p class=\"text-muted-foreground text-sm leading-relaxed\">\n                <span class=\"text-muted-foreground/70 mr-1.5 text-xs sm:hidden\">Typical:</span>{{ row.them }}\n              </p>\n              <p class=\"text-sm leading-relaxed\">\n                <span class=\"text-muted-foreground/70 mr-1.5 text-xs sm:hidden\">Here:</span>{{ row.us }}\n              </p>\n            </div>\n            <Separator v-if=\"index < rows.length - 1\" />\n          </div>\n        </CardContent>\n      </Card>\n\n      <div class=\"mt-6 flex flex-wrap items-center gap-4\">\n        <Button>\n          See it on your own data\n          <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n        </Button>\n        <p class=\"text-muted-foreground text-sm\">No comparison page survives contact with your warehouse.</p>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ComparisonVsAlternatives.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "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-column comparison setting this product against the status quo row by row, each line naming the mechanism rather than scoring the competitor.",
  "categories": [
    "marketing"
  ]
}