79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowUpRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const integrations = [
|
|
{
|
|
title: "نقش و دسترسی",
|
|
description:
|
|
"برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
|
|
imageAlt: "تقویم تیم",
|
|
buttonTitle: "بیشتر بدانید",
|
|
},
|
|
{
|
|
title: "چکلیست تحویل",
|
|
description:
|
|
"نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
|
|
image:
|
|
"/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
buttonTitle: "شروع کنید",
|
|
},
|
|
];
|
|
|
|
interface Feature150Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature150 = ({ className }: Feature150Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="grid min-h-[400px] grid-cols-1 gap-1 lg:grid-cols-2">
|
|
{integrations.map((item, index) => (
|
|
<a
|
|
key={item.title}
|
|
className={cn(
|
|
"group relative flex cursor-pointer items-center justify-start bg-muted-foreground/10 p-10",
|
|
index === 0 ? "lg:justify-center" : "lg:justify-start",
|
|
)}
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="absolute top-0 start-0 z-[-1] h-full w-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
|
|
/>
|
|
|
|
<div className="flex max-w-sm flex-col items-start justify-center gap-10 text-start">
|
|
<div className="flex flex-col gap-3">
|
|
<h1 className="text-3xl text-black duration-500 group-hover:text-white">
|
|
{item.title}
|
|
</h1>
|
|
<p className="text-lg text-black duration-500 group-hover:text-white">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full transition-all duration-300 outline-none group-hover:bg-transparent group-hover:text-white"
|
|
>
|
|
{item.buttonTitle}
|
|
<ArrowUpRight
|
|
strokeWidth="1"
|
|
className="ms-2 size-4 rtl:rotate-180"
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature150 };
|