reui-blocks/blocks/feature102.tsx

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

const steps = [
  {
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    alt: "تقویم تیم",
  },
  {
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    alt: "فضای همکاری تیمی",
  },
  {
    title: "گزارش پیشرفت",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    alt: "برد مدیریت پروژه",
  },
];

function StepNumber({ index }: { index: number }) {
  return (
    <span className="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border bg-background font-mono text-lg">
      {(index + 1).toLocaleString("fa-IR")}
    </span>
  );
}

function DesktopStepConnector({ index }: { index: number }) {
  if (index === 0) {
    return (
      <div className="hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
        <span className="h-20 shrink-0" />
        <StepNumber index={index} />
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-b from-transparent to-primary opacity-70" />
      </div>
    );
  }

  if (index === steps.length - 1) {
    return (
      <div className="hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-t from-transparent to-primary opacity-70" />
        <StepNumber index={index} />
        <span className="h-20 shrink-0" />
      </div>
    );
  }

  return (
    <div className="relative hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
      <span className="absolute -top-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="absolute -bottom-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
      <StepNumber index={index} />
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
    </div>
  );
}

interface Feature102Props {
  className?: string;
}

const Feature102 = ({ className }: Feature102Props) => {
  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-3xl flex-col justify-center gap-7 md:text-center">
          <h2 className="max-w-full text-xl text-balance break-words md:text-xl">
            همکاری از راه دور را ساده کنید
          </h2>
          <p className="max-w-full text-sm text-pretty break-words text-muted-foreground md:text-base">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
        </div>

        <div className="mx-auto mt-14 flex w-full min-w-0 max-w-5xl flex-col gap-10 min-[960px]:gap-4 lg:px-16">
          {steps.map((step, index) => (
            <div
              key={step.title}
              className="relative flex w-full min-w-0 gap-4 min-[960px]:items-center min-[960px]:gap-10"
            >
              {index < steps.length - 1 ? (
                <span
                  aria-hidden
                  className="absolute top-10 bottom-[-2.5rem] start-0 flex w-10 justify-center min-[960px]:hidden"
                >
                  <span className="w-[3px] bg-primary/70" />
                </span>
              ) : null}

              <div className="relative z-10 flex shrink-0 flex-col items-center">
                <div className="min-[960px]:hidden">
                  <StepNumber index={index} />
                </div>
                <DesktopStepConnector index={index} />
              </div>

              <div className="flex min-w-0 flex-1 flex-col gap-5 min-[960px]:flex-row min-[960px]:items-center min-[960px]:justify-between min-[960px]:gap-10">
                <div className="flex min-w-0 flex-col justify-center gap-5 min-[960px]:max-w-md min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
                  <h3 className="text-xl break-words min-[960px]:text-xl">
                    {step.title}
                  </h3>
                  <p className="text-sm text-pretty break-words text-muted-foreground min-[960px]:text-base">
                    {step.description}
                  </p>
                </div>
                <img
                  src={step.image}
                  alt={step.alt}
                  className="relative z-10 aspect-video w-full max-w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto min-[960px]:shrink-0"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature102 };