animation roadmap

src/shared/components/animated/RoadmadAnimation.tsx

@@ -1,51 +0,0 @@
-function qs(selector: any, all = false) {
-  return all
-    ? document.querySelectorAll(selector)
-    : document.querySelector(selector);
-}
-
-const sections = qs(".section", true);
-const timeline = qs(".timeline");
-const line = qs(".line");
-line.style.bottom = `calc(100% - 20px)`;
-let prevScrollY = window.scrollY;
-let up, down;
-let full = false;
-let set = 0;
-const targetY = window.innerHeight * 0.8;
-
-function scrollHandler(e?: any) {
-  const { scrollY } = window;
-  up = scrollY < prevScrollY;
-  down = !up;
-  const timelineRect = timeline.getBoundingClientRect();
-  const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top;
-
-  const dist = targetY - timelineRect.top;
-  console.log(dist);
-
-  if (down && !full) {
-    set = Math.max(set, dist);
-    line.style.bottom = `calc(100% - ${set}px)`;
-  }
-
-  if (dist > timeline.offsetHeight + 50 && !full) {
-    full = true;
-    line.style.bottom = `-50px`;
-  }
-
-  sections.forEach((item: any) => {
-    // console.log(item);
-    const rect = item.getBoundingClientRect(); //     console.log(rect);
-
-    if (rect.top + item.offsetHeight / 5 < targetY) {
-      item.classList.add("show-me");
-    }
-  }); // console.log(up, down);
-
-  prevScrollY = window.scrollY;
-}
-
-scrollHandler();
-line.style.display = "block";
-window.addEventListener("scroll", scrollHandler);

src/shared/components/css/Roadmap.css

@@ -1,9 +1,9 @@
 #timeline {
   display: flex;
-  /* flex-direction: row; */
   column-gap: 12px;
   background-color: #031625;
   justify-content: space-between;
+  flex: 1;
 }
 
 #timeline:hover .tl-item {
@@ -11,9 +11,9 @@
 }
 
 .tl-item {
+  width: 100%;
   transform: translate3d(0, 0, 0);
   position: relative;
-  width: auto;
   height: 80vh;
   color: #fff;
   overflow: hidden;

src/shared/components/home/RoadMap.tsx

@@ -5,64 +5,6 @@ import { useTranslation } from "react-i18next";
 import "../css/Roadmap.css";
 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);
   const { t } = useTranslation("roadmap");
@@ -117,9 +59,9 @@ const RoadMap = (props: Props) => {
       </h1>
       {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
       <animated.div
+        id="timeline"
         style={{ ...styles }}
         className="w-full flex sm:flex-col sm:gap-y-4 md:flex-row"
-        id="timeline"
       >
         {/* <animated.div
           style={{ ...styles1 }}
@@ -127,7 +69,7 @@ const RoadMap = (props: Props) => {
         ></animated.div> */}
         {roadMapData.map((item: any, index: any) => {
           return (
-            <div key={index} className="tl-item md:hover:w-[40%!important]">
+            <div key={index} className="tl-item md:hover:w-[35%!important] ">
               <div
                 className="tl-bg"
                 style={{