125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { motion } from "framer-motion";
|
|||
|
|
import { ArrowDown } from "lucide-react";
|
|||
|
|
import React from "react";
|
|||
|
|
|
|||
|
|
import { useGoogleFont } from "@/hooks/use-google-font";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
const processSteps = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: "کشف",
|
|||
|
|
bgColor: "bg-sky-200",
|
|||
|
|
numberPosition: "right-[40%] lg:right-[30%]",
|
|||
|
|
number: "۰۰۱",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: "استراتژی",
|
|||
|
|
bgColor: "bg-sky-300",
|
|||
|
|
numberPosition: "right-[52%] lg:right-[42%]",
|
|||
|
|
number: "۰۰۲",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
title: "طراحی",
|
|||
|
|
bgColor: "bg-sky-400",
|
|||
|
|
numberPosition: "right-[62%] lg:right-[58%]",
|
|||
|
|
number: "۰۰۰۳",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
title: "توسعه",
|
|||
|
|
bgColor: "bg-sky-500",
|
|||
|
|
numberPosition: "right-[75%] lg:right-[72%]",
|
|||
|
|
number: "۰۰۰۴",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
title: "راهاندازی",
|
|||
|
|
bgColor: "bg-sky-600",
|
|||
|
|
numberPosition: "right-[85%] lg:right-[85%]",
|
|||
|
|
number: "۰۰۰۵",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
interface Process3Props {
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Process3 = ({ className }: Process3Props) => {
|
|||
|
|
useGoogleFont("Antonio");
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
dir="rtl"
|
|||
|
|
lang="fa"
|
|||
|
|
className={cn("bg-background py-32", className)}
|
|||
|
|
style={
|
|||
|
|
{
|
|||
|
|
"--font-mono": "Antonio",
|
|||
|
|
} as React.CSSProperties
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div className="container">
|
|||
|
|
<div className="flex justify-between gap-[10vw]">
|
|||
|
|
<h2 className="hidden pt-4 font-mono text-xl tracking-tighter lg:block">
|
|||
|
|
۰ - ۵
|
|||
|
|
</h2>
|
|||
|
|
<div className="w-full max-w-xl px-2">
|
|||
|
|
<h1 className="text-start text-2xll font-semibold tracking-tighter md:text-8xl">
|
|||
|
|
فرآیند
|
|||
|
|
</h1>
|
|||
|
|
<p className="mt-6 max-w-md text-start text-lg text-foreground/50">
|
|||
|
|
رویکرد ساختاریافته ما برای تحویل نتایج برجسته در هر پروژه
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<h2 className="hidden pt-4 font-mono text-xl tracking-tighter md:block">
|
|||
|
|
۰۰۲
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
<ul className="mt-20">
|
|||
|
|
{processSteps.map((step, index) => (
|
|||
|
|
<motion.li
|
|||
|
|
initial={{ opacity: 0, y: 30 }}
|
|||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{
|
|||
|
|
type: "spring",
|
|||
|
|
stiffness: 100,
|
|||
|
|
damping: 20,
|
|||
|
|
delay: index * 0.1,
|
|||
|
|
}}
|
|||
|
|
key={step.id}
|
|||
|
|
className="relative flex h-14 w-full items-center md:h-22"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"absolute left-1/2 h-14 w-screen -translate-x-1/2 md:h-22",
|
|||
|
|
step.bgColor,
|
|||
|
|
)}
|
|||
|
|
></div>
|
|||
|
|
<div className="relative z-10 flex items-center gap-2">
|
|||
|
|
<ArrowDown className="md:size-12" />
|
|||
|
|
<h3 className="text-start text-3xl font-medium tracking-tight md:text-2xll">
|
|||
|
|
{step.title}
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<span
|
|||
|
|
className={cn(
|
|||
|
|
"font-antonio absolute -bottom-1 text-2xll font-semibold tracking-tighter text-white md:-bottom-3 md:text-8xl",
|
|||
|
|
step.numberPosition,
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{step.number}
|
|||
|
|
</span>
|
|||
|
|
</motion.li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { Process3 };
|