"use client";
import Link from "next/link";
// import bannerImgOneImg2 from "/assets";
import bannerImgOneImg1 from "../../../public/assets/images/resources/banner-one-img-1.png";
import BannerOneShapeImg1 from "../../../public/assets/images/shapes/banner-one-shape-3.png";
import BannerOneShapeImg4 from "../../../public/assets/images/shapes/banner-one-shape-4.png";
import BannerOneShapeImg5 from "../../../public/assets/images/shapes/banner-one-shape-5.png";
import BannerOneIMgText1 from "../../../public/assets/images/resources/banner-one-img-text.png";
import Image from "next/image";

function BannerOne() {
  return (
    <div>
      <section className="banner-one">
        <div className="banner-one-shape-1" />
        <div className="banner-one-shape-2" />
        <div
          className="banner-one-shape-3 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        >
          <div className="animation_image_zoom">
            <div className="banner-one-shape-3-img">
              <img src={BannerOneShapeImg1.src} alt="banner-one-shape-3" />
            </div>
          </div>
        </div>
        <div
          className="banner-one-shape-4 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="100ms"
        >
          <div className="animation_image_zoom">
            <div className="banner-one-shape-4-img">
              <img src={BannerOneShapeImg4.src} alt="banner-one-shape-4" />
            </div>
          </div>
        </div>
        <div
          className="banner-one-shape-5 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="500ms"
        >
          <div className="animation_image_zoom">
            <div className="banner-one-shape-5-img">
              <img src={BannerOneShapeImg5.src} alt="banner-one-shape-5" />
            </div>
          </div>
        </div>
        <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="banner-one-left">
                <div className="banner-one-left-shape" />
                <div
                  className="section-title wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <h1>
                    Quality{" "}
                    <span className="section-title-shape-1"> Digital </span>
                    Marketing to grow your Business
                  </h1>
                </div>
                <div
                  className="wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <p>
                    Sed ut perspiciatis unde omnis iste natus sit voluptatem
                    accusantium doloremque laudantium totam
                  </p>
                </div>
                <div
                  className="banner-one-btn wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <Link href="/service" className="main-btn thm-btn">
                    Explore Our Services <i className="icon-right-arrow" />
                  </Link>
                </div>
                <div
                  className="banner-one-users wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="700ms"
                >
                  <h4>Trusted by 5,893 users</h4>
                  <i className="fas fa-star" />
                  <i className="fas fa-star" />
                  <i className="fas fa-star" />
                  <i className="fas fa-star" />
                  <i className="fas fa-star" />
                  <span>4.5/5 (13k+ reviews)</span>
                </div>
              </div>
            </div>
            <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
              <div
                className="banner-one-img-box wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="banner-one-img-one">
                  <img src={bannerImgOneImg1.src} alt="banner-one-img-1" />
                  <div className="banner-one-img-shape-1" />
                  <div className="banner-one-img-shape-2" />
                  <div className="banner-one-img-shape-3" />
                  <div className="banner-one-img-text">
                    <img
                      src={BannerOneIMgText1.src}
                      alt="banner-one-img-text"
                    />
                    <span>Awards Winning Digital Marketing Agency</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BannerOne;
