"use client";
import Link from "next/link";
import aboutFour1 from "../../../public/assets/images/about/about-four-img-1.jpg";
import aboutFour2 from "../../../public/assets/images/about/about-four-img-2.jpg";

function AboutPage() {
  return (
    <div>
      <section className="about-page">
        <div className="about-page-shape" />
        <div className="container">
          <div className="about-four">
            <div className="about-four-top">
              <div className="row">
                <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                  <div className="about-four-top-title-box">
                    <p
                      className="wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      Welcome to Zoso
                    </p>
                    <h2
                      className="wow fadeInLeft animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      Build an Efficient Digital Marketing with our Expertise
                      For Marketing Solutions
                    </h2>
                  </div>
                </div>
                <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                  <div className="about-four-top-detail-box">
                    <p
                      className="wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="100ms"
                    >
                      Sed ut perspiciatis unde omnis iste natus error voluptatem
                      accusantium doloremque laudantium, totam rem aperiame
                      eaque quae abillo inventore veritatis quasie
                    </p>
                    <p
                      className="wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="300ms"
                    >
                      Nemo enim voluptatem quia voluptas sit aspernatur aut odit
                      aut fugit consequuntur magni dolores
                    </p>
                    <Link
                      href="/service"
                      className="main-btn thm-btn wow fadeInRight animated"
                      data-wow-duration="1500ms"
                      data-wow-delay="500ms"
                    >
                      Get Started
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="about-four-bottom">
              <div className="row">
                <div className="col-xl-7 col-lg-7 col-md-7 col-sm-7">
                  <div
                    className="about-four-bottom-img wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="200ms"
                  >
                    <div className="scroll_item_select_img ">
                      <img src={aboutFour1.src} alt="" />
                    </div>
                  </div>
                </div>
                <div className="col-xl-5 col-lg-5 col-md-5 col-sm-5">
                  <div
                    className="about-four-bottom-img wow fadeInRight animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="200ms"
                  >
                    <div className="scroll_item_select_img">
                      <img src={aboutFour2.src} alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="about-five">
            <div className="about-four-title-box">
              <div
                className="section-text text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>What We Offer</p>
              </div>
              <div
                className="section-title text-center wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>Grow Leads and Sales with insanely Good SEO Strategy</h2>
              </div>
            </div>
            <div className="row">
              <div className="col-xl-1 col-lg-1 col-md-12 col-sm-12" />
              <div className="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <div
                  className="about-five-single-box text-center wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="about-five-single-icon-box icon-box-1">
                    <i className="icon-speed-1" />
                  </div>
                  <div className="about-five-single-title-box">
                    <h3>Empower brands to transform their marketing</h3>
                  </div>
                  <div className="about-five-single-detail-box">
                    <p>
                      Nemo enim voluptatem voluptas aspernatur aut fugit
                      consequuntur dolores
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <div
                  className="about-five-single-box text-center wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="about-five-single-icon-box icon-box-2">
                    <i className="icon-target-4" />
                  </div>
                  <div className="about-five-single-title-box">
                    <h3>Set a workplace that helps people grow.</h3>
                  </div>
                  <div className="about-five-single-detail-box">
                    <p>
                      Nemo enim voluptatem voluptas aspernatur aut fugit
                      consequuntur dolores
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-1 col-lg-1 col-md-12 col-sm-12" />
              <div className="col-xl-1 col-lg-1 col-md-12 col-sm-12" />
              <div className="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <div
                  className="about-five-single-box text-center wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="400ms"
                >
                  <div className="about-five-single-icon-box icon-box-3">
                    <i className="icon-target-1-2" />
                  </div>
                  <div className="about-five-single-title-box">
                    <h3>Grow your Website Leads and Traffic optimize</h3>
                  </div>
                  <div className="about-five-single-detail-box">
                    <p>
                      Nemo enim voluptatem voluptas aspernatur aut fugit
                      consequuntur dolores
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-5 col-lg-5 col-md-6 col-sm-12">
                <div
                  className="about-five-single-box text-center wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="400ms"
                >
                  <div className="about-five-single-icon-box icon-box-4">
                    <i className="icon-social-marketing-1" />
                  </div>
                  <div className="about-five-single-title-box">
                    <h3>Increase your social media marketing strategy</h3>
                  </div>
                  <div className="about-five-single-detail-box">
                    <p>
                      Nemo enim voluptatem voluptas aspernatur aut fugit
                      consequuntur dolores
                    </p>
                  </div>
                </div>
              </div>
              <div className="col-xl-1 col-lg-1 col-md-12 col-sm-12" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default AboutPage;
