90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
import { DollarSign, KeyRound, Timer } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const benefits = [
|
|
{
|
|
title: "مدیریت محصول",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
icon: Timer,
|
|
},
|
|
{
|
|
title: "پرداخت امن",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
icon: DollarSign,
|
|
},
|
|
{
|
|
title: "ردیابی سفارش",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
icon: KeyRound,
|
|
},
|
|
];
|
|
|
|
interface Feature89Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature89 = ({ className }: Feature89Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
|
|
<div className="relative container">
|
|
<div className="pointer-events-none absolute inset-0 -top-20 -z-10 mx-auto hidden h-[500px] w-[500px] bg-[radial-gradient(var(--color-gray-400)_1px,transparent_1px)] [mask-image:radial-gradient(circle_at_center,white_250px,transparent_250px)] [background-size:6px_6px] opacity-25 lg:block" />
|
|
<div className="relative flex justify-between gap-16">
|
|
<div className="pointer-events-none absolute inset-0 hidden bg-linear-to-t from-background via-transparent to-transparent lg:block" />
|
|
|
|
<div className="w-full max-w-96 shrink-0 justify-between">
|
|
<p className="font-mono text-xs text-muted-foreground">
|
|
فروش آنلاین
|
|
</p>
|
|
<h2 className="mt-6 mb-3 text-3xl font-medium lg:text-xl">
|
|
فروشگاه
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
فروش آنلاین را مقیاس‌پذیر کنید
|
|
</p>
|
|
</div>
|
|
<div className="hidden w-full max-w-3xl shrink-0 lg:block">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="مدیریت سفارش"
|
|
className="max-h-[450px] w-full max-w-3xl min-w-[450px] rounded-lg border object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="relative mt-8 grid md:grid-cols-3">
|
|
{benefits.map((benefit) => (
|
|
<div
|
|
key={benefit.title}
|
|
className="flex flex-col gap-y-6 px-2 py-10 md:p-6 lg:p-8"
|
|
>
|
|
<benefit.icon className="size-6 shrink-0" />
|
|
<div>
|
|
<h3 className="text-lg font-medium">{benefit.title}</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className="absolute -inset-x-4 top-0 h-px bg-input md:hidden" />
|
|
<div className="absolute -inset-x-4 top-[-0.5px] row-start-2 h-px bg-input md:hidden" />
|
|
<div className="absolute -inset-x-4 top-[-0.5px] row-start-3 h-px bg-input md:hidden" />
|
|
<div className="absolute -inset-x-4 bottom-0 row-start-4 h-px bg-input md:hidden" />
|
|
<div className="absolute -start-2 -top-2 bottom-0 w-px bg-input md:hidden" />
|
|
<div className="absolute -end-2 -top-2 bottom-0 col-start-2 w-px bg-input md:hidden" />
|
|
<div className="absolute -inset-x-2 top-0 hidden h-px bg-input md:block" />
|
|
<div className="absolute -top-2 bottom-0 start-0 hidden w-px bg-input md:block" />
|
|
<div className="absolute -top-2 -start-px bottom-0 col-start-2 hidden w-px bg-input md:block" />
|
|
<div className="absolute -top-2 -start-px bottom-0 col-start-3 hidden w-px bg-input md:block" />
|
|
<div className="absolute -top-2 end-0 bottom-0 hidden w-px bg-input md:block" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature89 };
|