95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { Calendar, ChevronRight, Terminal, Timer, Wallet } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
} from "@/components/ui/card";
|
|
|
|
const FEATURES = [
|
|
{
|
|
id: "wire-speed",
|
|
description: "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
|
|
srLabel: "فروش آنلاین",
|
|
icon: Timer,
|
|
href: "/pricing",
|
|
},
|
|
{
|
|
id: "fednow",
|
|
description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
|
|
srLabel: "FedNow",
|
|
icon: Wallet,
|
|
href: "/pricing",
|
|
},
|
|
{
|
|
id: "api-speed",
|
|
description: "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
|
|
srLabel: "فروشگاه",
|
|
icon: Terminal,
|
|
href: "/pricing",
|
|
},
|
|
{
|
|
id: "settlement",
|
|
description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
|
|
srLabel: "تبدیل خرید",
|
|
icon: Calendar,
|
|
href: "/pricing",
|
|
},
|
|
];
|
|
|
|
export function Feature194() {
|
|
return (
|
|
<section dir="rtl" lang="fa" className="relative py-32">
|
|
<div className="container max-w-5xl">
|
|
<div className="text-center">
|
|
<h3 className="font-mono text-sm font-semibold text-accent-foreground">
|
|
مدیریت محصول
|
|
</h3>
|
|
|
|
<h2 className="mt-4 text-xl font-semibold tracking-tight text-balance md:text-2xll lg:text-2xll">
|
|
فروش آنلاین را مقیاس‌پذیر کنید
|
|
</h2>
|
|
<p className="mt-3 text-xl font-medium text-pretty text-muted-foreground md:text-xl">
|
|
مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-2 gap-2.5 md:mt-12 lg:mt-20 lg:grid-cols-4 lg:gap-6">
|
|
{FEATURES.map((feature) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<Card key={feature.id} className="flex flex-col text-start">
|
|
<CardHeader className="max-md:p-3">
|
|
<Icon className="size-8 text-primary" />
|
|
<CardDescription className="mt-4 font-medium text-pretty text-foreground">
|
|
{feature.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="mt-auto max-md:p-3">
|
|
<Button
|
|
variant="outline"
|
|
asChild
|
|
className="group w-[min(100%,300px)] gap-1 border-border"
|
|
>
|
|
<a href={feature.href}>
|
|
بیشتر بدانید
|
|
<span className="sr-only">
|
|
{" "}
|
|
درباره {feature.srLabel}
|
|
</span>
|
|
<ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|