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.',
        ],
    },
]

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 ? 'translateY(0)' : 'translateY(100px)',
        config: {
            duration: 500,
        },
    })

    return (
        <div
            className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20"
            id="roadmap"
        >
            <h1 className="text-4xl font-bold text-center hover:text-orange-400">
                Road Map
            </h1>

            <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0">
                {roadMapData.map((item, index) => {
                    return (
                        <animated.div
                            key={index}
                            className="lg:w-1/4 bg-orange-400 rounded-lg min-h-[250px] p-5"
                            style={styles}
                        >
                            <h4 className="text-center text-3xl text-gray-100 font-semibold mb-6">
                                {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"
                                        >
                                            <VscDebugBreakpointLog width={18} />
                                            <p className="font-medium font-body">
                                                {listItem}
                                            </p>
                                        </li>
                                    )
                                })}
                            </ol>
                        </animated.div>
                    )
                })}
            </div>
        </div>
    )
}

export default RoadMap