104 lines
4.2 KiB
TypeScript
104 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const integrations = [
|
|
{
|
|
id: "1",
|
|
image: "/block-media/shadcnblocks/block/block-1.svg",
|
|
title: "گزارش‌ساز",
|
|
description:
|
|
"گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
imageAlt: "گزارش‌ساز",
|
|
},
|
|
{
|
|
id: "2",
|
|
image: "/block-media/shadcnblocks/block/block-2.svg",
|
|
title: "Pivot تعاملی",
|
|
description:
|
|
"ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
imageAlt: "تحلیل داده سازمان",
|
|
},
|
|
{
|
|
id: "3",
|
|
image: "/block-media/shadcnblocks/block/block-3.svg",
|
|
title: "داشبورد مدیریتی",
|
|
description:
|
|
"نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
|
|
imageAlt: "داشبورد هوش تجاری",
|
|
},
|
|
];
|
|
|
|
interface Feature156Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature156 = ({ className }: Feature156Props) => {
|
|
const [cardNumber, setCardNumber] = useState(0);
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("relative overflow-hidden py-24 lg:py-32", className)}
|
|
>
|
|
<div className="absolute inset-0 -z-10">
|
|
<div className="absolute inset-0 h-full w-full bg-[linear-gradient(to_left,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-size-[2rem_2rem]" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_800px_at_50%_50%,transparent,white)]" />
|
|
</div>
|
|
|
|
<div className="relative container">
|
|
<div className="mb-16 flex flex-col items-center gap-8">
|
|
<h1 className="max-w-3xl text-center text-xl font-bold tracking-tight text-balance md:text-2xll lg:text-2xll">
|
|
تصمیم استراتژیک را داده‌محور کنید
|
|
</h1>
|
|
</div>
|
|
<Tabs dir="rtl" defaultValue={cardNumber.toString()} className="space-y-16">
|
|
<div className="relative flex h-[480px] items-center justify-center overflow-hidden rounded-2xl bg-muted backdrop-blur-sm">
|
|
{integrations.map((item, index) => (
|
|
<TabsContent
|
|
value={index.toString()}
|
|
key={item.id}
|
|
className="absolute inset-0 h-full w-full"
|
|
>
|
|
<div className="flex h-full w-full items-center justify-center p-8">
|
|
<img
|
|
src={item.image}
|
|
alt={item.imageAlt}
|
|
className="h-auto max-h-full w-auto max-w-full object-contain dark:invert"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
<TabsList className="grid !h-auto w-full grid-cols-1 gap-8 bg-transparent p-0 lg:grid-cols-3 lg:gap-14">
|
|
{integrations.map((item, index) => (
|
|
<TabsTrigger
|
|
value={index.toString()}
|
|
key={item.id}
|
|
className="group flex !h-auto flex-col items-start rounded-xl border border-muted bg-background/50 p-8 text-right whitespace-normal shadow-sm transition-all hover:bg-muted/50 hover:shadow-md data-[state=active]:border-primary/20 data-[state=active]:bg-muted/50 data-[state=active]:shadow-md"
|
|
onClick={() => setCardNumber(index)}
|
|
>
|
|
<div className="mb-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-mono text-primary group-hover:bg-primary/20 group-data-[state=active]:bg-primary/20">
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|
</div>
|
|
<h3 className="mb-3 text-xl font-semibold tracking-tight text-foreground/90 group-hover:text-foreground group-data-[state=active]:text-foreground">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-right text-sm text-pretty text-muted-foreground/80 group-hover:text-muted-foreground group-data-[state=active]:text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature156 };
|