109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import React, { useState } from "react";
|
|
|
|
import { useGoogleFont } from "@/hooks/use-google-font";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Process4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Process4 = ({ className }: Process4Props) => {
|
|
const process = [
|
|
{
|
|
title: "انتخاب پلن",
|
|
description:
|
|
"پلن متناسب با نیاز و بودجه خود را انتخاب کنید تا مسیر همکاری و زمان‌بندی پروژه از همان ابتدا مشخص شود.",
|
|
image: "/block-media/shadcnblocks/block/guri4/img14.png",
|
|
},
|
|
{
|
|
title: "ثبت درخواست",
|
|
description:
|
|
"جزئیات پروژه را برای ما ارسال کنید تا تیم ما بررسی کند و در کوتاه‌ترین زمان برای هماهنگی با شما تماس بگیرد.",
|
|
image: "/block-media/shadcnblocks/block/guri4/img10.png",
|
|
},
|
|
{
|
|
title: "تحویل پروژه",
|
|
description:
|
|
"پروژه آماده را در موعد توافق‌شده تحویل بگیرید و از کیفیت کار و پشتیبانی پس از تحویل اطمینان حاصل کنید.",
|
|
image: "/block-media/shadcnblocks/block/guri4/img11.png",
|
|
},
|
|
];
|
|
|
|
const [active, setActive] = useState<number | null>(0);
|
|
|
|
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="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">
|
|
<h1 className="text-start text-2xll font-semibold tracking-tight lg:text-2xll">
|
|
فرآیند
|
|
<sup className="align-top font-mono text-lg tracking-tight text-foreground/40">
|
|
۰۰۰۳
|
|
</sup>
|
|
</h1>
|
|
<p className="text-start text-base text-foreground/50">
|
|
سه مرحله ساده از انتخاب تا تحویل همکاری با ما سریع، شفاف و
|
|
بدون پیچیدگی است.
|
|
</p>
|
|
</div>
|
|
<ul className="relative col-span-4 w-full space-y-10">
|
|
{process.map((step, index) => (
|
|
<li
|
|
onMouseEnter={() => setActive(index)}
|
|
key={index}
|
|
className={cn(
|
|
"relative flex w-full max-w-xl cursor-pointer flex-col justify-between gap-10 rounded-3xl bg-background p-10 md:flex-row lg:items-center ltr:ml-auto ltr:mr-20 rtl:mr-auto rtl:ml-20",
|
|
index === active ? "bg-background" : "lg:bg-transparent",
|
|
)}
|
|
>
|
|
<AnimatePresence mode="wait">
|
|
{index === active && (
|
|
<motion.img
|
|
key={step.image}
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.3 }}
|
|
src={step.image}
|
|
alt={step.title}
|
|
className="absolute top-0 size-30 -translate-y-1/2 rounded-2xl object-cover ltr:right-0 ltr:translate-x-1/4 lg:size-40 ltr:lg:translate-x-1/2 rtl:left-0 rtl:-translate-x-1/4 rtl:lg:-translate-x-1/2"
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
<div>
|
|
<h2 className="mb-4 text-start font-bold tracking-tight lg:text-3xl">
|
|
مرحله {(index + 1).toLocaleString("fa-IR")}
|
|
</h2>
|
|
<h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-xl">
|
|
{step.title}
|
|
</h3>
|
|
<p className="line-clamp-2 text-start text-foreground/50">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Process4 };
|