118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
import { Cog, Gem, Landmark, LocateFixed } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Step {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const STEPS: Step[] = [
|
|
{
|
|
id: "initialization",
|
|
title: "تقویم تیمی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
icon: (
|
|
<LocateFixed className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
|
|
),
|
|
},
|
|
{
|
|
id: "optimization",
|
|
title: "اشتراک فایل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
icon: (
|
|
<Cog className="size-10 stroke-white transition-all ease-in-out group-hover:rotate-90" />
|
|
),
|
|
},
|
|
{
|
|
id: "efficiency",
|
|
title: "منشن و بحث",
|
|
description:
|
|
"بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
|
|
icon: (
|
|
<Gem className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
|
|
),
|
|
},
|
|
{
|
|
id: "finalization",
|
|
title: "ردیابی زمان",
|
|
description:
|
|
"وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
|
|
icon: (
|
|
<Landmark className="size-10 stroke-white transition-all ease-in-out group-hover:size-12" />
|
|
),
|
|
},
|
|
];
|
|
|
|
interface Feature243Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature243 = ({ className }: Feature243Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-background", className)}>
|
|
<div className="container py-32">
|
|
<header className="relative z-10 flex flex-col items-center justify-center gap-6 bg-background text-center">
|
|
<h1 className="text-2xll font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
|
|
همکاری از راه دور را ساده کنید
|
|
</h1>
|
|
|
|
<p className="mt-2 mb-4 max-w-xl text-lg text-pretty text-muted-foreground md:text-xl">
|
|
اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
|
|
</p>
|
|
</header>
|
|
|
|
<div className="mt-24 flex flex-wrap items-center justify-center gap-18 sm:mt-68 sm:gap-6">
|
|
<div className="absolute top-40 left-1/2 h-55 w-0.5 rounded-full bg-muted lg:h-58" />
|
|
{STEPS.map((step, index) => (
|
|
<div
|
|
key={step.id}
|
|
className="relative flex w-fit flex-col items-center"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"absolute -top-[174px] left-1/2 h-0.5 w-[109%] rounded-full bg-muted",
|
|
index === 3 ? "hidden" : "",
|
|
index === 2 ? "hidden 2xl:block" : "",
|
|
index === 1 ? "hidden lg:block" : "",
|
|
index === 0 ? "hidden sm:block" : "",
|
|
)}
|
|
/>
|
|
<div className="absolute -top-[174px] left-1/2 h-full w-0.5 rounded-full bg-muted" />
|
|
<div className="relative z-10 flex h-8 w-5 items-center justify-center rounded-full bg-background p-1 pb-5">
|
|
<div className="relative z-10 size-3 rounded-full bg-foreground" />
|
|
</div>
|
|
|
|
<Card className="group relative z-10 h-full w-full overflow-hidden rounded-4xl border-none bg-muted shadow-none sm:w-64 md:w-72">
|
|
<CardContent className="flex h-full flex-col items-center gap-5 p-0 pt-10 pb-5">
|
|
<div className="flex size-20 items-center justify-center rounded-3xl bg-foreground">
|
|
{step.icon}
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 pt-5 pb-3">
|
|
<h3 className="w-full text-center text-3xl font-semibold tracking-tighter text-balance text-foreground">
|
|
{step.title}
|
|
</h3>
|
|
|
|
<p className="w-full max-w-sm text-center text-pretty font-medium text-muted-foreground/70">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature243 };
|