"use client";
import Link from "next/link";

function BannerTwo() {
  return (
    <div>
      <section className="banner-two">
        <div
          className="banner-two-shape-1 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="500ms"
        />
        <div
          className="banner-two-shape-2 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        />
        <div
          className="banner-two-shape-3 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="700ms"
        >
          <div className="banner-two-shape-3-inner" />
        </div>
        <div
          className="banner-two-shape-4 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="500ms"
        >
          <div className="banner-two-shape-4-inner" />
        </div>
        <div
          className="banner-two-shape-5 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        />
        <div
          className="banner-two-shape-6 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="700ms"
        >
          <i className="icon-check" />
          <p>25+ Years Of Experience</p>
        </div>
        <div
          className="banner-two-shape-7 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="100ms"
        />
        <div
          className="banner-two-shape-8 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        />
        <div className="container">
          <div className="banner-two-content-box text-center">
            <div
              className="section-two-title wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="section-two-title-text">
                <p>SEO Solutions Agency</p>
              </div>
              <div className="section-two-title-title">
                <h1 className="swift-up-text">
                  <span>
                    <i style={{ animationDelay: "0s" }}>2x</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "0.3s" }}>Power</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "0.6s" }}>Faster</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "0.9s" }}>Search</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "1.2s" }}>Engine</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "1.5s" }}>Optimization</i>
                  </span>{" "}
                  <span>
                    <i style={{ animationDelay: "1.8s" }}>(SEO)</i>
                  </span>
                </h1>
              </div>
            </div>
            <div
              className="section-two-details wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium totam rem aperiam eaque quae
                abillo inventore veritatis
              </p>
            </div>
            <div
              className="section-two-btn wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <Link href="/service" className="main-btn-two thm-btn">
                Explore SEO Services
                <i className="icon-right-arrow" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default BannerTwo;
