114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import { ArrowRight, Flame } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const cards = [
|
|
{
|
|
title: "لاگ اجرا",
|
|
description:
|
|
"با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
wide: false,
|
|
},
|
|
{
|
|
title: "قالب آماده",
|
|
description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
wide: true,
|
|
},
|
|
{
|
|
title: "اتصال ابزار",
|
|
description:
|
|
"تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
wide: false,
|
|
},
|
|
{
|
|
title: "سازنده گردش‌کار",
|
|
description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
wide: false,
|
|
},
|
|
{
|
|
title: "تریگر رویداد",
|
|
description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
wide: false,
|
|
},
|
|
];
|
|
|
|
function FeatureCard({
|
|
title,
|
|
description,
|
|
image,
|
|
wide,
|
|
}: (typeof cards)[number]) {
|
|
return (
|
|
<a
|
|
href="#"
|
|
className={cn(
|
|
"flex flex-col rounded-lg border",
|
|
wide && "justify-between lg:col-span-2",
|
|
)}
|
|
>
|
|
<div className="flex justify-between p-6">
|
|
<div className="flex flex-col gap-1 text-start">
|
|
<h3 className="font-medium md:text-lg">{title}</h3>
|
|
<p className="text-sm text-muted-foreground md:text-base">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border">
|
|
<ArrowRight className="h-auto w-4 -rotate-45 rtl:rotate-[135deg]" />
|
|
</span>
|
|
</div>
|
|
<div className="rounded-lg p-1">
|
|
<img
|
|
src={image}
|
|
alt={`نمای ${title}`}
|
|
className={cn(
|
|
"max-h-72 rounded-lg border object-cover",
|
|
wide ? "h-full w-full" : "size-full",
|
|
)}
|
|
/>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
interface Feature134Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature134 = ({ className }: Feature134Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
|
|
<Badge
|
|
variant="outline"
|
|
className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
|
|
>
|
|
<Flame className="h-auto w-4" />
|
|
فرایند هوشمند
|
|
</Badge>
|
|
<h2 className="text-center text-3xl font-semibold lg:text-xl">
|
|
فرایندها را استاندارد و سریع کنید
|
|
</h2>
|
|
<p className="text-center text-muted-foreground lg:text-lg">
|
|
اتوماسیون را در کل سازمان یکپارچه کنید
|
|
</p>
|
|
</div>
|
|
<div className="mt-14 grid gap-5 lg:grid-cols-3">
|
|
{cards.map((card) => (
|
|
<FeatureCard key={card.title} {...card} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature134 };
|