88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const integrations = [
|
|
{
|
|
id: "sales",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
title: "تقویم تیمی",
|
|
imageAlt: "تقویم تیم",
|
|
},
|
|
{
|
|
id: "revenue",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
title: "اشتراک فایل",
|
|
imageAlt: "فضای همکاری تیمی",
|
|
},
|
|
{
|
|
id: "plg",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
title: "منشن و بحث",
|
|
imageAlt: "برد مدیریت پروژه",
|
|
},
|
|
];
|
|
|
|
interface Feature164Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature164 = ({ className }: Feature164Props) => {
|
|
const [activeTab, setActiveTab] = useState("0");
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col justify-between gap-10 lg:flex-row lg:gap-16">
|
|
<Tabs
|
|
className="lg:w-1/2"
|
|
value={activeTab}
|
|
onValueChange={setActiveTab}
|
|
>
|
|
<div className="mb-8">
|
|
{integrations.map((item, index) => (
|
|
<TabsContent key={item.id} value={index.toString()}>
|
|
<img
|
|
src={item.image}
|
|
className="aspect-square rounded-3xl object-cover"
|
|
alt={item.imageAlt}
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
<TabsList className="ml-auto flex h-auto w-fit flex-row items-center gap-2 bg-transparent p-0 group-data-horizontal/tabs:h-auto">
|
|
{integrations.map((item, index) => (
|
|
<TabsTrigger
|
|
key={item.id}
|
|
value={index.toString()}
|
|
className="rounded-xl border border-border px-3 py-2 text-xs data-active:border-primary sm:text-base"
|
|
>
|
|
{item.title}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
<div className="flex flex-col justify-center lg:w-1/2 lg:items-start lg:ps-4">
|
|
<div className="max-w-md text-start">
|
|
<h1 className="mb-4 text-3xl font-semibold text-balance sm:text-2xll">
|
|
<span className="text-muted-foreground/50">همکاری از راه دور را ساده کنید</span>{" "}
|
|
گزارشدهی پویا.
|
|
</h1>
|
|
<p className="mb-6 text-xl text-pretty">
|
|
اعلانهای هوشمند فقط اطلاعات ضروری را میرسانند و حواسپرتی را کم میکنند.
|
|
</p>
|
|
<Button>بیشتر بدانید</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature164 };
|