"use client";
import Link from "next/link";
import AboutOneLeftImg from "../../../public/assets/images/resources/about-one-left-img.jpg";
import aboutImgRight from "../../../public/assets/images/resources/about-one-right-img.jpg";

function AboutOne() {
  return (
    <div>
      <section className="about-one">
        <div className="container">
          <div className="about-one-box">
            <div className="row">
              <div className="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                <div
                  className="about-one-left wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="about-one-left-shape" />
                  <div className="about-one-left-img">
                    <div className="tiles">
                      <img
                        className="tile"
                        data-scale="1.15"
                        src={AboutOneLeftImg.src}
                        alt="aboutimgleftimg"
                      ></img>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-10 col-md-12 col-sm-12">
                <div
                  className="about-one-inner wow fadeInUp animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="00ms"
                >
                  <div className="about-one-inner-icon-box">
                    <i className="icon-arrow-right-up" />
                  </div>
                  <div className="about-one-inner-title-box">
                    <div className="section-title">
                      <h2>
                        Build an Efficient Digital Marketing with our Expertise
                      </h2>
                    </div>
                  </div>
                  <div className="about-one-inner-details-box">
                    <p>
                      Sed perspiciatis unde omnis natus voluptatem accusantiuc
                      doloremue laudantium totamem aperiam eaque quinventore
                      veritatis quasi architecto beatae vitae dicta ways.
                    </p>
                  </div>
                  <div className="about-one-inner-btn-box">
                    <Link href="/about" className="main-black-btn thm-btn">
                      Learn More
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
              <div className="col-xl-2 col-lg-2 col-md-12 col-sm-12">
                <div
                  className="about-one-right wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="200ms"
                >
                  <div className="about-one-right-shape-1" />
                  <div className="about-one-right-shape-2" />
                  <div className="about-one-right-img">
                    <div className="tiles">
                      <img
                        className="tile"
                        data-scale="1.15"
                        src={aboutImgRight.src}
                        alt="aboutimg"
                      ></img>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default AboutOne;
