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>
|
|||
|
|
);
|
|||
|
|
};
|