97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const cards = [
|
|
{
|
|
href: "#",
|
|
title: "داشبورد سفارشی",
|
|
description: "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1698516923132-b0236bc8f3ef.jpg",
|
|
imageAlt: "گزارش عملکرد",
|
|
},
|
|
{
|
|
href: "#",
|
|
title: "فیلتر پیشرفته",
|
|
description: "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1698402167275-7fbceb30989b.jpg",
|
|
imageAlt: "داشبورد تحلیل داده",
|
|
},
|
|
{
|
|
href: "#",
|
|
title: "نمودار روند",
|
|
description: "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1698402178229-863420a8ecf6.jpg",
|
|
imageAlt: "نمودار شاخص کلیدی",
|
|
},
|
|
];
|
|
|
|
interface Feature98Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature98 = ({ className }: Feature98Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div>
|
|
<div className="container">
|
|
<div className="grid gap-8 lg:grid-cols-5 lg:gap-20">
|
|
<div className="lg:col-span-3">
|
|
<p className="text-lg text-muted-foreground">
|
|
گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
|
|
</p>
|
|
<h2 className="mt-6 text-xl lg:text-2xll">
|
|
داده پراکنده را به تصمیم تبدیل کنید
|
|
</h2>
|
|
</div>
|
|
<div className="lg:col-span-2">
|
|
<p className="text-lg text-muted-foreground">
|
|
داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
|
|
</p>
|
|
<div className="mt-10 flex gap-2">
|
|
<Button size="lg">شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.</Button>
|
|
<Button size="lg" variant="secondary">
|
|
تحلیل داده
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className="mt-24 mb-6" />
|
|
<div className="container grid gap-8 lg:grid-cols-3">
|
|
{cards.map((card) => (
|
|
<a
|
|
key={card.title}
|
|
href={card.href}
|
|
className="group relative grid overflow-hidden sm:grid-cols-2 lg:grid-cols-1"
|
|
>
|
|
<div className="absolute start-0 top-0 z-20 flex w-full justify-between gap-2 p-6 text-background sm:bottom-0 sm:start-1/2 sm:w-1/2 sm:flex-col lg:bottom-auto lg:start-0 lg:w-full lg:flex-row lg:items-center">
|
|
<div>
|
|
<h3 className="text-lg font-medium">{card.title}</h3>
|
|
<p>{card.description}</p>
|
|
</div>
|
|
<span className="flex size-12 shrink-0 items-center justify-center rounded-full bg-background text-primary sm:self-end lg:size-14 lg:self-auto">
|
|
<ArrowRight className="rtl:rotate-180" />
|
|
</span>
|
|
</div>
|
|
<img
|
|
src={card.image}
|
|
alt={card.imageAlt}
|
|
className="scale-105 transition-all duration-500 group-hover:scale-[1.1]"
|
|
/>
|
|
<div className="z-10 bg-primary" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature98 };
|