117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Timeline10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Timeline10 = ({ className }: Timeline10Props) => {
|
|
const currentPhase = 2;
|
|
|
|
const timelinePhases = [
|
|
{
|
|
id: 0,
|
|
date: "۲۵ دی ۱۴۲",
|
|
title: "فاز اول",
|
|
description:
|
|
"جمع‌آوری داده اولیه و طراحی معماری مدل برای سیستم هوش مصنوعی.",
|
|
},
|
|
{
|
|
id: 1,
|
|
date: "۱۰ فروردین ۱۴۰۳",
|
|
title: "فاز دوم",
|
|
description:
|
|
"آموزش و اعتبارسنجی مدل با پیاده‌سازی مجموعه داده اصلی.",
|
|
},
|
|
{
|
|
id: 2,
|
|
date: "۲۵ خرداد ۱۴۰۳",
|
|
title: "فاز سوم",
|
|
description:
|
|
"یکپارچه‌سازی قابلیت‌های پیشرفته و بهینه‌سازی عملکرد.",
|
|
},
|
|
{
|
|
id: 3,
|
|
date: "۱۱ شهریور ۱۴۰۳",
|
|
title: "فاز چهارم",
|
|
description:
|
|
"آزمایش نهایی، استقرار و راه‌اندازی سیستم بهبود مستمر.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
|
|
<div className="container flex flex-col items-center">
|
|
<h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-2xll">
|
|
خط زمانی
|
|
</h1>
|
|
<Card className="relative w-full border-none shadow-none md:py-16">
|
|
<CardContent className="p-0">
|
|
<div className="relative flex flex-col items-center md:mt-12">
|
|
<Separator className="absolute -top-8 start-0 hidden md:block" />
|
|
{currentPhase && (
|
|
<motion.div
|
|
initial={{ width: 0 }}
|
|
whileInView={{
|
|
width: `${(currentPhase / timelinePhases.length) * 104}%`,
|
|
}}
|
|
transition={{ ease: "easeOut", duration: 0.5 }}
|
|
className={cn(
|
|
"absolute -top-[32px] start-0 hidden h-0.5 bg-foreground md:block",
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
<div className="grid gap-6 md:grid-cols-4">
|
|
{timelinePhases.map((phase, index) => (
|
|
<div key={phase.id} className="relative space-y-2">
|
|
<Separator
|
|
orientation="vertical"
|
|
className="absolute top-6 start-0 block md:hidden"
|
|
/>
|
|
{index == 0 && (
|
|
<motion.div
|
|
initial={{ height: 0 }}
|
|
whileInView={{
|
|
height: currentPhase * 112,
|
|
}}
|
|
transition={{ ease: "easeOut", duration: 0.5 }}
|
|
className={cn(
|
|
"absolute start-0 z-10 w-0.5 bg-foreground md:hidden",
|
|
)}
|
|
/>
|
|
)}
|
|
<div className="absolute top-0 -start-[9px] z-10 mb-5 flex size-5 items-center justify-center rounded-full bg-foreground p-1 md:-top-10 md:start-0">
|
|
<div className="size-full rounded-full bg-background" />
|
|
</div>
|
|
|
|
<div className="ps-7 text-start md:ps-0">
|
|
<p className="text-sm text-muted-foreground">
|
|
{phase.date}
|
|
</p>
|
|
<h2 className="text-xl font-bold tracking-tighter text-foreground">
|
|
{phase.title}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground">
|
|
{phase.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Timeline10 };
|