135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
import {
|
|
CalendarSync,
|
|
Globe,
|
|
MessageCircle,
|
|
MessagesSquare,
|
|
PlusCircle,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: string | number) =>
|
|
`${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
|
|
|
|
const ADDONS = [
|
|
{
|
|
icon: CalendarSync,
|
|
name: "شارژ خودکار اعتبار",
|
|
description:
|
|
"آستانه را تعیین کنید تا اعتبار شما خودکار شارژ شود بدون انقضا و بدون وقفه!",
|
|
price: {
|
|
unit: "مجموع به ازای هر ۱۰۰۰ اعتبار پیام",
|
|
amount: 140000,
|
|
},
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: MessageCircle,
|
|
name: "اعتبار پیام اضافه",
|
|
description: "۱۲ ریال به ازای هر ۱۰۰۰ اعتبار در ماه",
|
|
price: {
|
|
unit: "مجموع در ماه",
|
|
amount: 120000,
|
|
},
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: MessagesSquare,
|
|
name: "عامل‌های اضافه",
|
|
description: "۷ ریال به ازای هر عامل هوش مصنوعی در ماه",
|
|
price: {
|
|
unit: "مجموع در ماه",
|
|
amount: 70000,
|
|
},
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
name: "دامنه‌های شخصی‌سازی‌شده",
|
|
description:
|
|
"از دامنه‌های سفارشی برای اسکریپت embed، پنجره نمایش و لینک قابل اشتراک عامل هوش مصنوعی استفاده کنید کاملاً با برند شما!",
|
|
price: {
|
|
unit: "مجموع در ماه",
|
|
amount: 590000,
|
|
},
|
|
link: "#",
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
name: "حذف واترمارک",
|
|
description: "حذف برندسازی از پنجره نمایش و ویجت",
|
|
price: {
|
|
unit: "مجموع در ماه",
|
|
amount: 390000,
|
|
},
|
|
link: "#",
|
|
},
|
|
];
|
|
|
|
interface Pricing33Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Pricing33 = ({ className }: Pricing33Props) => {
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex w-full flex-col items-center gap-4">
|
|
<Badge className="flex items-center gap-2 rounded-full border border-muted bg-background px-4 py-1.5">
|
|
<PlusCircle className="size-2 text-primary" />
|
|
<p className="text-sm leading-5 font-medium text-foreground">
|
|
افزونه‌ها
|
|
</p>
|
|
</Badge>
|
|
<h2 className="max-w-full text-center text-3xl font-semibold md:max-w-[42.5rem] md:text-2xll">
|
|
طرح خود را با افزونه‌های قدرتمند تقویت کنید!
|
|
</h2>
|
|
<div className="flex w-full flex-col items-center gap-4 pt-10">
|
|
{ADDONS.map((addon, i) => (
|
|
<div
|
|
className="grid w-full rounded-2xl border border-muted shadow-xs xl:grid-cols-[minmax(36.25rem,48.125rem)_1fr]"
|
|
key={`addon-${i}`}
|
|
>
|
|
<div className="flex w-full flex-col gap-4 p-6 md:flex-row">
|
|
<div className="relative flex size-12 after:absolute after:start-1/2 after:top-1/2 after:z-10 after:block after:size-full after:-translate-1/2 after:rounded-full after:content-['']">
|
|
<div className="relative z-20 m-auto flex size-11.5 shrink-0 rounded-full bg-foreground">
|
|
<addon.icon className="m-auto size-5 stroke-background" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="text-xl font-medium">{addon.name}</h3>
|
|
<p className="text-base text-muted-foreground">
|
|
{addon.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col items-center gap-2 p-6 md:flex-row">
|
|
<div className="flex w-full flex-wrap items-center gap-4 md:flex-nowrap">
|
|
<div className="text-lg font-semibold">
|
|
{formatPrice(addon.price.amount)}
|
|
</div>
|
|
<div className="text-xs text-foreground/60">
|
|
{addon.price.unit}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
className="block h-12 w-full px-4 md:max-w-[10.625rem]"
|
|
>
|
|
<a href={addon.link}>دریافت افزونه</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Pricing33 };
|