Files
reui-blocks/blocks/feature97.tsx
T
2026-07-27 12:56:06 +03:30

82 lines
3.2 KiB
TypeScript

import { BarChart, Heart, Monitor, Plus, TrendingUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const highlights = [
{
title: "تریگر رویداد",
description:
"با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
icon: Heart,
},
{
title: "شرط هوشمند",
description:
"مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
icon: BarChart,
},
{
title: "اعلان خودکار",
description:
"تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
icon: TrendingUp,
},
{
title: "تأیید چندمرحله‌ای",
description:
"مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
icon: Monitor,
},
];
interface Feature97Props {
className?: string;
}
const Feature97 = ({ className }: Feature97Props) => {
return (
<section
dir="rtl"
lang="fa"
className={cn("relative w-full max-w-full overflow-hidden py-32", className)}
>
<div className="container min-w-0 max-w-full">
<div className="mx-auto flex w-full min-w-0 max-w-xl flex-col gap-6 text-center">
<h2 className="max-w-full text-xl font-semibold text-balance break-words">
فرایندها را استاندارد و سریع کنید
</h2>
<p className="max-w-full text-lg text-pretty break-words">
اتوماسیون را در کل سازمان یکپارچه کنید
</p>
<div className="flex w-full min-w-0 flex-col justify-center gap-2 sm:flex-row sm:flex-wrap sm:items-start">
<Button variant="outline" className="w-full shrink-0 sm:w-auto">
فرایند هوشمند
</Button>
<Button className="h-auto min-w-0 max-w-full whitespace-normal px-4 py-2 text-start text-pretty break-words sm:flex-1">
<Plus className="ms-2 size-4 shrink-0 self-start" />
<span className="min-w-0">
قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود.
تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
</span>
</Button>
</div>
</div>
<div className="mx-auto mt-20 grid w-full min-w-0 max-w-5xl gap-12 md:grid-cols-2 md:gap-20">
{highlights.map((item) => (
<div key={item.title} className="min-w-0 max-w-full text-center">
<item.icon className="mx-auto size-7" />
<h3 className="mt-4 mb-2 text-xl font-semibold break-words">
{item.title}
</h3>
<p className="text-pretty break-words">{item.description}</p>
</div>
))}
</div>
</div>
</section>
);
};
export { Feature97 };