85 lines
3.4 KiB
TypeScript
85 lines
3.4 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("relative w-full overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="flex min-w-0 flex-col items-center gap-10 md:gap-24 lg:flex-row lg:items-stretch">
|
|
<div className="grid w-full max-w-lg min-w-0 place-items-center overflow-hidden 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="max-w-full rounded-2xl"
|
|
/>
|
|
</div>
|
|
<div className="flex w-full min-w-0 max-w-2xl flex-col justify-between gap-10">
|
|
<div className="min-w-0 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 h-auto max-w-full gap-2 whitespace-normal text-balance"
|
|
>
|
|
داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
|
|
<Zap className="size-4 shrink-0" />
|
|
</Button>
|
|
</div>
|
|
<div className="grid min-w-0 gap-7 sm:grid-cols-2">
|
|
{FEATURES.map((feature) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<div
|
|
key={feature.id}
|
|
className="min-w-0 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 };
|