444 lines
16 KiB
TypeScript
444 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import type { LucideIcon } from "lucide-react";
|
|
import {
|
|
Bell,
|
|
Clock,
|
|
Clock11Icon,
|
|
Cloud,
|
|
CloudDrizzle,
|
|
CloudLightning,
|
|
CloudRain,
|
|
CloudSnow,
|
|
CloudSun,
|
|
Eye,
|
|
FileInput,
|
|
FilePlus,
|
|
FileSearch,
|
|
FileText,
|
|
HardDrive,
|
|
Key,
|
|
LifeBuoy,
|
|
Lock,
|
|
Mail,
|
|
Palette,
|
|
Shield,
|
|
ShieldAlert,
|
|
ShieldCheck,
|
|
ShieldPlus,
|
|
ShieldQuestion,
|
|
Star,
|
|
UserCheck,
|
|
UserCog,
|
|
UserPlus,
|
|
Users,
|
|
VoicemailIcon,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatPrice = (value: string | number) =>
|
|
`${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;
|
|
|
|
interface PricingPackage {
|
|
id: string;
|
|
title: string;
|
|
monthlyPrice: number;
|
|
annualPrice: number;
|
|
description: string;
|
|
features: {
|
|
title: string;
|
|
items: { icon: LucideIcon; text: string }[];
|
|
}[];
|
|
isPopular?: boolean;
|
|
}
|
|
|
|
interface Pricing28Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Pricing28 = ({ className }: Pricing28Props) => {
|
|
const [isAnnually, setIsAnnually] = useState(false);
|
|
|
|
const packages: PricingPackage[] = [
|
|
{
|
|
id: "basic",
|
|
title: "طرح پایه",
|
|
monthlyPrice: 790000,
|
|
annualPrice: 630000,
|
|
description: "۱۰ اعتبار در مجموع",
|
|
features: [
|
|
{
|
|
title: "امنیت",
|
|
items: [
|
|
{ icon: ShieldCheck, text: "امنیت استاندارد" },
|
|
{ icon: Lock, text: "رمزنگاری پایه" },
|
|
{ icon: Key, text: "احراز هویت دو مرحله‌ای" },
|
|
],
|
|
},
|
|
{
|
|
title: "ظاهر",
|
|
items: [
|
|
{ icon: Palette, text: "برندسازی پایه" },
|
|
{ icon: Eye, text: "قالب ایمیل و فیلد سفارشی پایه ظاهر" },
|
|
],
|
|
},
|
|
{
|
|
title: "ذخیره‌سازی",
|
|
items: [
|
|
{ icon: HardDrive, text: "۵ گیگابایت فضای ذخیره" },
|
|
{ icon: FileText, text: "نسخه‌بندی فایل" },
|
|
],
|
|
},
|
|
{
|
|
title: "پشتیبانی",
|
|
items: [
|
|
{ icon: Mail, text: "فقط پشتیبانی ایمیل" },
|
|
{ icon: Clock, text: "ثبت زمان پایه" },
|
|
],
|
|
},
|
|
{
|
|
title: "همکاری",
|
|
items: [
|
|
{ icon: Users, text: "تا ۳ کاربر" },
|
|
{ icon: UserPlus, text: "همکاری پایه تیمی" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "pro",
|
|
title: "طرح حرفه‌ای",
|
|
monthlyPrice: 299000,
|
|
annualPrice: 239000,
|
|
description: "۵۰ اعتبار در مجموع",
|
|
features: [
|
|
{
|
|
title: "امنیت",
|
|
items: [
|
|
{ icon: ShieldPlus, text: "امنیت پیشرفته" },
|
|
{ icon: Shield, text: "رمزنگاری پیشرفته" },
|
|
{ icon: Key, text: "احراز هویت دو مرحله‌ای" },
|
|
{ icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
|
|
],
|
|
},
|
|
{
|
|
title: "ظاهر",
|
|
items: [
|
|
{ icon: Palette, text: "برندسازی سفارشی" },
|
|
{ icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
|
|
{ icon: Star, text: "تم‌های سفارشی" },
|
|
],
|
|
},
|
|
{
|
|
title: "ذخیره‌سازی",
|
|
items: [
|
|
{ icon: HardDrive, text: "۵۰ گیگابایت فضای ذخیره" },
|
|
{ icon: FilePlus, text: "نسخه‌بندی فایل" },
|
|
{ icon: Cloud, text: "پشتیبان‌گیری و بازیابی" },
|
|
],
|
|
},
|
|
{
|
|
title: "پشتیبانی",
|
|
items: [
|
|
{ icon: Bell, text: "پشتیبانی اولویت‌دار" },
|
|
{ icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
|
|
{ icon: Mail, text: "پشتیبانی ایمیل و چت" },
|
|
],
|
|
},
|
|
{
|
|
title: "همکاری",
|
|
items: [
|
|
{ icon: Users, text: "عضو نامحدود فضای کاری" },
|
|
{ icon: UserCheck, text: "همکاری پیشرفته تیمی" },
|
|
{ icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "business",
|
|
title: "طرح تجاری",
|
|
monthlyPrice: 599000,
|
|
annualPrice: 479000,
|
|
description: "۱۰۰ اعتبار در مجموع",
|
|
features: [
|
|
{
|
|
title: "امنیت",
|
|
items: [
|
|
{ icon: ShieldPlus, text: "امنیت پیشرفته" },
|
|
{ icon: ShieldCheck, text: "رمزنگاری در سطح سازمانی" },
|
|
{ icon: Key, text: "احراز هویت دو مرحله‌ای" },
|
|
{ icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
|
|
{ icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
|
|
],
|
|
},
|
|
{
|
|
title: "ظاهر",
|
|
items: [
|
|
{ icon: Palette, text: "برندسازی سفارشی" },
|
|
{ icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
|
|
{ icon: Star, text: "تم‌های سفارشی" },
|
|
{ icon: Star, text: "برچسب سفید" },
|
|
],
|
|
},
|
|
{
|
|
title: "ذخیره‌سازی",
|
|
items: [
|
|
{ icon: HardDrive, text: "۵۰۰ گیگابایت فضای ذخیره" },
|
|
{ icon: FileSearch, text: "نسخه‌بندی فایل" },
|
|
{ icon: CloudRain, text: "پشتیبان‌گیری و بازیابی" },
|
|
{ icon: CloudSnow, text: "آپلود فایل نامحدود" },
|
|
],
|
|
},
|
|
{
|
|
title: "پشتیبانی",
|
|
items: [
|
|
{ icon: Bell, text: "پشتیبانی اولویت‌دار" },
|
|
{ icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
|
|
{ icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
|
|
{ icon: Star, text: "مدیر موفقیت مشتری اختصاصی" },
|
|
],
|
|
},
|
|
{
|
|
title: "همکاری",
|
|
items: [
|
|
{ icon: Users, text: "اعضای تیم نامحدود" },
|
|
{ icon: UserCheck, text: "همکاری پیشرفته تیمی" },
|
|
{ icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
|
|
{ icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
|
|
],
|
|
},
|
|
],
|
|
isPopular: true,
|
|
},
|
|
{
|
|
id: "enterprise",
|
|
title: "طرح سازمانی",
|
|
monthlyPrice: 1199000,
|
|
annualPrice: 959000,
|
|
description: "اعتبار نامحدود",
|
|
features: [
|
|
{
|
|
title: "امنیت",
|
|
items: [
|
|
{ icon: ShieldPlus, text: "امنیت در سطح سازمانی" },
|
|
{ icon: ShieldCheck, text: "رمزنگاری پیشرفته" },
|
|
{ icon: Key, text: "احراز هویت دو مرحله‌ای" },
|
|
{ icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
|
|
{ icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
|
|
{ icon: ShieldQuestion, text: "گواهی‌های انطباق" },
|
|
],
|
|
},
|
|
{
|
|
title: "ظاهر",
|
|
items: [
|
|
{ icon: Palette, text: "برندسازی سفارشی" },
|
|
{ icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
|
|
{ icon: Star, text: "تم‌های سفارشی" },
|
|
{ icon: Star, text: "برچسب سفید" },
|
|
{ icon: Star, text: "انیمیشن‌های سفارشی" },
|
|
],
|
|
},
|
|
{
|
|
title: "ذخیره‌سازی",
|
|
items: [
|
|
{ icon: HardDrive, text: "۱ ترابایت فضای ذخیره" },
|
|
{ icon: FileInput, text: "نسخه‌بندی فایل" },
|
|
{ icon: CloudLightning, text: "پشتیبان‌گیری و بازیابی" },
|
|
{ icon: CloudDrizzle, text: "آپلود فایل نامحدود" },
|
|
{ icon: CloudSun, text: "راهکار ذخیره‌سازی سفارشی" },
|
|
],
|
|
},
|
|
{
|
|
title: "پشتیبانی",
|
|
items: [
|
|
{ icon: Bell, text: "پشتیبانی پریمیوم ۲۴/۷" },
|
|
{ icon: Clock, text: "مدیر موفقیت مشتری اختصاصی" },
|
|
{ icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
|
|
{ icon: Star, text: "توافق‌نامه SLA سفارشی" },
|
|
],
|
|
},
|
|
{
|
|
title: "همکاری",
|
|
items: [
|
|
{ icon: Users, text: "عضو نامحدود فضای کاری" },
|
|
{ icon: UserCheck, text: "همکاری پیشرفته تیمی" },
|
|
{ icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
|
|
{ icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
|
|
{ icon: VoicemailIcon, text: "یکپارچه‌سازی نامحدود" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<h2 className="mb-4 text-xl font-semibold lg:text-2xll">
|
|
طرح مناسب خود را انتخاب کنید
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="mx-auto mb-12 flex max-w-3xl items-center justify-center gap-4">
|
|
<div className="relative me-2 flex items-center">
|
|
<Avatar className="size-8 border border-primary">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
|
|
<AvatarFallback>U1</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="absolute start-6 size-8 border border-primary">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
|
|
<AvatarFallback>U2</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar className="absolute start-12 size-8 border border-primary">
|
|
<AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
|
|
<AvatarFallback>U3</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<div className="ms-8 flex items-center gap-4">
|
|
<span className="text-sm font-medium">
|
|
بیش از ۵۰ هزار توسعه‌دهنده به ما اعتماد دارند
|
|
</span>
|
|
<div className="h-8 w-px bg-border" />
|
|
<span className="text-sm font-medium">
|
|
لغو در هر زمان، بدون دردسر
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-2">
|
|
<span className="text-muted-foreground">دوره صورتحساب</span>
|
|
<div className="inline-flex items-center rounded-full bg-muted p-1">
|
|
<RadioGroup
|
|
defaultValue="monthly"
|
|
className="grid h-auto w-auto grid-cols-2 gap-0"
|
|
onValueChange={(value) => {
|
|
setIsAnnually(value === "annually");
|
|
}}
|
|
>
|
|
<div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
|
|
<RadioGroupItem
|
|
value="monthly"
|
|
id="monthly"
|
|
className="peer sr-only"
|
|
/>
|
|
<Label
|
|
htmlFor="monthly"
|
|
className="flex h-11 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
|
|
>
|
|
ماهانه
|
|
</Label>
|
|
</div>
|
|
<div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
|
|
<RadioGroupItem
|
|
value="annually"
|
|
id="annually"
|
|
className="peer sr-only"
|
|
/>
|
|
<Label
|
|
htmlFor="annually"
|
|
className="flex h-11 cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
|
|
>
|
|
<span>سالانه</span>
|
|
<Badge
|
|
variant="outline"
|
|
className="shrink-0 bg-primary px-1.5 text-xs text-secondary"
|
|
>
|
|
۲۰٪-
|
|
</Badge>
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-2 md:grid-cols-2 lg:grid-cols-4">
|
|
{packages.map((pkg) => (
|
|
<div key={pkg.id} className="rounded-2xl border p-6">
|
|
<div className="flex h-full flex-col justify-between gap-5">
|
|
<div>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h3 className="text-xl">{pkg.title}</h3>
|
|
{pkg.isPopular && <Badge>محبوب</Badge>}
|
|
</div>
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<span className="text-2xll font-semibold">
|
|
{formatPrice(
|
|
isAnnually ? pkg.annualPrice : pkg.monthlyPrice,
|
|
)}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
{isAnnually ? "در ماه، صورتحساب سالانه" : "در ماه"}
|
|
</span>
|
|
</div>
|
|
<TooltipProvider delayDuration={100}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="cursor-pointer border-b border-dashed border-muted-foreground">
|
|
{pkg.description}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="">
|
|
اعتبارها برای امکانات و خدمات پریمیوم قابل استفاده
|
|
هستند.
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<Button className="mt-6 w-full rounded-full">
|
|
{pkg.id === "enterprise"
|
|
? "گفتگو با فروش"
|
|
: `دریافت ${pkg.title}`}
|
|
</Button>
|
|
<div className="mt-6">
|
|
{pkg.features.map((feature, i) => (
|
|
<div key={i} className="mb-6">
|
|
<h4 className="mb-3 text-sm font-medium text-muted-foreground">
|
|
{feature.title}
|
|
</h4>
|
|
<ul className="flex flex-col gap-3">
|
|
{feature.items.map((item, j) => (
|
|
<li key={j} className="flex gap-2">
|
|
<item.icon className="mt-1 size-4 shrink-0 text-primary" />
|
|
{item.text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-8 flex items-center justify-center text-muted-foreground">
|
|
<Lock className="size-4" />
|
|
<span className="ms-2 text-sm">
|
|
پرداخت امن. قدرت گرفته از{" "}
|
|
<a href="https://ShadcnBlocks" className="underline">
|
|
نوافروش
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Pricing28 };
|