94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const team = [
|
|
{
|
|
name: "تیم فروش",
|
|
role: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
alt: "صف اولویت سرنخ‌ها",
|
|
},
|
|
{
|
|
name: "عملکرد فروش",
|
|
role: "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
|
|
alt: "داشبورد عملکرد فروش",
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{
|
|
value: `${(20).toLocaleString("fa-IR")}+`,
|
|
description: "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
|
|
},
|
|
{
|
|
value: `${(100).toLocaleString("fa-IR")}+`,
|
|
description: "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
|
|
},
|
|
{
|
|
value: (25).toLocaleString("fa-IR"),
|
|
description: "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
|
|
},
|
|
{
|
|
value: `>${(30000).toLocaleString("fa-IR")}`,
|
|
description: "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
|
|
},
|
|
];
|
|
|
|
interface Feature120Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature120 = ({ className }: Feature120Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid items-center gap-10 md:gap-20 lg:grid-cols-2">
|
|
<div className="flex flex-col gap-2.5 py-8 text-start">
|
|
<h1 className="text-xl font-bold lg:text-2xll">
|
|
پیش‌بینی درآمد را دقیق‌تر کنید
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
هر فرصت فروش را از دست ندهید
|
|
</p>
|
|
<div className="flex flex-col gap-6 py-10 sm:flex-row sm:gap-16">
|
|
{team.map((member) => (
|
|
<div key={member.name} className="flex gap-4 leading-5">
|
|
<Avatar className="size-9 rounded-full ring-1 ring-input">
|
|
<AvatarImage src={member.avatar} alt={member.alt} />
|
|
</Avatar>
|
|
<div className="text-sm">
|
|
<p className="font-medium">{member.name}</p>
|
|
<p className="text-muted-foreground">{member.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button className="w-fit">شروع کنید</Button>
|
|
</div>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="نمودار نرخ تبدیل"
|
|
className="h-full max-h-[420px] w-full rounded-xl object-cover"
|
|
/>
|
|
</div>
|
|
<Separator className="my-12" />
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{stats.map((stat) => (
|
|
<div key={stat.description} className="text-start">
|
|
<h2 className="mb-2 text-xl font-semibold md:text-2xll">
|
|
{stat.value}
|
|
</h2>
|
|
<p className="text-muted-foreground">{stat.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature120 };
|