63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import { CheckCircle, Edit, List, MessagesSquare, Timer } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const capabilities = [
|
|
{ label: "کار گروهی", icon: MessagesSquare },
|
|
{ label: "همکاری تیمی", icon: Edit },
|
|
{ label: "مدیریت پروژه", icon: CheckCircle },
|
|
{ label: "همراستایی", icon: List },
|
|
{ label: "کار گروهی", icon: Timer },
|
|
];
|
|
|
|
interface Feature87Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature87 = ({ className }: Feature87Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("relative py-32", className)}>
|
|
<div className="pointer-events-none absolute inset-0 z-10 bg-[50%_0] bg-[url('/block-media/shadcnblocks/block/shadow-overlay.png')] bg-no-repeat" />
|
|
<div className="container p-6 md:p-16">
|
|
<div className="grid gap-12 lg:grid-cols-3">
|
|
<div className="flex flex-col justify-between gap-8">
|
|
<div>
|
|
<Badge variant="outline">همکاری تیمی</Badge>
|
|
<h2 className="my-9 text-3xl font-medium md:text-2xll">
|
|
همکاری از راه دور را ساده کنید
|
|
<br />
|
|
<span className="text-muted-foreground">هر عضو بداند چه زمانی چه کاری دارد</span>
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
اعلانهای هوشمند فقط اطلاعات ضروری را میرسانند و حواسپرتی را کم میکنند.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
{capabilities.map((item) => (
|
|
<div key={item.label} className="contents">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<item.icon className="h-auto w-4 shrink-0" />
|
|
{item.label}
|
|
</div>
|
|
<Separator />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex aspect-square w-full items-center justify-center overflow-hidden bg-muted px-6 md:px-8 lg:col-span-2">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt="تقویم تیم"
|
|
className="max-h-[550px] w-full translate-x-1/4 rounded-lg object-cover rtl:-translate-x-1/4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature87 };
|