128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const tabsData = [
|
|
{
|
|
id: 1,
|
|
title: "پروفایل ۳۶۰ درجه مشتری",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
description:
|
|
"تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "اتوماسیون مراحل فروش",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
description:
|
|
"وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "پیش‌بینی درآمد",
|
|
imageSrc: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
description:
|
|
"بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
|
|
},
|
|
];
|
|
|
|
interface Feature131Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature131 = ({ className }: Feature131Props) => {
|
|
const [activeTabId, setActiveTabId] = useState<number>(1);
|
|
const [activeImage, setActiveImage] = useState<string>(tabsData[0].imageSrc);
|
|
const activeTab =
|
|
tabsData.find((tab) => tab.id === activeTabId) ?? tabsData[0];
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("py-16 md:py-24 lg:py-32", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="flex w-full flex-col items-start justify-between gap-8 md:flex-row lg:gap-16">
|
|
<div className="w-full md:max-w-[400px]">
|
|
<h2 className="mb-8 text-start text-3xl font-semibold tracking-tight md:mb-12 md:text-xl">
|
|
هر سرنخ را تا قرارداد دنبال کنید
|
|
</h2>
|
|
<Accordion
|
|
type="single"
|
|
defaultValue="item-1"
|
|
className="w-full"
|
|
onValueChange={(value) => {
|
|
const id = parseInt(value.split("-")[1]);
|
|
setActiveTabId(id);
|
|
setActiveImage(
|
|
tabsData.find((tab) => tab.id === id)?.imageSrc ??
|
|
tabsData[0].imageSrc,
|
|
);
|
|
}}
|
|
>
|
|
{tabsData.map((tab) => (
|
|
<AccordionItem
|
|
key={tab.id}
|
|
value={`item-${tab.id}`}
|
|
className={cn(
|
|
"border-t-2 border-b-0 px-2 transition-all duration-300",
|
|
tab.id === activeTabId
|
|
? "border-primary bg-accent/40"
|
|
: "border-muted hover:bg-accent/20",
|
|
)}
|
|
>
|
|
<AccordionTrigger className="cursor-pointer py-5 text-start no-underline! transition-all">
|
|
<h6
|
|
className={cn(
|
|
"text-xl font-semibold transition-colors duration-300",
|
|
tab.id === activeTabId
|
|
? "text-primary"
|
|
: "text-muted-foreground",
|
|
)}
|
|
>
|
|
{tab.title}
|
|
</h6>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="animate-accordion-down">
|
|
<p className="mt-3 text-start leading-relaxed text-muted-foreground">
|
|
{tab.description}
|
|
</p>
|
|
<div className="mt-6 md:hidden">
|
|
<img
|
|
src={tab.imageSrc}
|
|
alt={`نمای ${tab.title}`}
|
|
className="h-full max-h-80 w-full rounded-md object-cover transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
<div className="relative hidden w-full overflow-hidden rounded-md bg-accent/30 md:block">
|
|
<div className="pointer-events-none absolute inset-0 bg-linear-to-bl from-primary/5 to-transparent" />
|
|
<div className="pt-12 ps-12">
|
|
<img
|
|
src={activeImage}
|
|
alt={`نمای ${activeTab.title}`}
|
|
className="max-h-[490px] w-full rounded-ts-md object-cover transition-all duration-500 ease-in-out"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature131 };
|