291 lines
9.1 KiB
TypeScript
291 lines
9.1 KiB
TypeScript
"use client";
|
|
|
|
import type { CSSProperties } from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import { ArrowRight, Eye, ScanFace, Users, View } from "lucide-react";
|
|
|
|
import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ImageType = {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
|
|
type VariantType = "1" | "2" | "3" | "4";
|
|
|
|
interface TabItem {
|
|
id: string;
|
|
icon: LucideIcon;
|
|
title: string;
|
|
tabName: string;
|
|
summary: string;
|
|
imageComponent: VariantType;
|
|
images: ImageType[];
|
|
link?: {
|
|
name: string;
|
|
href: string;
|
|
};
|
|
}
|
|
|
|
const TAB_LIST: TabItem[] = [
|
|
{
|
|
id: "active-speaker",
|
|
icon: ScanFace,
|
|
title: "خرید و تأمین",
|
|
tabName: "یکپارچگی",
|
|
summary:
|
|
"درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
|
|
imageComponent: "1",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "گزارش مالی یکپارچه",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "eye-contact",
|
|
icon: Eye,
|
|
title: "فاکتور و پرداخت",
|
|
tabName: "ERP",
|
|
summary:
|
|
"فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
|
|
imageComponent: "2",
|
|
link: {
|
|
name: "بیشتر بدانید",
|
|
href: "",
|
|
},
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "داشبورد ERP",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
alt: "مدیریت عملیات",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
alt: "گزارش مالی یکپارچه",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
|
|
alt: "داشبورد ERP",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "green-screen",
|
|
icon: View,
|
|
title: "ERP",
|
|
tabName: "ERP",
|
|
summary:
|
|
"درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
|
|
imageComponent: "3",
|
|
link: {
|
|
name: "بیشتر بدانید",
|
|
href: "",
|
|
},
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "مدیریت عملیات",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "multicam",
|
|
icon: Users,
|
|
title: "ERP",
|
|
tabName: "عملیات",
|
|
summary:
|
|
"ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
|
|
imageComponent: "4",
|
|
link: {
|
|
name: "بیشتر بدانید",
|
|
href: "",
|
|
},
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "گزارش مالی یکپارچه",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
alt: "داشبورد ERP",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
|
|
alt: "مدیریت عملیات",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
interface ImagesProps {
|
|
images: ImageType[];
|
|
variant?: VariantType;
|
|
}
|
|
|
|
const POSITIONS: CSSProperties[] = [
|
|
{ top: "12%", insetInlineEnd: "36%", rotate: "2.6deg" },
|
|
{ top: "12%", insetInlineEnd: "70%", rotate: "-2.4deg" },
|
|
{ bottom: "16%", insetInlineEnd: "35%", rotate: "1.6deg" },
|
|
{ bottom: "15%", insetInlineEnd: "2%", rotate: "-1.5deg" },
|
|
];
|
|
|
|
const Images = ({ images, variant = "1" }: ImagesProps) => {
|
|
switch (variant) {
|
|
case "1":
|
|
return (
|
|
<div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-ts-[0.5rem] rounded-bs-[0.5rem]">
|
|
<img
|
|
className="block size-full object-cover object-center"
|
|
src={images[0].src}
|
|
alt={images[0].alt}
|
|
/>
|
|
</div>
|
|
);
|
|
case "2":
|
|
return (
|
|
<div className="size-full ps-4">
|
|
<div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
|
|
{images.map((img, i) => (
|
|
<div
|
|
style={POSITIONS[i]}
|
|
className="absolute aspect-[0.845360825] w-[30%] overflow-hidden rounded-[0.5rem] shadow-md"
|
|
key={`img-${variant}-${img.src}`}
|
|
>
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
case "3":
|
|
return (
|
|
<div className="relative ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden rounded-[0.625rem]">
|
|
<div className="absolute start-[5%] top-1/2 aspect-[1.586206897] w-[120%] -translate-y-1/2 overflow-hidden rounded-2xl shadow-xl xl:end-[-22%]">
|
|
<img
|
|
src={images[0].src}
|
|
alt={images[0].alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return (
|
|
<div className="ms-auto aspect-[0.930372149] h-full max-h-[38.75rem] overflow-hidden ps-4 xl:ps-0">
|
|
<div className="grid size-full grid-cols-2 grid-rows-2 gap-[3%]">
|
|
<div className="col-start-1 col-end-2 row-start-1 row-end-2 overflow-hidden rounded-[0.625rem]">
|
|
<img
|
|
src={images[0].src}
|
|
alt={images[0].alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="col-start-1 col-end-2 row-start-2 row-end-3 overflow-hidden rounded-[0.625rem]">
|
|
<img
|
|
src={images[1].src}
|
|
alt={images[1].alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="col-start-2 col-end-3 row-start-1 row-end-3 overflow-hidden rounded-ts-[0.625rem] rounded-bs-[0.625rem]">
|
|
<img
|
|
src={images[2].src}
|
|
alt={images[2].alt}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
interface Feature211Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature211 = ({ className }: Feature211Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="rounded-xl bg-muted py-11">
|
|
<Tabs
|
|
dir="rtl"
|
|
defaultValue={TAB_LIST[0].tabName}
|
|
className="flex-col-reverse gap-10"
|
|
>
|
|
<ScrollableTabsList>
|
|
<TabsList
|
|
dir="rtl"
|
|
className="mx-auto flex !h-auto justify-start overflow-y-hidden bg-muted px-2 lg:w-max lg:items-center lg:justify-center lg:rounded-full"
|
|
>
|
|
{TAB_LIST.map((tab) => (
|
|
<TabsTrigger
|
|
className="shrink-0 rounded-full px-4 py-2 text-sm leading-tight font-medium"
|
|
key={tab.id}
|
|
value={tab.tabName}
|
|
>
|
|
{tab.tabName}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</ScrollableTabsList>
|
|
{TAB_LIST.map((tab) => {
|
|
const Icon = tab.icon;
|
|
|
|
return (
|
|
<TabsContent
|
|
value={tab.tabName}
|
|
dir="rtl"
|
|
className="grid w-full grid-cols-1 items-center gap-8 xl:grid-cols-[37.5rem_1fr]"
|
|
key={tab.id}
|
|
>
|
|
<div className="flex flex-col items-start gap-4 px-8 text-right xl:ps-18">
|
|
<div className="flex size-8 rounded-lg bg-primary text-primary-foreground">
|
|
<Icon className="m-auto size-4" />
|
|
</div>
|
|
<h2 className="font-serif text-2xll text-balance xl:text-2xll">
|
|
{tab.title}
|
|
</h2>
|
|
<p className="mt-4 text-xl text-pretty text-foreground">
|
|
{tab.summary}
|
|
</p>
|
|
<div>
|
|
{tab.link && (
|
|
<Button asChild size="lg" className="w-full gap-2 md:w-fit">
|
|
<a href={tab.link.href}>
|
|
{tab.link.name}
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="h-full w-full justify-self-end ps-4 md:ps-0">
|
|
<Images variant={tab.imageComponent} images={tab.images} />
|
|
</div>
|
|
</TabsContent>
|
|
);
|
|
})}
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature211 };
|