77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { Check } from "lucide-react";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card } from "@/components/ui/card";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const formatPrice = (value: string | number) =>
|
||
`${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
|
||
|
||
const features = [
|
||
"پشتیبان‌گیری خودکار",
|
||
"پشتیبانی اولویت‌دار",
|
||
"پروژه‌های نامحدود",
|
||
"عضو نامحدود فضای کاری",
|
||
"دامنه سفارشی",
|
||
"برندسازی سفارشی",
|
||
"تحلیل‌های پیشرفته",
|
||
"دسترسی‌های سفارشی",
|
||
"گزارش‌های پیشرفته",
|
||
];
|
||
|
||
interface Pricing8Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Pricing8 = ({ className }: Pricing8Props) => {
|
||
return (
|
||
<section className={cn("bg-muted py-32", className)}>
|
||
<div className="container">
|
||
<div className="flex flex-col items-center gap-4 text-center">
|
||
<h2 className="mb-2 text-3xl font-medium lg:text-2xll">تعرفه‌ها</h2>
|
||
<p className="max-w-lg text-muted-foreground">
|
||
قیمت‌گذاری ساده و شفاف با امکانات کامل برای رشد کسب‌وکار شما.
|
||
</p>
|
||
</div>
|
||
<div className="mt-10">
|
||
<Card className="mx-auto flex w-full max-w-sm flex-col justify-between gap-10 rounded-lg p-6 text-center">
|
||
<p className="text-xl">شروع از</p>
|
||
<div>
|
||
<div className="flex items-end justify-center gap-1">
|
||
<span className="text-xl font-medium lg:text-2xll">
|
||
{formatPrice(160000)}
|
||
</span>
|
||
<span className="pb-1 text-lg text-muted-foreground">
|
||
در ماه
|
||
</span>
|
||
</div>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
با ۷ روز آزمایش رایگان
|
||
</p>
|
||
</div>
|
||
<Button className="w-full" size="lg">
|
||
رایگان امتحان کنید
|
||
</Button>
|
||
</Card>
|
||
<p className="lg:text-1xl mt-8 text-center text-xl font-medium lg:mt-10">
|
||
چه چیزهایی در طرح گنجانده شده
|
||
</p>
|
||
<ul className="mx-auto mt-4 grid w-fit md:w-auto md:max-w-2xl md:grid-cols-2 md:ps-14 lg:max-w-4xl lg:grid-cols-3">
|
||
{features.map((feature, index) => (
|
||
<li
|
||
key={index}
|
||
className="mt-4 flex items-center gap-2 text-sm font-medium"
|
||
>
|
||
<Check className="size-5" />
|
||
<span className="text-muted-foreground">{feature}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Pricing8 };
|