{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature30",
  "title": "Before/After Comparison Cards",
  "description": "Side-by-side comparison cards with bullet lists showing pain points vs. solutions after transformation. Perfect for demonstrating product value, workflow improvements, or competitive advantages.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/feature30/feature30.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ComparisonItem {\n  id: string;\n  text: string;\n}\n\ninterface ComparisonColumn {\n  id: string;\n  label: string;\n  highlighted?: boolean;\n  items: ComparisonItem[];\n}\n\ninterface ButtonItem {\n  id: string;\n  label: string;\n  href?: string;\n  variant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"ghost\"\n    | \"link\"\n    | \"destructive\";\n}\n\ninterface Feature30Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  firstColumn?: ComparisonColumn;\n  secondColumn?: ComparisonColumn;\n  buttons?: ButtonItem[];\n  className?: string;\n}\n\nexport const feature30Demo: Feature30Props = {\n  badge: { label: \"Compare\", variant: \"secondary\" },\n  heading: \"The difference is clear\",\n  description:\n    \"See how your workflow transforms when you switch from scattered tools to a unified platform.\",\n  firstColumn: {\n    id: \"before\",\n    label: \"Before\",\n    items: [\n      { id: \"b1\", text: \"Manual data entry across multiple tools\" },\n      { id: \"b2\", text: \"Hours spent searching for information\" },\n      { id: \"b3\", text: \"Inconsistent formatting and branding\" },\n      { id: \"b4\", text: \"No visibility into team progress\" },\n      { id: \"b5\", text: \"Scattered feedback in emails and chats\" },\n    ],\n  },\n  secondColumn: {\n    id: \"after\",\n    label: \"After\",\n    highlighted: true,\n    items: [\n      { id: \"a1\", text: \"Single source of truth, auto-synced\" },\n      { id: \"a2\", text: \"Instant search with smart filters\" },\n      { id: \"a3\", text: \"Templates enforce brand consistency\" },\n      { id: \"a4\", text: \"Real-time dashboards and notifications\" },\n      { id: \"a5\", text: \"Contextual comments right where you work\" },\n    ],\n  },\n  buttons: [\n    { id: \"btn-1\", label: \"Start free trial\", href: \"https://beste.co\" },\n    {\n      id: \"btn-2\",\n      label: \"See demo\",\n      href: \"https://beste.co\",\n      variant: \"outline\",\n    },\n  ],\n};\n\nexport function Feature30({\n  badge,\n  heading,\n  description,\n  firstColumn,\n  secondColumn,\n  buttons = [],\n  className,\n}: Feature30Props) {\n  const hasColumns = firstColumn || secondColumn;\n\n  const renderColumn = (column: ComparisonColumn) => (\n    <div className=\"rounded-lg border shadow-sm p-8 bg-card hover:shadow-xl transition-all duration-300 hover:-translate-y-1\">\n      <h3 className=\"text-xl font-bold mb-6\">{column.label}</h3>\n      <ul className=\"space-y-2\">\n        {column.items.map((item) => (\n          <li key={item.id} className=\"flex items-start gap-3\">\n            <span className=\"mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground/40\" />\n            <span className=\"leading-relaxed text-sm text-muted-foreground\">\n              {item.text}\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-12 max-w-3xl text-center\">\n            {badge && (\n              <div className=\"mb-5 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>\n                  {badge.label}\n                </Badge>\n              </div>\n            )}\n            {heading && (\n              <h2 className=\"text-3xl font-semibold md:text-5xl text-balance\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-base md:text-lg text-balance text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n\n        {hasColumns && (\n          <div className=\"grid gap-4 md:grid-cols-2 sm:gap-8\">\n            {firstColumn && renderColumn(firstColumn)}\n            {secondColumn && renderColumn(secondColumn)}\n          </div>\n        )}\n\n        {buttons.length > 0 && (\n          <div className=\"mt-10 flex flex-wrap justify-center gap-3\">\n            {buttons.map((button) => (\n              <Button\n                key={button.id}\n                variant={button.variant ?? \"default\"}\n                asChild\n              >\n                <Link href={button.href ?? \"#\"}>{button.label}</Link>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature30.tsx"
    }
  ],
  "type": "registry:block"
}