SGPT/src/shared/components/home/RoadMap.tsx

import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc";
type Props = {};

const roadMapData = [
  {
    phase: "Phase 1",
    listTitle: [
      "Development of CEO Ideology",
      "Website Development and Release",
      "Whitepaper Launch",
      "Subscription Presale",
      "Marketing Partners Advisory Board Formed",
    ],
  },

  {
    phase: "Phase 2",
    listTitle: [
      "CEO DEX Token Launch",
      "Massive Marketing Campaign",
      "Real Time Suprise Buybacks",
      "NFT Staking and APR Staking Launch",
      "5 Million Marketcap Milestone CoinGecko Listing",
    ],
  },

  {
    phase: "Phase 3",
    listTitle: [
      "Swap Development and Launch",
      "Merchandise Launch",
      "Tier 1 CEX Listings",
      "CEO Bridge to ETH, Arbitrium and Polygon",
      "10 Million MarketCap Milestone",
      "CEOAI Bot Creator and integration with AI.",
    ],
  },
  {
    phase: "Phase 4",
    listTitle: [
      "Swap Development and Launch",
      "Merchandise Launch",
      "Tier 1 CEX Listings",
      "CEO Bridge to ETH, Arbitrium and Polygon",
      "10 Million MarketCap Milestone",
      "CEOAI Bot Creator and integration with AI.",
    ],
  },
  {
    phase: "Phase 5",
    listTitle: [
      "Swap Development and Launch",
      "Merchandise Launch",
      "Tier 1 CEX Listings",
      "CEO Bridge to ETH, Arbitrium and Polygon",
      "10 Million MarketCap Milestone",
      "CEOAI Bot Creator and integration with AI.",
    ],
  },
];

const RoadMap = (props: Props) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const section = document.getElementById("roadmap");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.1 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, []);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleX(1)" : "scaleX(0)",
    config: {
      duration: 500,
    },
  });
  const styles1 = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleY(1)" : "scaleY(0)",
    config: {
      duration: 500,
    },
  });

  return (
    <div
      className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative"
      id="roadmap"
    >
      <animated.div
        style={{ ...styles1 }}
        className="absolute top-[200px] rounded-lg left-[50%] translate-x-[50%] w-2 h-[80%] lg:h-[89%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
      ></animated.div>
      <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20">
        Road Map
      </h1>
      {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
      <animated.div style={{ ...styles }} className="px-3 ">
        {roadMapData.map((item, index) => {
          return (
            <div
              key={index}
              className="relative w-full sm:w-3/4 md:w-4/5 sm:mx-auto [&:first-child]:top-[-30px] [&:first-child]:mb-[30px] mb-[60px]
               lg:m-0 lg:w-[40%]  lg:[&:first-child]:top-[0px]  lg:[&:nth-child(even)>div]:left-0 lg:[&:nth-child(even)>div]:bg-gradient-to-t
               lg:[&:nth-child(odd)]:float-left  lg:[&:nth-child(odd)]:clear-right  lg:[&:nth-child(odd)]:left-20
               lg:[&:nth-child(even)]:float-right lg:[&:nth-child(even)]:clear-left   lg:[&:nth-child(even)]:right-[4.5rem]
                roadmapphase bg-white text-black rounded-lg"
            >
              <div className="hidden lg:block absolute lg:right-0 h-[100%] w-[8px]  bg-gradient-to-b to-violet-500 from-fuchsia-500"></div>
              <h4 className="timeline-title p-4 lg:pl-8 text-[28px] text-[#6a06ec] font-medium">
                {item.phase}
              </h4>
              <ol className="flex flex-col gap-2">
                {item.listTitle.map((listItem, index) => {
                  return (
                    <li
                      key={index}
                      className="flex items-center gap-3 p-4 lg:pl-8 text-lg"
                    >
                      <VscDebugBreakpointLog
                        style={{
                          color: "#B051F2",
                        }}
                      />
                      <p className="font-medium font-body">{listItem}</p>
                    </li>
                  );
                })}
              </ol>
            </div>
          );
        })}
      </animated.div>
    </div>
    // </div>
  );
};

export default RoadMap;