{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparator-1",
  "type": "registry:block",
  "title": "Pricing Comparator 1",
  "description": "Feature comparison table across three pricing plans.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "app/preview/comparator/one/page.tsx",
      "content": "import { Button } from '@/components/ui/button'\nimport { Cpu, Sparkles } from 'lucide-react'\nimport Link from 'next/link'\n\nconst tableData = [\n    {\n        feature: 'Feature 1',\n        free: true,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Feature 2',\n        free: true,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Feature 3',\n        free: false,\n        pro: true,\n        startup: true,\n    },\n    {\n        feature: 'Tokens',\n        free: '',\n        pro: '20 Users',\n        startup: 'Unlimited',\n    },\n    {\n        feature: 'Video calls',\n        free: '',\n        pro: '12 Weeks',\n        startup: '56',\n    },\n    {\n        feature: 'Support',\n        free: '',\n        pro: 'Secondes',\n        startup: 'Unlimited',\n    },\n    {\n        feature: 'Security',\n        free: '',\n        pro: '20 Users',\n        startup: 'Unlimited',\n    },\n]\n\nexport default function PricingComparator() {\n    return (\n        <section className=\"py-16 md:py-32\">\n            <div className=\"mx-auto max-w-5xl px-6\">\n                <div className=\"w-full overflow-auto lg:overflow-visible\">\n                    <table className=\"w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]\">\n                        <thead className=\"bg-background sticky top-0\">\n                            <tr className=\"*:py-4 *:text-left *:font-medium\">\n                                <th className=\"lg:w-2/5\"></th>\n                                <th className=\"space-y-3\">\n                                    <span className=\"block\">Free</span>\n\n                                    <Button asChild variant=\"outline\" size=\"sm\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                                <th className=\"bg-muted rounded-t-(--radius) space-y-3 px-4\">\n                                    <span className=\"block\">Pro</span>\n                                    <Button asChild size=\"sm\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                                <th className=\"space-y-3\">\n                                    <span className=\"block\">Startup</span>\n                                    <Button asChild variant=\"outline\" size=\"sm\">\n                                        <Link href=\"#\">Get Started</Link>\n                                    </Button>\n                                </th>\n                            </tr>\n                        </thead>\n                        <tbody className=\"text-caption text-sm\">\n                            <tr className=\"*:py-3\">\n                                <td className=\"flex items-center gap-2 font-medium\">\n                                    <Cpu className=\"size-4\" />\n                                    <span>Features</span>\n                                </td>\n                                <td></td>\n                                <td className=\"bg-muted border-none px-4\"></td>\n                                <td></td>\n                            </tr>\n                            {tableData.slice(-4).map((row, index) => (\n                                <tr key={index} className=\"*:border-b *:py-3\">\n                                    <td className=\"text-muted-foreground\">{row.feature}</td>\n                                    <td>\n                                        {row.free === true ? (\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        ) : (\n                                            row.free\n                                        )}\n                                    </td>\n                                    <td className=\"bg-muted border-none px-4\">\n                                        <div className=\"-mb-3 border-b py-3\">\n                                            {row.pro === true ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                    <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                                </svg>\n                                            ) : (\n                                                row.pro\n                                            )}\n                                        </div>\n                                    </td>\n                                    <td>\n                                        {row.startup === true ? (\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        ) : (\n                                            row.startup\n                                        )}\n                                    </td>\n                                </tr>\n                            ))}\n                            <tr className=\"*:pb-3 *:pt-8\">\n                                <td className=\"flex items-center gap-2 font-medium\">\n                                    <Sparkles className=\"size-4\" />\n                                    <span>AI Models</span>\n                                </td>\n                                <td></td>\n                                <td className=\"bg-muted border-none px-4\"></td>\n                                <td></td>\n                            </tr>\n                            {tableData.map((row, index) => (\n                                <tr key={index} className=\"*:border-b *:py-3\">\n                                    <td className=\"text-muted-foreground\">{row.feature}</td>\n                                    <td>\n                                        {row.free === true ? (\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        ) : (\n                                            row.free\n                                        )}\n                                    </td>\n                                    <td className=\"bg-muted border-none px-4\">\n                                        <div className=\"-mb-3 border-b py-3\">\n                                            {row.pro === true ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                    <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                                </svg>\n                                            ) : (\n                                                row.pro\n                                            )}\n                                        </div>\n                                    </td>\n                                    <td>\n                                        {row.startup === true ? (\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n                                                <path fillRule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z\" clipRule=\"evenodd\" />\n                                            </svg>\n                                        ) : (\n                                            row.startup\n                                        )}\n                                    </td>\n                                </tr>\n                            ))}\n                            <tr className=\"*:py-6\">\n                                <td></td>\n                                <td></td>\n                                <td className=\"bg-muted rounded-b-(--radius) border-none px-4\"></td>\n                                <td></td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/pricing-comparator.tsx"
    }
  ]
}