"use client";
import Process1 from "../../../public/assets/images/resources/process-one-bottom-img-1.jpg";
import Process2 from "../../../public/assets/images/resources/process-one-bottom-img-2.jpg";

function ProcessThree() {
  return (
    <div>
      <section className="process-three process-five">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
              <div className="process-three-left process-five-left">
                <div
                  className="section-three-title wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="section-three-title-title">
                    <h2>Increase Web Leads Traffic In 3 Ways </h2>
                  </div>
                </div>
                <div
                  className="section-three-details wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <p>
                    Digital marketing &amp; advertising approach focuses on
                    capturing the essential
                  </p>
                </div>
                <div
                  className="process-three-left-img wow fadeInLeft animated animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                  style={{
                    visibility: "visible",
                    animationDuration: "1500ms",
                    animationDelay: "500ms",
                    animationName: "fadeInLeft",
                  }}
                >
                  <div className="process-three-left-img-shape-1" />
                  <div className="process-three-left-img-shape-2" />
                  <img src={Process1.src} alt="process-one-bottom-img-1" />
                  <div className="process-three-left-inner-img">
                    <img src={Process2.src} alt="process-one-bottom-img-2" />
                  </div>
                </div>
              </div>
            </div>
            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
              <div className="process-three-right process-five-right">
                <div
                  className="process-three-right-info process-five-right-info wow fadeInRight animated animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                  style={{
                    visibility: "visible",
                    animationDuration: "1500ms",
                    animationDelay: "100ms",
                    animationName: "fadeInRight",
                  }}
                >
                  <span>01</span>
                  <h5>Brainstorming and Creative ideas &amp; Research</h5>
                </div>
                <div
                  className="process-three-right-info process-five-right-info wow fadeInRight animated animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                  style={{
                    visibility: "visible",
                    animationDuration: "1500ms",
                    animationDelay: "300ms",
                    animationName: "fadeInRight",
                  }}
                >
                  <span>02</span>
                  <h5>Fully-Automated Keyword &amp; Content Grouping</h5>
                </div>
                <div
                  className="process-three-right-info process-five-right-info wow fadeInRight animated animated animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                  style={{
                    visibility: "visible",
                    animationDuration: "1500ms",
                    animationDelay: "500ms",
                    animationName: "fadeInRight",
                  }}
                >
                  <span>03</span>
                  <h5>Building the strategy to boost Your Product Sales</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default ProcessThree;
