You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.6 KiB
124 lines
3.6 KiB
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.",
|
|
],
|
|
},
|
|
];
|
|
|
|
const RoadMap = (props: Props) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const section = document.querySelector(".animate-on-scroll");
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
setIsVisible(entry.isIntersecting);
|
|
},
|
|
{ threshold: 0.5 }
|
|
);
|
|
|
|
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 ? "translateX(0)" : "translateX(100px)",
|
|
config: {
|
|
duration: 500,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative"
|
|
id="roadmap"
|
|
>
|
|
<div className="absolute top-[150px] left-[50%] w-2 h-[80%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></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}>
|
|
{roadMapData.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="relative roadmapphase w-1/2 bg-white text-black rounded-lg [&:nth-child(odd)>div]:right-[-25%] [&:nth-child(odd)]:float-left [&:nth-child(odd)]:clear-right [&:nth-child(odd)]:translate-x-[-30px] [&:nth-child(even)]:float-right [&:nth-child(even)]:clear-left [&:nth-child(even)]:translate-x-12"
|
|
>
|
|
<div className="absolute h-[30px] w-[30px] rounded-[50%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div>
|
|
|
|
<h4 className="timeline-title p-2 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-2 text-lg"
|
|
>
|
|
<VscDebugBreakpointLog
|
|
style={{
|
|
color: "#B051F2",
|
|
}}
|
|
/>
|
|
<p className="font-medium font-body">{listItem}</p>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</div>
|
|
);
|
|
})}
|
|
</animated.div>
|
|
</div>
|
|
// </div>
|
|
);
|
|
};
|
|
|
|
export default RoadMap;
|
|
|