120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import { Asterisk, CornerDownRight } from "lucide-react";
|
||
import React from "react";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Process1Props {
|
||
className?: string;
|
||
}
|
||
|
||
const Process1 = ({ className }: Process1Props) => {
|
||
const process = [
|
||
{
|
||
step: "۱",
|
||
title: "کشف و تحقیق",
|
||
description:
|
||
"با درک اهداف کسب‌وکار، مخاطب هدف و چالش‌های فعلی شما شروع می‌کنیم. این فاز شامل تحقیق، تحلیل و برنامه‌ریزی استراتژیک برای شناسایی فرصت‌هاست.",
|
||
},
|
||
{
|
||
step: "۲",
|
||
title: "استراتژی و برنامه‌ریزی",
|
||
description:
|
||
"بر اساس یافته‌ها، استراتژی جامعی متناسب با اهداف شما توسعه می‌دهیم. این شامل تعریف رویکرد، زمان‌بندی و نقاط عطف کلیدی برای موفقیت است.",
|
||
},
|
||
{
|
||
step: "۰۳",
|
||
title: "اجرا و توسعه",
|
||
description:
|
||
"استراتژی را از طریق پیاده‌سازی و توسعه دقیق به واقعیت تبدیل می‌کنیم. تیم ما به‌صورت همکاری کار می‌کند تا هر جزئیات با نیازها و استانداردهای شما هم‌خوان باشد.",
|
||
},
|
||
{
|
||
step: "۰۴",
|
||
title: "بهینه‌سازی و بهبود",
|
||
description:
|
||
"عملکرد را به‌طور مستمر پایش و بازخورد جمع‌آوری می‌کنیم تا راه‌حل را پالایش و بهبود دهیم. این فرآیند تکراری موفقیت و رشد بلندمدت را تضمین می‌کند.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||
<div className="container">
|
||
<div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
|
||
<div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
|
||
<div className="relative w-fit text-2xll font-semibold tracking-tight lg:text-2xll">
|
||
<h1 className="w-fit">فرآیند ما</h1>
|
||
<Asterisk className="absolute -top-2 -left-2 size-5 text-orange-500 md:size-10 lg:-left-14" />
|
||
</div>
|
||
<p className="text-start text-base text-foreground/50">
|
||
از کشف نیازهای شما تا تحویل نهایی، هر مرحله با دقت و شفافیت پیش
|
||
می‌رود تا بهترین نتیجه حاصل شود.
|
||
</p>
|
||
|
||
<Button
|
||
variant="ghost"
|
||
className="flex items-center justify-start gap-2"
|
||
>
|
||
<CornerDownRight className="text-orange-500 rtl:rotate-180" />
|
||
تماس بگیرید
|
||
</Button>
|
||
</div>
|
||
<ul className="relative col-span-4 w-full lg:ps-22">
|
||
{process.map((step, index) => (
|
||
<li
|
||
key={index}
|
||
className="relative flex flex-col justify-between gap-10 border-t py-8 md:flex-row lg:py-10"
|
||
>
|
||
<Illustration className="absolute top-4 left-0" />
|
||
|
||
<div className="flex size-12 items-center justify-center bg-muted px-4 py-1 tracking-tighter">
|
||
{step.step}
|
||
</div>
|
||
<div>
|
||
<h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-3xl">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-start text-foreground/50">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { Process1 };
|
||
|
||
const Illustration = (props: React.SVGProps<SVGSVGElement>) => {
|
||
return (
|
||
<svg
|
||
width="22"
|
||
height="20"
|
||
viewBox="0 0 22 20"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
{...props}
|
||
>
|
||
<line
|
||
x1="0.607422"
|
||
y1="2.57422"
|
||
x2="21.5762"
|
||
y2="2.57422"
|
||
stroke="#FF0000"
|
||
strokeWidth="4"
|
||
/>
|
||
<line
|
||
x1="19.5762"
|
||
y1="19.624"
|
||
x2="19.5762"
|
||
y2="4.57422"
|
||
stroke="#FF0000"
|
||
strokeWidth="4"
|
||
/>
|
||
</svg>
|
||
);
|
||
};
|