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:
      "Your vision leads the way. Initially, we deeply understand your needs through consultation. Next, we create a strategy tailored to your goals.",
    animationDelay: ".5s",
  },
  {
    id: 2, title: "Design & Development",
    content:
      "Then comes the creative part. Our team combines art and technology. We focus on aesthetically pleasing, functional solutions.",
    animationDelay: ".5s",
  },
  {
    id: 3, title: "Implementation & Optimization",
    content:
      "After that, we turn plans into reality. Each step is optimized for impact and efficiency. Plus, we keep you updated throughout.",
    animationDelay: ".5s",
  },
  {
    id: 4, title: "Testing & Launch",
    content:
      "Next, we aim for perfection. We conduct thorough testing for smooth operation. Once perfected, we launch your project.",
    animationDelay: ".5s",
  },
  {
    id: 5, title: "Ongoing Support & Analysis",
    content:
      "But it doesn’t end there. We offer continuous support and analyze your digital solutions. This way, they evolve with your business.",
    animationDelay: ".5s",
  },
  {
    id: 6, title: "Client Engagement & Feedback",
    content:
      "Moreover, we value your feedback. After launch, we encourage you to share your thoughts. This feedback shapes our improvements. Regular check-ins ensure we meet your needs. Your input keeps us aligned with your business evolution. Thus, our solutions stay dynamic and client-focused.",
    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>Comprehensive
                        Digital Development
                      </h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        Expert web, app development and e-commerce solutions.{" "}
                      </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> Strategic Online
                        Growth Solutions </h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        Strategic SEO and digital marketing for<br></br>growth.{" "}
                      </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>Creative Design and Branding Excellence </h3>
                    </div>
                    <div className="feature-text">
                      <p>
                        {" "}
                        Creative graphic design and branding<br></br> services.{" "}
                      </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> Crafting Tailored </h2>
                  <h2>
                    {" "}
                    <span>Digital Solutions</span> for Every Need
                  </h2>
                  <p className="about-text1">
                    {" "}
                    At Metatroncube, we blend innovation with expertise to shape bespoke digital solutions. Furthermore, our services range from cutting-edge web & app development, leveraging technologies like
                    <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>,
                    to strategic SEO and impactful digital marketing. Additionally, in creative graphic design, we meticulously craft each project to meet your unique business objectives. Moreover, in the realm of mobile app development, we utilize platforms such as
                    <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>
                    to deliver exceptional user experiences. Consequently, we’re not just developers and designers; we’re architects of your digital 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 Solutions</h5>
                <h2>We Run All Kinds Of Services</h2>
                <h2>
                  From <span>Technologies</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>Innovative website development for unparalleled online business presence.</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 application development tailored for your specific needs.</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 designs that visually communicate your brand’s message with impact.</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>Engaging and intuitive interfaces for seamless user 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>Effective SEO and content writing for enhanced visibility.</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>Strategic digital marketing to boost your brand's reach.</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> Get To Know Us More </h5>
                  <h2>
                    {" "}
                    We’re Reliable & Cost Efficient <span>  Digital Agency. </span>
                  </h2>
                  <p className="choose-text1">
                    {" "}
                    Appropriately enhance principle-centered innovation rather
                    than high standards in platforms. Credibly orchestrate
                    functional.{" "}
                  </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>
                            Empowering businesses with innovative digital growth 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>
                            Redefining digital innovation for a connected, efficient future.
                          </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>
                            Redefining digital innovation for a connected, efficient future.
                          </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 choose Us </h5>
                  <h2> Comprehensive   </h2>
                  <h2>
                    {" "}
                    <span> Digital
                      Solutions</span> Expertise
                  </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">Latest Technology</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Harness advanced tech for top-notch web, app, and digital projects.
                      </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">Certified Experts</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Trust our certified team for expert guidance in all digital realms.
                      </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">Get Reasonable Price</h4>
                    <div className="em-testimonial-text">
                      <p>
                        Get value-driven solutions at prices tailored for your business needs.
                      </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>Discover Our Process</h5>
                  <h2> How We Deliver </h2>
                  <h2>
                    {" "}
                    Exceptional <span>Results</span>
                  </h2>
                </div>
                <div className="row">
                  <div className="col-lg-12">
                    <div className="single-testimonial">
                      <div className="testimonial-content">
                        <div className="testimonial-text">
                          <p>
                            Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
                            <p>
                              From the initial consultation to the final launch and beyond, we blend strategic planning, innovative design, and cutting-edge technology to craoft digital solutions that stand out. This journey is not just about reaching yur goals; it’s about exceeding them and setting new standards in the digital world. Explore our proven process that combines expertise, creativity, and client collaboration to achieve extraordinary outcomes.
                            </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>digital transformation journey</h5>
                  <h2>
                    Embark on a digital transformation journey <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;