121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowRight,
|
|
Blocks,
|
|
Fingerprint,
|
|
LayoutPanelTop,
|
|
MessageCircleMore,
|
|
Users,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features: {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
}[] = [
|
|
{
|
|
title: "تریگر رویداد",
|
|
description:
|
|
"با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
icon: MessageCircleMore,
|
|
},
|
|
{
|
|
title: "شرط هوشمند",
|
|
description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
|
|
icon: Blocks,
|
|
},
|
|
{
|
|
title: "اعلان خودکار",
|
|
description: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
|
|
icon: Users,
|
|
},
|
|
{
|
|
title: "تأیید چندمرحله‌ای",
|
|
description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
|
|
icon: LayoutPanelTop,
|
|
},
|
|
{
|
|
title: "لاگ اجرا",
|
|
description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
icon: Fingerprint,
|
|
},
|
|
];
|
|
|
|
interface Feature122Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature122 = ({ className }: Feature122Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("container py-40", className)}>
|
|
<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3 md:grid-rows-3">
|
|
{features.map((feature) => (
|
|
<DataBlock key={feature.title} {...feature} />
|
|
))}
|
|
<div className="flex w-full grow flex-col gap-6 rounded-lg bg-accent/80 p-6 transition-all hover:bg-accent md:col-span-2 md:col-start-2 md:row-span-2 md:row-start-2 lg:p-10">
|
|
<div className="flex flex-col items-start justify-between gap-5 md:flex-row md:items-center">
|
|
<h3 className="max-w-[85%] text-start text-xl font-bold tracking-tight md:max-w-[60%] lg:text-3xl">
|
|
قالب آماده
|
|
</h3>
|
|
<Button className="w-full sm:w-auto" size="lg">
|
|
شروع کنید
|
|
</Button>
|
|
</div>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt="سازنده گردش‌کار"
|
|
className="aspect-square h-full w-full rounded-lg object-cover md:aspect-[3]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature122 };
|
|
|
|
function DataBlock({
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
}: (typeof features)[number]) {
|
|
const [isBlockHover, setBlockHover] = useState(false);
|
|
|
|
return (
|
|
<a
|
|
href="#"
|
|
className="flex w-full cursor-pointer flex-col rounded-lg bg-accent/80 p-6 text-start transition-all hover:bg-accent lg:p-8"
|
|
onMouseOver={() => setBlockHover(true)}
|
|
onMouseOut={() => setBlockHover(false)}
|
|
>
|
|
<h3
|
|
className={cn(
|
|
"mb-3 w-fit border-b border-solid border-transparent text-lg font-bold tracking-tight transition lg:text-xl",
|
|
isBlockHover && "border-primary/80!",
|
|
)}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<p className="mb-5 text-sm text-muted-foreground/90 lg:text-base">
|
|
{description}
|
|
</p>
|
|
<div className="mt-auto flex items-end justify-between">
|
|
<Icon className="size-10 text-primary/90 md:size-12" strokeWidth={1.5} />
|
|
<ArrowRight
|
|
className={cn(
|
|
"size-5 h-fit text-primary/80 transition-all rtl:rotate-180",
|
|
isBlockHover && "translate-x-1.5 rtl:-translate-x-1.5",
|
|
)}
|
|
strokeWidth={1.5}
|
|
/>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|