"use client";
import Link from "next/link";
import joinsFourRight from "../../../public/assets/images/resources/joinus-four-right-img.jpg";
import joinsThreeRight from "../../../public/assets/images/resources/joinus-three-right-img-2.png";

function JoinusOne() {
  return (
    <div>
      <section className="joinus-one joinus-three">
        <div className="container">
          <div className="joinus-three-info">
            <div className="row align-items-center">
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div className="joinus-one-right-box joinus-three-left-box">
                  <div
                    className="section-title wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="100ms"
                  >
                    <h2>Power of Imagination Innovative Service</h2>
                  </div>
                  <div
                    className="section-details wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="300ms"
                  >
                    <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="joinus-one-list-box joinus-three-right-list-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="500ms"
                  >
                    <div className="joinus-one-list-detali">
                      <i className="icon-check" />
                      <p>Marketing Strategy &amp; SEO Camping</p>
                    </div>
                    <div className="joinus-one-list-detali">
                      <i className="icon-check" />
                      <p>Best Customers Experience</p>
                    </div>
                    <div className="joinus-one-list-detali">
                      <i className="icon-check" />
                      <p>Awards Winning SEO Agency</p>
                    </div>
                  </div>
                  <div
                    className="joinus-one-btn-box wow fadeInLeft animated"
                    data-wow-duration="1500ms"
                    data-wow-delay="700ms"
                  >
                    <Link href="/contact" className="main-btn thm-btn">
                      Learn More
                      <i className="icon-right-arrow" />
                    </Link>
                  </div>
                </div>
              </div>
              <div className="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                <div
                  className="joinus-three-right-box wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <div className="joinus-three-right-img-one">
                    <div className="tiles">
                      <div
                        className="tile"
                        data-scale="1.15"
                        data-image={joinsFourRight}
                      ></div>
                    </div>
                  </div>
                  <div className="joinus-three-right-img-two">
                    <img
                      src={joinsThreeRight.src}
                      alt="joinus-three-right-img-2"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default JoinusOne;
