89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
import { ArrowLeft } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const formatDecimal = (value: number) =>
|
|
new Intl.NumberFormat("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
}).format(value);
|
|
|
|
const formatPercent = (value: number) => `${formatDecimal(value)}٪`;
|
|
|
|
interface Stats8Props {
|
|
className?: string;
|
|
heading?: string;
|
|
description?: string;
|
|
link?: {
|
|
text: string;
|
|
url: string;
|
|
};
|
|
stats?: Array<{
|
|
id: string;
|
|
value: string;
|
|
label: string;
|
|
}>;
|
|
}
|
|
|
|
const Stats8 = ({
|
|
heading = "تأثیر روی درآمد و عملیات فروش",
|
|
description = "معیارهایی که مدیران فروش برای تصمیم‌گیری روزانه به آن‌ها تکیه می‌کنند",
|
|
link = {
|
|
text: "مشاهده گزارش عملکرد کامل",
|
|
url: "https://www.ShadcnBlocks",
|
|
},
|
|
stats = [
|
|
{
|
|
id: "stat-1",
|
|
value: `${formatNumber(250)}٪+`,
|
|
label: "میانگین رشد تعامل با سرنخ‌ها",
|
|
},
|
|
{
|
|
id: "stat-2",
|
|
value: `${formatDecimal(2.5)} میلیون ریال`,
|
|
label: "صرفه‌جویی سالانه در هزینه عملیات فروش",
|
|
},
|
|
{
|
|
id: "stat-3",
|
|
value: `${formatNumber(200)}+`,
|
|
label: "اتصال به ابزارهای فروش و بازاریابی",
|
|
},
|
|
{
|
|
id: "stat-4",
|
|
value: formatPercent(99.9),
|
|
label: "آپ‌تایم پلتفرم در سال گذشته",
|
|
},
|
|
],
|
|
className,
|
|
}: Stats8Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col gap-4">
|
|
<h2 className="text-xl font-bold md:text-xl">{heading}</h2>
|
|
<p>{description}</p>
|
|
<a
|
|
href={link.url}
|
|
className="flex items-center gap-1 font-bold hover:underline"
|
|
>
|
|
{link.text}
|
|
<ArrowLeft className="h-auto w-4" />
|
|
</a>
|
|
</div>
|
|
<div className="mt-14 grid gap-x-5 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
|
|
{stats.map((stat) => (
|
|
<div key={stat.id} className="flex flex-col gap-5">
|
|
<div className="text-2xll font-bold">{stat.value}</div>
|
|
<p>{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Stats8 };
|