"use client";
import Link from "next/link";
import BannerThreeImg from "../../../public/assets/images/resources/banner-three-right-img.png";

function BannerThree() {
  return (
    <div>
      <section className="banner-three">
        <div className="banner-three-shape-1" />
        <div className="banner-three-shape-2" />
        <div className="banner-three-number">
          <div className="banner-three-call-icon">
            <i className="icon-call" />
          </div>
          <Link href="tel:+000(123)45688">+000 (123) 456 88</Link>
        </div>
        <div className="container">
          <div className="row align-items-center">
            <div className="col-xl-9 col-lg-12 col-md-12 col-sm-12">
              <div className="banner-three-left">
                <div className="section-three-title">
                  <div
                    className="section-three-title-text wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <p>Digital Product Design Agency</p>
                  </div>
                  <div
                    className="section-three-title-title wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <h1>
                      Product Design and Marketing <span>Studio</span>
                    </h1>
                  </div>
                </div>
                <div
                  className="section-three-details wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <p>
                    Best Quality Design, Development &amp; Marketing Service
                    Since 1995
                  </p>
                </div>
                <div
                  className="section-three-btn wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="700ms"
                >
                  <Link href="/service" className="main-btn-three thm-btn">
                    Explore SEO Services
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-3 col-lg-12 col-md-12 col-sm-12">
              <div
                className="banner-three-right wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="banner-three-right-shape-1" />
                <div className="banner-three-right-shape-2" />
                <div className="banner-three-right-img-box">
                  <img src={BannerThreeImg.src} alt="banner-three-right-img" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BannerThree;
