"use client";
import Link from "next/link";
import Team1 from "../../../public/assets/images/team/team-member-one-1.jpg";
import Team2 from "../../../public/assets/images/team/team-member-one-2.jpg";
import Team3 from "../../../public/assets/images/team/team-member-one-3.jpg";
import Team4 from "../../../public/assets/images/team/team-member-one-4.jpg";
import Team5 from "../../../public/assets/images/team/team-member-one-5.jpg";
import Team6 from "../../../public/assets/images/team/team-member-one-6.jpg";
import Team7 from "../../../public/assets/images/team/team-member-one-7.jpg";
import Team8 from "../../../public/assets/images/team/team-member-one-8.jpg";

function TeamMemberOne() {
  return (
    <section className="team-member-one team-member-two">
      <div className="container">
        <div className="row">
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team1.src}
                    alt="data"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Mathew R. Rosales</Link>
              </h4>
              <p className="team-member-one-single-detail">CEO &amp; Founder</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team2.src}
                    alt="data1"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">William I. Miranda</Link>
              </h4>
              <p className="team-member-one-single-detail">Digital Marketer</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team3.src}
                    alt="data2"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Lawrence K. McAllis</Link>
              </h4>
              <p className="team-member-one-single-detail">Web Designer</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="700ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team4.src}
                    alt="hello"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Richard T. Swafford</Link>
              </h4>
              <p className="team-member-one-single-detail">SR Manager</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team5.src}
                    alt="allData"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Richard T. Swafford</Link>
              </h4>
              <p className="team-member-one-single-detail">SR Manager</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team6.src}
                    alt="data4"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Richard T. Swafford</Link>
              </h4>
              <p className="team-member-one-single-detail">SR Manager</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="700ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team7.src}
                    alt="allData"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Richard T. Swafford</Link>
              </h4>
              <p className="team-member-one-single-detail">SR Manager</p>
            </div>
          </div>
          <div className="col-xl-3 col-lg-3 col-md-3 col-sm-6">
            <div
              className="team-member-one-single-box wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="900ms"
            >
              <div className="team-member-one-single-img">
                <div className="tiles">
                  <img
                    className="tile"
                    data-scale="1.15"
                    src={Team8.src}
                    alt="data"
                  />
                </div>
                <div className="team-member-one-single-img-tag">
                  <i className="icon-plus-2" />
                  <ul className="team-member-social">
                    <li>
                      <Link href="#">
                        <i className="icon-facebook-f" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-twitter" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-instagram" />
                      </Link>
                    </li>
                    <li>
                      <Link href="#">
                        <i className="icon-linkedin-in" />
                      </Link>
                    </li>
                  </ul>
                </div>
              </div>
              <h4 className="team-member-one-single-title">
                <Link href="/team-member">Richard T. Swafford</Link>
              </h4>
              <p className="team-member-one-single-detail">SR Manager</p>
            </div>
          </div>
        </div>
        <div className="team-member-one-btn text-center">
          <Link href="/team-member" className="main-btn thm-btn">
            View More Member
            <i className="icon-right-arrow" />
          </Link>
        </div>
      </div>
    </section>
  );
}

export default TeamMemberOne;
