238 lines
9.2 KiB
TypeScript
238 lines
9.2 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
||
import { Cpu, Sparkles } from "lucide-react";
|
||
import Link from "next/link";
|
||
|
||
const tableData = [
|
||
{
|
||
feature: "ویژگی ۱",
|
||
free: true,
|
||
pro: true,
|
||
startup: true,
|
||
},
|
||
{
|
||
feature: "ویژگی ۲",
|
||
free: true,
|
||
pro: true,
|
||
startup: true,
|
||
},
|
||
{
|
||
feature: "ویژگی ۳",
|
||
free: false,
|
||
pro: true,
|
||
startup: true,
|
||
},
|
||
{
|
||
feature: "توکنها",
|
||
free: "",
|
||
pro: "۲۰ کاربر",
|
||
startup: "نامحدود",
|
||
},
|
||
{
|
||
feature: "تماس ویدیویی",
|
||
free: "",
|
||
pro: "۱۲ هفته",
|
||
startup: "۵۶",
|
||
},
|
||
{
|
||
feature: "پشتیبانی",
|
||
free: "",
|
||
pro: "ثانیهها",
|
||
startup: "نامحدود",
|
||
},
|
||
{
|
||
feature: "امنیت",
|
||
free: "",
|
||
pro: "۲۰ کاربر",
|
||
startup: "نامحدود",
|
||
},
|
||
];
|
||
|
||
export default function PricingComparator() {
|
||
return (
|
||
<section className="bg-white 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-start *:font-medium">
|
||
<th className="lg:w-2/5"></th>
|
||
<th className="space-y-3">
|
||
<span className="block">رایگان</span>
|
||
|
||
<Button asChild variant="outline" size="sm">
|
||
<Link href="/login?utm_source=pricing-free">شروع کنید</Link>
|
||
</Button>
|
||
</th>
|
||
<th className="bg-muted rounded-t-(--radius) space-y-3 px-4">
|
||
<span className="block">حرفهای</span>
|
||
<Button asChild size="sm">
|
||
<Link href="/login?utm_source=pricing-professional">
|
||
شروع کنید
|
||
</Link>
|
||
</Button>
|
||
</th>
|
||
<th className="space-y-3">
|
||
<span className="block">استارتاپ</span>
|
||
<Button asChild variant="outline" size="sm">
|
||
<Link href="/login?utm_source=pricing-startup">
|
||
شروع کنید
|
||
</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>ویژگیها</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>مدلهای هوش مصنوعی</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>
|
||
);
|
||
}
|