{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-2",
  "title": "Us Versus Them Cards",
  "description": "Side-by-side cards contrasting checked product advantages against competitor pain points listed as struck-through cross rows.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/comparison/2/comparison-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst acmePoints = [\n  \"Onboarding completed in under 10 minutes\",\n  \"Real-time sync across all devices and team members\",\n  \"Granular role-based access control included\",\n  \"99.99 % uptime SLA with status page\",\n  \"Dedicated Slack channel for Pro customers\",\n  \"SOC 2 Type II certified infrastructure\",\n  \"One-click data export in any format\",\n  \"No per-seat fees, unlimited collaborators\",\n]\n\nconst othersPoints = [\n  \"Complex setup requires engineering resources\",\n  \"Sync delays of up to 15 minutes on free tiers\",\n  \"Permissions locked behind enterprise plan\",\n  \"SLA only available on custom contracts\",\n  \"Email-only support with 48 h response time\",\n  \"Compliance docs behind sales call\",\n  \"Data export limited to CSV on lower plans\",\n  \"Per-seat pricing adds up fast at scale\",\n]\n\nfunction CheckRow({ text }: { text: string }) {\n  return (\n    <li className=\"flex items-start gap-3\">\n      <span className=\"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-md bg-primary\">\n        <IconPlaceholder\n          lucide=\"Check\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"Check\"\n          remixicon=\"RiCheckLine\"\n          className=\"size-3 text-primary-foreground\"\n          aria-hidden\n        />\n      </span>\n      <span className=\"text-sm text-foreground\">{text}</span>\n    </li>\n  )\n}\n\nfunction CrossRow({ text }: { text: string }) {\n  return (\n    <li className=\"flex items-start gap-3\">\n      <span className=\"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-md bg-muted\">\n        <IconPlaceholder\n          lucide=\"X\"\n          tabler=\"IconX\"\n          hugeicons=\"Cancel01Icon\"\n          phosphor=\"X\"\n          remixicon=\"RiCloseLine\"\n          className=\"size-3 text-muted-foreground\"\n          aria-hidden\n        />\n      </span>\n      <span className=\"text-sm text-muted-foreground\">{text}</span>\n    </li>\n  )\n}\n\nexport default function ComparisonBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <div className=\"mx-auto w-full max-w-4xl\">\n        <div className=\"mb-10 text-center\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            <IconPlaceholder\n              lucide=\"ShieldCheck\"\n              tabler=\"IconShieldCheck\"\n              hugeicons=\"Shield01Icon\"\n              phosphor=\"ShieldCheck\"\n              remixicon=\"RiShieldCheckLine\"\n              data-icon=\"inline-start\"\n            />\n            Why Acme\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight sm:text-4xl\">\n            Built differently, on purpose\n          </h2>\n          <p className=\"mt-3 text-sm text-muted-foreground\">\n            We obsessed over the details others skip. Here is what that means\n            for your team every single day.\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 sm:grid-cols-2\">\n          <Card className=\"border-primary/30 ring-primary/20\">\n            <CardHeader>\n              <div className=\"flex items-center gap-2\">\n                <CardTitle className=\"text-base font-semibold\">Acme</CardTitle>\n                <Badge variant=\"default\">Recommended</Badge>\n              </div>\n              <CardDescription>\n                Everything your team needs, without the enterprise runaround.\n              </CardDescription>\n            </CardHeader>\n\n            <Separator />\n\n            <CardContent className=\"pt-4\">\n              <ul className=\"flex flex-col gap-3\">\n                {acmePoints.map((point) => (\n                  <CheckRow key={point} text={point} />\n                ))}\n              </ul>\n            </CardContent>\n\n            <CardFooter className=\"border-t\">\n              <Button\n                nativeButton={false}\n                className=\"w-full\"\n                render={<a href=\"#\" />}\n              >\n                Start For Free\n                <IconPlaceholder\n                  lucide=\"ArrowRight\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRightIcon\"\n                  phosphor=\"ArrowRight\"\n                  remixicon=\"RiArrowRightLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </CardFooter>\n          </Card>\n\n          <Card className=\"bg-muted/30\">\n            <CardHeader>\n              <CardTitle className=\"text-base font-semibold text-muted-foreground\">\n                The others\n              </CardTitle>\n              <CardDescription>\n                Common friction points teams encounter with legacy platforms.\n              </CardDescription>\n            </CardHeader>\n\n            <Separator />\n\n            <CardContent className=\"pt-4\">\n              <ul className=\"flex flex-col gap-3\">\n                {othersPoints.map((point) => (\n                  <CrossRow key={point} text={point} />\n                ))}\n              </ul>\n            </CardContent>\n\n            <CardFooter className=\"border-t\">\n              <Button\n                variant=\"secondary\"\n                nativeButton={false}\n                className=\"w-full\"\n                render={<a href=\"#\" />}\n              >\n                See Why Teams Switch\n                <IconPlaceholder\n                  lucide=\"ArrowRight\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRightIcon\"\n                  phosphor=\"ArrowRight\"\n                  remixicon=\"RiArrowRightLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/comparison-2.tsx"
    }
  ],
  "meta": {
    "height": "691px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "comparison"
  ],
  "type": "registry:block"
}