327 lines
12 KiB
TypeScript
327 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { CheckIcon, Info, MinusIcon } from "lucide-react";
|
|
import { Fragment, useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Switch } from "@/components/ui/switch";
|
|
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")} ریال`;
|
|
|
|
type TierName = "Free" | "Pro" | "Premium";
|
|
|
|
interface Tier {
|
|
id: TierName;
|
|
name: string;
|
|
monthlyPrice: number;
|
|
annualPrice: number;
|
|
description: string;
|
|
}
|
|
|
|
interface Feature {
|
|
name: string;
|
|
tiers: Partial<Record<TierName, boolean>>;
|
|
tooltip?: string;
|
|
}
|
|
|
|
interface Section {
|
|
name: string;
|
|
features: Feature[];
|
|
}
|
|
|
|
const tiers: Tier[] = [
|
|
{
|
|
id: "Free",
|
|
name: "رایگان",
|
|
monthlyPrice: 0,
|
|
annualPrice: 0,
|
|
description: "مناسب شروع و آشنایی با پلتفرم.",
|
|
},
|
|
{
|
|
id: "Pro",
|
|
name: "حرفه‌ای",
|
|
monthlyPrice: 100000,
|
|
annualPrice: 100000,
|
|
description: "برای تیم‌های کوچک و کسب‌وکارهای در حال رشد.",
|
|
},
|
|
{
|
|
id: "Premium",
|
|
name: "پریمیوم",
|
|
monthlyPrice: 150000,
|
|
annualPrice: 150000,
|
|
description: "برای سازمان‌هایی با نیازهای پیشرفته.",
|
|
},
|
|
];
|
|
|
|
const sections: Section[] = [
|
|
{
|
|
name: "امکانات کلیدی",
|
|
features: [
|
|
{
|
|
name: "هم‌زمانی تیم فروش روی یک قیف",
|
|
tiers: { Free: true, Pro: true, Premium: true },
|
|
tooltip: "همکاری همزمان تیمی روی پروژه‌ها",
|
|
},
|
|
{
|
|
name: "پروژه‌های نامحدود",
|
|
tiers: { Free: true, Pro: true, Premium: true },
|
|
tooltip: "بدون محدودیت در تعداد پروژه‌ها",
|
|
},
|
|
{
|
|
name: "دسترسی‌های سفارشی",
|
|
tiers: { Pro: true, Premium: true },
|
|
tooltip: "تعیین سطح دسترسی برای هر عضو تیم",
|
|
},
|
|
{
|
|
name: "اعضای تیم",
|
|
tiers: {
|
|
Premium: true,
|
|
},
|
|
tooltip: "مدیریت اعضای تیم در سطح سازمانی",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "گزارش‌دهی",
|
|
features: [
|
|
{
|
|
name: "گزارش‌های پایه",
|
|
tiers: { Free: true, Pro: true, Premium: true },
|
|
tooltip: "گزارش‌های ضروری عملکرد و فعالیت",
|
|
},
|
|
{
|
|
name: "گزارش‌های پیشرفته",
|
|
tiers: { Pro: true, Premium: true },
|
|
tooltip: "تحلیل عمیق‌تر با فیلترها و نمودارها",
|
|
},
|
|
{
|
|
name: "گزارش‌های سفارشی فروش",
|
|
tiers: { Premium: true },
|
|
tooltip: "ساخت گزارش متناسب با نیاز سازمان",
|
|
},
|
|
{
|
|
name: "خروجی گرفتن از داده",
|
|
tiers: { Premium: true },
|
|
tooltip: "دریافت خروجی داده در قالب‌های مختلف",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
interface Pricing9Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Pricing9 = ({ className }: Pricing9Props) => {
|
|
const [isAnnual, setIsAnnual] = useState(false);
|
|
return (
|
|
<section className={cn("py-24 sm:py-32", className)}>
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<p className="mt-2 text-xl font-bold tracking-tight sm:text-2xll">
|
|
طرح خود را انتخاب کنید
|
|
</p>
|
|
</div>
|
|
<p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-muted-foreground">
|
|
طرحی را انتخاب کنید که با نیازهای تیم و کسب‌وکار شما هماهنگ باشد.
|
|
</p>
|
|
<div className="mt-10 flex flex-col items-center gap-2 lg:hidden">
|
|
<span className="flex items-center gap-3 text-base font-medium">
|
|
سالانه
|
|
<Switch
|
|
checked={isAnnual}
|
|
onCheckedChange={() => setIsAnnual(!isAnnual)}
|
|
/>
|
|
ماهانه
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
|
|
{tiers.map((tier) => (
|
|
<Card key={tier.id} className="p-8">
|
|
<CardHeader className="p-0">
|
|
<div className="flex flex-col gap-2 text-center">
|
|
<span className="text-xl leading-7 font-bold uppercase">
|
|
<CardTitle className="text-xl">{tier.name}</CardTitle>
|
|
</span>
|
|
<span className="text-sm font-normal text-muted-foreground">
|
|
{tier.description}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col justify-center gap-x-1 pt-8 text-center">
|
|
<span className="text-xl font-bold">
|
|
{formatPrice(
|
|
isAnnual ? tier.annualPrice : tier.monthlyPrice,
|
|
)}
|
|
</span>
|
|
<span className="text-sm leading-6 text-muted-foreground">
|
|
در ماه
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
<Button className="mt-8 w-full">خرید طرح</Button>
|
|
<CardContent className="p-0">
|
|
<ul className="mt-10 space-y-4 text-sm leading-6">
|
|
<TooltipProvider>
|
|
{sections.map((section) => (
|
|
<li key={section.name}>
|
|
<ul role="list" className="space-y-4">
|
|
{section.features.map(
|
|
(feature) =>
|
|
feature.tiers[tier.id] && (
|
|
<li
|
|
key={feature.name}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<span className="flex items-center gap-3">
|
|
<CheckIcon className="h-5 w-5 flex-none" />
|
|
<span>{feature.name}</span>
|
|
</span>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Info className="me-1 h-4 w-4 text-muted-foreground" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{feature.tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</li>
|
|
),
|
|
)}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</TooltipProvider>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<div className="isolate mt-20 hidden lg:block">
|
|
<div className="relative -mx-8">
|
|
{tiers.map((tier, idx) => (
|
|
<div
|
|
className="absolute inset-x-4 inset-y-0 -z-10 flex"
|
|
key={tier.id}
|
|
>
|
|
<div
|
|
className="flex w-1/4 px-4"
|
|
style={{
|
|
marginInlineStart: `${(idx + 1) * 25}%`,
|
|
}}
|
|
>
|
|
<div className="w-full border-s border-e" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
<table className="w-full table-fixed border-separate border-spacing-x-8 text-start">
|
|
<thead>
|
|
<tr>
|
|
<td />
|
|
{tiers.map((tier) => (
|
|
<th key={tier.id} className="px-6 pt-6 xl:px-8 xl:pt-8">
|
|
<div className="flex flex-col gap-2 text-center">
|
|
<span className="text-xl leading-7 font-bold uppercase">
|
|
{tier.name}
|
|
</span>
|
|
<span className="text-sm font-normal text-muted-foreground">
|
|
{tier.description}
|
|
</span>
|
|
</div>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>
|
|
<div className="flex flex-col gap-2">
|
|
<p className="text-sm font-normal text-muted-foreground">
|
|
صورتحساب
|
|
</p>
|
|
<span className="flex items-center gap-3 text-base font-medium">
|
|
سالانه
|
|
<Switch
|
|
checked={isAnnual}
|
|
onCheckedChange={() => setIsAnnual(!isAnnual)}
|
|
/>
|
|
ماهانه
|
|
</span>
|
|
</div>
|
|
</th>
|
|
{tiers.map((tier) => (
|
|
<td key={tier.id} className="px-6 pt-10 xl:px-8">
|
|
<div className="flex flex-col justify-center gap-x-1 text-center">
|
|
<span className="text-xl font-bold">
|
|
{formatPrice(
|
|
isAnnual ? tier.annualPrice : tier.monthlyPrice,
|
|
)}
|
|
</span>
|
|
<span className="text-sm leading-6 text-muted-foreground">
|
|
در ماه
|
|
</span>
|
|
</div>
|
|
<Button className="mt-8 w-full">شروع رایگان</Button>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
{sections.map((section, sectionIdx) => (
|
|
<Fragment key={section.name}>
|
|
<tr>
|
|
<th
|
|
className={cn(
|
|
"pb-4 text-sm leading-6 font-semibold",
|
|
sectionIdx === 0 ? "pt-8" : "pt-16",
|
|
)}
|
|
>
|
|
{section.name}
|
|
</th>
|
|
</tr>
|
|
<TooltipProvider delayDuration={200}>
|
|
{section.features.map((feature) => (
|
|
<tr key={feature.name}>
|
|
<th className="flex items-center justify-between py-4 text-sm leading-6 font-normal">
|
|
{feature.name}
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Info className="me-1 h-4 w-4 text-muted-foreground hover:text-foreground" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>{feature.tooltip}</TooltipContent>
|
|
</Tooltip>
|
|
</th>
|
|
{tiers.map((tier) => (
|
|
<td key={tier.id} className="px-6 py-4 xl:px-8">
|
|
<>
|
|
{feature.tiers[tier.id] ? (
|
|
<CheckIcon className="mx-auto h-5 w-5" />
|
|
) : (
|
|
<MinusIcon className="mx-auto h-5 w-5 text-muted-foreground" />
|
|
)}
|
|
</>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</TooltipProvider>
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
export { Pricing9 };
|