{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-section-1",
  "title": "Comparison Section 1",
  "description": "Feature comparison table with mobile-responsive design",
  "registryDependencies": [
    "button",
    "separator",
    "table",
    "https://shadcndesign-free.vercel.app/r/styles.json",
    "https://shadcndesign-free.vercel.app/r/tagline.json",
    "https://shadcndesign-free.vercel.app/r/logo.json"
  ],
  "files": [
    {
      "path": "components/pro-blocks/landing-page/comparison-sections/comparison-section-1.tsx",
      "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Logo } from \"@/components/pro-blocks/logo\";\nimport { Check, X, Box } from \"lucide-react\";\nimport { Tagline } from \"@/components/pro-blocks/landing-page/tagline\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\ntype ComparisonRow = {\n  feature: string;\n  our: boolean | string;\n  theirs: boolean | string;\n};\n\nconst COMPARISON_ROWS: ComparisonRow[] = [\n  { feature: \"Projects\", our: \"Unlimited\", theirs: \"10\" },\n  { feature: \"Custom components\", our: true, theirs: true },\n  { feature: \"Design tokens\", our: true, theirs: true },\n  { feature: \"Team permissions\", our: true, theirs: false },\n  { feature: \"Audit logs\", our: true, theirs: false },\n];\n\nexport function ComparisonSection1() {\n  return (\n    <section className=\"bg-background section-padding-y\">\n      <div className=\"container-padding-x mx-auto flex max-w-6xl flex-col gap-8 md:gap-12\">\n        <div className=\"section-title-gap-lg mx-auto flex flex-col items-center text-center md:max-w-xl\">\n          <Tagline>Comparison Section</Tagline>\n          <h2 className=\"heading-lg text-foreground\">\n            You vs. your competitor\n          </h2>\n          <p className=\"text-muted-foreground text-lg/8 text-pretty\">\n            Explain in one or two concise sentences how your solution compares\n            to a competitor. Keep it clear and compelling.\n          </p>\n        </div>\n\n        {/* Comparison grid */}\n        {/* Desktop/tablet (md+) table */}\n        <div className=\"hidden overflow-x-auto md:block\">\n          <div className=\"\">\n            <Table>\n              <TableHeader>\n                <TableRow className=\"h-14\">\n                  <TableHead className=\"w-[40%]\"></TableHead>\n                  <TableHead className=\"w-[30%]\">\n                    <div className=\"relative flex items-center justify-center\">\n                      <Logo className=\"size-6\" />\n                    </div>\n                  </TableHead>\n                  <TableHead className=\"w-[30%]\">\n                    <div className=\"flex items-center justify-center\">\n                      <Box className=\"size-6\" aria-hidden=\"true\" />\n                    </div>\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {COMPARISON_ROWS.map((row, idx) => (\n                  <TableRow key={idx} className=\"h-14\">\n                    <TableCell className=\"text-base font-medium\">\n                      {row.feature}\n                    </TableCell>\n                    <TableCell>\n                      <div className=\"relative flex items-center justify-center\">\n                        <div className=\"text-base\">\n                          {typeof row.our === \"boolean\" ? (\n                            row.our ? (\n                              <Check className=\"size-5\" aria-hidden=\"true\" />\n                            ) : (\n                              <X\n                                className=\"text-muted-foreground size-5\"\n                                aria-hidden=\"true\"\n                              />\n                            )\n                          ) : (\n                            row.our\n                          )}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell>\n                      <div className=\"flex items-center justify-center text-base\">\n                        {typeof row.theirs === \"boolean\" ? (\n                          row.theirs ? (\n                            <Check className=\"size-5\" aria-hidden=\"true\" />\n                          ) : (\n                            <X\n                              className=\"text-muted-foreground size-5\"\n                              aria-hidden=\"true\"\n                            />\n                          )\n                        ) : (\n                          row.theirs\n                        )}\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n\n        {/* Mobile (< md) stacked rows */}\n        <div className=\"md:hidden\">\n          <div className=\"mb-4 grid grid-cols-2 text-sm font-medium\">\n            <div className=\"relative flex items-center justify-center py-2\">\n              <div className=\"bg-muted/50 absolute inset-0 -z-10\" />\n              <Logo className=\"size-6\" />\n            </div>\n            <div className=\"flex items-center justify-center py-2\">\n              <Box className=\"size-6\" aria-hidden=\"true\" />\n            </div>\n          </div>\n\n          <div className=\"space-y-3\">\n            {COMPARISON_ROWS.map((row, idx) => (\n              <div key={idx} className=\"rounded-md border\">\n                <div className=\"px-4 py-3 text-sm font-medium\">\n                  {row.feature}\n                </div>\n                <Separator role=\"presentation\" />\n                <div className=\"grid grid-cols-2\">\n                  <div className=\"relative flex items-center justify-center py-3\">\n                    <div className=\"bg-muted/50 absolute inset-0 -z-10\" />\n                    <div className=\"text-sm\">\n                      {typeof row.our === \"boolean\" ? (\n                        row.our ? (\n                          <Check className=\"size-4\" aria-hidden=\"true\" />\n                        ) : (\n                          <X className=\"size-4\" aria-hidden=\"true\" />\n                        )\n                      ) : (\n                        row.our\n                      )}\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-center py-3 text-sm\">\n                    {typeof row.theirs === \"boolean\" ? (\n                      row.theirs ? (\n                        <Check className=\"size-4\" aria-hidden=\"true\" />\n                      ) : (\n                        <X\n                          className=\"text-muted-foreground size-4\"\n                          aria-hidden=\"true\"\n                        />\n                      )\n                    ) : (\n                      row.theirs\n                    )}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* CTA */}\n        <div className=\"flex items-center justify-center gap-4\">\n          <Button asChild>\n            <Link href=\"#\">Get started</Link>\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pro-blocks/landing-page/comparison-sections/comparison-section-1.tsx"
    }
  ],
  "type": "registry:component"
}