78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
import { Combine, Gauge, Zap } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "integration",
|
|
title: "داشبورد سفارشی",
|
|
description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
|
|
icon: Combine,
|
|
},
|
|
{
|
|
id: "performance",
|
|
title: "فیلتر پیشرفته",
|
|
description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
|
|
icon: Gauge,
|
|
},
|
|
];
|
|
|
|
interface Feature204Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature204 = ({ className }: Feature204Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center gap-10 md:gap-24 lg:flex-row lg:items-stretch">
|
|
<div className="grid w-full max-w-lg place-items-center rounded-2xl bg-[url('/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg')] bg-cover bg-center bg-no-repeat px-8 py-10 sm:px-16 sm:py-20">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="گزارش عملکرد"
|
|
className="rounded-2xl"
|
|
/>
|
|
</div>
|
|
<div className="flex max-w-2xl flex-col justify-between gap-10">
|
|
<div className="text-center lg:text-start">
|
|
<h2 className="text-2xll font-medium text-balance lg:text-2xll">
|
|
داده پراکنده را به تصمیم تبدیل کنید
|
|
</h2>
|
|
<p className="mt-6 text-lg text-pretty text-muted-foreground">
|
|
گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
|
|
</p>
|
|
<Button size="lg" className="mt-8 gap-2">
|
|
داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
|
|
<Zap className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="grid gap-7 sm:grid-cols-2">
|
|
{FEATURES.map((feature) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<div
|
|
key={feature.id}
|
|
className="text-center lg:text-start"
|
|
>
|
|
<Icon className="mx-auto size-8 lg:ms-0 lg:me-auto" />
|
|
<h3 className="mt-4 mb-2 text-lg font-semibold">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-pretty text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature204 };
|