94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { ChevronRight, SquareDashedMousePointer } from "lucide-react";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const utilities = [
|
|
{
|
|
title: "نقش و دسترسی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
},
|
|
{
|
|
title: "چک‌لیست تحویل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
},
|
|
{
|
|
title: "گزارش پیشرفت",
|
|
description:
|
|
"بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
},
|
|
{
|
|
title: "برد Kanban",
|
|
description:
|
|
"وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
},
|
|
{
|
|
title: "تقویم تیمی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-5.svg",
|
|
},
|
|
{
|
|
title: "اشتراک فایل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-6.svg",
|
|
},
|
|
];
|
|
|
|
interface Feature20Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature20 = ({ className }: Feature20Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container max-w-7xl">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<div className="flex items-center gap-1 text-muted-foreground">
|
|
<SquareDashedMousePointer className="size-5 text-primary" />
|
|
<p>اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
|
|
</div>
|
|
<a href="#" className="hover:text-primary hover:underline">
|
|
بیشتر بدانید
|
|
<ChevronRight className="ms-2 inline-block size-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
<Separator className="mt-3 mb-8" />
|
|
<div className="flex flex-col justify-between gap-6 md:flex-row">
|
|
<h2 className="text-3xl font-medium md:w-1/2">
|
|
همکاری از راه دور را ساده کنید
|
|
</h2>
|
|
<p className="text-muted-foreground md:w-1/2">
|
|
هر عضو بداند چه زمانی چه کاری دارد
|
|
</p>
|
|
</div>
|
|
<div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{utilities.map((utility, index) => (
|
|
<Card key={index} className="overflow-hidden pt-0">
|
|
<img
|
|
src={utility.image}
|
|
alt={`نمای ${utility.title}`}
|
|
className="aspect-video w-full object-cover"
|
|
/>
|
|
<div className="p-5">
|
|
<p className="mb-1 font-medium">{utility.title}</p>
|
|
<p className="text-muted-foreground">{utility.description}</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature20 };
|