92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Gift, Headphones, RefreshCw, ShieldCheck } 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;
|
|
};
|
|
|
|
interface Incentives1Props {
|
|
incentives: Incentive[];
|
|
className?: string;
|
|
}
|
|
|
|
const INCENTIVES: Incentive[] = [
|
|
{
|
|
id: "1",
|
|
title: "پشتیبانی فنی",
|
|
text: "هفت روز هفته، پشتیبانی ۲۴ ساعته",
|
|
icon: Headphones,
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "تعویض سریع",
|
|
text: "پردازش مرجوعی تا ۶۰ روز",
|
|
icon: RefreshCw,
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "بستهبندی ویژه",
|
|
text: "بستهبندی رایگان برای خریدهای بالای ۱۰۰ ریال",
|
|
icon: Gift,
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "ضمانت محصول",
|
|
text: "گارانتی بیدردسر و بدون پیچیدگی",
|
|
icon: ShieldCheck,
|
|
},
|
|
];
|
|
|
|
const Incentives1 = ({
|
|
incentives = INCENTIVES,
|
|
className,
|
|
}: Incentives1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<Carousel
|
|
opts={{
|
|
breakpoints: {
|
|
"(min-width: 768px)": {
|
|
active: false,
|
|
},
|
|
},
|
|
align: "start",
|
|
direction: "rtl",
|
|
}}
|
|
>
|
|
<CarouselContent className="md:ms-0 md:grid md:grid-cols-[repeat(2,_minmax(12.5rem,_18.75rem))] md:justify-center md:gap-5 xl:grid-cols-[repeat(4,_minmax(12.5rem,_18.75rem))]">
|
|
{incentives.map(({ title, icon: Icon, text, id }) => (
|
|
<CarouselItem key={id} className="basis-75 md:ps-0">
|
|
<div className="flex items-center gap-6">
|
|
<div className="shrink-0 basis-16">
|
|
<div className="flex size-16 place-content-center place-items-center rounded-full border">
|
|
<Icon className="w-10" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 space-y-1 text-start">
|
|
<h3 className="text-base font-semibold">{title}</h3>
|
|
<p className="text-sm">{text}</p>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Incentives1 };
|