112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Handshake,
|
|
Download,
|
|
GraduationCap,
|
|
Headphones,
|
|
RefreshCw,
|
|
BarChart3,
|
|
} from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const cooperationSteps = [
|
|
{
|
|
title: "برگزاری جلسه معرفی و نیازسنجی",
|
|
description: "شناسایی نیازها و تعیین اهداف همکاری",
|
|
icon: Handshake,
|
|
},
|
|
{
|
|
title: "نصب نسخه اختصاصی",
|
|
description: "راه‌اندازی سامانه متناسب با کسب‌وکار شما",
|
|
icon: Download,
|
|
},
|
|
{
|
|
title: "آموزش و راه‌اندازی",
|
|
description: "آموزش تیم و راه‌اندازی عملیاتی",
|
|
icon: GraduationCap,
|
|
},
|
|
{
|
|
title: "۶ ماه پشتیبانی رایگان",
|
|
description: "پشتیبانی فنی در ماه‌های اول همکاری",
|
|
icon: Headphones,
|
|
},
|
|
{
|
|
title: "ادامه پشتیبانی و توسعه ماهانه",
|
|
description: "پشتیبانی مستمر و به‌روزرسانی‌های دوره‌ای",
|
|
icon: RefreshCw,
|
|
},
|
|
{
|
|
title: "ارزیابی و بهینه‌سازی مستمر",
|
|
description: "بررسی عملکرد و پیشنهاد بهبود",
|
|
icon: BarChart3,
|
|
},
|
|
];
|
|
|
|
interface Feature104Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature104 = ({ className }: Feature104Props) => {
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"overflow-visible border-t border-border/50 bg-background py-10 sm:py-16 md:py-24 lg:py-32",
|
|
className
|
|
)}
|
|
dir="rtl"
|
|
>
|
|
<div className="container mx-auto px-4 sm:px-6">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Badge
|
|
variant="outline"
|
|
className="mb-3 sm:mb-4 border-primary/50 bg-background px-3 py-1 sm:px-4 sm:py-1.5 text-caption font-medium text-foreground"
|
|
>
|
|
مسیر همکاری
|
|
</Badge>
|
|
<h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
|
|
فرآیند همکاری
|
|
</h2>
|
|
<p className="mt-3 text-body text-muted-foreground sm:mt-4">
|
|
از اولین تماس تا راه‌اندازی و پشتیبانی، در هر مرحله همراه شما
|
|
هستیم تا همکاری با مستر دکور ساده و شفاف باشد.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-8 max-w-5xl sm:mt-12">
|
|
<div className="relative overflow-hidden rounded-lg border border-border bg-card sm:rounded-xl">
|
|
<img
|
|
src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-letters-and-arrows-flying-out-of-a-black-hole.svg"
|
|
alt=""
|
|
className="h-32 w-full scale-x-[-1] object-cover object-center opacity-60 sm:h-40 md:h-48"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-10 grid max-w-6xl gap-4 sm:mt-16 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{cooperationSteps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm transition-colors hover:bg-accent/50 sm:gap-4 sm:p-6"
|
|
>
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary sm:size-10">
|
|
<step.icon className="size-5" />
|
|
</div>
|
|
<h3 className="text-heading-4 font-semibold leading-tight text-foreground">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-body-sm text-muted-foreground">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature104 };
|