Files
mr_decor/components/sections/feature/solution-section.tsx
T

76 lines
2.7 KiB
TypeScript

import { cn } from "@/lib/utils";
import { Clock, ShoppingCart, Eye, FileText, ToggleLeft, Settings } from "lucide-react";
interface SolutionSectionProps {
className?: string;
}
export default function SolutionSection({ className }: SolutionSectionProps) {
const features = [
{
icon: Clock,
title: "نمایش قیمت لحظه‌ای به مشتریان",
description: "دسترسی آنی به آخرین قیمت‌های بازار"
},
{
icon: ShoppingCart,
title: "ثبت و مدیریت سفارش‌ها",
description: "سیستم جامع ثبت و پیگیری سفارش‌ها"
},
{
icon: Eye,
title: "مشاهده آنلاین مانده حساب هر مشتری",
description: "دسترسی لحظه‌ای به وضعیت حساب مشتریان"
},
{
icon: FileText,
title: "دسترسی به ریز کامل معاملات در هر ساعت از شبانه‌روز",
description: "گزارش‌گیری دقیق و کامل از تمام معاملات"
},
{
icon: ToggleLeft,
title: "کنترل وضعیت بازار (باز / بسته)",
description: "مدیریت وضعیت بازار به صورت لحظه‌ای"
},
{
icon: Settings,
title: "پنل مدیریت پیشرفته برای ادمین",
description: "ابزارهای کامل مدیریت و کنترل سیستم"
}
];
return (
<section className={cn("py-16 md:py-24 lg:py-32", className)}>
<div className="container mx-auto max-w-6xl px-6">
<div className="flex flex-col items-start gap-8 lg:gap-12 lg:px-16 xl:gap-32">
<h2 className="text-heading-2 font-semibold md:shrink-0 lg:max-w-1/3 lg:max-w-3xl">
یک پلتفرم اختصاصی برای مدیریت کامل معاملات
</h2>
<div className="grid w-full gap-6 md:grid-cols-2">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<div
key={index}
className="flex rounded-lg border border-border bg-accent p-6 md:p-8"
>
<Icon className="mr-3 size-5 shrink-0 lg:mr-6 lg:size-6 text-primary" />
<div>
<div className="text-body-sm mb-3 h-5 font-semibold text-accent-foreground">
{feature.title}
</div>
<div className="text-body-sm font-medium text-muted-foreground">
{feature.description}
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</section>
);
}