import Layout from "@/components/layout/Layout";
import Allservices1 from "@/components/sections/Allservices1";
import PortfolioSelector from "@/components/custom/PortfolioSelector";

export const metadata = {
  title: "Portfolio | 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 Services() {
  return (
    <>
      <Layout
        headerStyle={4}
        footerStyle={3}
        breadcrumbTitle="Client Portfolio"
      >
        <section
          className="services__area-five services__bg-five"
          data-background="/assets/img/bg/inner_services_bg02.jpg"
        >
          <div className="container">
            {/* <div className="row justify-content-center">
                            <div className="col-xl-6 col-lg-8">
                                <div className="section-title text-center mb-40">
                                    <span className="sub-title">WHAT WE OFFER</span>
                                    <h2 className="title">We Offer An Effective Wide Area Business solutions</h2>
                                </div>
                            </div>
                        </div> */}
            <div className="video-container mb-5">
              <iframe
                width="100%"
                height="500"
                src="https://www.youtube.com/embed/KiJAods46eI?autoplay=1"
                title="YouTube video"
                frameBorder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>

            <div className="services-item-wrap">
              <div className="row justify-content-center">
                <div className="col-xl-7 col-lg-8">
                  <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
                    <span className="sub-title">
                      COMPANIES{" "}
                      <span className="title-color">WE'VE WORKED WITH</span>
                    </span>
                    <h2 className="title tg-element-title">
                      Some of Our Most Recent Clients
                    </h2>
                  </div>
                </div>
              </div>
              <PortfolioSelector />
            </div>
          </div>
        </section>
        <Allservices1 />
      </Layout>
    </>
  );
}
