104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
title: "مدیریت محصول",
|
|
category: "فروش آنلاین",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "مدیریت سفارش",
|
|
},
|
|
},
|
|
{
|
|
title: "پرداخت امن",
|
|
category: "فروشگاه",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
alt: "داشبورد فروش",
|
|
},
|
|
},
|
|
{
|
|
title: "ردیابی سفارش",
|
|
category: "تبدیل خرید",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "پنل فروشگاه آنلاین",
|
|
},
|
|
},
|
|
{
|
|
title: "تخفیف هوشمند",
|
|
category: "مدیریت سفارش",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
alt: "مدیریت سفارش",
|
|
},
|
|
},
|
|
{
|
|
title: "موجودی انبار",
|
|
category: "فروش آنلاین",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
|
|
alt: "داشبورد فروش",
|
|
},
|
|
},
|
|
{
|
|
title: "بازگشت مشتری",
|
|
category: "فروشگاه",
|
|
image: {
|
|
src: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
|
|
alt: "پنل فروشگاه آنلاین",
|
|
},
|
|
},
|
|
];
|
|
|
|
interface Feature115Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature115 = ({ className }: Feature115Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
|
<Badge variant="outline">تبدیل خرید</Badge>
|
|
<h1 className="text-3xl font-semibold md:text-2xll">فروش آنلاین را مقیاس‌پذیر کنید</h1>
|
|
<p className="max-w-2xl text-muted-foreground md:text-lg">
|
|
تجربه خرید را روان‌تر بسازید
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<Card key={feature.title} className="border-none bg-muted/60">
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-lg font-semibold md:text-xl">
|
|
{feature.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-muted-foreground md:text-lg">
|
|
{feature.category}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="px-7 pb-7">
|
|
<img
|
|
src={feature.image.src}
|
|
alt={feature.image.alt}
|
|
className="w-full rounded-xl object-cover"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature115 };
|