"use client";
import Link from "next/link";
import JoinsTwoRightImg1 from "../../../public/assets/images/resources/joinus-two-right-img-one.jpg";
import JoinsTwoRightImg2 from "../../../public/assets/images/resources/joinus-two-right-img-two.jpg";
import JoinsTwoRightImg3 from "../../../public/assets/images/resources/joinus-two-right-img-three.jpg";
import JoinsTwoRightImg4 from "../../../public/assets/images/resources/joinus-two-right-img-four.jpg";
import JoinsTwoRightImg5 from "../../../public/assets/images/resources/joinus-two-right-img-five.jpg";

function JoinusTwo() {
  return (
    <div>
      <section className="joinus-two">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
              <div className="joinus-two-left-box">
                <div
                  className="section-four-title wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="section-four-title-title">
                    <h2>
                      Power of Imagination{" "}
                      <span className="section-four-title-title-inner">
                        Innovative
                      </span>{" "}
                      Service
                    </h2>
                  </div>
                </div>
                <div
                  className="section-four-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-two-left-list-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <div className="joinus-two-left-list-detali">
                    <i className="icon-check" />
                    <p>Marketing Strategy &amp; SEO Camping</p>
                  </div>
                  <div className="joinus-two-left-list-detali">
                    <i className="icon-check" />
                    <p>Best Customers Experience</p>
                  </div>
                  <div className="joinus-two-left-list-detali">
                    <i className="icon-check" />
                    <p>Awards Winning SEO Agency</p>
                  </div>
                </div>
                <div
                  className="joinus-two-left-btn-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="700ms"
                >
                  <Link href="/contact" className="main-btn-four thm-btn">
                    Learn More
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12">
              <div
                className="joinus-two-right-box wow fadeInRight animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="joinus-two-right-img-top">
                  <img
                    className="joinus-two-right-img-one"
                    src={JoinsTwoRightImg1.src}
                    alt="joinus-two-right-img-one"
                  />
                  <img
                    className="joinus-two-right-img-two"
                    src={JoinsTwoRightImg2.src}
                    alt="joinus-two-right-img-two"
                  />
                </div>
                <div className="joinus-two-right-img-inner">
                  <img
                    className="joinus-two-right-img-three"
                    src={JoinsTwoRightImg3.src}
                    alt="joinus-two-right-img-three"
                  />
                  <img
                    className="joinus-two-right-img-four"
                    src={JoinsTwoRightImg4.src}
                    alt="joinus-two-right-img-four"
                  />
                </div>
                <div className="joinus-two-right-img-bottom">
                  <img
                    className="joinus-two-right-img-five"
                    src={JoinsTwoRightImg5.src}
                    alt="joinus-two-right-img-five"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default JoinusTwo;
