78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { Check } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: string | number) =>
|
|
`${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
|
|
|
|
interface Pricing6Props {
|
|
heading: string;
|
|
description?: string;
|
|
price?: string | number;
|
|
priceSuffix?: string;
|
|
features?: string[][];
|
|
buttonText?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const defaultFeatures = [
|
|
["نامحدود", "یکپارچهسازیها", "پشتیبانی اولویتدار"],
|
|
["همزمانی تیم فروش روی یک قیف", "فضای فایل نامحدود", "بازگشت وجه ۳۰ روزه"],
|
|
["اعضای نامحدود", "شخصیسازی", "عضو نامحدود فضای کاری"],
|
|
];
|
|
|
|
const Pricing6 = ({
|
|
heading = "تعرفهها",
|
|
description = "قیمتگذاری ساده با ۷ روز آزمایش رایگان.",
|
|
price = 290000,
|
|
priceSuffix = "در ماه",
|
|
features = defaultFeatures,
|
|
buttonText = "شروع آزمایش رایگان",
|
|
className,
|
|
}: Pricing6Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
|
|
<h2 className="text-xl font-semibold text-pretty lg:text-2xll">
|
|
{heading}
|
|
</h2>
|
|
<p className="max-w-md text-muted-foreground lg:text-xl">
|
|
{description}
|
|
</p>
|
|
<div className="mx-auto flex w-full flex-col rounded-lg border p-6 sm:w-fit sm:min-w-80">
|
|
<div className="flex items-end justify-center gap-1">
|
|
<span className="text-2xll font-semibold">
|
|
{formatPrice(price)}
|
|
</span>
|
|
<span className="pb-2 text-muted-foreground">{priceSuffix}</span>
|
|
</div>
|
|
<div className="my-6">
|
|
{features.map((featureGroup, idx) => (
|
|
<div key={idx}>
|
|
<ul className="flex flex-col gap-3">
|
|
{featureGroup.map((feature, i) => (
|
|
<li
|
|
key={i}
|
|
className="flex items-center justify-between gap-2 text-sm font-medium"
|
|
>
|
|
{feature} <Check className="inline size-4 shrink-0" />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{idx < features.length - 1 && <Separator className="my-6" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button>{buttonText}</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Pricing6 };
|