116 lines
4.2 KiB
TypeScript
116 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
id: "feature-1",
|
|
tabLabel: "داده سازمانی",
|
|
title: "گزارش‌ساز",
|
|
description:
|
|
"گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
},
|
|
{
|
|
id: "feature-2",
|
|
tabLabel: "هوش تجاری",
|
|
title: "Pivot تعاملی",
|
|
description:
|
|
"ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
},
|
|
{
|
|
id: "feature-3",
|
|
tabLabel: "گزارش‌گیری",
|
|
title: "داشبورد مدیریتی",
|
|
description:
|
|
"نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
},
|
|
];
|
|
|
|
interface Feature78Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature78 = ({ className }: Feature78Props) => {
|
|
const [selection, setSelection] = useState(features[0].id);
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="flex flex-col">
|
|
<div className="container">
|
|
<div className="text-right lg:max-w-3xl">
|
|
<h2 className="mb-2 text-xl font-semibold md:text-xl">
|
|
تصمیم استراتژیک را داده‌محور کنید
|
|
</h2>
|
|
<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>
|
|
<div>
|
|
<Tabs dir="rtl" value={selection} onValueChange={setSelection}>
|
|
<div className="relative mt-6">
|
|
<div
|
|
dir="rtl"
|
|
className="flex justify-start overflow-x-auto overflow-y-hidden"
|
|
>
|
|
<div className="container min-w-fit">
|
|
<TabsList>
|
|
{features.map((feature) => (
|
|
<TabsTrigger key={feature.id} value={feature.id}>
|
|
{feature.tabLabel}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,var(--color-background)_0%,transparent_10%,transparent_90%,var(--color-background)_100%)] md:hidden" />
|
|
</div>
|
|
</div>
|
|
<div className="container">
|
|
{features.map((feature) => (
|
|
<TabsContent key={feature.id} value={feature.id}>
|
|
<div
|
|
dir="rtl"
|
|
className="mt-12 flex flex-col md:grid md:grid-cols-2 md:gap-6 lg:gap-8"
|
|
>
|
|
<div
|
|
className="flex flex-col items-start justify-center py-8 text-right md:px-8 md:py-10 lg:px-10 lg:py-12"
|
|
>
|
|
<h3 className="mb-3 text-xl 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>
|
|
<div
|
|
className="order-first overflow-clip rounded-3xl md:order-2 md:min-h-[24rem] lg:min-h-[28rem] xl:min-h-[32rem]"
|
|
>
|
|
<img
|
|
src={feature.image}
|
|
alt={`نمای ${feature.title}`}
|
|
className="aspect-16/9 h-full w-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature78 };
|