106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
import { HelpCircleIcon } from "lucide-react";
|
|
|
|
import { GlowingEffect } from "@/components/aceternity/glowing-effect";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "quality",
|
|
title: "تریگر رویداد",
|
|
desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
imageAlt: "سازنده گردش‌کار",
|
|
img: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
|
|
badgeTitle: "فرایند هوشمند",
|
|
gridClass: "md:col-span-1",
|
|
},
|
|
{
|
|
id: "innovation-wide",
|
|
title: "شرط هوشمند",
|
|
desc: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
|
|
imageAlt: "نمای اتوماسیون فرایند",
|
|
img: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
|
|
badgeTitle: "اتوماسیون",
|
|
gridClass: "lg:col-span-2",
|
|
},
|
|
{
|
|
id: "performance",
|
|
title: "اعلان خودکار",
|
|
desc: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
|
|
imageAlt: "لاگ اجرای خودکار",
|
|
img: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
|
|
badgeTitle: "گردش‌کار",
|
|
gridClass: "md:col-span-1 lg:row-span-2",
|
|
},
|
|
{
|
|
id: "creativity",
|
|
title: "تأیید چندمرحله‌ای",
|
|
desc: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
|
|
imageAlt: "سازنده گردش‌کار",
|
|
img: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
|
|
badgeTitle: "صرفه‌جویی زمان",
|
|
gridClass: "lg:col-span-2",
|
|
},
|
|
{
|
|
id: "reliability",
|
|
title: "لاگ اجرا",
|
|
desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
imageAlt: "نمای اتوماسیون فرایند",
|
|
img: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
|
|
badgeTitle: "فرایند هوشمند",
|
|
gridClass: "md:col-span-1",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature284Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature284 = ({ className }: Feature284Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("h-full overflow-hidden py-32", className)}
|
|
>
|
|
<div className="container flex h-full w-full items-center justify-center">
|
|
<div className="grid w-full max-w-6xl grid-cols-1 grid-rows-2 gap-4 md:grid-cols-2 lg:h-[800px] lg:grid-cols-4">
|
|
{FEATURES.map((feature) => (
|
|
<div
|
|
key={feature.id}
|
|
className={cn(
|
|
"relative flex flex-col gap-2 rounded-3xl border p-4 text-start",
|
|
feature.gridClass,
|
|
)}
|
|
>
|
|
<GlowingEffect
|
|
spread={40}
|
|
glow={true}
|
|
disabled={false}
|
|
proximity={64}
|
|
inactiveZone={0.01}
|
|
/>
|
|
<div className="flex w-full items-center justify-between">
|
|
<p className="text-muted-foreground">{feature.badgeTitle}</p>
|
|
<HelpCircleIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
</div>
|
|
<div className="w-full flex-1 overflow-hidden rounded-3xl bg-muted">
|
|
<img
|
|
src={feature.img}
|
|
alt={feature.imageAlt}
|
|
className="pointer-events-none h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
<h3 className="mt-4 text-xl font-semibold tracking-tight">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-pretty text-muted-foreground">{feature.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature284 };
|