100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const heroFeature = {
|
|
title: "گزارش زمان‌بندی‌شده",
|
|
description:
|
|
"ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg",
|
|
imageAlt: "گزارش عملکرد",
|
|
};
|
|
|
|
const tallFeature = {
|
|
title: "تحلیل کوHORT",
|
|
description:
|
|
"داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
|
|
imageAlt: "داشبورد تحلیل داده",
|
|
};
|
|
|
|
const subFeatures = [
|
|
{
|
|
title: "مقایسه دوره‌ای",
|
|
description:
|
|
"تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
imageAlt: "نمودار شاخص کلیدی",
|
|
},
|
|
{
|
|
title: "خروجی گزارش",
|
|
description:
|
|
"وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
imageAlt: "گزارش عملکرد",
|
|
},
|
|
];
|
|
|
|
interface Feature59Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature59 = ({ className }: Feature59Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col gap-6 lg:px-64">
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<div className="flex flex-col rounded-lg border border-border bg-accent p-8 lg:col-span-2">
|
|
<p className="mb-2 text-sm font-semibold md:text-base">
|
|
{heroFeature.title}
|
|
</p>
|
|
<p className="mb-8 text-sm text-muted-foreground md:text-base">
|
|
{heroFeature.description}
|
|
</p>
|
|
<img
|
|
src={heroFeature.image}
|
|
alt={heroFeature.imageAlt}
|
|
className="rounded-md lg:mt-auto lg:w-full"
|
|
/>
|
|
</div>
|
|
<div className="grid-cols-2 gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid md:p-8 lg:row-span-2 lg:flex lg:flex-col">
|
|
<div className="flex flex-col items-start">
|
|
<p className="mb-2 text-sm font-semibold md:text-base">
|
|
{tallFeature.title}
|
|
</p>
|
|
<p className="mb-8 text-sm text-muted-foreground md:text-base">
|
|
{tallFeature.description}
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={tallFeature.image}
|
|
alt={tallFeature.imageAlt}
|
|
className="rounded-md lg:mt-auto lg:w-full"
|
|
/>
|
|
</div>
|
|
{subFeatures.map((feature) => (
|
|
<div
|
|
key={feature.title}
|
|
className="grid-cols-2 gap-x-20 rounded-lg border border-border bg-accent p-6 md:grid md:p-8 lg:flex lg:flex-col"
|
|
>
|
|
<div className="flex flex-col">
|
|
<p className="mb-2 text-sm font-semibold md:text-base">
|
|
{feature.title}
|
|
</p>
|
|
<p className="mb-8 text-sm text-muted-foreground md:text-base">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.imageAlt}
|
|
className="rounded-md lg:mt-auto lg:w-full"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature59 };
|