import Counter from "@/src/components/Counter";
import Serve from "@/src/components/services-details-banner/serve.js";
import Faqs from "@/src/components/Faqs";
import ProgressBar from "@/src/components/ProgressBar";
import Layout from "@/src/layout/Layout";
import { testimonial_list_slider } from "@/src/sliderProps";
import dynamic from "next/dynamic";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import React, { useState } from "react";
import Accordion from 'react-bootstrap/Accordion';
import SubCard from "@/src/components/AboveFooter";
import ConsenHead from "@/src/ConsenHead";

const faqsData = [
  {
    id: 1, title: "Consultation & Strategy Development",
    content:
      "We start by understanding your goals and challenges. Through detailed consultation, we craft a tailored strategy that aligns with your business vision.",
    animationDelay: ".5s",
  },
  {
    id: 2, title: "Design & Development",
    content:
      "Our team transforms ideas into reality with user-friendly designs and powerful development. Every website or app is built to perform and scale.",
    animationDelay: ".5s",
  },
  {
    id: 3, title: "Implementation & Optimization",
    content:
      "Once developed, we implement solutions seamlessly and optimize them for speed, security, and efficiency to ensure maximum impact.",
    animationDelay: ".5s",
  },
  {
    id: 4, title: "Testing & Launch",
    content:
      "Before going live, each project undergoes rigorous testing for performance, usability, and reliability - ensuring a flawless launch.",
    animationDelay: ".5s",
  },
  {
    id: 5, title: "Ongoing Support & Analysis",
    content:
      "We provide continuous support, monitoring, and performance analysis to keep your digital solutions running at their best.",
    animationDelay: ".5s",
  },
  {
    id: 6, title: "Client Engagement & Feedback",
    content:
      "We believe in collaboration. Regular feedback loops keep you involved at every stage, ensuring the final outcome exceeds expectations.",
    animationDelay: ".5s",
  },
];


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

