106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Target } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { BorderButton } from "@/components/shadcnblocks/border-button";
|
|
import { useGoogleFont } from "@/hooks/use-google-font";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface RateCard2Props {
|
|
className?: string;
|
|
}
|
|
|
|
const RateCard2 = ({ className }: RateCard2Props) => {
|
|
const pricingPlans = [
|
|
{
|
|
title: "نگهداری ماهانه",
|
|
description:
|
|
"پکیج مناسب تیم‌هایی که به‌صورت مداوم به تحلیل قیمت، بازبینی و پشتیبانی استراتژیک نیاز دارند.",
|
|
price: "۳٬۴۹۹ دلار",
|
|
period: "/ماه",
|
|
features: [
|
|
"حداکثر ۲ درخواست فعال هم‌زمان",
|
|
"بازبینی نامحدود",
|
|
"دسترسی پشتیبانی اولویت‌دار ۲۴/۷",
|
|
"مدیر حساب اختصاصی",
|
|
],
|
|
},
|
|
{
|
|
title: "پکیج پریمیوم",
|
|
description:
|
|
"برای سازمان‌هایی که به تحلیل پیشرفته، یکپارچه‌سازی سفارشی و جلسات استراتژی منظم نیاز دارند.",
|
|
price: "۵٬۹۹۹ دلار",
|
|
period: "/ماه",
|
|
features: [
|
|
"حداکثر ۵ درخواست فعال هم‌زمان",
|
|
"داشبورد تحلیل پیشرفته",
|
|
"یکپارچه‌سازی‌های سفارشی",
|
|
"مشاوره استراتژی هفتگی",
|
|
],
|
|
},
|
|
];
|
|
|
|
useGoogleFont("Antonio");
|
|
return (
|
|
<section
|
|
className={cn("bg-background py-32", className)}
|
|
style={
|
|
{
|
|
"--font-mono": "Antonio",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<div className="container flex flex-col items-center justify-center gap-8 lg:gap-15">
|
|
<div className="flex w-full max-w-6xl flex-col items-center justify-between gap-4 lg:flex-row">
|
|
{pricingPlans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex w-full flex-col justify-between gap-10 rounded-3xl bg-muted p-10"
|
|
>
|
|
<div>
|
|
<h2 className="text-3xl font-semibold tracking-tight">
|
|
{plan.title}
|
|
</h2>
|
|
<p className="mt-4 w-full max-w-xs text-lg tracking-tight text-foreground/30">
|
|
{plan.description}
|
|
</p>
|
|
</div>
|
|
<ul className="mt-5">
|
|
<li className="mb-4 text-xs font-medium text-foreground/40 uppercase">
|
|
شامل می‌شود:
|
|
</li>
|
|
{plan.features.map((feature, featureIndex) => (
|
|
<li
|
|
key={featureIndex}
|
|
className="mt-1 flex items-center gap-2 font-medium"
|
|
>
|
|
<Target className="size-4" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-10 flex items-end justify-between">
|
|
<h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
|
|
<span className="font-mono">{plan.price}</span>
|
|
<sup className="ps-2 align-top text-sm font-normal tracking-normal tracking-tight lg:text-base">
|
|
{plan.period}
|
|
</sup>
|
|
</h1>
|
|
<BorderButton
|
|
variant="outline"
|
|
className="relative rounded-none !px-4 uppercase shadow-none"
|
|
>
|
|
شروع کنید
|
|
</BorderButton>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { RateCard2 };
|