import React from "react";
import { Col, Row } from "react-bootstrap";
import RoadMapLine from "../../Components/RoadmapLine/RoadmapLine";
export default function RoadMap() {
  return (
    <div style={{ marginBottom: "200px", marginTop: "200px" }}>
      <Row className="p-0 justify-content-center" style={{ height: "120px" }}>
        <Col xs={5}>
          <div
            className="text-center"
            style={{
              color: "white",
              fontFamily: "semibold",
              fontSize: "50px",
              marginTop: "-35px",
            }}
          >
            RoadMap
          </div>
        </Col>
        <Col xs="auto">
          <RoadMapLine bgColor="#51D9FC" borderColor="#0dcaf052" />
        </Col>
        <Col xs={5} className="p-0">
          {/* <p>Phase 1</p> */}

          <div
            style={{
              width: "265px",
              height: "2px",
              backgroundColor: "rgb(81 217 252 / 47%)",
              marginTop: "8px",
              marginLeft: "-30px",
            }}
          />

          <div
            style={{
              color: "white",
              padding: "20px 0px 50px 130px",
              marginTop: "-60px",
              fontFamily: "light",
            }}
          >
            <div
              className="pb-4"
              style={{
                color: "#51D9FC",
                fontFamily: "semibold",
                fontSize: "20px",
              }}
            >
              Phase one:
            </div>
            Integration of Admin requests Integration of the Audit System Task
            Tree added Expanded system of Statistics,
          </div>
        </Col>
      </Row>
      <Row className="p-0 justify-content-center" style={{ height: "120px" }}>
        <Col xs={5} className="p-0 ">
          {/* <p>Phase 1</p> */}

          <div style={{ textAlign: "-webkit-right" }}>
            <div
              style={{
                width: "250px",
                height: "2px",
                backgroundColor: "#FF3F70",
                marginTop: "8px",
                marginRight: "-20px",
              }}
            />
            <div
              style={{
                color: "white",
                padding: "20px 130px 0px 30px",
                marginTop: "-60px",
                fontFamily: "light",
              }}
            >
              <div
                className="pb-4"
                style={{
                  color: "#FF3F70",
                  marginLeft: "0px",
                  fontSize: "20px",
                  fontFamily: "semibold",
                }}
              >
                Phase Two:
              </div>
              Working time assistance Tutorials and video guides Naplozz Token
              integration in the Naplozz app
            </div>
          </div>
        </Col>
        <Col xs="auto">
          <RoadMapLine bgColor="#FF3F70" borderColor="rgb(255 63 112 / 45%)" />
        </Col>

        <Col xs={5}></Col>
      </Row>
      <Row className="p-0 justify-content-center" style={{ height: "120px" }}>
        <Col xs={5}></Col>
        <Col xs="auto">
          <RoadMapLine bgColor="#FE9520" borderColor="#fe952066" />
        </Col>
        <Col xs={5} className="p-0">
          {/* <p>Phase 1</p> */}

          <div
            style={{
              width: "278px",
              height: "2px",
              backgroundColor: "#FE9520",
              marginTop: "8px",
              marginLeft: "-30px",
            }}
          />

          <div
            style={{
              color: "white",
              padding: "20px 0px 50px 130px",
              marginTop: "-60px",
              fontFamily: "light",
            }}
          >
            <div
              className="pb-4"
              style={{
                color: "#FE9520",
                fontFamily: "semibold",
                fontSize: "20px",
              }}
            >
              Phase Three:
            </div>
            Naplozz Token ICO Integration of a Bitcoin payment system Initial
            marketing campaign Implementation of a HACCP order system Automatic
            import system
          </div>
        </Col>
      </Row>
      <Row className="p-0 justify-content-center" style={{ height: "120px" }}>
        <Col xs={5} className="p-0 ">
          {/* <p>Phase 1</p> */}

          <div style={{ textAlign: "-webkit-right" }}>
            <div
              style={{
                width: "260px",
                height: "2px",
                backgroundColor: "#0263F7",
                marginTop: "8px",
                marginRight: "-20px",
              }}
            />
            <div
              style={{
                color: "white",
                padding: "20px 130px 0px 20px",
                marginTop: "-60px",
                fontFamily: "light",
              }}
            >
              <div
                className="pb-4"
                style={{
                  color: "#0263F7",
                  marginLeft: "0px",
                  fontFamily: "semibold",
                  fontSize: "20px",
                }}
              >
                Phase Four:
              </div>
              Automatic import system Launch of the Naplozz Educational Platform
              More tracking log integrations Listing of the Naplozz Token on a
              large number of exchanges
            </div>
          </div>
        </Col>
        <Col xs="auto">
          <RoadMapLine bgColor="#0263F7" borderColor="#0263f75e" />
        </Col>

        <Col xs={5}></Col>
      </Row>
    </div>
  );
}
