110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const CONTRIBUTORS = [
|
|
{
|
|
id: "sarah",
|
|
name: "کار گروهی",
|
|
image: "/block-media/shadcnblocks/block/avatar-1.webp",
|
|
imageAlt: "تقویم تیم",
|
|
title: "نقش و دسترسی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
},
|
|
{
|
|
id: "marcus",
|
|
name: "همکاری تیمی",
|
|
image: "/block-media/shadcnblocks/block/avatar-2.webp",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
title: "چک‌لیست تحویل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
},
|
|
{
|
|
id: "emily",
|
|
name: "مدیریت پروژه",
|
|
image: "/block-media/shadcnblocks/block/avatar-3.webp",
|
|
imageAlt: "برد مدیریت پروژه",
|
|
title: "گزارش پیشرفت",
|
|
description:
|
|
"بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
|
|
},
|
|
{
|
|
id: "david",
|
|
name: "هم‌راستایی",
|
|
image: "/block-media/shadcnblocks/block/avatar-4.webp",
|
|
imageAlt: "تقویم تیم",
|
|
title: "برد Kanban",
|
|
description:
|
|
"وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
|
|
},
|
|
{
|
|
id: "luna",
|
|
name: "کار گروهی",
|
|
image: "/block-media/shadcnblocks/block/avatar-3.webp",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
title: "تقویم تیمی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
},
|
|
{
|
|
id: "alex",
|
|
name: "همکاری تیمی",
|
|
image: "/block-media/shadcnblocks/block/avatar-6.webp",
|
|
imageAlt: "برد مدیریت پروژه",
|
|
title: "اشتراک فایل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
},
|
|
] as const;
|
|
|
|
interface Feature255Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature255 = ({ className }: Feature255Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto max-w-4xl">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<p className="text-lg font-medium">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
|
|
<Button variant="outline">مشاهده همه</Button>
|
|
</div>
|
|
<div className="mt-7">
|
|
<div className="flex flex-col gap-10">
|
|
{CONTRIBUTORS.map((contributor) => (
|
|
<div key={contributor.id}>
|
|
<div className="flex gap-3 text-start md:gap-4">
|
|
<img
|
|
src={contributor.image}
|
|
alt={contributor.imageAlt}
|
|
className="size-10 shrink-0 rounded-lg border border-border md:size-12"
|
|
/>
|
|
<div>
|
|
<p className="flex flex-col font-medium md:flex-row md:items-center md:gap-1 md:text-lg">
|
|
{contributor.name}
|
|
<span className="text-sm whitespace-nowrap text-muted-foreground md:text-base md:font-normal">
|
|
{contributor.title}
|
|
</span>
|
|
</p>
|
|
<p className="hidden text-pretty text-muted-foreground md:block">
|
|
{contributor.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 text-sm text-pretty text-muted-foreground md:hidden md:text-base">
|
|
{contributor.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature255 };
|