import Counter from "@/src/components/Counter";
import Careerss from "@/src/components/services-details-banner/careerss.js";
import ProssessBar from "@/src/components/ProssessBar";
import Layout from "@/src/layout/Layout";
import { brandListProps, caseStudyProps } from "@/src/sliderProps";
import dynamic from "next/dynamic";
import SubCard from "@/src/components/AboveFooter";
import ConsenHead from "@/src/ConsenHead";

const CaseStudies = dynamic(() => import("@/src/components/isotope/CarrerCase-study"), {
  ssr: false,
});

const Careers = () => {
  return (
    <>
     <ConsenHead title="Careers - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo" description="Join MetatronCube — where innovation in web & mobile development, SEO, and digital marketing meets your growth. Explore careers and build the future with us." />
      <Layout footer={1}>
        {/* Breadcrumb */}
        <Careerss pageName={"CAREERS"} />

        {/* Section: Welcome */}
        <div className="ceo-cod pb-90 pt-90">
          <div className="container">
            <div className="row align-items-center">
              {/* Text Section */}
              <div className="col-lg-6 col-md-12 mb-4 mb-lg-0 pl-50">
                <div>
                  <div className="consen-section-title">
                    <h5>Welcome to Your Next Big Opportunity</h5>
                  </div>
                  <div className="consen-section-title">
                    <h2>Why Join <span>Metatroncube Software </span>Solutions?</h2>
                  </div>

                  <h6>
                    Be part of a dynamic team where innovation, growth, and impact come together.
                  </h6>
                  <div className="lines style-three pt-3 pb-2">
                    <div className="line" />
                  </div>
                  <p className="about-text2">
                    At Metatroncube Software Solutions, we don’t just build digital solutions—we build dreams. Founded by a passionate team, our mission is to simplify complex problems and deliver results that exceed expectations.
                  </p>

                  <p className="about-text2">
                    Here We believe in fostering a culture where every voice matters. Whether you’re a problem-solver, visionary, or tech wizard, there’s a place for you here to grow and make a real impact.
                  </p>


                </div>
              </div>




              {/* Image Section */}
              <div className="col-lg-6 col-md-12 text-center  pl-50">
                <img src="/assets/images/careers/why-join-us .webp" alt="Why join metatroncube software solutions" className="img-fluid mb-3" />

                <div className="about-shape-thumb bounce-animate">
                  <img src="/assets/images/careers/why-join-us-front.webp" alt="Welcome to your next big opportunity" className="img-fluid" />

                </div>
              </div>
            </div>
          </div>
          <div className="position-relative">

            <img
              src="/assets/images/about/3.webp"
              alt="Team defining innovation strategy at Metatron Cube Solutions."
              className="img-fluid position-absolute top-0 end-0 bounce-animate2"
            />
          </div>
        </div>

        {/* Section: What We Offer */}
        <div className="process-area color-bg pb-90 pt-90">
          <div className="container">
            <div className="row align-items-center">

              {/* Image - order for responsive change */}
              <div className="col-lg-6 mb-4 mb-lg-0 order-1 order-lg-0">
                <img src="/assets/images/careers/benefits .webp" alt="What we offer" className="img-fluid" />
              </div>

              {/* Text - order for responsive change */}
              <div className="col-lg-6 pb-90 pt-90 pl-50 order-0 order-lg-1">
                <div className="consen-section-title">
                  <h5>Benefits That Matter</h5>
                </div>
                <div className="consen-section-title">
                  <h2>What We<span> Offer</span></h2>
                </div>
                <p className="pt-3">
                  <strong>
                    From career growth to work-life balance, discover why Metatroncube is the right place for you.
                  </strong>
                </p>
                <div className="service-details-icon-box">
                  <div className="widget-service-details-icon">
                    <ul className="list-unstyled">
                      <li className="mb-3 d-flex">
                        <i className="bi bi-arrow-right-circle mr-2 me-2" />
                        <span><strong>Opportunities to Innovate:</strong> Work on cutting-edge projects that challenge you to think outside the box.</span>
                      </li>
                      <li className="mb-3 d-flex">
                        <i className="bi bi-arrow-right-circle mr-2 me-2" />
                        <span><strong>Global Exposure:</strong> Collaborate with international clients and diverse teams.</span>
                      </li>
                      <li className="mb-3 d-flex">
                        <i className="bi bi-arrow-right-circle mr-2 me-2" />
                        <span><strong>Career Growth:</strong> Advance your skills with our mentorship programs, certifications, and workshops.</span>
                      </li>
                      <li className="mb-3 d-flex">
                        <i className="bi bi-arrow-right-circle mr-2 me-2" />
                        <span><strong>Inclusive Culture:</strong> Be part of a workplace that values diversity, equity, and belonging.</span>
                      </li>
                      <li className="mb-3 d-flex">
                        <i className="bi bi-arrow-right-circle mr-2 me-2" />
                        <span><strong>Employee-First Approach:</strong> Enjoy flexible work policies, wellness programs, and a focus on work-life balance.</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>


        {/* Section: Our Vision */}
        <div className="style-two pt-90 pb-90">
          <div className="container">
            <div className="row align-items-center">
              {/* Text */}
              <div className="col-lg-7 col-md-6 mb-4 mb-lg-0">
                <div className="consen-section-title">
                  <h5>Guided by Purpose, Driven by Passion</h5>
                </div>
                <div className="consen-section-title">
                  <h2>Our<span> Vision</span></h2>
                </div>
                <p>
                  <strong>
                    Join us in shaping the future of technology and delivering meaningful solutions.
                  </strong>
                </p>
                <p>
                  At Metatroncube, we’re driven by the idea that technology can bridge gaps,
                  empower businesses, and simplify lives.
                </p>
                <p>
                  If you’re ready for a journey of growth, innovation, and collaboration,
                  we’d love to have you. Explore our openings below.
                </p>
              </div>

              {/* Image */}
              <div className="col-lg-5 col-md-6 text-center pl-50">
                <img
                  src="/assets/images/careers/guided .webp"
                  alt="Our vision"
                  className="img-fluid"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Section: Case Studies */}

        <div className="case-study-area style-three color-bg">
          <div className="container">
            <CaseStudies />
          </div>
        </div>

        <div className="sub color-bg">
          <div className="container">
            <SubCard />
          </div>
        </div>

      </Layout>
    </>
  );
};

export default Careers;