98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
title: "نقش و دسترسی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
imageAlt: "تقویم تیم",
|
|
reversed: false,
|
|
},
|
|
{
|
|
title: "چکلیست تحویل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
reversed: true,
|
|
},
|
|
];
|
|
|
|
interface Feature74Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature74 = ({ className }: Feature74Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col gap-16 lg:px-16">
|
|
<div className="lg:max-w-sm">
|
|
<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
|
|
همکاری از راه دور را ساده کنید
|
|
</h2>
|
|
<p className="mb-8 text-muted-foreground lg:text-lg">
|
|
هر عضو بداند چه زمانی چه کاری دارد
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
|
|
>
|
|
کار گروهی
|
|
<ArrowRight className="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
|
|
</a>
|
|
</div>
|
|
<div className="grid gap-6 md:grid-cols-2 lg:gap-8">
|
|
{features.map((feature) => {
|
|
const image = (
|
|
<div className="md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]">
|
|
<img
|
|
src={feature.image}
|
|
alt={feature.imageAlt}
|
|
className="aspect-16/9 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
);
|
|
const content = (
|
|
<div className="flex flex-col justify-center px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
|
|
<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-muted-foreground lg:text-lg">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
key={feature.title}
|
|
className={cn(
|
|
"flex overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8",
|
|
feature.reversed ? "flex-col-reverse" : "flex-col",
|
|
)}
|
|
>
|
|
{feature.reversed ? (
|
|
<>
|
|
{content}
|
|
{image}
|
|
</>
|
|
) : (
|
|
<>
|
|
{image}
|
|
{content}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature74 };
|