107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { MoveRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const sections = [
|
|
{
|
|
title: "تقویم تیمی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
imageAlt: "تقویم تیم",
|
|
imageFirst: true,
|
|
},
|
|
{
|
|
title: "اشتراک فایل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
imageFirst: false,
|
|
},
|
|
{
|
|
title: "منشن و بحث",
|
|
description:
|
|
"بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
imageAlt: "برد مدیریت پروژه",
|
|
imageFirst: true,
|
|
},
|
|
];
|
|
|
|
function FeatureRow({
|
|
title,
|
|
description,
|
|
image,
|
|
imageAlt,
|
|
imageFirst,
|
|
}: (typeof sections)[number]) {
|
|
const imageBlock = (
|
|
<div className="flex w-full items-center bg-muted md:w-1/2">
|
|
<img
|
|
src={image}
|
|
alt={imageAlt}
|
|
className="max-h-64 w-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const textBlock = (
|
|
<div className="flex w-full flex-col justify-center gap-6 px-8 py-7 text-start md:w-1/2 md:px-12 md:py-10">
|
|
<h6 className="text-lg font-semibold md:text-xl">{title}</h6>
|
|
<div className="h-px w-full bg-muted-foreground" />
|
|
<p className="text-muted-foreground">{description}</p>
|
|
<a
|
|
href="#"
|
|
className="inline-flex items-center font-medium hover:underline"
|
|
>
|
|
<span>بیشتر بدانید</span>
|
|
<MoveRight strokeWidth={2} className="ms-2 size-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="mt-16 flex flex-col overflow-hidden rounded-2xl bg-muted md:flex-row">
|
|
{imageFirst ? (
|
|
<>
|
|
{imageBlock}
|
|
{textBlock}
|
|
</>
|
|
) : (
|
|
<>
|
|
{textBlock}
|
|
{imageBlock}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface Feature138Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature138 = ({ className }: Feature138Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="text-start text-xl font-semibold">
|
|
همکاری از راه دور را ساده کنید
|
|
</h2>
|
|
<p className="mt-3 text-start text-xl font-medium text-muted-foreground">
|
|
هر عضو بداند چه زمانی چه کاری دارد
|
|
</p>
|
|
|
|
{sections.map((section) => (
|
|
<FeatureRow key={section.title} {...section} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature138 };
|