"use client";
import FeaturesImg1 from "../../../public/assets/images/resources/features-three-left-img-1.jpg";
import FeaturesImg3 from "../../../public/assets/images/resources/features-three-left-img-2.jpg";

function FeaturesThree() {
  return (
    <section className="features-three features-eight">
      <div className="container">
        <div className="row align-items-center">
          <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
            <div className="features-three-left-box features-eight-left-box">
              <div
                className="features-eight-left-box-shape-1 wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              />
              <div
                className="features-eight-left-box-shape-2 wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              />
              <div
                className="features-three-left-img-box wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <div className="features-three-left-img-1-shape">
                  <div className="features-three-left-img-1">
                    <img
                      src={FeaturesImg1.src}
                      alt="features-three-left-img-1"
                    />
                  </div>
                </div>
              </div>
              <div
                className="features-three-left-img-box wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="features-three-left-img-2-shape">
                  <div className="features-three-left-img-2">
                    <img
                      src={FeaturesImg3.src}
                      alt="features-three-left-img-2"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
            <div className="features-three-right-box features-eight-right-box">
              <div
                className="section-two-title wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="section-two-title-title">
                  <h2>
                    We Focuses Delivering Superior Quality Product For growth
                    business
                  </h2>
                </div>
              </div>
              <div
                className="section-two-details wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <p>SEO Experience &amp; Professional Team To Grow Business</p>
              </div>
              <div className="features-eight-right-info-box">
                <div
                  className="features-eight-right-info wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <div className="features-eight-right-icon">
                    <i className="icon-rocket" />
                  </div>
                  <div className="features-eight-right-info-title">
                    <h5>Endless Possibilities</h5>
                    <p>At vero eos et accusamus etiusto dignissimos</p>
                  </div>
                </div>
                <div
                  className="features-eight-right-info wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="700ms"
                >
                  <div className="features-eight-right-icon">
                    <i className="icon-screwdriver-wrench" />
                  </div>
                  <div className="features-eight-right-info-title">
                    <h5>Process Optimization</h5>
                    <p>At vero eos et accusamus etiusto dignissimos</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default FeaturesThree;
