114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
const steps = [
|
|
{
|
|
title: "نقش و دسترسی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
alt: "تقویم تیم",
|
|
imageClassName:
|
|
"z-10 aspect-video w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto",
|
|
},
|
|
{
|
|
title: "چک‌لیست تحویل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
alt: "فضای همکاری تیمی",
|
|
imageClassName:
|
|
"z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
|
|
},
|
|
{
|
|
title: "گزارش پیشرفت",
|
|
description:
|
|
"بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
alt: "برد مدیریت پروژه",
|
|
imageClassName:
|
|
"z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
|
|
},
|
|
];
|
|
|
|
function StepConnector({ index }: { index: number }) {
|
|
if (index === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-between gap-1">
|
|
<span className="h-20 shrink-0" />
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|
</span>
|
|
<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="flex flex-col items-center justify-between gap-1">
|
|
<span className="h-20 w-[3px] shrink-0 bg-linear-to-t from-transparent to-primary opacity-70" />
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|
</span>
|
|
<span className="h-20 shrink-0" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex flex-col items-center justify-between gap-1">
|
|
<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" />
|
|
<span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|
</span>
|
|
<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("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto flex max-w-3xl flex-col justify-center gap-7 md:text-center">
|
|
<h2 className="text-xl md:text-xl">همکاری از راه دور را ساده کنید</h2>
|
|
<p className="text-sm text-muted-foreground md:text-base">
|
|
هر عضو بداند چه زمانی چه کاری دارد
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-14 flex max-w-5xl flex-col gap-4 lg:px-16">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={step.title}
|
|
className="flex flex-col items-center justify-between min-[960px]:flex-row min-[960px]:gap-10"
|
|
>
|
|
<div className="flex gap-4 min-[960px]:max-w-md">
|
|
<StepConnector index={index} />
|
|
<div className="flex flex-col justify-center gap-5 px-0 min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
|
|
<h3 className="text-xl min-[960px]:text-xl">{step.title}</h3>
|
|
<p className="text-sm text-muted-foreground min-[960px]:text-base">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src={step.image}
|
|
alt={step.alt}
|
|
className={step.imageClassName}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature102 };
|