import CounterUp from "@/components/elements/CounterUp";
import Layout from "@/components/layout/Layout";
import Callback1 from "@/components/sections/Callback1";
import About4Two from "@/components/sections/About4Two";
import Team4 from "@/components/sections/Team4";
import Testimonials from "@/components/sections/Testimonials";
import BrandActiveSlider from "@/components/slider/BrandActiveSlider";

export const metadata = {
  title: "About | RankRunners - SEO, Web Design & Digital Marketing Agency",
  description:
    "RankRunners provides enterprise level SEO, Web Design/Development, Digital Marketing and IT Management services for companies across all industries, regardless of scope or size. Contact support@rankrunners.net to get started today!",
};

export default function About() {
  return (
    <>
      <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="About Us">
        <section className="counter-area-four">
          <div className="container">
            <div className="row justify-content-center">
              <div className="col-lg-6">
                <div className="section-title text-center mb-70 tg-heading-subheading animation-style3">
                  <span className="sub-title">
                    ABOUT <span className="title-color">RANKRUNNERS</span>
                  </span>
                  <h2 className="title tg-element-title">
                    It's Time to <i>...Outrun</i> the Competition!
                  </h2>
                </div>
              </div>
            </div>
            <div className="row justify-content-center">
              <div className="col-xl-3 col-lg-4 col-sm-6">
                <div className="counter-item">
                  <div className="icon">
                    <i className="flaticon-trophy" />
                  </div>
                  <div className="content">
                    <h2 className="count">
                      <CounterUp count={150} />+
                    </h2>
                    <p>Satisfied Clients</p>
                  </div>
                </div>
              </div>
              <div className="col-xl-3 col-lg-4 col-sm-6">
                <div className="counter-item">
                  <div className="icon">
                    <i className="flaticon-graph" />
                  </div>
                  <div className="content">
                    <h2 className="count">
                      <CounterUp count={7} />
                      :1+
                    </h2>
                    <p>Average ROAS</p>
                  </div>
                </div>
              </div>
              <div className="col-xl-3 col-lg-4 col-sm-6">
                <div className="counter-item">
                  <div className="icon">
                    <i className="flaticon-happy" />
                  </div>
                  <div className="content">
                    <h2 className="count">
                      <CounterUp count={250} />%
                    </h2>
                    <p>Average Traffic Increase</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <About4Two />
        <Team4 />
        <div>
          {/* <section className="about__area-four">
                        <div className="container">
                            <div className="row align-items-center justify-content-center">
                                <div className="col-lg-6 col-md-9 col-sm-10">
                                    <div className="about__img-wrap-four">
                                        <img src="/assets/img/images/inner_about01.jpg" alt="" />
                                        <img src="/assets/img/images/inner_about02.jpg" alt="" />
                                        <div className="about__award-box">
                                            <div className="icon">
                                                <i className="flaticon-trophy" />
                                            </div>
                                            <div className="content">
                                                <h2 className="title">15+</h2>
                                                <p>
                                                    World Best Agency <br /> Award Got
                                                </p>
                                            </div>
                                        </div>
                                        <div className="shape">
                                            <img
                                                src="/assets/img/images/inner_about_shape.jpg"
                                                alt=""
                                                className="alltuchtopdown"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="about__content-four">
                                        <div className="section-title mb-30">
                                            <span className="sub-title">Simply Know About</span>
                                            <h2 className="title">
                                                We Help Organizations To Make Ultimate Businesses Growth Success
                                            </h2>
                                        </div>
                                        <div className="about__content-inner-three">
                                            <div className="about__list-box">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <i className="flaticon-arrow-button" />
                                                        Medicare Advantage Plans
                                                    </li>
                                                    <li>
                                                        <i className="flaticon-arrow-button" />
                                                        Analysis Research
                                                    </li>
                                                    <li>
                                                        <i className="flaticon-arrow-button" />
                                                        100% Secure Money Back
                                                    </li>
                                                </ul>
                                            </div>
                                            <div className="about__list-img-two">
                                                <img src="/assets/img/images/about_list_img02.png" alt="" />
                                            </div>
                                        </div>
                                        <p>
                                            We successfully cope with tasks of varying complexityprovide longerty term
                                            guarantees and regularly master new Practice Area technol ogiesOur portfolio
                                            includes dozen
                                        </p>
                                        <Link href="/contact" className="btn">
                                            Contact With Us
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section> */}
          <div className="brand__area-four">
            <div className="container">
              <h4 className="brand__content">
                Trusted by Numerous Companies, Worldwide
              </h4>
              <div className="swiper-container brand-active">
                <BrandActiveSlider />
              </div>
            </div>
          </div>
          {/* <section className="choose__area-four">
                        <div className="container">
                            <div className="row align-items-center">
                                <div className="col-lg-5">
                                    <div className="choose__content-four">
                                        <div className="section-title white-title mb-20">
                                            <span className="sub-title">Why We Are The Best</span>
                                            <h2 className="title">Digital Solutions For Your Online Business</h2>
                                        </div>
                                        <p>
                                            We successfully cope with tasks of varying complexity provide area longerty
                                            guarantees and regularly master new Practice Following gies heur.
                                        </p>
                                    </div>
                                </div>
                                <div className="col-lg-7">
                                    <div className="choose__list-two">
                                        <ul className="list-wrap">
                                            <li>
                                                <div className="choose__list-box-two">
                                                    <div className="choose__list-icon-two">
                                                        <i className="flaticon-investment" />
                                                    </div>
                                                    <div className="choose__list-content-two">
                                                        <h4 className="title">Business Solutions</h4>
                                                        <p>Semper egetuis kelly for tellus urna area condition.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div className="choose__list-box-two">
                                                    <div className="choose__list-icon-two">
                                                        <i className="flaticon-financial-profit" />
                                                    </div>
                                                    <div className="choose__list-content-two">
                                                        <h4 className="title">Finance Planning</h4>
                                                        <p>Semper egetuis kelly for tellus urna area condition.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div className="choose__list-box-two">
                                                    <div className="choose__list-icon-two">
                                                        <i className="flaticon-investment-1" />
                                                    </div>
                                                    <div className="choose__list-content-two">
                                                        <h4 className="title">Market Analysis</h4>
                                                        <p>Semper egetuis kelly for tellus urna area condition.</p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div className="choose__list-box-two">
                                                    <div className="choose__list-icon-two">
                                                        <i className="flaticon-report" />
                                                    </div>
                                                    <div className="choose__list-content-two">
                                                        <h4 className="title">Business Solutions</h4>
                                                        <p>Semper egetuis kelly for tellus urna area condition.</p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="choose__shape-wrap-four">
                            <img
                                src="/assets/img/images/inner_choose_shape01.png"
                                alt=""
                                data-aos="fade-right"
                                data-aos-delay={400}
                            />
                            <img
                                src="/assets/img/images/inner_choose_shape02.png"
                                alt=""
                                data-aos="fade-left"
                                data-aos-delay={400}
                            />
                        </div>
                    </section> */}
          {/* <section className="counter-area">
                        <div className="container">
                            <div className="row justify-content-center">
                                <div className="col-xl-3 col-lg-4 col-sm-6">
                                    <div className="counter-item">
                                        <div className="icon">
                                            <i className="flaticon-trophy" />
                                        </div>
                                        <div className="content">
                                            <h2 className="count">
                                                <CounterUp count={45} />+
                                            </h2>
                                            <p>
                                                Successfully <br /> Completed Projects
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-sm-6">
                                    <div className="counter-item">
                                        <div className="icon">
                                            <i className="flaticon-happy" />
                                        </div>
                                        <div className="content">
                                            <h2 className="count">
                                                <CounterUp count={92} />K
                                            </h2>
                                            <p>
                                                Satisfied <br /> 100% Our Clients
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-sm-6">
                                    <div className="counter-item">
                                        <div className="icon">
                                            <i className="flaticon-china" />
                                        </div>
                                        <div className="content">
                                            <h2 className="count">
                                                <CounterUp count={19} />+
                                            </h2>
                                            <p>
                                                All Over The World <br /> We Are Available
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-sm-6">
                                    <div className="counter-item">
                                        <div className="icon">
                                            <i className="flaticon-time" />
                                        </div>
                                        <div className="content">
                                            <h2 className="count">
                                                <CounterUp count={25} />+
                                            </h2>
                                            <p>
                                                Years of Experiences <br /> To Run This Company
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="counter-shape-wrap">
                            <img
                                src="/assets/img/images/counter_shape01.png"
                                alt=""
                                data-aos="fade-right"
                                data-aos-delay={400}
                            />
                            <img
                                src="/assets/img/images/counter_shape02.png"
                                alt=""
                                data-parallax='{"x" : 100 , "y" : -100 }'
                            />
                            <img
                                src="/assets/img/images/counter_shape03.png"
                                alt=""
                                data-aos="fade-left"
                                data-aos-delay={400}
                            />
                        </div>
                    </section> */}
          {/* <section className="team__area-four">
                        <div className="container">
                            <div className="row justify-content-center">
                                <div className="col-lg-6">
                                    <div className="section-title text-center mb-40">
                                        <span className="sub-title">MEET OUR TEAM</span>
                                        <h2 className="title">
                                            Business Expertise Is Here <br /> For You Can Trust
                                        </h2>
                                    </div>
                                </div>
                            </div>
                            <div className="row justify-content-center">
                                <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                                    <div className="team__item-four shine-animate-item">
                                        <div className="team__thumb-four shine-animate">
                                            <img src="/assets/img/team/h4_team_img01.jpg" alt="" />
                                        </div>
                                        <div className="team__content-four">
                                            <h2 className="title">
                                                <Link href="/team-details">Floyd Miles</Link>
                                            </h2>
                                            <span>Finance Advisor</span>
                                            <div className="team__social-four">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-facebook-f" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-twitter" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-instagram" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-pinterest-p" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-linkedin-in" />
                                                        </Link>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                                    <div className="team__item-four shine-animate-item">
                                        <div className="team__thumb-four shine-animate">
                                            <img src="/assets/img/team/h4_team_img02.jpg" alt="" />
                                        </div>
                                        <div className="team__content-four">
                                            <h2 className="title">
                                                <Link href="/team-details">Ralph Edwards</Link>
                                            </h2>
                                            <span>Finance Advisor</span>
                                            <div className="team__social-four">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-facebook-f" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-twitter" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-instagram" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-pinterest-p" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-linkedin-in" />
                                                        </Link>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                                    <div className="team__item-four shine-animate-item">
                                        <div className="team__thumb-four shine-animate">
                                            <img src="/assets/img/team/h4_team_img03.jpg" alt="" />
                                        </div>
                                        <div className="team__content-four">
                                            <h2 className="title">
                                                <Link href="/team-details">Eleanor Pena</Link>
                                            </h2>
                                            <span>Finance Advisor</span>
                                            <div className="team__social-four">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-facebook-f" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-twitter" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-instagram" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-pinterest-p" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-linkedin-in" />
                                                        </Link>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
                                    <div className="team__item-four shine-animate-item">
                                        <div className="team__thumb-four shine-animate">
                                            <img src="/assets/img/team/h4_team_img04.jpg" alt="" />
                                        </div>
                                        <div className="team__content-four">
                                            <h2 className="title">
                                                <Link href="/team-details">Jone Cooper</Link>
                                            </h2>
                                            <span>Finance Advisor</span>
                                            <div className="team__social-four">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-facebook-f" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-twitter" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-instagram" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-pinterest-p" />
                                                        </Link>
                                                    </li>
                                                    <li>
                                                        <Link href="#">
                                                            <i className="fab fa-linkedin-in" />
                                                        </Link>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section> */}
          {/* <section className="call-back-area">
                        <div className="container">
                            <div className="row">
                                <div className="col-lg-6">
                                    <div className="call-back-content">
                                        <div className="section-title white-title mb-10">
                                            <h2 className="title">Request A Call Back</h2>
                                        </div>
                                        <p>
                                            Ever find yourself staring at your computer screen a good consulting slogan
                                            to come to mind? Oftentimes.
                                        </p>
                                        <div className="shape">
                                            <img
                                                src="/assets/img/images/call_back_shape.png"
                                                alt=""
                                                data-aos="fade-right"
                                                data-aos-delay={400}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div className="col-lg-6">
                                    <div className="call-back-form">
                                        <form action="#">
                                            <div className="row">
                                                <div className="col-md-6">
                                                    <div className="form-grp">
                                                        <input type="text" placeholder="Name *" />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="form-grp">
                                                        <input type="email" placeholder="E-mail *" />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="form-grp">
                                                        <input type="number" placeholder="Phone *" />
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <button type="submit" className="btn">
                                                        Send Now
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section> */}
        </div>
        <Callback1 />
        <Testimonials />
      </Layout>
    </>
  );
}