330 lines
12 KiB
TypeScript
330 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { Check, ChevronDown, Info, X } from "lucide-react";
|
||
import { Fragment, useState } from "react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Collapsible,
|
||
CollapsibleContent,
|
||
CollapsibleTrigger,
|
||
} from "@/components/ui/collapsible";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
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")} ریال`;
|
||
|
||
const plans = [
|
||
{
|
||
title: "رایگان",
|
||
price: { monthly: 9, annually: 90000 },
|
||
href: "#",
|
||
recommended: false,
|
||
},
|
||
{
|
||
title: "پایه",
|
||
price: { monthly: 50, annually: 450000 },
|
||
href: "#",
|
||
recommended: false,
|
||
},
|
||
{
|
||
title: "تیم",
|
||
price: { monthly: 100, annually: 900000 },
|
||
href: "#",
|
||
recommended: true,
|
||
},
|
||
{
|
||
title: "سازمانی",
|
||
price: { monthly: 200, annually: 160000 },
|
||
href: "#",
|
||
recommended: false,
|
||
},
|
||
];
|
||
|
||
const featureMatrix = [
|
||
{
|
||
title: "نمای کلی",
|
||
features: [
|
||
{
|
||
title: "امکان همیشه شامل‌شده",
|
||
inclusions: [
|
||
{
|
||
plan: "رایگان",
|
||
content:
|
||
"امکانات پایه برای شروع سریع و بدون هزینه.",
|
||
},
|
||
{
|
||
plan: "پایه",
|
||
content:
|
||
"امکانات بیشتر برای کسب‌وکارهای کوچک.",
|
||
},
|
||
{
|
||
plan: "تیم",
|
||
content: "امکانات تیمی برای همکاری بهتر.",
|
||
},
|
||
{
|
||
plan: "سازمانی",
|
||
content: "امکانات کامل برای سازمان‌های بزرگ.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "تعداد محصولات",
|
||
info: "حداکثر تعداد محصول قابل ثبت",
|
||
inclusions: [
|
||
{ plan: "رایگان", content: "۱" },
|
||
{ plan: "پایه", content: "۱" },
|
||
{ plan: "تیم", content: "۳" },
|
||
{ plan: "سازمانی", content: "۵" },
|
||
],
|
||
},
|
||
{
|
||
title: "تعداد تراکنش‌ها",
|
||
info: "سقف تراکنش‌های ماهانه",
|
||
inclusions: [
|
||
{ plan: "رایگان", content: "۳۰ در ماه" },
|
||
{ plan: "پایه", content: "نامحدود" },
|
||
{ plan: "تیم", content: "نامحدود" },
|
||
{ plan: "سازمانی", content: "نامحدود" },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "سایر امکانات",
|
||
features: [
|
||
{
|
||
title: "امکان پایه",
|
||
inclusions: [
|
||
{
|
||
plan: "رایگان",
|
||
content: <Check className="size-4 lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "پایه",
|
||
content: <Check className="size-4 lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "تیم",
|
||
content: <Check className="size-4 lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "سازمانی",
|
||
content: <Check className="size-4 lg:size-5" />,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "امکان سازمانی",
|
||
info: "فقط در طرح سازمانی در دسترس است",
|
||
inclusions: [
|
||
{
|
||
plan: "رایگان",
|
||
content: <X className="size-4 text-muted-foreground lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "پایه",
|
||
content: <X className="size-4 text-muted-foreground lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "تیم",
|
||
content: <X className="size-4 text-muted-foreground lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "سازمانی",
|
||
content: <Check className="size-5" />,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "امکان اختیاری",
|
||
info: "به‌صورت افزونه قابل فعال‌سازی است",
|
||
inclusions: [
|
||
{
|
||
plan: "رایگان",
|
||
content: <X className="size-4 text-muted-foreground lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "پایه",
|
||
content: <X className="size-4 text-muted-foreground lg:size-5" />,
|
||
},
|
||
{
|
||
plan: "تیم",
|
||
content: <Badge>افزونه</Badge>,
|
||
},
|
||
{
|
||
plan: "سازمانی",
|
||
content: <Badge>افزونه</Badge>,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
interface Pricing11Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Pricing11 = ({ className }: Pricing11Props) => {
|
||
const [billing, setBilling] = useState<"monthly" | "annually">("monthly");
|
||
return (
|
||
<section className={cn("py-32", className)}>
|
||
<div className="container mb-8 lg:mb-0">
|
||
<div className="grid grid-cols-2 gap-y-12 md:gap-y-16">
|
||
<div className="col-span-2 flex flex-col lg:col-span-1">
|
||
<h1 className="my-6 text-3xl font-bold text-pretty md:text-xl xl:text-2xll">
|
||
طرح‌های تعرفه
|
||
</h1>
|
||
<p className="text-muted-foreground lg:text-xl">
|
||
طرح مناسب خود را انتخاب کنید و همین امروز شروع رایگان.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-background lg:sticky lg:top-16">
|
||
<div className="mb-8 pt-8">
|
||
<div className="grid items-end gap-6 border-b border-border pb-8 lg:grid-cols-6">
|
||
<div className="col-span-2">
|
||
<div className="flex h-full flex-col justify-end">
|
||
<span className="mb-2 text-xs font-medium text-muted-foreground">
|
||
صورتحساب
|
||
</span>
|
||
<Tabs
|
||
value={billing}
|
||
onValueChange={setBilling as (value: string) => void}
|
||
>
|
||
<TabsList>
|
||
<TabsTrigger value="monthly">ماهانه</TabsTrigger>
|
||
<TabsTrigger value="annually">سالانه</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
{plans.map((plan) => (
|
||
<div
|
||
key={plan.title}
|
||
className="rounded-lg border border-border p-3 2xl:p-4"
|
||
>
|
||
<h3 className="mb-1 text-xl font-medium xl:text-xl">
|
||
{plan.title}
|
||
</h3>
|
||
<p className="mb-4 text-sm font-medium text-muted-foreground">
|
||
{formatPrice(plan.price[billing])}
|
||
<span className="hidden 2xl:inline"> در ماه</span>
|
||
</p>
|
||
<Button
|
||
variant={plan.recommended ? "default" : "outline"}
|
||
className="w-full"
|
||
>
|
||
<span className="2xl:hidden">ثبت‌نام</span>
|
||
<span className="hidden 2xl:inline">رایگان شروع رایگان</span>
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-8 lg:space-y-14">
|
||
{featureMatrix.map((category) => (
|
||
<div key={category.title}>
|
||
<h3 className="mb-6 text-lg font-medium lg:mb-3">
|
||
{category.title}
|
||
</h3>
|
||
<div className="space-y-4 lg:space-y-0">
|
||
<TooltipProvider delayDuration={150}>
|
||
{category.features.map((feature) => (
|
||
<Fragment key={feature.title}>
|
||
<dl className="hidden grid-cols-6 gap-6 border-b border-border lg:grid">
|
||
<dt className="col-span-2 justify-between py-4 pb-4">
|
||
<Tooltip>
|
||
<h4 className="group flex min-h-6 items-center gap-x-1 font-medium">
|
||
{feature.title}{" "}
|
||
{feature.info && (
|
||
<TooltipTrigger asChild>
|
||
<Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
|
||
</TooltipTrigger>
|
||
)}
|
||
</h4>
|
||
{feature.info && (
|
||
<TooltipContent>{feature.info}</TooltipContent>
|
||
)}
|
||
</Tooltip>
|
||
</dt>
|
||
{feature.inclusions.map((inclusion) => (
|
||
<dd
|
||
key={inclusion.plan}
|
||
className="hidden py-4 text-sm text-muted-foreground lg:block"
|
||
>
|
||
{inclusion.content}
|
||
</dd>
|
||
))}
|
||
</dl>
|
||
<Collapsible
|
||
className="group lg:hidden"
|
||
defaultOpen={false}
|
||
>
|
||
<dl
|
||
key={feature.title}
|
||
className="border-b border-border"
|
||
>
|
||
<CollapsibleTrigger className="w-full">
|
||
<dt className="flex items-center justify-between pb-4">
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<h4 className="group flex items-center gap-x-1 text-sm font-medium md:text-base">
|
||
{feature.title}
|
||
{feature.info && (
|
||
<Info className="ms-2 size-4 cursor-pointer text-muted-foreground group-hover:text-accent-foreground" />
|
||
)}
|
||
</h4>
|
||
</TooltipTrigger>
|
||
{feature.info && (
|
||
<TooltipContent>
|
||
{feature.info}
|
||
</TooltipContent>
|
||
)}
|
||
</Tooltip>
|
||
|
||
<ChevronDown className='size-5 transition-transform group-data-[state="open"]:rotate-180' />
|
||
</dt>
|
||
</CollapsibleTrigger>
|
||
<CollapsibleContent>
|
||
{feature.inclusions.map((inclusion) => (
|
||
<dd
|
||
key={inclusion.plan}
|
||
className="flex items-center border-b border-border py-3 text-xs text-muted-foreground last:border-b-0 md:py-3.5"
|
||
>
|
||
<div className="w-1/2 md:w-1/4">
|
||
{inclusion.plan}
|
||
</div>
|
||
{inclusion.content}
|
||
</dd>
|
||
))}
|
||
</CollapsibleContent>
|
||
</dl>
|
||
</Collapsible>
|
||
</Fragment>
|
||
))}
|
||
</TooltipProvider>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="mt-4 hidden text-xs text-muted-foreground md:block">
|
||
* توضیحات و شرایط تکمیلی
|
||
</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Pricing11 };
|