{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "comparison-vs-alternatives",
  "title": "Comparison — Versus Alternatives",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/comparison-vs-alternatives/comparison-vs-alternatives.component.ts",
      "content": "// Two-column comparison setting this product against the status quo row by row,\n// each line naming the mechanism rather than scoring the competitor.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface VsAlternativesRow {\n  topic: string\n  them: string\n  us: string\n}\n\nconst defaultRows: VsAlternativesRow[] = [\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-comparison-vs-alternatives, [ui-comparison-vs-alternatives]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"comparison-vs-alternatives\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">How it differs</span>\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        <div ui-card class=\"mt-10\">\n          <div ui-card-content 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            <ui-separator />\n\n            @for (row of rows; track row.topic; let last = $last) {\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>\n                  {{ 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>\n                  {{ row.us }}\n                </p>\n              </div>\n              @if (!last) {\n                <ui-separator />\n              }\n            }\n          </div>\n        </div>\n\n        <div class=\"mt-6 flex flex-wrap items-center gap-4\">\n          <button ui-button>\n            See it on your own data\n            <lucide-icon [img]=\"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  `,\n})\nexport class UiComparisonVsAlternativesComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  @Input() rows: VsAlternativesRow[] = defaultRows\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/comparison-vs-alternatives/comparison-vs-alternatives.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/comparison-vs-alternatives/index.ts",
      "content": "export { UiComparisonVsAlternativesComponent, type VsAlternativesRow } from './comparison-vs-alternatives.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/comparison-vs-alternatives/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/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"
  ]
}