115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Package, Phone, Smartphone, Truck } from "lucide-react";
|
|
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/components/ui/item";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Incentive = {
|
|
title: string;
|
|
icon: LucideIcon;
|
|
text: string;
|
|
};
|
|
|
|
type Incentives6Props = {
|
|
incentives: Incentive[];
|
|
className?: string;
|
|
};
|
|
|
|
const INCENTIVES_SECTION: Incentive[] = [
|
|
{
|
|
title: "پشتیبانی مشتریان",
|
|
text: "سوالات پرتکرار را ببینید و بهترین راه‌های تماس با ما را بیابید.",
|
|
icon: Phone,
|
|
},
|
|
{
|
|
title: "اپلیکیشن‌های ما",
|
|
text: "با اپلیکیشن‌های ساده ما، هوشمندانه‌تر خرید کنید و فضای خود را متحول کنید.",
|
|
icon: Smartphone,
|
|
},
|
|
{
|
|
title: "راهنما و آموزش",
|
|
text: "به منابع مفید دسترسی داشته باشید از راهنمای مونتاژ تا پشتیبانی خانه هوشمند.",
|
|
icon: Package,
|
|
},
|
|
{
|
|
title: "پیگیری سفارش",
|
|
text: "به‌روز بمانید سفارش خود را هر زمان پیگیری، ویرایش یا لغو کنید.",
|
|
icon: Truck,
|
|
},
|
|
];
|
|
|
|
const Incentives6 = ({
|
|
incentives = INCENTIVES_SECTION,
|
|
className,
|
|
}: Incentives6Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="max-sm:border-y">
|
|
<div className="container">
|
|
<Carousel
|
|
opts={{
|
|
breakpoints: {
|
|
"(min-width: 640px)": {
|
|
active: false,
|
|
},
|
|
},
|
|
direction: "rtl",
|
|
}}
|
|
>
|
|
<CarouselContent className="ms-0 py-px sm:grid sm:grid-cols-2 lg:grid-cols-4 sm:[&>div]:overflow-auto">
|
|
{incentives.map(({ title, text, icon: Icon }, index) => (
|
|
<CarouselItem
|
|
className="ps-0 not-last:-me-px sm:-mb-px sm:max-lg:odd:-me-px"
|
|
key={index}
|
|
>
|
|
<Item
|
|
className="h-full rounded-none py-16 max-sm:border-transparent"
|
|
variant="outline"
|
|
>
|
|
<ItemContent className="items-center">
|
|
<ItemMedia className="mx-auto mb-3">
|
|
<Icon className="stroke-1.5 size-7 stroke-muted-foreground" />
|
|
</ItemMedia>
|
|
<ItemTitle className="text-center font-serif text-xl text-foreground">
|
|
{title}
|
|
</ItemTitle>
|
|
<ItemDescription className="line-clamp-none max-w-80 text-center">
|
|
{text}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<div className="flex items-center justify-center sm:hidden">
|
|
<CarouselPrevious
|
|
variant="ghost"
|
|
className="static size-12 translate-0 rtl:rotate-180"
|
|
/>
|
|
<CarouselNext
|
|
variant="ghost"
|
|
className="static size-12 translate-0 rtl:rotate-180"
|
|
/>
|
|
</div>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Incentives6 };
|