reui-blocks/blocks/timeline11.tsx

"use client";

import { motion } from "framer-motion";
import { Cpu, FlagIcon, LocateFixed, RocketIcon } from "lucide-react";
import React from "react";

import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Timeline11Props {
  className?: string;
}

const Timeline11 = ({ className }: Timeline11Props) => {
  const currentPhase = 2;
  const timelinePhases = [
    {
      id: 0,
      date: "۲۵ دی ۱۴۲",
      title: "فاز اول",
      description: "آغاز مقدمات پروژه و برنامه‌ریزی استراتژیک.",
      icon: RocketIcon,
    },
    {
      id: 1,
      date: "۲۰ اسفند ۱۴۲",
      title: "فاز دوم",
      description: "مرحله پژوهش تفصیلی و توسعه اولیه.",
      icon: Cpu,
    },
    {
      id: 2,
      date: "۱۶ خرداد ۱۴۰۳",
      title: "فاز سوم",
      description: "پیاده‌سازی هسته و دستیابی به نقاط عطف کلیدی.",
      icon: LocateFixed,
    },
    {
      id: 3,
      date: "۳۰ شهریور ۱۴۰۳",
      title: "فاز چهارم",
      description: "اصلاحات نهایی و تکمیل پروژه.",
      icon: FlagIcon,
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container flex flex-col items-center justify-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="relative flex flex-col items-center p-0 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-[33px] start-0 hidden h-0.5 bg-foreground md:block",
                )}
              />
            )}
            <div className="grid gap-6 md:grid-cols-4">
              {timelinePhases.map((phase, index) => {
                const PhaseIcon = phase.icon;
                return (
                  <div key={phase.id} className="relative space-y-2">
                    <Separator
                      orientation="vertical"
                      className="absolute top-6 start-2.5 block md:hidden"
                    />
                    {index == 0 && (
                      <motion.div
                        initial={{ height: 0 }}
                        whileInView={{
                          height: currentPhase * 125,
                        }}
                        transition={{ ease: "easeOut", duration: 0.5 }}
                        className={cn(
                          "absolute top-22 start-2.5 z-10 w-0.5 bg-foreground md:hidden",
                        )}
                      />
                    )}
                    <div className="absolute top-4 -start-6 z-10 mb-5 flex size-18 items-center justify-center rounded-full bg-background p-1 md:-top-17 md:-start-4">
                      <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]">
                        <div className="flex size-full items-center justify-center rounded-md border border-border bg-muted">
                          <PhaseIcon size={16} />
                        </div>
                      </div>
                    </div>

                    <div className="ps-13 text-start md:ps-0">
                      <p className="mt-10 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>
          </CardContent>
        </Card>
      </div>
    </section>
  );
};

export { Timeline11 };