Files

85 lines
3.0 KiB
TypeScript

import type { LucideIcon } from "lucide-react";
import { Cpu, Database, Globe, ShieldCheck } from "lucide-react";
import { cn } from "@/lib/utils";
interface FeatureItem {
id: string;
title: string;
description: string;
icon: LucideIcon;
}
const FEATURES: FeatureItem[] = [
{
id: "global-distribution",
title: "موجودی انبار",
description:
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
icon: Globe,
},
{
id: "scalable-compute",
title: "بازگشت مشتری",
description:
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
icon: Cpu,
},
{
id: "managed-databases",
title: "صفحه فرود",
description:
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
icon: Database,
},
{
id: "layered-security",
title: "گزارش فروش",
description:
"کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
icon: ShieldCheck,
},
];
interface Feature230Props {
className?: string;
}
const Feature230 = ({ className }: Feature230Props) => {
return (
<section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
<div className="relative container">
<div className="absolute -top-px left-1/2 h-px w-screen -translate-x-1/2 bg-border" />
<img
src="/block-media/shadcnblocks/block/placeholder-1.svg"
alt="مدیریت سفارش"
className="relative left-1/2 aspect-video max-h-[680px] w-screen max-w-none -translate-x-1/2 rounded-b-xl border-b border-border object-cover lg:static lg:max-w-full lg:translate-x-0 lg:border-x"
/>
<div className="mt-20 grid gap-8 lg:grid-cols-10">
<div className="text-start lg:col-span-4">
<h2 className="mb-8 text-2xll font-medium text-balance md:text-2xll">
فروش آنلاین را مقیاس‌پذیر کنید
</h2>
<p className="text-xl text-pretty text-muted-foreground">
مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
</p>
</div>
<div className="grid gap-8 sm:grid-cols-2 lg:col-span-6">
{FEATURES.map((feature) => (
<div key={feature.id} className="text-start">
<feature.icon className="size-6" />
<h3 className="mt-4 text-lg font-medium">{feature.title}</h3>
<p className="mt-2 text-pretty text-muted-foreground">
{feature.description}
</p>
</div>
))}
</div>
</div>
</div>
</section>
);
};
export { Feature230 };