const services = () => {
  const [active, setActive] = useState(faqsData[0].id);
  return (
    <>
      <ConsenHead title="Metatroncube: Leaders in Web &amp; Mobile Dev, SEO, Digital Marketing" description="Metatroncube Software Solutions: Your go-to agency for cutting-edge web &amp; app development, SEO, digital marketing, and graphic design services" />

      <Layout>
        <Serve pageName={"SERVICES"} />
        {/*==================================================*/}
        {/* Start consen feature Area */}
        {/*==================================================*/}
        <div className="feature-area">
          <div className="container">
            <div className="row feature-bg">
              <div className="col-lg-4 col-md-6">
                <div className="single-feature-box">
                  <div className="feature-box-inner">
                    <div className="feature-icon1">
                      <img src="/assets/images/services/cards/comprehensive-icon.webp" alt="Comprehensive
                      digital development" />
                    </div>
                    <div className="feature-title">
                      <h3>End-to-End Digital Solutions
                      </h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        Custom websites, mobile apps, and eCommerce platforms built to power your business success.{" "}
                      </p>
                    </div>
                    <div className="feature-bar" />
                  </div>
                  {/* feature back */}
                  <div className="consen-feature-back">
                    <div className="feature-back-title">
                      <h2> Comprehensive
                        Digital Development </h2>
                    </div>
                    <div className="feature-back-icon">
                      <span>+</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-4 col-md-6">
                <div className="single-feature-box upp-1">
                  <div className="feature-box-inner">
                    <div className="feature-icon1">
                      <img src="/assets/images/services/cards/strategic.webp" alt="Strategic online
                      growth solutions" />
                    </div>
                    <div className="feature-title">
                      <h3> Data-Driven Marketing Growth </h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        SEO, content marketing, and paid ads crafted to increase visibility, leads, and online sales.{" "}
                      </p>
                    </div>
                    <div className="feature-bar" />
                  </div>
                  {/* feature back */}
                  <div className="consen-feature-back">
                    <div className="feature-back-title">
                      <h2> Strategic Online
                        Growth Solutions </h2>
                    </div>
                    <div className="feature-back-icon">
                      <span>+</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-4 col-md-6">
                <div className="single-feature-box uppp-1">
                  <div className="feature-box-inner">
                    <div className="feature-icon1">
                      <img src="/assets/images/services/cards/creative.webp" alt="Creative design and branding excellence" />
                    </div>
                    <div className="feature-title">
                      <h3>Innovative Design & Brand Identity</h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        Logos, graphics, and UI/UX design that capture attention and strengthen your brand presence.{" "}
                      </p>
                    </div>
                    <div className="feature-bar" />
                  </div>
                  {/* feature back */}
                  <div className="consen-feature-back">
                    <div className="feature-back-title">
                      <h2> Creative Design and Branding Excellence </h2>
                    </div>
                    <div className="feature-back-icon">
                      <span>+</span>
                    </div>
                  </div>
                </div>
              </div>
              {/* feature shape */}
            </div>
          </div>
        </div>
        {/*==================================================*/}
        {/* End consen feature Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* End consen about Area */}
        {/*==================================================*/}
        <div className="about-area style-three" id="about">
          <div className="container">
            <div className="row align-items-center">
              <div className="col-lg-6 col-md-12">
                <div className="dreamit-about-thumb mr-lg-4">
                  <img src="/assets/images/services/service-img/our-services.webp" alt="Crafting tailored digital solutions for every need" />
                  {/* about-shape */}
                  <div className="about-shape-thumb1 bounce-animate2">
                    <img src="/assets/images/about/about-shpe.png" alt />
                  </div>
                  {/* <div className="about-shape-thumb3 bounce-animate4">
                  <img src="assets/images/services/1 .webp" alt />
                </div> */}
                </div>
              </div>
              <div className="col-lg-6 col-md-12">
                <div className="consen-section-title">
                  <h5> Our Services </h5>
                  <h2> Delivering Smart </h2>
                  <h2>
                    {" "}
                    <span>Digital Solutions</span> for Modern Businesses
                  </h2>
                  <p className="about-text1">
                    {" "}
                    At MetatronCube India, we combine creativity with advanced technology to build solutions that truly work for you. From dynamic website and mobile app development using tools like React, Angular, PHP, and Node.js to data-driven SEO and performance-focused digital marketing, we help brands thrive online.
                    {/* <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"> HTML</a>,
                    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank"> CSS</a>,
                    <a href="https://nodejs.org/" target="_blank"> Node.js</a>, and
                    <a href="https://angular.io/" target="_blank"> Angular</a>, */}
                    Our design team brings ideas to life with stunning graphics and intuitive UI/UX interfaces that elevate user experiences. For mobile apps, we leverage <a href="https://flutter.dev/" target="_blank"> Flutter</a>, <a href="https://developer.apple.com/swift/" target="_blank"> Swift </a>, and Android frameworks to deliver secure, scalable, and engaging applications across platforms.

                    {/* <a href="https://flutter.dev/" target="_blank"> Flutter</a>,
                    <a href="https://developer.android.com/" target="_blank"> Android</a>, and
                    <a href="https://developer.apple.com/swift/" target="_blank"> Swift </a> */}
                    Every project is tailored to align with your business goals, ensuring measurable results. We’re more than developers and designers - we’re your digital growth partners, dedicated to crafting solutions that scale with your success.{" "}
                  </p>
                </div>
                <div className="about-button">
                  {/* <Link legacyBehavior href="/about">
                  <a>
                    {" "}
                    <i className="bi bi-gear" /> More About{" "}
                  </a>
                </Link> */}
                </div>
              </div>
            </div>
          </div>
        </div>
        {/*==================================================*/}
        {/* End consen about Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen feature Area */}
        {/*==================================================*/}
        <div className="service style-three" id="service">
          <div className="container">
            <div className="row justify-content-center text-center">
              <div className="consen-section-title pb-50 mb-1">
                <h5>MetatronCube India</h5>
                <h2>Comprehensive Technology Services </h2>
                <h2>
                  <span>for Every Business Need</span>
                </h2>
              </div>
            </div>

            <div className="row">
              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1 upper">
                      <img src="/assets/images/services/cards/web-development.webp" alt="Website Development" />
                    </div>
                    <div className="em-service-title">
                      <h3>Website Development</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p>Build responsive, scalable websites designed to strengthen your online presence and drive growth.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/website-development-company">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1 upper">
                      <img src="/assets/images/services/cards/mob-app.webp" alt="Application Development" />
                    </div>
                    <div className="em-service-title">
                      <h3>Application Development</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p> Custom mobile and web apps developed with the latest technologies to match your business goals.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/mobile-application-development">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>

              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1 upper">
                      <img src="/assets/images/services/cards/graphic-design.webp" alt="Graphic Designing" />
                    </div>
                    <div className="em-service-title">
                      <h3>Graphic Designing</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p>Creative visuals, branding, and designs that connect with audiences and bring your brand to life.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/graphic-designing-company">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1">
                      <img src="/assets/images/services/cards/ui-ux.webp" alt="UI / UX Designing" />
                    </div>
                    <div className="em-service-title">
                      <h3>UI / UX Designing</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p>Intuitive and user-focused designs that deliver smooth, engaging, and memorable digital experiences.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/ui-ux-designing">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>


              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1">
                      <img src="/assets/images/services/cards/content-writing.webp" alt="SEO & Content Writing" />
                    </div>
                    <div className="em-service-title">
                      <h3>SEO & Content Writing</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p> Powerful SEO strategies and compelling content writing crafted to improve visibility and drive traffic.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/search-engine-optimization-seo-content-writing">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>

              <div className="col-lg-4 col-md-6 mb-4">
                <div className="dreamit-service-box">
                  <div className="service-box-inner">
                    <div className="em-service-icon1">
                      <img src="/assets/images/services/cards/digital-marketing.webp" alt="Digital Marketing" />
                    </div>
                    <div className="em-service-title">
                      <h3>Digital Marketing</h3>
                    </div>
                    <div className="service-bar" />
                    <div className="em-service-text">
                      <p>Targeted digital marketing solutions that enhance brand awareness, generate leads, and boost online growth.</p>
                    </div>
                    <div className="service-button">
                      <Link legacyBehavior href="/service/digital-marketing-agency-in-canada">
                        <a>Read More <i className="bi bi-plus" /></a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>


            </div>

            <div className="service-shape">
              <img src="/assets/images/resource/all-shape3.png" alt="Decorative Shape" />
            </div>
          </div>
        </div>


        {/*==================================================*/}
        {/* End consen feature Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen case study Area */}
        {/*==================================================*/}
        <div className="why-choose-us-area">
          <div className="container">
            <div className="row align-items-center">
              <div className="col-lg-6">
                <div className="consen-section-title">
                  <h5> Discover Who We Are </h5>
                  <h2>
                    {" "}
                    Your Trusted & Affordable  <span>  Digital Agency Partner. </span>
                  </h2>
                  <p className="choose-text1">
                    {" "}
                    At MetatronCube India, we blend creativity, technology, and strategy to deliver impactful digital solutions. From web and mobile app development to SEO, digital marketing, UI/UX, and design, our cost-effective services are built to maximize value without compromising quality. We’re committed to helping businesses grow online with reliability, transparency, and measurable results.{" "}
                  </p>
                </div>
                <div className="container">
                  <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>
                            Driving business growth with innovative digital solutions.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="col-12 pl-10 pr-10 mb-4">
                      <div className="process-single-box upper">
                        <div className="process-title text-white">
                          <h3>
                            Our <span> vision </span>
                          </h3>
                          <p>
                            Shaping a smarter, connected future through technology.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="col-12 pl-10 pr-10 mb-4">
                      <div className="process-single-box text-white">
                        <div className="process-title">
                          <h3>
                            Our <span> Values </span>
                          </h3>
                          <p>
                            Innovation, integrity, and excellence in every solution.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                {/* <div className="why-choose-button">
                <Link legacyBehavior href="/about">
                  <a>
                    {" "}
                    <i className="bi bi-gear" /> More About{" "}
                  </a>
                </Link>
              </div> */}
              </div>
              <div className="col-lg-6 col-md-12">
                <div className="why-choose-us-thumb">
                  <img src="/assets/images/services/get-to-know/get-to-know-2.webp" alt="We're reliable & cost efficient digital agency. " />
                  {/* choose shape thumb */}
                  <div className="why-choose-us-image">
                    <div className="why-choose-us-shape-thumb bounce-animate">
                      <img src="/assets/images/elements/element-3.webp" alt />
                    </div>
                    <div className="why-choose-us-shape-thumb2 rotateme">
                      <img src="/assets/images/services/get-to-know/get-to-know-1.webp" alt="Get to know us more" />
                    </div>
                    <div className="why-choose-us-shape-thumb3 bounce-animate2">
                      <img src="/assets/images/elements/element-1.webp" alt />
                    </div>
                    <div className="why-choose-us-shape-thumb4">
                      <img src="/assets/images/elements/element-2 .webp" alt />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/*==================================================*/}
        {/* End consen case study Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen Testimonial Area */}
        {/*==================================================*/}
        <div className="testimonial-area">
          <div className="container">
            <div className="row justify-content-center text-center">
              <div className="col-lg-7 col-md-6">
                <div className="consen-section-title pb-50">
                  <h5> Why Work With Us </h5>
                  <h2> Future-Ready Digital Strategies </h2>
                  <h2>
                    {" "}
                    <span> Backed by Innovation</span></h2>
                </div>
              </div>
              {/* <div className="col-lg-5 col-md-6">
              <div className="row">
                <div className="col-6">
                  <div className="testi-counter-box upper">
                    <div className="testi-counter-title">
                      <h3 className="counter">
                        {" "}
                        <Counter end={1372} />{" "}
                      </h3>
                      <span>+</span>
                      <p> Happy Customers </p>
                    </div>
                  </div>
                </div>
                <div className="col-6">
                  <div className="testi-counter-box">
                    <div className="testi-counter-title">
                      <h3 className="counter">
                        {" "}
                        <Counter end={100} />{" "}
                      </h3>
                      <span>%</span>
                      <p> Satisfaction Rate </p>
                    </div>
                  </div>
                </div>
              </div>
            </div> */}
              <div className="testi-shape-thumb1 rotateme">
                <img src="/assets/images/services/bg/testimonial-map .webp" alt="A diverse team engaged in a strategic discussion." />
              </div>
            </div>
            <div className="row justify-content-center">
              <div className="col-lg-4 col-md-6">
                <div className="testimonial-single-box text-center p-4 shadow rounded">
                  <div className="testimonial-content1">
                    <img src="/assets/images/services/why-choose-us/latest-technology.webp" alt="Latest technology" className="img-fluid" />
                    <h4 className="testimonial-text">Next-Gen Technology</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Leverage modern tools and platforms to build powerful websites, apps, and digital solutions.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="col-lg-4 col-md-6">
                <div className="testimonial-single-box text-center p-4 shadow rounded">
                  <div className="testimonial-content1">
                    <img src="/assets/images/services/why-choose-us/certified-experts.webp" alt="Certified experts" className="img-fluid" />
                    <h4 className="testimonial-text">Skilled Professionals</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Work with experienced experts who bring proven knowledge and strategic guidance to every project.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="col-lg-4 col-md-6">
                <div className="testimonial-single-box text-center p-4 shadow rounded">
                  <div className="testimonial-content1">
                    <img src="/assets/images/services/why-choose-us/get-reasonable-price.webp" alt="Get reasonable price" className="img-fluid" />
                    <h4 className="testimonial-text">Affordable Prices</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Get customized digital solutions that balance quality and cost, designed to fit your business goals.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        {/*==================================================*/}
        {/* End consen Testimonial Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen case study Area */}
        {/*==================================================*/}
        {/* <div className="case-study-area style-three" id="portfolio">
        <div className="container">
          <CaseStudies />
        </div>
      </div> */}
        {/*==================================================*/}
        {/* End consen case study Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen process Area */}
        {/*==================================================*/}
        {/* <div className="process-area style-two">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-7 col-md-6">
              <div className="consen-section-title white pb-4 pb-lg-5">
                <h5> process </h5>
                <h2> We follow some easy steps to </h2>
                <h2>
                  {" "}
                  developed <span> Projects </span>
                </h2>
              </div>
            </div>
            <div className="col-lg-5 col-md-6">
              <div className="process-text">
                <p>
                  {" "}
                  Monotonectally brand worldwide value before in seamless
                  process Collaboratively initiate strategic expertise after
                  functionalized and formulate based internal organic.{" "}
                </p>
              </div>
            </div>
          </div>
          
          <div className="process-shape">
            <div className="service-shape">
              <img src="assets/images/resource/all-shape3.png" alt />
            </div>
            <div className="process-shape-thumb bounce-animate2">
              <img src="assets/images/resource/all-shape6.png" alt />
            </div>
          </div>
        </div>
      </div>
      <div className="process-extra-area style-two">
        <div className="container">
          <div className="row justify-content-center process-bg">
            <div className="col-lg-4 col-sm-6">
              <div className="process-single-box2">
                <div className="process-icon-thumb">
                  <img src="assets/images/resource/a.png" alt />
                </div>
                <div className="process-title">
                  <h3>Idea Generate</h3>
                  <p>
                    Collaboratively initiate strategic ex formulate based
                    internal.
                  </p>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-sm-6">
              <div className="process-single-box2 responsive">
                <div className="process-icon-thumb">
                  <img src="assets/images/resource/b.png" alt />
                </div>
                <div className="process-title">
                  <h3> System Design </h3>
                  <p>
                    Collaboratively initiate strategic ex formulate based
                    internal.
                  </p>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-sm-6">
              <div className="process-single-box2 upper">
                <div className="process-icon-thumb">
                  <img src="assets/images/resource/c.png" alt />
                </div>
                <div className="process-title">
                  <h3> Report Analysis </h3>
                  <p>
                    Collaboratively initiate strategic ex formulate based
                    internal.
                  </p>
                </div>
              </div>
            </div>
            <div className="process-shape">
              <div className="process-shape-thumb3 bounce-animate3">
                <img src="assets/images/resource/all-shape2.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div> */}
        {/*==================================================*/}
        {/* End consen process Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen Team Area */}
        {/*==================================================*/}
        {/* <div className="team_area" id="team">
        <div className="container">
          <div className="row">
            <div className="col-lg-12">
              <div className="consen-section-title upper text-center pb-60">
                <h5> Team Member </h5>
                <h2>
                  {" "}
                  Let’s Meet with Our <span> Experts </span>
                </h2>
              </div>
            </div>
          </div>
          <div className="row justify-content-center">
            <div className="col-lg-4 col-sm-6">
              <div className="single_team">
                <div className="single_team_thumb1">
                  <img src="assets/images/resource/team-1.jpg" alt="logo" />
                </div>
                <div className="single_team_content">
                  <div className="team-title">
                    <h4>Silvia Garden</h4>
                    <span>Designer</span>
                  </div>
                  <div className="single_team_icon">
                    <a href="#">
                      {" "}
                      <i className="bi bi-facebook" />{" "}
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-twitter" />{" "}
                    </a>
                    <a href="#">
                      <i className="bi bi-dribbble" />
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-instagram"> </i>{" "}
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-sm-6">
              <div className="single_team">
                <div className="single_team_thumb1">
                  <img src="assets/images/resource/team-2.jpg" alt="image" />
                </div>
                <div className="single_team_content">
                  <div className="team-title">
                    <h4> Monalisha Shen </h4>
                    <span> IT-Executive </span>
                  </div>
                  <div className="single_team_icon">
                    <a href="#">
                      {" "}
                      <i className="bi bi-facebook" />{" "}
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-twitter" />{" "}
                    </a>
                    <a href="#">
                      <i className="bi bi-dribbble" />
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-instagram"> </i>{" "}
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-sm-6">
              <div className="single_team">
                <div className="single_team_thumb1">
                  <img src="assets/images/resource/team-3.jpg" alt="image" />
                </div>
                <div className="single_team_content">
                  <div className="team-title">
                    <h4>Bubli Khanam</h4>
                    <span>Developer</span>
                  </div>
                  <div className="single_team_icon">
                    <a href="#">
                      {" "}
                      <i className="bi bi-facebook" />{" "}
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-twitter" />{" "}
                    </a>
                    <a href="#">
                      <i className="bi bi-dribbble" />
                    </a>
                    <a href="#">
                      {" "}
                      <i className="bi bi-instagram"> </i>{" "}
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> */}
        {/*==================================================*/}
        {/* End consen Team Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start faq Area */}
        {/*==================================================*/}
        {/* <div className="faq-area" id="contact">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-6 pl-0">
              
              <div className="tab_container">
                <div className="consen-section-title white pb-40 mb-1">
                  <h5> FAQ </h5>
                  <h2>
                    {" "}
                    Freequently Asked <span> Question </span>
                  </h2>
                </div>
                <Faqs />
              </div>
              
            </div>
            <div className="col-lg-6 col-md-6">
              <div className="contract-form-bg">
                <div className="contact-form-title">
                  <h4> Free Consultant </h4>
                  <p> 24/7 anytime Open Our Services </p>
                </div>
                <div className="contact_from">
                  <form onSubmit={(e) => e.preventDefault()} id="dreamit-form">
                    <div className="row">
                      <div className="col-lg-12">
                        <div className="form_box mb-20">
                          <input type="text" name="name" placeholder="Name*" />
                        </div>
                      </div>
                      <div className="col-lg-12">
                        <div className="form_box mb-20">
                          <input
                            type="email"
                            name="email"
                            placeholder="Your E-Mail*"
                          />
                        </div>
                      </div>
                      <div className="col-lg-12">
                        <div className="form_box mb-20">
                          <input
                            type="text"
                            name="phone"
                            placeholder="Phone Number"
                          />
                        </div>
                      </div>
                      <div className="col-lg-12">
                        <div className="form_box mb-20">
                          <textarea
                            name="message"
                            id="message"
                            cols={30}
                            rows={10}
                            placeholder="Write a Message"
                            defaultValue={""}
                          />
                        </div>
                        <div className="quote_button">
                          <button className="btn" type="submit">
                            {" "}
                            <i className="bi bi-gear" /> Free Consultant{" "}
                          </button>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div id="status" />
                </div>
              </div>
            </div>
            <div className="form-shape">
              <div className="testi-shape-thumb">
                <img src="assets/images/resource/all-shape5.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div> */}
        {/*==================================================*/}
        {/* End consen faq Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen Blog Area */}
        {/*==================================================*/}
        {/* <div className="blog-area style-two" id="blog">
        <div className="container">
          <div className="row pb-40">
            <div className="col-lg-7 col-md-6">
              <div className="consen-section-title mobile-center">
                <h2> We Run All Kinds Of Services </h2>
                <h2>
                  {" "}
                  From <span> Technologies </span>
                </h2>
              </div>
            </div>
            <div className="col-lg-5 col-md-6">
              <div className="consen-button text-right pt-4 pt-md-0">
                <Link legacyBehavior href="/blog-grid">
                  <a>
                    {" "}
                    <i className="bi bi-gear" /> View all Blog{" "}
                  </a>
                </Link>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 col-md-6">
              <div className="single-blog-box">
                <div className="single-blog-thumb">
                  <img src="assets/images/resource/blog1.png" alt />
                  <div className="blog-top-button">
                    <a href="#"> GRAPHIC </a>
                  </div>
                </div>
                <div className="em-blog-content">
                  <div className="meta-blog-text">
                    <p> August 25, 2023 </p>
                  </div>
                  <div className="em-blog-title">
                    <h2>
                      {" "}
                      <Link legacyBehavior href="/blog-details">
                        <a> Popular Consultants are big Meetup 2023 </a>
                      </Link>{" "}
                    </h2>
                  </div>
                  <div className="em-blog-icon">
                    <div className="em-blog-thumb">
                      <img src="assets/images/resource/blog-icon.png" alt />
                    </div>
                    <div className="em-blog-icon-title">
                      <h6> Alex Collins </h6>
                    </div>
                  </div>
                  <div className="blog-button">
                    <Link legacyBehavior href="/blog-details">
                      <a>
                        {" "}
                        Learn More <i className="bi bi-plus" />{" "}
                      </a>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-6">
              <div className="single-blog-box">
                <div className="single-blog-thumb">
                  <img src="assets/images/resource/blog2.png" alt />
                  <div className="blog-top-button">
                    <a href="#"> DEVELOPMENT </a>
                  </div>
                </div>
                <div className="em-blog-content">
                  <div className="meta-blog-text">
                    <p> August 21, 2023 </p>
                  </div>
                  <div className="em-blog-title">
                    <h2>
                      {" "}
                      <Link legacyBehavior href="/blog-details">
                        <a> How to Increase Business Products Sales </a>
                      </Link>{" "}
                    </h2>
                  </div>
                  <div className="em-blog-icon">
                    <div className="em-blog-thumb">
                      <img src="assets/images/resource/blog-icon.png" alt />
                    </div>
                    <div className="em-blog-icon-title">
                      <h6> Julia Moris </h6>
                    </div>
                  </div>
                  <div className="blog-button">
                    <Link legacyBehavior href="/blog-details">
                      <a>
                        {" "}
                        Learn More <i className="bi bi-plus" />{" "}
                      </a>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-6">
              <div className="single-blog-box">
                <div className="single-blog-thumb">
                  <img src="assets/images/resource/blog3.png" alt />
                  <div className="blog-top-button">
                    <a href="#"> DESIGN </a>
                  </div>
                </div>
                <div className="em-blog-content">
                  <div className="meta-blog-text">
                    <p> August 20, 2023 </p>
                  </div>
                  <div className="em-blog-title">
                    <h2>
                      {" "}
                      <Link legacyBehavior href="/blog-details">
                        <a> Top 10 Most Populars Google Chrome app</a>
                      </Link>
                    </h2>
                  </div>
                  <div className="em-blog-icon">
                    <div className="em-blog-thumb">
                      <img src="assets/images/resource/blog-icon.png" alt />
                    </div>
                    <div className="em-blog-icon-title">
                      <h6> Amantha </h6>
                    </div>
                  </div>
                  <div className="blog-button">
                    <Link legacyBehavior href="/blog-details">
                      <a>
                        {" "}
                        Learn More <i className="bi bi-plus" />{" "}
                      </a>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div className="blog-shape">
              <div className="port-shape-thumb2 bounce-animate2">
                <img src="assets/images/resource/all-shape6.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div> */}
        {/*==================================================*/}
        {/* End consen Blog Area */}
        {/*==================================================*/}
        <div className="testimonial-area new-style">
          <div className="container">
            <div className="row">
              <div className="col-lg-6">
                <div className="consen-section-title mt-5">
                  <h5>Our Methodology</h5>

                  <h2>
                    {" "}
                    Our Proven Path to  <span>Success</span>
                  </h2>
                </div>
                <div className="row">
                  <div className="col-lg-12">
                    <div className="single-testimonial">
                      <div className="testimonial-content">
                        <div className="testimonial-text">
                          <p>
                            At MetatronCube India, we follow a results-driven process designed to turn your vision into reality. From the first consultation to the final launch, every step is handled with precision and creativity.

                            <p>
                              We combine strategic planning, innovative design, and advanced technologies to build solutions that not only meet but exceed expectations. Our process focuses on collaboration, ensuring every project reflects your goals while delivering real business impact.

                            </p>

                            <p>
                              By blending expertise, creativity, and technology, we set new benchmarks in digital success - helping your brand grow, engage, and thrive in a competitive world.
                            </p>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-6">
                <div className="testimonial-thumb mt-3">
                  <img src="/assets/images/services/service-img/discover-our-process.webp" alt="Team of professionals discussing a business strategy with colorful sticky notes on a whiteboard, indicative of the planning phase in digital solutions." />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/*==================================================*/}
        {/* End consen Testimonial Area */}
        {/*==================================================*/}
        {/*==================================================*/}
        {/* Start consen Faq Area */}
        {/*==================================================*/}
        <div className="faq-section">
          <div className="container">
            <div className="row align-items-center">
              <div className="col-lg-6 mb-4 mb-lg-0 order-2 order-lg-1">
                <div className="testimonial-thumb text-center mt-3">
                  <img
                    src="/assets/images/services/service-img/faq.webp"
                    alt="Embark on a digital transformation journey with metatron"
                    className="img-fluid"
                  />
                </div>
              </div>
              <div className="col-lg-6 order-1 order-lg-2 pl-5">
                <div className="consen-section-title pb-4 mb-1">
                  <h5> Turning Vision into Digital Reality
                  </h5>
                  <h2>
                    Begin Your Digital Success  <span>with MetatronCube</span>
                  </h2>
                </div>
                <div id="tab1" className="tab_content">
                  <Accordion
                    defaultActiveKey={faqsData[0].id.toString()}
                    as="ul"
                    className="accordion"
                  >
                    {faqsData.map((faq) => (
                      <li
                        key={faq.id}
                        className="wow fadeInUp"
                        data-wow-delay={faq.animationDelay}
                      >
                        <Accordion.Toggle
                          as="a"
                          eventKey={faq.id.toString()}
                          onClick={() => setActive(faq.id === active ? null : faq.id)}
                          className={faq.id === active ? "active" : ""}
                        >
                          <span>{faq.title}</span>
                        </Accordion.Toggle>

                        <Accordion.Collapse eventKey={faq.id.toString()}>
                          <p>{faq.content}</p>
                        </Accordion.Collapse>
                      </li>
                    ))}
                  </Accordion>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/*==================================================*/}
        {/* Start consen Subscribe Area */}
        {/*==================================================*/}
        <div className="sub">
          <div className="container">
            <SubCard />
          </div>
        </div>

      </Layout >
    </>
  );
};
export default services;