109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Cable, Workflow, Wrench } from "lucide-react";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DataItem {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
id: "simplify-workflow",
|
|
title: "سطح دسترسی",
|
|
description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
icon: <Workflow />,
|
|
className: "lg:mt-0",
|
|
},
|
|
{
|
|
id: "eliminate-clunky-tools",
|
|
title: "تحلیل پیش‌بین",
|
|
description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
icon: <Wrench />,
|
|
className: "lg:mt-10",
|
|
},
|
|
{
|
|
id: "connect-workflows",
|
|
title: "اشتراک گزارش",
|
|
description: "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
|
|
icon: <Cable />,
|
|
className: "lg:mt-4",
|
|
},
|
|
];
|
|
|
|
const CardComponent = ({
|
|
title,
|
|
description,
|
|
icon,
|
|
className,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
"flex w-full max-w-lg transform items-center gap-4 rounded-2xl p-6 text-start shadow-lg transition-transform hover:scale-105",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="shrink-0 rounded-full bg-muted p-3.5">{icon}</div>
|
|
<div className="min-w-0 font-semibold">
|
|
<p className="text-balance break-words">{title}</p>
|
|
<p className="text-pretty break-words text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
interface Feature198Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature198 = ({ className }: Feature198Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container min-w-0">
|
|
<div className="relative flex w-full min-w-0 flex-col gap-12 py-12 md:gap-16 md:py-16 lg:py-20">
|
|
<h2 className="mx-auto max-w-5xl text-center text-3xl font-medium text-balance sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
|
|
<span className="text-muted-foreground">
|
|
ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "}
|
|
</span>
|
|
<span>
|
|
داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون
|
|
اینکه هر بار به تیم داده وابسته باشند.
|
|
</span>
|
|
</h2>
|
|
|
|
<div className="mx-auto grid w-full min-w-0 max-w-6xl justify-items-center gap-4 sm:gap-6 lg:grid-cols-3 lg:items-start lg:gap-8">
|
|
{DATA.map((card) => (
|
|
<CardComponent
|
|
key={card.id}
|
|
title={card.title}
|
|
description={card.description}
|
|
icon={card.icon}
|
|
className={card.className}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature198 };
|