85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
title: "مدیریت محصول",
|
|
description:
|
|
"محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
linkText: "فروش آنلاین",
|
|
linkHref: "#",
|
|
},
|
|
{
|
|
title: "پرداخت امن",
|
|
description:
|
|
"پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
linkText: "فروشگاه",
|
|
linkHref: "#",
|
|
},
|
|
{
|
|
title: "ردیابی سفارش",
|
|
description:
|
|
"وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
linkText: "تبدیل خرید",
|
|
linkHref: "#",
|
|
},
|
|
];
|
|
|
|
interface Feature33Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature33 = ({ className }: Feature33Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto mb-14 max-w-2xl text-center">
|
|
<h2 className="mb-8 text-xl font-semibold lg:mb-12 lg:text-2xll">
|
|
فروش آنلاین را مقیاس‌پذیر کنید
|
|
</h2>
|
|
<p className="font-medium text-muted-foreground lg:text-lg">
|
|
تجربه خرید را روان‌تر بسازید
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto max-w-7xl rounded-lg bg-muted pt-10 pe-10 lg:pt-28 lg:pe-32">
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
|
|
alt="مدیریت سفارش"
|
|
className="h-full max-h-[600px] w-full rounded-te-lg rounded-be-lg object-cover"
|
|
/>
|
|
</div>
|
|
<div className="mx-auto mt-14 grid max-w-7xl gap-11 md:grid-cols-2 lg:grid-cols-3 lg:gap-20">
|
|
{features.map((feature, index) => (
|
|
<Card key={index} className="border-0 py-3 shadow-none">
|
|
<CardHeader className="px-0">
|
|
<CardTitle className="text-xl font-medium">
|
|
{feature.title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="px-0">
|
|
<p className="text-muted-foreground">{feature.description}</p>
|
|
</CardContent>
|
|
<CardFooter className="px-0">
|
|
<a
|
|
href={feature.linkHref}
|
|
className="font-semibold hover:underline"
|
|
>
|
|
{feature.linkText}
|
|
</a>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature33 };
|