96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DataItem = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
id: 1,
|
|
title: "همکاری فروش و بازاریابی",
|
|
description:
|
|
"اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "اولویت‌بندی سرنخ",
|
|
description:
|
|
"سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "قالب پیشنهاد فروش",
|
|
description:
|
|
"پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
|
|
},
|
|
];
|
|
|
|
type StepItemProps = {
|
|
step: DataItem;
|
|
isLast: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
const StepItem: React.FC<StepItemProps> = ({ step, isLast, className }) => {
|
|
return (
|
|
<div className={cn("max-lg:flex max-lg:gap-4", className)}>
|
|
<div className="relative lg:py-6">
|
|
<div
|
|
className={cn(
|
|
"absolute h-full w-1 -translate-x-1/2 translate-y-11 bg-muted/50 bg-linear-to-b max-lg:start-1/2 lg:top-1/2 lg:h-1 lg:w-full lg:translate-x-6 lg:-translate-y-1/2 lg:bg-linear-to-r",
|
|
"rtl:lg:-translate-x-6 rtl:lg:bg-linear-to-l",
|
|
isLast && "from-muted/50 to-background",
|
|
)}
|
|
/>
|
|
<div className="relative z-0 grid size-11 place-content-center rounded-full border-4 bg-background">
|
|
<p className="text-lg font-bold">
|
|
{step.id.toLocaleString("fa-IR")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="max-lg:mt-2 text-start">
|
|
<p className="text-lg font-semibold">{step.title}</p>
|
|
<p className="mt-2 text-pretty text-muted-foreground">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface Feature187Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature187 = ({ className }: Feature187Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div>
|
|
<h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
|
|
پیش‌بینی درآمد را دقیق‌تر کنید
|
|
</h2>
|
|
<p className="mt-8 text-pretty text-muted-foreground md:text-lg">
|
|
با یادآورهای هوشمند و اولویت‌بندی سرنخ، زمان تیم روی معاملات با احتمال بیشتر صرف می‌شود و چرخه فروش کوتاه‌تر می‌شود.
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 grid gap-10 lg:grid-cols-3 lg:gap-6">
|
|
{DATA.map((step, index) => (
|
|
<StepItem
|
|
key={step.id}
|
|
step={step}
|
|
isLast={index === DATA.length - 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature187 };
|