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