import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Ibutton from "../Button/Button";
import Heading from "../Heading/Heading";
import getstarted from "./Img/getstarted.gif";
import "./Getstarted.css";
import { useTranslation } from "react-i18next";
import MediaQuery from "react-responsive";
export default function Getstarted() {
  const { t } = useTranslation();
  return (
    <>
      <section className="pt-5 pb-5  mb-5" id="getstarted">
        <Container
          className="pt-5 pb-5"
          style={{ backgroundColor: "#fffff", marginLeft: "150px" }}>
          <Row className="align-items-center">
            <Col lg={8}>
              <div className="text-center">
                <Heading
                  title={t("getstarted.heading")}
                  color=""
                  fontFamily="semibold"
                  className="h1Style"
                />
                <Heading
                  title={t("getstarted.content")}
                  color=""
                  fontFamily="semibold"
                  className="pt-3 h3Style "
                />
                <div className="pt-4">
                  <Ibutton
                    href="/commingsoon"
                    title={t("getstarted.button")}
                    paddingTop="12px"
                    paddingBottom="12px"
                    backgroundColor="transparent"
                    color="#0262F7"
                    borderRadius="5px"
                    borderColor="#0262F7"
                  />
                </div>
              </div>
            </Col>
            <Col lg={4} className="">
              <MediaQuery minWidth={992}>
                <img
                  style={{ marginBottom: "-48px", maxWidth: "70%" }}
                  src={getstarted}
                  alt=""
                />
              </MediaQuery>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
}
