100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import { ArrowRight, Clock } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const DATA = [
|
||
{
|
||
title: "موجودی انبار",
|
||
description:
|
||
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
||
duration: "۵ دقیقه",
|
||
},
|
||
{
|
||
title: "بازگشت مشتری",
|
||
description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
||
duration: "۵ دقیقه",
|
||
},
|
||
{
|
||
title: "صفحه فرود",
|
||
description:
|
||
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
||
duration: "۵ دقیقه",
|
||
},
|
||
{
|
||
title: "گزارش فروش",
|
||
description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
|
||
duration: "۵ دقیقه",
|
||
},
|
||
];
|
||
|
||
interface Feature181Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Feature181 = ({ className }: Feature181Props) => {
|
||
return (
|
||
<section
|
||
dir="rtl"
|
||
lang="fa"
|
||
className={cn(
|
||
"w-full max-w-full overflow-x-hidden py-32",
|
||
className,
|
||
)}
|
||
>
|
||
<div className="container min-w-0">
|
||
<div className="text-start">
|
||
<h2 className="mb-6 text-3xl font-semibold text-balance md:text-4xl">
|
||
فروش آنلاین را مقیاس‌پذیر کنید
|
||
</h2>
|
||
<Button className="rounded-full">
|
||
شروع کنید
|
||
<ArrowRight className="ms-2 size-4 rtl:rotate-180" />
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||
{DATA.map((feature, index) => (
|
||
<div
|
||
key={feature.title}
|
||
className={cn(
|
||
"flex min-w-0 flex-col px-4 py-8 sm:px-6 md:py-0 md:pt-6",
|
||
index < DATA.length - 1 && "border-b md:border-b-0",
|
||
"md:border-s",
|
||
)}
|
||
>
|
||
<div className="relative min-w-0 overflow-hidden">
|
||
<p className="mb-10 text-6xl font-medium sm:mb-14 sm:text-8xl lg:mb-16 lg:text-9xl">
|
||
{(index + 1).toLocaleString("fa-IR", {
|
||
minimumIntegerDigits: 2,
|
||
})}
|
||
</p>
|
||
<div className="pointer-events-none absolute inset-0 bg-linear-to-e from-transparent to-background" />
|
||
</div>
|
||
|
||
<p className="mt-2 mb-2 text-base font-semibold sm:mt-4">
|
||
{feature.title}
|
||
</p>
|
||
<p className="mb-6 text-sm text-pretty text-muted-foreground sm:text-base">
|
||
{feature.description}
|
||
</p>
|
||
<Badge
|
||
variant="outline"
|
||
className="h-auto w-fit max-w-full gap-2 py-2 whitespace-normal"
|
||
>
|
||
<Clock className="size-4 shrink-0" />
|
||
{feature.duration}
|
||
</Badge>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Feature181 };
|