143 lines
5.2 KiB
TypeScript
143 lines
5.2 KiB
TypeScript
import { Ticket } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface RateCard1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const RateCard1 = ({ className }: RateCard1Props) => {
|
|
const BOOKING_CONDITIONS = [
|
|
"حداقل دوره همکاری ۲ ماه",
|
|
"برای توضیح بیشتر زمان تماس را هماهنگ کنید",
|
|
"هر زمان بخواهید مکث یا لغو کنید",
|
|
];
|
|
|
|
const process = [
|
|
{
|
|
step: "01",
|
|
title: "بازبینی اول ۴۲ ساعت",
|
|
description:
|
|
"تحلیل اولیه قیمت‌گذاری و تحقیق بازار ظرف ۴۲ ساعت انجام می‌شود. پیشنهادهای جامع استراتژی قیمت بر اساس رقبا و جایگاه بازار ارائه می‌شود.",
|
|
},
|
|
{
|
|
step: "02",
|
|
title: "پالایش استراتژی ۷۲ ساعت",
|
|
description:
|
|
"توسعه مدل قیمت‌گذاری با سطوح و پیشنهاد ارزش. همه سناریوها در برابر اهداف کسب‌وکار و حاشیه سود هدف آزمایش و اعتبارسنجی می‌شوند.",
|
|
},
|
|
{
|
|
step: "03",
|
|
title: "برنامه اجرا ۵ روز",
|
|
description:
|
|
"نقشه راه کامل اجرای قیمت با زمان‌بندی و تخصیص منابع. راهنمای گام‌به‌گام برای اعمال قیمت جدید در همه کانال‌ها و بخش‌های مشتری.",
|
|
},
|
|
{
|
|
step: "04",
|
|
title: "آزمایش و بهینه‌سازی ۱ هفته",
|
|
description:
|
|
"راه‌اندازی A/B تست و ابزار پایش عملکرد قیمت. شاخص‌های کلیدی رصد و تنظیمات لحظه‌ای برای بیشینه کردن درآمد و رضایت مشتری.",
|
|
},
|
|
{
|
|
step: "05",
|
|
title: "بازبینی نهایی ۱۰ روز",
|
|
description:
|
|
"ممیزی جامع قیمت با تحلیل عملکرد و پیشنهادهای آینده. مستندات و مواد آموزشی کامل برای مدیریت مستمر قیمت توسط تیم شما.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mt-20 flex grid w-full grid-cols-1 flex-col justify-between gap-15 md:gap-10 lg:grid-cols-7">
|
|
<div className="top-1/5 flex h-fit w-full max-w-lg flex-col gap-15 gap-40 lg:sticky lg:col-span-3">
|
|
<div className="relative flex h-fit w-fit justify-between text-2xll font-semibold tracking-tight lg:text-2xll">
|
|
{" "}
|
|
<h1 className="w-fit text-foreground/20">
|
|
قیمت‌گذاری <br />
|
|
ساده
|
|
</h1>
|
|
<Illustration className="absolute top-0 -right-4" />
|
|
<Illustration className="absolute -bottom-2 -left-4 rotate-180" />
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-4">
|
|
<h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
|
|
۳٬۴۹۹ دلار{" "}
|
|
<sup className="align-top text-base font-normal tracking-normal text-foreground/50 lg:text-lg">
|
|
/ماه
|
|
</sup>{" "}
|
|
</h1>
|
|
<ul className="my-3 space-y-1">
|
|
{BOOKING_CONDITIONS.map((condition, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex items-center gap-4 text-lg tracking-tight text-foreground/50"
|
|
>
|
|
<span className="size-2 bg-orange-500" />
|
|
{condition}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="relative col-span-1 w-full lg:col-span-4 lg:pl-22">
|
|
{process.map((step, index) => (
|
|
<li
|
|
key={index}
|
|
className="relative flex flex-col justify-between gap-10 border-b py-8 md:flex-row lg:py-10"
|
|
>
|
|
<div className="flex size-8 items-center justify-center rounded-lg border border-orange-500 tracking-tighter">
|
|
<Ticket className="storke-1 size-4 text-orange-500" />
|
|
</div>
|
|
<div className="w-fit">
|
|
<h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-xl">
|
|
{step.title}
|
|
</h3>
|
|
<p className="line-clamp-2 text-foreground/50">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { RateCard1 };
|
|
|
|
const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
|
|
return (
|
|
<svg
|
|
width="22"
|
|
height="20"
|
|
viewBox="0 0 22 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<line
|
|
x1="0.607422"
|
|
y1="2.57422"
|
|
x2="21.5762"
|
|
y2="2.57422"
|
|
stroke="#FF0000"
|
|
strokeWidth="4"
|
|
/>
|
|
<line
|
|
x1="19.5762"
|
|
y1="19.624"
|
|
x2="19.5762"
|
|
y2="4.57422"
|
|
stroke="#FF0000"
|
|
strokeWidth="4"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|