81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
|
|
|
const statsData = [
|
|
{
|
|
logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
avatarFallback: "",
|
|
logoAlt: "لوگوی شرکت نمونه ۱",
|
|
avatarAlt: "تصویر مشتری ۱",
|
|
heading: `${formatNumber(89)}٪`,
|
|
text: "کاهش بودجه کمپینهای بدون تبدیل",
|
|
},
|
|
{
|
|
logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-2.webp",
|
|
avatarFallback: "",
|
|
logoAlt: "لوگوی شرکت نمونه ۲",
|
|
avatarAlt: "تصویر مشتری ۲",
|
|
heading: `${formatNumber(7)} ساعت`,
|
|
text: "صرفهجویی روزانه در بهینهسازی کمپین",
|
|
},
|
|
{
|
|
logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
|
|
avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
|
|
avatarFallback: "",
|
|
logoAlt: "لوگوی شرکت نمونه ۳",
|
|
avatarAlt: "تصویر مشتری ۳",
|
|
heading: `${formatNumber(2540)}٪`,
|
|
text: "رشد بازگشت سرمایه تبلیغاتی مشتریان",
|
|
},
|
|
];
|
|
|
|
interface Stats10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Stats10 = ({ className }: Stats10Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-12 md:py-20", className)}>
|
|
<div className="container max-w-[75rem]">
|
|
<div className="pt-10 pb-10">
|
|
<div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">
|
|
{statsData.map(
|
|
(
|
|
{ logo, avatar, avatarFallback, logoAlt, avatarAlt, heading, text },
|
|
i,
|
|
) => (
|
|
<a href="#" key={`link${i}`} className="block w-full">
|
|
<Card className="rounded-3xl border-2 p-10 transition hover:-translate-y-3 hover:border-primary">
|
|
<CardContent className="block p-0">
|
|
<div className="flex items-center gap-7">
|
|
<Avatar className="h-14 w-14 overflow-hidden rounded-full border">
|
|
<AvatarImage src={avatar} alt={avatarAlt} />
|
|
<AvatarFallback>{avatarFallback}</AvatarFallback>
|
|
</Avatar>
|
|
<img src={logo} alt={logoAlt} className="h-6" />
|
|
</div>
|
|
<div className="mt-6 text-2xll leading-tight font-semibold">
|
|
{heading}
|
|
</div>
|
|
<p className="mb-5 max-w-52 text-lg font-medium">
|
|
{text}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Stats10 };
|