import { Button } from '@/components/ui/button'
import { Cpu, Sparkles } from 'lucide-react'
import Link from 'next/link'
const tableData = [
{
feature: 'Feature 1',
free: true,
pro: true,
startup: true,
},
{
feature: 'Feature 2',
free: true,
pro: true,
startup: true,
},
{
feature: 'Feature 3',
free: false,
pro: true,
startup: true,
},
{
feature: 'Tokens',
free: '',
pro: '20 Users',
startup: 'Unlimited',
},
{
feature: 'Video calls',
free: '',
pro: '12 Weeks',
startup: '56',
},
{
feature: 'Support',
free: '',
pro: 'Secondes',
startup: 'Unlimited',
},
{
feature: 'Security',
free: '',
pro: '20 Users',
startup: 'Unlimited',
},
]
export default function PricingComparator() {
return (
<section className="py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="w-full overflow-auto lg:overflow-visible">
<table className="w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]">
<thead className="bg-background sticky top-0">
<tr className="*:py-4 *:text-left *:font-medium">
<th className="lg:w-2/5"></th>
<th className="space-y-3">
<span className="block">Free</span>
<Button
asChild
variant="outline"
size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
<th className="bg-muted rounded-t-(--radius) space-y-3 px-4">
<span className="block">Pro</span>
<Button
asChild
size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
<th className="space-y-3">
<span className="block">Startup</span>
<Button
asChild
variant="outline"
size="sm">
<Link href="#">Get Started</Link>
</Button>
</th>
</tr>
</thead>
<tbody className="text-caption text-sm">
<tr className="*:py-3">
<td className="flex items-center gap-2 font-medium">
<Cpu className="size-4" />
<span>Features</span>
</td>
<td></td>
<td className="bg-muted border-none px-4"></td>
<td></td>
</tr>
{tableData.slice(-4).map((row, index) => (
<tr
key={index}
className="*:border-b *:py-3">
<td className="text-muted-foreground">{row.feature}</td>
<td>
{row.free === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.free
)}
</td>
<td className="bg-muted border-none px-4">
<div className="-mb-3 border-b py-3">
{row.pro === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.pro
)}
</div>
</td>
<td>
{row.startup === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.startup
)}
</td>
</tr>
))}
<tr className="*:pb-3 *:pt-8">
<td className="flex items-center gap-2 font-medium">
<Sparkles className="size-4" />
<span>AI Models</span>
</td>
<td></td>
<td className="bg-muted border-none px-4"></td>
<td></td>
</tr>
{tableData.map((row, index) => (
<tr
key={index}
className="*:border-b *:py-3">
<td className="text-muted-foreground">{row.feature}</td>
<td>
{row.free === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.free
)}
</td>
<td className="bg-muted border-none px-4">
<div className="-mb-3 border-b py-3">
{row.pro === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.pro
)}
</div>
</td>
<td>
{row.startup === true ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="size-4">
<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"
/>
</svg>
) : (
row.startup
)}
</td>
</tr>
))}
<tr className="*:py-6">
<td></td>
<td></td>
<td className="bg-muted rounded-b-(--radius) border-none px-4"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
)
}
npx shadcn@latest add @tailark/comparator-1import { Comparator1 } from "@/components/comparator-1"<Comparator1 />