96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const topFeatures = [
|
|
{
|
|
title: "موجودی انبار",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
},
|
|
{
|
|
title: "بازگشت مشتری",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
},
|
|
];
|
|
|
|
const bottomFeatures = [
|
|
{
|
|
title: "صفحه فرود",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
},
|
|
{
|
|
title: "گزارش فروش",
|
|
description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
|
|
},
|
|
{
|
|
title: "مدیریت محصول",
|
|
description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
},
|
|
];
|
|
|
|
function FeatureLink({
|
|
title,
|
|
description,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
}) {
|
|
return (
|
|
<a
|
|
href="#"
|
|
className="flex flex-col gap-4 rounded-xl border p-6 hover:border-primary"
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<h3 className="text-lg font-medium">{title}</h3>
|
|
<span className="flex size-8 shrink-0 items-center justify-center rounded-full border">
|
|
<ArrowRight className="h-auto w-4 rtl:rotate-180" />
|
|
</span>
|
|
</div>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
interface Feature103Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature103 = ({ className }: Feature103Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col gap-3">
|
|
<Badge variant="outline" className="w-fit">
|
|
فروش آنلاین
|
|
</Badge>
|
|
<h2 className="text-xl md:text-xl">فروش آنلاین را مقیاس‌پذیر کنید</h2>
|
|
</div>
|
|
<div className="mt-10 grid gap-6 md:grid-cols-2">
|
|
{topFeatures.map((feature) => (
|
|
<FeatureLink
|
|
key={feature.title}
|
|
title={feature.title}
|
|
description={feature.description}
|
|
/>
|
|
))}
|
|
<div className="grid gap-6 md:col-span-2 md:grid-cols-3">
|
|
{bottomFeatures.map((feature) => (
|
|
<FeatureLink
|
|
key={feature.title}
|
|
title={feature.title}
|
|
description={feature.description}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature103 };
|