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

import React 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) => {
  return (
    <div className="container mx-auto text-white md:min-h-[60vh]" id="roadmap">
      <h1 className="text-5xl font-bold text-center">RoadMap</h1>

      <div className="flex flex-col gap-10 mt-20 justify-center px-10 lg:px-0">
        {roadMapData.map((item, index) => {
          return (
            <div
              key={index}
              className="lg:w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[250px] p-5"
            >
              <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>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default RoadMap;