"use client";
import bannerFourImg from "../../../public/assets/images/resources/banner-four-left-img.png";
import bannerLeftShapeImg1 from "../../../public/assets/images/shapes/banner-four-left-shape-img-1.png";
import bannerLeftShapeImg2 from "../../../public/assets/images/shapes/banner-four-left-shape-img-2.png";
import bannerLeftShapeImg3 from "../../../public/assets/images/shapes/banner-four-left-shape-img-3.png";
import bannerLeftShapeImg4 from "../../../public/assets/images/shapes/banner-four-left-shape-img-4.png";

function BannerFour() {
  return (
    <div>
      <section className="banner-four">
        <div className="banner-four-shape-1" />
        <div className="banner-four-shape-2" />
        <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="banner-four-left wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="banner-four-left-img-box">
                  <img src={bannerFourImg.src} alt="banner-four-left-img" />
                </div>
                <div className="banner-four-left-shape-1">
                  <img
                    src={bannerLeftShapeImg1.src}
                    alt="banner-four-left-shape-img-1"
                  />
                </div>
                <div className="banner-four-left-shape-2">
                  <img
                    src={bannerLeftShapeImg2.src}
                    alt="banner-four-left-shape-img-2"
                  />
                </div>
                <div className="banner-four-left-shape-3">
                  <img
                    src={bannerLeftShapeImg3.src}
                    alt="banner-four-left-shape-img-3"
                  />
                </div>
                <div className="banner-four-left-shape-4">
                  <img
                    src={bannerLeftShapeImg4.src}
                    alt="banner-four-left-shape-img-4"
                  />
                </div>
              </div>
            </div>
            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
              <div className="banner-four-right">
                <div
                  className="section-four-title wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="section-four-title-title">
                    <h1>
                      Boost your <span className="section-four-title-inner" />{" "}
                      website Camping by
                      <span className="section-four-title-title-shape">
                        SEO Expert{" "}
                      </span>
                    </h1>
                  </div>
                </div>
                <div
                  className="section-four-details wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <p>
                    Sed ut perspiciatis unde omnis iste natus errors voluptatem
                    accusantium doloremque
                  </p>
                </div>
                <div
                  className="section-four-btn-box wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <form action="assets/inc/sendemail.php">
                    <input
                      type="text"
                      id="send-box"
                      placeholder="Email Address"
                      required=""
                    />
                    <label htmlFor="send-box">
                      <i className="icon-sms-box" />
                    </label>
                    <button className="main-btn-four thm-btn">
                      Sign Up
                      <i className="icon-right-arrow" />
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BannerFour;
