import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import "./Heroheader.css";
import naptokenPagebg from "./Img/Final.png";

function NapTokenHeroHeader({ id, img, naptoken }) {
  return (
    <>
      <section
        id={id}
        style={{
          paddingTop: "80px",
          backgroundImage: `url(${naptokenPagebg}) `,

          backgroundPosition: "bottom",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
        }}
      >
        <Container className="pt-5">
          <Row className={""} style={{ height: "550px" }}>
            <Col lg={8} md={12} sm={12} className="resHeroHeader">
              <div className="respBanner">
                <h1
                  style={{
                    fontFamily: "semibold",
                    color: "#0262F7",
                    fontSize: "65px",
                  }}
                >
                  <br />
                  {"NAP Token"}
                </h1>
                {/* </motion.div> */}
                <div className="pt-2 mt-4">
                  <p
                    style={{
                      fontSize: "25px",
                      fontFamily: "semibold",
                      color: "#FFB34D",
                    }}
                    className=" m-0"
                  >
                    The perfect incentive
                  </p>
                  <Row>
                    <Col lg={9} md={12}>
                      <p
                        style={{
                          fontSize: "18px",
                          fontFamily: "light",
                          color: "white",
                        }}
                        className=" m-0"
                      >
                        The NAP Token is a core element of the Naplozz
                        compliance ecosystem. This powerful, multi-functional
                        utility token enables business owners to incentivise
                        employees, purchase yearly and monthly subscriptions of
                        Naplozz, or just generate revenue by actively benefiting
                        from the platform while trying to perfect their
                        services.
                      </p>
                    </Col>
                  </Row>
                </div>
              </div>
            </Col>
            <Col md={12} lg={4} sm={12}>
              <div className="text-center">
                <img src={img} style={{ maxWidth: "400px" }} alt="" />
              </div>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
}
export default NapTokenHeroHeader;
