94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Cloud, Sparkles, 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:
|
|
"با ابزارهای همکاری مبتنی بر هوش مصنوعی که ارتباط بلادرنگ و گردش‌کارهای مشترک را ممکن می‌کنند، کار تیمی را تقویت کنید.",
|
|
},
|
|
];
|
|
|
|
interface Timeline5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Timeline5 = ({ className }: Timeline5Props) => {
|
|
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">
|
|
<span className="relative inline-block">
|
|
<span className="text-muted-foreground">هوش مصنوعی</span>
|
|
<Sparkles className="absolute -top-2 -start-4 size-5 fill-yellow-500 stroke-none" />
|
|
</span>
|
|
<br />
|
|
را به گردش‌کارهای فعلی‌تان اضافه کنید
|
|
</h2>
|
|
<p className="mt-12 text-base text-muted-foreground">
|
|
هوش مصنوعی را بی‌درز در گردش‌کارهای خود یکپارچه کنید. وظایف را
|
|
خودکار کنید، کارایی را افزایش دهید و جلوتر بمانید.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="-mt-8 sm:-mt-12">
|
|
{DATA.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative my-12 overflow-hidden rounded-lg bg-muted px-8 py-16 shadow-none sm:px-12 sm:py-24 lg:px-16 lg:py-32"
|
|
>
|
|
<div className="gap-4 sm:gap-6">
|
|
<div className="block shrink-0">{item.icon}</div>
|
|
<div className="absolute top-12 end-12 text-2xll">
|
|
{(index + 1).toLocaleString("fa-IR", {
|
|
minimumIntegerDigits: 2,
|
|
useGrouping: false,
|
|
})}
|
|
</div>
|
|
<div className="mt-6 text-start">
|
|
<h4 className="mb-2 text-xl font-semibold text-primary">
|
|
{item.title}
|
|
</h4>
|
|
<p className="mt-6 text-xs text-muted-foreground sm:text-base">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Timeline5 };
|