//not all imports are needed *delete me*
    "use client";
    import { cn } from "@/utils/cn";
    import { StrictMode, useState } from "react";
    import * as ReactDOMClient from "react-dom/client";
    import { motion } from 'framer-motion';
    import { useEffect } from 'react';
    import React from "react";
    
    const variants = {
      hidden: { opacity: 0, y: 50 },
      visible: (i: number) => ({
        opacity: 1,
        y: 0,
        transition: {
          delay: i * 0.3,
        },
      }),
    };
    
    const Timeline: React.FC = () => {
      const timelineData = [
        {
          title: "Startup",
          description: "Startup of project",
          date: "8/13/2013",
          color: "bg-warning"
        },
        {
          title: "Expanding",
          description: "Expanding of Project",
          date: "10/20/2014",
          color: "bg-success"
        },
        {
          title: "Bankrupt",
          description: "Shutdown of project",
          date: "7/2/2017",
          color: "bg-danger"
        },
      ];
    
      return (
        <div>
          <ul className="relative border-s border-gray-500 border-opacity-50">
            {timelineData.map((item, index) => (
              <li key={index} className="mb-10 ms-4">
                <div className={`absolute w-3 h-3 ${item.color} rounded-full mt-1.5 -start-1.5`}></div>
                <motion.div
                  className="pl-1"
                  custom={index}
                  initial="hidden"
                  animate="visible"
                  variants={variants}
                >
                  <h1>{item.title}</h1>
                  <p className="text-medium text-gray-300 font-normal">{item.description}</p>
                  <p className="text-sm text-gray-400 font-light">{item.date}</p>
                </motion.div>
              </li>
            ))}
          </ul>
        </div>
      );
    };
    
    export default Timeline;