101 lines
4.4 KiB
TypeScript
101 lines
4.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
|
||
const formatPrice = (value: string | number) =>
|
||
`${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
|
||
|
||
interface Pricing13Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Pricing13 = ({ className }: Pricing13Props) => {
|
||
return (
|
||
<section className={cn("py-32", className)}>
|
||
<div className="container">
|
||
<div className="rounded-xl border border-border py-6 md:py-8 lg:pt-16 lg:pb-12">
|
||
<div className="px-6 md:px-8 lg:px-12">
|
||
<div className="mb-8 md:mb-10 md:flex md:justify-between lg:mb-9">
|
||
<div className="lg:w-2/3">
|
||
<h1 className="mb-4 text-xl font-medium md:text-3xl lg:text-xl">
|
||
افزونه‌های تکمیلی
|
||
</h1>
|
||
<p className="text-xs text-muted-foreground md:text-sm lg:text-base">
|
||
با افزودن ماژول‌های تکمیلی، امکانات حساب خود را متناسب با
|
||
نیازتان گسترش دهید.
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="/block-media/shadcnblocks/block/block-1.svg"
|
||
alt="افزونه‌ها"
|
||
className="hidden size-24 md:block lg:size-32"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col gap-x-8 gap-y-3 xl:flex-row">
|
||
<div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
|
||
<h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
|
||
افزونه ۱
|
||
</h2>
|
||
<div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
|
||
<p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
|
||
امکانات پایه برای شروع سریع و بدون پیچیدگی.
|
||
</p>
|
||
<div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
|
||
<p>
|
||
<span className="font-medium lg:text-xl">
|
||
{formatPrice(90000)}
|
||
</span>
|
||
<span className="text-xs font-medium text-muted-foreground">
|
||
{" "}
|
||
در ماه
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
|
||
<h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
|
||
افزونه ۲
|
||
</h2>
|
||
<div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
|
||
<p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
|
||
ابزارهای پیشرفته برای تیم‌های در حال رشد.
|
||
</p>
|
||
<div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
|
||
<p>
|
||
<span className="font-medium lg:text-xl">
|
||
{formatPrice(990000)}
|
||
</span>
|
||
<span className="text-xs font-medium text-muted-foreground">
|
||
{" "}
|
||
در ماه
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-1 flex-col rounded-lg bg-accent p-6 lg:py-8">
|
||
<h2 className="mb-1.5 text-base font-medium lg:mb-2 lg:text-lg">
|
||
افزونه ۳
|
||
</h2>
|
||
<div className="grid flex-1 grid-cols-1 gap-x-10 md:grid-cols-3 lg:grid-cols-1">
|
||
<p className="mb-8 max-w-xs text-xs text-muted-foreground md:col-span-2 md:mb-0 lg:mb-10 lg:text-base">
|
||
راهکار سفارشی برای سازمان‌های بزرگ.
|
||
</p>
|
||
<div className="col-span-1 md:mt-auto md:ms-auto lg:ms-0">
|
||
<p>
|
||
<span className="font-medium lg:text-xl">
|
||
گفتگو با فروش
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Pricing13 };
|