106 lines
4.5 KiB
TypeScript
106 lines
4.5 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("relative w-full overflow-hidden py-32", className)}
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="container min-w-0">
|
|
<div className="grid min-w-0 gap-8 lg:grid-cols-5 lg:gap-20">
|
|
<div className="min-w-0 lg:col-span-3">
|
|
<p className="text-balance text-lg text-muted-foreground">
|
|
گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
|
|
</p>
|
|
<h2 className="mt-6 text-balance text-xl lg:text-2xll">
|
|
داده پراکنده را به تصمیم تبدیل کنید
|
|
</h2>
|
|
</div>
|
|
<div className="min-w-0 lg:col-span-2">
|
|
<p className="text-balance text-lg text-muted-foreground">
|
|
داده فروش، بازاریابی و پشتیبانی در داشبوردهای یکپارچه جمع می‌شود. مدیران بدون انتظار گزارش دستی، وضعیت واقعی کسب‌وکار را می‌بینند.
|
|
</p>
|
|
<div className="mt-10 flex min-w-0 flex-wrap gap-2">
|
|
<Button
|
|
size="lg"
|
|
className="h-auto max-w-full whitespace-normal text-balance"
|
|
>
|
|
شاخص‌های مهم را شخصی‌سازی کنید و تغییرات غیرعادی را زودتر تشخیص دهید. تیم‌ها با دید مشترک، سریع‌تر هم‌راستا می‌شوند.
|
|
</Button>
|
|
<Button size="lg" variant="secondary" className="shrink-0">
|
|
تحلیل داده
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className="mt-24 mb-6" />
|
|
<div className="container grid min-w-0 gap-8 lg:grid-cols-3">
|
|
{cards.map((card) => (
|
|
<a
|
|
key={card.title}
|
|
href={card.href}
|
|
className="group relative grid min-w-0 overflow-hidden sm:grid-cols-2 lg:grid-cols-1"
|
|
>
|
|
<div className="absolute start-0 top-0 z-20 flex w-full min-w-0 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 className="min-w-0">
|
|
<h3 className="text-lg font-medium">{card.title}</h3>
|
|
<p className="text-balance">{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="max-w-full scale-105 transition-all duration-500 group-hover:scale-[1.1]"
|
|
/>
|
|
<div className="z-10 bg-primary" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature98 };
|