Initial commit: Next.js project with Persian content and custom styling
This commit is contained in:
ahmadrezabd
@@ -0,0 +1,237 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user