108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Gift, Headphones, RefreshCw } from "lucide-react";
|
|
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Incentive = {
|
|
title: string;
|
|
icon: LucideIcon;
|
|
text: string;
|
|
id: string;
|
|
};
|
|
|
|
type IncentivesSection = {
|
|
list: Incentive[];
|
|
title: string;
|
|
};
|
|
|
|
interface Incentives2Props extends IncentivesSection {
|
|
className?: string;
|
|
}
|
|
|
|
const INCENTIVES_SECTION: IncentivesSection = {
|
|
title: "خدمات مطمئن، خرید آسان",
|
|
list: [
|
|
{
|
|
id: "1",
|
|
title: "پشتیبانی فنی",
|
|
text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
|
|
icon: Headphones,
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "تعویض سریع",
|
|
text: "پردازش مرجوعی تا ۶۰ روز",
|
|
icon: RefreshCw,
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "بستهبندی ویژه",
|
|
text: "بستهبندی رایگان برای خریدهای بالای ۱۰۰ ریال",
|
|
icon: Gift,
|
|
},
|
|
],
|
|
};
|
|
|
|
const Incentives2 = ({
|
|
list = INCENTIVES_SECTION.list,
|
|
title = INCENTIVES_SECTION.title,
|
|
className,
|
|
}: Incentives2Props) => {
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("overflow-hidden bg-primary py-12.5", className)}
|
|
>
|
|
<div className="container">
|
|
<div className="flex flex-col gap-10 md:items-center xl:grid xl:grid-cols-4 xl:gap-15">
|
|
<h2 className="text-xl leading-snug font-bold text-primary-foreground max-xl:text-center xl:text-start xl:text-3xl">
|
|
{title}
|
|
</h2>
|
|
<div className="max-md:-mx-[calc((100vw-var(--breakpoint-sm)+4rem)/2)] max-sm:-mx-8 xl:col-span-3">
|
|
<Carousel
|
|
opts={{
|
|
breakpoints: {
|
|
"(min-width: 768px)": {
|
|
active: false,
|
|
},
|
|
},
|
|
align: "center",
|
|
direction: "rtl",
|
|
}}
|
|
>
|
|
<CarouselContent className="ms-0 md:justify-center md:gap-7.5">
|
|
{list.map(({ title, icon: Icon, text, id }) => (
|
|
<CarouselItem
|
|
key={id}
|
|
className="ps-0 sm:basis-100 md:shrink md:basis-1/3"
|
|
>
|
|
<div className="mx-auto flex w-full max-w-75 flex-col items-center gap-5">
|
|
<Icon className="size-10 stroke-primary-foreground stroke-1" />
|
|
<div className="space-y-3">
|
|
<h3 className="text-center text-lg font-bold text-primary-foreground xl:text-xl">
|
|
{title}
|
|
</h3>
|
|
<p className="text-center text-primary-foreground/80">
|
|
{text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Incentives2 };
|