104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowRight,
|
|
BadgeCheck,
|
|
Clock,
|
|
Pyramid,
|
|
Sparkle,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DataItem {
|
|
title: string;
|
|
description: string;
|
|
image: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const DATA: DataItem[] = [
|
|
{
|
|
title: "موجودی انبار",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
|
icon: <Zap className="size-5" />,
|
|
},
|
|
{
|
|
title: "بازگشت مشتری",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
|
icon: <Pyramid className="size-5" />,
|
|
},
|
|
{
|
|
title: "صفحه فرود",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
|
icon: <Sparkle className="size-5" />,
|
|
},
|
|
{
|
|
title: "گزارش فروش",
|
|
description:
|
|
"کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
|
|
image: "/block-media/shadcnblocks/block/placeholder-4.svg",
|
|
icon: <BadgeCheck className="size-5" />,
|
|
},
|
|
];
|
|
|
|
interface Feature181Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature181 = ({ className }: Feature181Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="text-start">
|
|
<h2 className="mb-6 text-3xl font-semibold text-balance lg:text-xl">
|
|
فروش آنلاین را مقیاس‌پذیر کنید
|
|
</h2>
|
|
<Button className="me-4 rounded-full">
|
|
شروع کنید
|
|
<ArrowRight className="ms-2 size-4 rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4">
|
|
{DATA.map((feature, index) => (
|
|
<div
|
|
key={feature.title}
|
|
className="mt-0 flex flex-col border-s px-6 sm:mt-4 md:mt-6"
|
|
>
|
|
<div className="relative">
|
|
<h1 className="mb-16 bg-linear-to-e from-white to-transparent bg-clip-text text-9xl">
|
|
{(index + 1).toLocaleString("fa-IR", {
|
|
minimumIntegerDigits: 2,
|
|
})}
|
|
</h1>
|
|
<div className="absolute inset-0 bg-linear-to-e from-white to-transparent opacity-100" />
|
|
</div>
|
|
|
|
<p className="text-md mt-4 mb-2 font-semibold">{feature.title}</p>
|
|
<p className="text-md mb-6 text-pretty text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
<Badge variant="outline" className="w-fit gap-2 py-2">
|
|
<Clock className="size-4" />
|
|
مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature181 };
|