import Abou from "@/src/components/services-details-banner/abou.js";
import Counter from "@/src/components/Counter";
import Faqs from "@/src/components/Faqs";
import LogoSlider from "@/src/components/LogoSlider";
import Layout from "@/src/layout/Layout";
import { testimonial_list_slider } from "@/src/sliderProps";
import Link from "next/link";
import { Nav, Tab } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import { brandListProps2 } from "@/src/sliderProps";
import SubCard from "@/src/components/AboveFooter";
import ConsenHead from "@/src/ConsenHead";

const About = () => {
    return (
        <>
            <ConsenHead title="About - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo" description="5+ Years of Experience About Us Our Story Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019. Empowering Your Digital Journey Innovative Solutions: Tailoring cutting-edge web and mobile applications that" />
            <Layout  header={3} footer={3}>
                <Abou pageName={"ABOUT US"} />
                {/* ========================================================= */}
                {/* Start abouts area  */}
                {/* ========================================================= */}
                <div className="about-area new-style bg-white">
                    <div className="container">
                        <div className="row align-items-center">

                            <div className="col-lg-6 mb-4 mb-lg-0">
                                <div className="about-thumb">
                                    <img src="/assets/images/about/about.webp" alt="Our story" className="img-fluid" />
                                </div>
                            </div>

                            <div className="col-lg-6">
                                <div className="consen-section-title mb-4">
                                    <div className="consen-section-title">
                                        <h5>About Us</h5>
                                        <h2>Our<span> Story</span></h2>
                                    </div>
                                    <p className="about-text2 pt-3">
                                        Metatroncube Software Solutions was born from a passion for technology and a vision to
                                        revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have
                                        been pioneering custom software solutions since 2019.
                                    </p>
                                </div>

                                <div className="row g-3">
                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/innovative.webp " alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Innovative Solutions</h5>
                                                <p>Tailoring cutting-edge web and mobile applications that set industry standards.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/teamwork.webp" alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Expert Teamwork</h5>
                                                <p>A synergy of skilled developers and creative designers committed to your success.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col-12">
                                        <div className="d-flex align-items-start mb-3">
                                            <img src="/assets/images/about/future.webp " alt="icon" className="me-3 pr-3" />
                                            <div>
                                                <h5>Future-Ready Approach</h5>
                                                <p>Anticipating market trends to keep your business ahead of the curve.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>


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

                {/*==================================================*/}
                {/* End abouts Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start Brand Area */}
                {/*==================================================*/}
                <div className="about brand-section new-style">
                    <div className="container">
                        <div className="row">
                            <Swiper {...brandListProps2} className="brand-list2 owl-carousel">
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-1.webp" alt="BigCommerce Partner logo, symbolizing a strong e-commerce alliance." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-2.webp" alt="Shopify logo with a green shopping bag icon." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-3.webp" alt="Constant Contact logo with a stylized '@' symbol." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide>
                                    <div className="brand-single-box">
                                        <div className="brand-thumb">
                                            <img src="/assets/images/add/icon-4.webp" alt="HIKE SEO logo depicting a rising graph within the letter 'K'." />
                                        </div>
                                    </div>
                                </SwiperSlide>
                            </Swiper>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End brand Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Skill Area Css */}
                {/*==================================================*/}
                <div className="skill-area style-two">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-md-6">
                                <div className="extra-animation-div">
                                    <div className="consen-section-title">
                                        <h5>Watch Us Live</h5>
                                        <h2>An Agency That</h2>
                                        <h2><span>Gets Excited </span>About Your Mission</h2>
                                    </div>
                                    <div className="dreamit-smart-title pt-2">
                                        <p className="slill-text-dark">
                                            Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
                                        </p>
                                        <p>
                                            Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth.
                                        </p>
                                    </div>
                                </div>
                                <div className="dreamit-icon-box">
                                    <div className="dreamit-icon-list">
                                        <ul>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Urgent development solutions</span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Top quality services with reasonable price</span>
                                            </li>
                                            <li>
                                                <i className="bi bi-arrow-right-circle" />
                                                <span> Professional & experienced team</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-6">
                                <div className="slill-single-thumb mt-4 mt-lg-0 pl-50 ml-1">
                                    <img src="/assets/images/about/watch-us-live-section.webp" alt="Agency that gets excited about" />
                                    <div className="skill-thumb-content">
                                        <div className="skill-title">
                                            <h3 className="counter"><Counter end={10} /></h3>
                                            <span>+</span>
                                            <h5>YEARS EXPERIENCE</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/* <div className="process-shape">
                            <div className="process-shape-thumb bounce-animate2">
                                <img src="assets/images/about/3.webp" alt="" />
                            </div>
                        </div> */}
                        </div>

                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Skill Area Css */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen case study Area */}
                {/*==================================================*/}
                <div className="why-choose-us">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6">
                                <div className="consen-section-title">
                                    <h5>Experience US</h5>
                                    <h2>We Offer & Do</h2>
                                    <h2><span>More than</span> Ever Platforms.</h2>
                                    <p className="choose-text1">
                                        Appropriately enhance principle-centered innovation rather
                                        than high standards in platforms. Credibly orchestrate functional.
                                    </p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="row">
                                    <div className="col-12 pl-10 pr-10 mb-4">
                                        <div className="process-single-box text-white">
                                            <div className="process-title">
                                                <h3>
                                                    Our <span> Mission </span>
                                                </h3>
                                                <p>
                                                    Our mission is to empower businesses
                                                    with state-of-the-art digital products that drive growth, efficiency, and connectivity.
                                                    We strive to be at the forefront of innovation, delivering web and mobile solutions
                                                    that exceed expectations.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-12 pl-10 pr-10">
                                        <div className="process-single-box upper">
                                            <div className="process-title text-white">
                                                <h3>
                                                    Our <span> Values </span>
                                                </h3>
                                                <p>
                                                    Integrity and Trust,
                                                    Innovation and Excellence,
                                                    Collaboration and Empowerment,
                                                    Adaptability and Learning,
                                                    Customer-Centric Approach,
                                                    Sustainability and Responsibility.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen case study Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start process Area */}
                {/*==================================================*/}
                <div className="process-area two">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={100} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Projects Completed</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={50} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Active Clients</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={20} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Expert People</p>
                                    </div>
                                </div>
                            </div>

                            <div className="col-md-3 col-6 d-flex flex-column align-items-center justify-content-center">
                                <div className="counter-single-box">
                                    <div className="counter-title">
                                        <h4 className="text-dark"><Counter end={50} /></h4>
                                        <span>+</span>
                                        <p className="text-dark">Happy Clients</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="process-shape">
                            <div className="service-shape">
                                <img src="/assets/images/elements/right-top-element .webp" alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                {/*=================================================*/}
                {/* End Process Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Testimonial Area */}
                {/*==================================================*/}
                <div className="testimonial-area new-style">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-lg-8">
                                <div className="consen-section-title">
                                    <h5 className="text-primary">Our Testimonials</h5>
                                    <h2>What Our Customers are  </h2>
                                    <h2>Talking<span> About us.</span> </h2>
                                </div>
                            </div>
                        </div>

                        <Swiper {...testimonial_list_slider} className="testimonial_list owl-carousel mt-4">

                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Dine360 Ads</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                I had an amazing experience working with Metatrion Cube Solutions! They built a stunning website for my business that not only looks professional but is also fast, responsive, and easy to navigate. The team truly listened to my needs, offered great design ideas, and delivered everything on time. I’ve already received compliments from clients about how sleek and user-friendly the site is. Highly recommend them if you're looking for top-notch web development!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Chansa</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p className="pb-4">
                                                Working with Metatron Cube Software Solutions is always a wonderful experience. I say always because I am a repeat client, and would encourage anybody to hire them for your project.
                                                I can’t praise their team enough, they are able to make the daunting process of creating digital solutions easy to understand, and always within budget.
                                                They have made me a very happy, and loyal client.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">
                                                    RentSouth Beach Miami</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                Partnering with Metatroncube Software Solutions was a game-changer for our Rent South Beach Miami website. Their expertise in digital marketing, especially SEO and social media, significantly increased our online visibility and customer engagement. As a leading digital marketing agency in Canada, they delivered results beyond our expectations. Highly recommend them for anyone looking to boost their online presence!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Dine360 Ads</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                I had an amazing experience working with Metatrion Cube Solutions! They built a stunning website for my business that not only looks professional but is also fast, responsive, and easy to navigate. The team truly listened to my needs, offered great design ideas, and delivered everything on time. I’ve already received compliments from clients about how sleek and user-friendly the site is. Highly recommend them if you're looking for top-notch web development!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Chansa</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p className="pb-4">
                                                Working with Metatron Cube Software Solutions is always a wonderful experience. I say always because I am a repeat client, and would encourage anybody to hire them for your project.
                                                I can’t praise their team enough, they are able to make the daunting process of creating digital solutions easy to understand, and always within budget.
                                                They have made me a very happy, and loyal client.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">
                                                    RentSouth Beach Miami</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                Partnering with Metatroncube Software Solutions was a game-changer for our Rent South Beach Miami website. Their expertise in digital marketing, especially SEO and social media, significantly increased our online visibility and customer engagement. As a leading digital marketing agency in Canada, they delivered results beyond our expectations. Highly recommend them for anyone looking to boost their online presence!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Dine360 Ads</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                I had an amazing experience working with Metatrion Cube Solutions! They built a stunning website for my business that not only looks professional but is also fast, responsive, and easy to navigate. The team truly listened to my needs, offered great design ideas, and delivered everything on time. I’ve already received compliments from clients about how sleek and user-friendly the site is. Highly recommend them if you're looking for top-notch web development!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">Chansa</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p className="pb-4">
                                                Working with Metatron Cube Software Solutions is always a wonderful experience. I say always because I am a repeat client, and would encourage anybody to hire them for your project.
                                                I can’t praise their team enough, they are able to make the daunting process of creating digital solutions easy to understand, and always within budget.
                                                They have made me a very happy, and loyal client.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                            <SwiperSlide className="pr-1">
                                <div className="testimonial-single-box">
                                    <div className="testimonial-content1">
                                        <div className="single-quote-icon">
                                            {/* <div className="quote-thumb">
                                            <img src="assets/images/about/testimonial/testimonial-2.webp" alt="Smiling men's avatar representing a satisfied client." />
                                        </div> */}
                                            <div className="quote-title">
                                                <h4 className="testimonial-text">
                                                    RentSouth Beach Miami</h4>
                                                <p>Happy Customer</p>
                                            </div>
                                        </div>
                                        <div className="em-testimonial-text">
                                            <p>
                                                Partnering with Metatroncube Software Solutions was a game-changer for our Rent South Beach Miami website. Their expertise in digital marketing, especially SEO and social media, significantly increased our online visibility and customer engagement. As a leading digital marketing agency in Canada, they delivered results beyond our expectations. Highly recommend them for anyone looking to boost their online presence!
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                        </Swiper>

                        <div className="testi-shape">
                            <div className="testi-shape-thumb">
                                <img src="/assets/images/elements/right-top-element-1.webp" alt="Decorative Shape" />
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Testimonial Area */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Call Do Action Area Css */}
                {/*==================================================*/}
                <div className="call-do-action-area">
                    <div className="container">
                        <div className="row justify-content-center text-center">
                            <div className="col-lg-10 col-md-12">
                                <div className="consen-section-title upper mb-4">
                                    <h5 className="text-primary">Let’s Get Started New Project</h5>
                                    <h2 className="call-do-action-area-h2">Your success story begins with us.</h2>
                                </div>
                                <div className="new-button">
                                    <Link legacyBehavior href="/contact">
                                        <a className="btn btn-primary px-4 mt-3">Contact Us</a>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Call Do Action Area Css */}
                {/*==================================================*/}
                {/*==================================================*/}
                {/* Start consen Subscribe Area */}
                {/*==================================================*/}
                <div className="sub">
                    <div className="container">
                        <SubCard />
                    </div>
                </div>

                {/*==================================================*/}
                {/* End consen Subscribe Area */}
                {/*==================================================*/}
            </Layout >
        </>
    );
};
export default About;