import React from "react";
import "./about.style.scss";
import Rocket from "../../assets/images/main/about-us/rocket.png";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const About = () => {
  return (
    <div className="about-us container">
      <div>
        <img src={Rocket} alt="" />
      </div>
      <div>
        <h5>You have some great ideas in mind?</h5>
        <p className="text">
          Working more than 6 years in creative development industry we are sure
          that we can realize any difficulty project
        </p>

        <Swiper
          loop={false}
          // centeredSlides={true}
          slideToClickedSlide={true}
          spaceBetween={0}
          slidesPerView={2}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
          className={'stats'}
        >
          <SwiperSlide>
            <h4>30+</h4>
            <p>Completed projects</p>
          </SwiperSlide>
          <SwiperSlide>
            <h4>400+</h4>
            <p>Web Pages created</p>
          </SwiperSlide>
          <SwiperSlide>
            <h4>6+</h4>
            <p>Years experiance</p>
          </SwiperSlide>
        </Swiper>

        <div className="stats">
          <div>
            <h4>30+</h4>
            <p>Completed projects</p>
          </div>
          <div>
            <h4>400+</h4>
            <p>Web Pages created</p>
          </div>
          <div>
            <h4>6+</h4>
            <p>Years experiance</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;