reui-blocks/blocks/timeline1.tsx

import { CircleArrowOutUpRight, Files, Layout } from "lucide-react";

import { cn } from "@/lib/utils";

interface Timeline1Props {
  className?: string;
}

const Timeline1 = ({ className }: Timeline1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex flex-col items-center justify-center text-center sm:max-w-xl">
          <div className="flex flex-col items-center">
            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
              <Files className="size-8" strokeWidth={2} />
            </span>
            <h2 className="my-2 text-3xl font-medium">یکپارچه‌سازی داده</h2>
            <p className="text-muted-foreground">
              ابزارها و پلتفرم‌های فعلی خود را بدون دردسر به هم وصل کنید. سیستم
              ما داده‌های شما را در تمام سرویس‌های متصل به‌صورت خودکار
              همگام‌سازی و مدیریت می‌کند.
            </p>
          </div>
          <span
            className="my-3 h-36 w-[2px]"
            style={{
              backgroundImage:
                "linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%)",
              backgroundPosition: "left",
              backgroundSize: "3px 15px",
              backgroundRepeat: "repeat-y",
            }}
          ></span>
          <div className="flex flex-col items-center">
            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
              <Layout className="size-8" strokeWidth={2} />
            </span>
            <h2 className="my-2 text-3xl font-medium">پیکربندی سفارشی</h2>
            <p className="text-muted-foreground">
              پلتفرم را با رابط شهودی ما مطابق نیازهای خود شخصی‌سازی کنید.
              گردش‌کارهای قدرتمند بسازید  بدون نیاز به دانش فنی.
            </p>
          </div>
          <span
            className="my-3 h-36 w-[2px]"
            style={{
              backgroundImage:
                "linear-gradient(to bottom, #000 10%, rgba(255, 255, 255, 0) 0%)",
              backgroundPosition: "left",
              backgroundSize: "3px 15px",
              backgroundRepeat: "repeat-y",
            }}
          ></span>
          <div className="flex flex-col items-center">
            <span className="flex size-24 items-center justify-center rounded-full border-2 border-foreground">
              <CircleArrowOutUpRight className="size-8" strokeWidth={2} />
            </span>
            <h2 className="my-2 text-3xl font-medium">توسعه کسب‌وکار</h2>
            <p className="text-muted-foreground">
              به تحلیل‌ها و ابزارهای جامعی دسترسی داشته باشید که برای رشد شما
              طراحی شده‌اند. عملکرد را پایش کنید و بدون دردسر تصمیم‌های مبتنی
              بر داده بگیرید.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Timeline1 };