118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { Code, GitBranch, List, WandSparkles } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const integrations = [
|
|
{
|
|
id: "build",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/tim-van-der-kuip-CPs2X8JYmS8-unsplash.jpg",
|
|
logo: <Code strokeWidth={1} className="h-5 w-5" />,
|
|
title: "لاگ اجرا",
|
|
description:
|
|
"با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
|
|
imageAlt: "سازنده گردش‌کار",
|
|
},
|
|
{
|
|
id: "refine",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg",
|
|
logo: <GitBranch strokeWidth={1} className="h-5 w-5" />,
|
|
title: "قالب آماده",
|
|
description:
|
|
"مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
|
|
imageAlt: "نمای اتوماسیون فرایند",
|
|
},
|
|
{
|
|
id: "work",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
|
|
logo: <List strokeWidth={1} className="h-5 w-5" />,
|
|
title: "اتصال ابزار",
|
|
description:
|
|
"تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
|
|
imageAlt: "لاگ اجرای خودکار",
|
|
},
|
|
{
|
|
id: "report",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/akson-1K8pIbIrhkQ-unsplash.jpg",
|
|
logo: <WandSparkles strokeWidth={1} className="h-5 w-5" />,
|
|
title: "سازنده گردش‌کار",
|
|
description:
|
|
"مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
|
|
imageAlt: "سازنده گردش‌کار",
|
|
},
|
|
];
|
|
|
|
interface Feature160Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature160 = ({ className }: Feature160Props) => {
|
|
const [cardNumber, setCardNumber] = useState(0);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mb-20 max-w-lg text-right">
|
|
<h1 className="mb-4 text-2xll font-bold text-balance lg:text-[52px]">
|
|
فرایندها را استاندارد و سریع کنید
|
|
</h1>
|
|
<h3 className="text-xl text-pretty">
|
|
اتوماسیون را در کل سازمان یکپارچه کنید
|
|
</h3>
|
|
</div>
|
|
<Tabs
|
|
dir="rtl"
|
|
className="rounded-3xl border border-gray-200 px-5 pt-4 sm:px-10 sm:pt-9"
|
|
defaultValue="0"
|
|
>
|
|
<TabsList className="mb-14 grid !h-full grid-cols-1 gap-x-8 gap-y-6 bg-transparent p-0 md:grid-cols-2 lg:grid-cols-4">
|
|
{integrations.map((item, index) => (
|
|
<TabsTrigger
|
|
key={item.id}
|
|
value={index.toString()}
|
|
onClick={() => setCardNumber(index)}
|
|
className={cn(
|
|
"block cursor-pointer border-0 text-right whitespace-normal transition-all duration-500 hover:opacity-80 data-[state=active]:shadow-none!",
|
|
index === cardNumber ? "opacity-100" : "opacity-50",
|
|
)}
|
|
>
|
|
<div className="mb-2 flex items-center gap-2">
|
|
{item.logo}
|
|
<h4 className="text-lg font-semibold">{item.title}</h4>
|
|
</div>
|
|
<p className="text-right text-base font-medium text-pretty">
|
|
{item.description}
|
|
</p>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
<div className="rounded-t-[28px] p-1 pb-0">
|
|
{integrations.map((item, index) => (
|
|
<TabsContent
|
|
value={index.toString()}
|
|
key={item.id}
|
|
className="m-0"
|
|
>
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="h-full max-h-[400px] w-full rounded-t-[28px] object-cover object-bottom transition-all duration-500"
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature160 };
|