114 lines
3.4 KiB
TypeScript
114 lines
3.4 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: "absolute top-0.5 cursor-pointer",
|
|
},
|
|
{
|
|
id: "eliminate-clunky-tools",
|
|
title: "تحلیل پیش‌بین",
|
|
description:
|
|
"ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
icon: <Wrench />,
|
|
className:
|
|
"absolute -end-4 top-5 cursor-pointer xl:end-5 xl:top-0",
|
|
},
|
|
{
|
|
id: "connect-workflows",
|
|
title: "اشتراک گزارش",
|
|
description:
|
|
"نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
|
|
icon: <Cable />,
|
|
className: "absolute bottom-2 start-[25%] cursor-pointer",
|
|
},
|
|
];
|
|
|
|
const CardComponent = ({
|
|
title,
|
|
description,
|
|
icon,
|
|
className,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<div className={className}>
|
|
<Card className="flex max-w-lg transform items-center gap-4 rounded-2xl p-6 text-start shadow-lg transition-transform hover:scale-105">
|
|
<div className="shrink-0 rounded-full bg-muted p-3.5">{icon}</div>
|
|
<div className="font-semibold">
|
|
<p>{title}</p>
|
|
<p className="text-pretty text-muted-foreground">{description}</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface Feature198Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature198 = ({ className }: Feature198Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="relative py-20 md:py-24 lg:py-28">
|
|
<h2 className="mx-auto max-w-5xl text-center text-2xll font-medium text-balance sm:text-2xll lg:text-2xll xl:text-[85px]">
|
|
<span className="text-muted-foreground">
|
|
ابزارهای شما باید با کسب‌وکار شما سازگار شوند.{" "}
|
|
</span>
|
|
<span>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</span>
|
|
</h2>
|
|
|
|
<div className="lg:hidden">
|
|
<div className="grid translate-y-4 justify-items-center gap-2">
|
|
{DATA.map((card) => (
|
|
<CardComponent
|
|
key={card.id}
|
|
title={card.title}
|
|
description={card.description}
|
|
icon={card.icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 max-lg:hidden">
|
|
{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 };
|