105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
import { AudioLines, Box, Globe, ShieldUser, Users } from "lucide-react";
|
|
|
|
import { SparklesCore } from "@/components/shadcnblocks/sparkles";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "developer-friendly",
|
|
icon: Globe,
|
|
title: "گزارش‌ساز",
|
|
description:
|
|
"گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
},
|
|
{
|
|
id: "fast",
|
|
icon: Box,
|
|
title: "Pivot تعاملی",
|
|
description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
},
|
|
{
|
|
id: "secure",
|
|
icon: ShieldUser,
|
|
title: "داشبورد مدیریتی",
|
|
description:
|
|
"نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
|
|
},
|
|
{
|
|
id: "collaboration",
|
|
icon: Users,
|
|
title: "اتصال منبع",
|
|
description:
|
|
"داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
|
|
},
|
|
{
|
|
id: "voice",
|
|
icon: AudioLines,
|
|
title: "سطح دسترسی",
|
|
description: "دسترسی مبتنی بر نقش را برای هر گزارش و داشبورد تنظیم کنید.",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature294Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature294 = ({ className }: Feature294Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn(
|
|
"dark relative w-screen overflow-hidden bg-background py-32 text-foreground",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative container flex h-full flex-col items-center justify-center">
|
|
<div className="w-full max-w-lg text-center">
|
|
<h1 className="relative z-20 text-center text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-2xll">
|
|
تصمیم استراتژیک را داده‌محور کنید
|
|
</h1>
|
|
<p className="mt-4 text-pretty text-muted-foreground/50">
|
|
داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
|
|
</p>
|
|
</div>
|
|
<div className="relative mt-5 mb-10 h-40 w-[40rem]">
|
|
<div className="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm" />
|
|
<div className="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent" />
|
|
<div className="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm" />
|
|
<div className="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
|
|
|
|
<SparklesCore
|
|
background="transparent"
|
|
minSize={0.4}
|
|
maxSize={1}
|
|
particleDensity={500}
|
|
className="h-full w-full"
|
|
particleColor="#FFFFFF"
|
|
/>
|
|
|
|
<div className="absolute inset-0 h-full w-full bg-background [mask-image:radial-gradient(350px_130px_at_top,transparent_20%,white)]" />
|
|
</div>
|
|
|
|
<div className="grid w-full max-w-5xl grid-cols-1 gap-15 md:grid-cols-2 lg:grid-cols-3">
|
|
{FEATURES.map((feature) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<div key={feature.id} className="flex gap-4 text-start">
|
|
<IconComponent className="w-12 shrink-0 stroke-1 text-sky-500" />
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-medium">{feature.title}</h3>
|
|
<p className="text-pretty text-muted-foreground/30">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature294 };
|