100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { Clock, Cloud, FileCheck, Scale, Users, XCircle } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DataItem {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
icon: <Cloud strokeWidth={1.5} className="size-12" />,
|
|
title: "افزایش بهره‌وری",
|
|
description:
|
|
"با ابزارهای پیشرفته مدیریت وظایف، گردش‌کارهای خود را ساده کنید و ناکارآمدی‌ها را حذف کنید.",
|
|
},
|
|
{
|
|
icon: <XCircle strokeWidth={1.5} className="size-12" />,
|
|
title: "کاهش خطاها",
|
|
description:
|
|
"وظایف تکراری را خودکار کنید تا خطای انسانی کاهش یابد و نتایج یکسان تضمین شود.",
|
|
},
|
|
{
|
|
icon: <Users strokeWidth={1.5} className="size-12" />,
|
|
title: "تقویت همکاری",
|
|
description:
|
|
"ارتباط و همکاری تیم را با به‌روزرسانی‌های بلادرنگ و فضاهای کاری مشترک بهبود دهید.",
|
|
},
|
|
{
|
|
icon: <Scale strokeWidth={1.5} className="size-12" />,
|
|
title: "مقیاس‌پذیری بی‌درز",
|
|
description:
|
|
"تیم و پروژه‌های خود را بدون دردسر گسترش دهید؛ با راهکارهای انعطاف‌پذیر و مقیاس‌پذیر.",
|
|
},
|
|
{
|
|
icon: <FileCheck strokeWidth={1.5} className="size-12" />,
|
|
title: "پیگیری پیشرفت",
|
|
description:
|
|
"با پیگیری دقیق پیشرفت و بینش‌های عملی، همیشه بر اهداف خود مسلط باشید.",
|
|
},
|
|
{
|
|
icon: <Clock strokeWidth={1.5} className="size-12" />,
|
|
title: "صرفه‌جویی در زمان",
|
|
description:
|
|
"با خودکارسازی وظایف و فرآیندهای زمان‌بر، روی آنچه مهم‌تر است تمرکز کنید.",
|
|
},
|
|
];
|
|
|
|
interface Timeline6Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Timeline6 = ({ className }: Timeline6Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16">
|
|
<div className="lg:sticky lg:top-24 lg:self-start">
|
|
<div className="max-w-lg text-start">
|
|
<h2 className="text-3xl font-bold tracking-tight text-primary sm:text-xl lg:text-2xll">
|
|
ابزارهای ما
|
|
<br />
|
|
بهره‌وری را به
|
|
<br />
|
|
<span className="text-muted-foreground">ابرقدرت شما</span>{" "}
|
|
تبدیل می‌کنند
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="-mt-8 sm:-mt-12">
|
|
{DATA.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12"
|
|
>
|
|
<div className="flex gap-4 text-start sm:gap-6">
|
|
<div className="shrink-0">{item.icon}</div>
|
|
<div>
|
|
<h4 className="mb-2 text-xl font-semibold text-primary sm:text-3xl">
|
|
{item.title}
|
|
</h4>
|
|
<p className="mt-6 text-sm text-muted-foreground sm:text-base">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Timeline6 };
|