import Layout from "@/src/layout/Layout";
import Link from "next/link";
import React, { useState } from "react";
import Accordion from 'react-bootstrap/Accordion';
import Application from "@/src/components/services-details-banner/application.js";
import SubCard from "@/src/components/AboveFooter";
import ConsenHead from "@/src/ConsenHead";


const ApplicationDevelopment = () => {
  const faqsData = [
    {
      id: 1,
      title: "How long does it take to develop a mobile app?",
      content:
        " The timeline depends on the app’s complexity, features, and platform. Simple apps may take a few weeks, while advanced apps with custom features can take several months.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "Do you provide both Android and iOS app development?",
      content:
        "Yes, we build apps for both platforms using native and cross-platform technologies to ensure your app performs seamlessly everywhere.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "Will my app be scalable for future updates?",
      content: "Absolutely. Our development approach focuses on scalability, so your app can grow with your business and easily adapt to new features or user demand.",
      animationDelay: ".5s",
    },


    {
      id: 4,
      title: "Do you help with app store submission and launch?",
      content: " Yes, we handle the entire launch process - from preparing app store assets to ensuring your app meets all submission guidelines for Google Play and Apple’s App Store.",
      animationDelay: ".5s",
    },

  ];

  const [active, setActive] = useState(faqsData[0].id);

  return (
    <>
      <ConsenHead title="Best Mobile App Development Services in India - MetatronCube" description="MetatronCube India develops Android, iOS, and cross-platform apps. We deliver secure, scalable, & user-friendly mobile app development services." />
      <Layout>
        <Application pageName={"MOBILE APPLICATION DEVELOPMENT"} />
        {/*==================================================*/}
        {/* Start consen service details Area */}
        {/*==================================================*/}
        <div className="service-detials-area">
          <div className="container">
            <div className="row">
              <div className="col-lg-4 col-md-12">
                <div className="widget-categories-box">
                  {/* categories title */}
                  <div className="categories-title">
                    <h4> Services </h4>
                  </div>
                  {/* widget categories menu */}
                  <div className="widget-categories-menu">
                    <ul>
                      <li>
                        <Link legacyBehavior href="/service/website-development-company">
                          <a> Website Development </a>
                        </Link>
                      </li>
                      <li className="active">
                        <Link legacyBehavior href="/service/mobile-application-development">
                          <a>Mobile Application Development </a>
                        </Link>
                      </li>
                      <li>
                        <Link legacyBehavior href="/service/graphic-designing-company">
                          <a>Graphic Designing
                          </a>
                        </Link>
                      </li>
                      <li>
                        <Link legacyBehavior href="/service/ui-ux-designing">
                          <a>  UI / UX Designing  </a>
                        </Link>
                      </li>
                      <li>
                        <Link legacyBehavior href="/service/search-engine-optimization-seo-content-writing">
                          <a>SEO & Content Writing</a>
                        </Link>
                      </li>
                      <li>
                        <Link legacyBehavior href="/service/digital-solutions">
                          <a> Digital Marketing </a>
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
                {/* categoreis thumb */}
                <div className="widget-categories-thumb pt-0 pt-5">
                  {/* widget categories content  */}
                  <div className="widget-categories-content text-center">
                    <div className="logo-thumb d-flex justify-content-center ml-70 mb-4">
                      <Link legacyBehavior href="tel:+91 999 448 3353  ">
                        <a className="subscribe-icon ml-5">
                          <i className="bi bi-telephone-inbound" />
                        </a>
                      </Link>
                    </div>

                    <div className="card-color">
                      <h4 className="card-color">Looking for Top Digital <br /> service?</h4>
                      <p className="pt-3 card-color">Call anytime</p>
                      <Link legacyBehavior href="tel:+91 999 448 3353  ">
                        <a>
                          <h5 className="card-color">+91 999 448 3353</h5>
                        </a>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
              <div className="col-lg-8 col-md-12">
                <div className="row">
                  <div className="col-lg-12 col-sm-12">
                    <div className="consen-service-details-box">
                      <div className="consen-service-thumb">
                        <img src="/assets/images/service-details/mobile-app-development.webp" alt="Two app developers in a collaborative discussion, with papers and a laptop on the table, in a bustling office setting." />
                      </div>
                      <div className="service-details-content">
                        <div className="consen-section-title mt-4 mb-4">
                          <h2><span>Mobile App Development</span> at Metatroncube India</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            Embrace the next era of mobile innovation with Metatroncube’s App Development Services. We design and develop scalable, high-performance mobile applications that help businesses connect with users, enhance engagement, and accelerate growth. From native mobile apps to cross-platform solutions, our skilled developers bring your vision to life with precision and creativity.
                          </p>

                        </div>


                        <div>

                          <div className="service-page-title">
                            <p>
                              <span className="bold"> Android Application Development:</span> Tap into the power of the world’s most popular mobile operating system with our custom Android app development services. Using the latest tools and frameworks, we create secure, intuitive, and feature-rich Android apps that not only perform flawlessly but also stand out in the competitive Google Play Store.

                            </p>

                            <p>           <span className="bold">iOS Application Development:</span> Deliver a premium mobile experience with our iOS app solutions. We specialize in building sleek, user-focused applications that align with Apple’s design and usability standards. From smooth navigation to advanced features, our iOS apps ensure an elegant and reliable experience for your audience.</p>

                            <p>
                              <span className="bold">Native Application Development:</span> When performance and seamless device integration matter most, native development is the right choice. Our team builds native Android and iOS applications that leverage each platform’s strengths to provide fast, reliable, and user-friendly experiences tailored to your business goals.

                            </p>

                            <p>
                              <span className="bold"> Cross-Platform Development with Flutter:</span>  Expand your reach with cross-platform app development using Flutter. With a single codebase, we deliver apps that work flawlessly on both Android and iOS. The result: cost-effective, visually appealing, and high-performing apps that maintain consistency across platforms without sacrificing quality.
                            </p>

                            <p>
                              <span className="bold"> Why Choose Metatroncube for App Development?:</span>  Partnering with Metatroncube means choosing a team that values innovation, scalability, and user engagement. We combine technical expertise, creative design, and strategic thinking to craft applications that don’t just function - but inspire and deliver measurable impact.
                            </p>
                            <p className="targets ">
                              Innovate with Code. Inspire with Design. - Mobile Applications Built for Growth.
                            </p>

                          </div>

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


                  <div className="row">
                    <div className="col-lg-6 col-sm-6">
                      <div className="service-details-boex overlap-card change-bg">
                        <div className="service-details-icon overlap-icon">
                          <img src="/assets/images/service-details/icon-6S/3.webp" alt="Android app excellence"></img>
                        </div>
                        <div className="box-flex">
                          <div className="service-details-title">
                            <h4>Smarter App Development</h4>
                          </div>
                          <div className="services-detials-desc">
                            <p>Custom mobile apps built to enhance performance and user engagement.
                              From startups to enterprises, we design apps that combine sleek UI, robust functionality, and seamless usability.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="col-lg-6 col-sm-6">
                      <div className="service-details-box overlap-card change-bg">
                        <div className="service-details-icon overlap-icon">
                          <img src="/assets/images/service-details/icon-6S/4.webp" alt="iOS development craftsmanship"></img>
                        </div>
                        <div>
                          <div className="service-details-title">
                            <h4>Cross-Platform Excellence</h4>
                          </div>
                          < div className="services-detials-desc">
                            <p>Leveraging modern frameworks like Flutter and React Native, we deliver Android, iOS, and hybrid apps that are fast, secure, and scalable.
 Our solutions ensure your business is always accessible - anywhere, anytime.

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


                  <div className="row">
                    <div className="col-lg-6 col-sm-6">
                      <div className="service-details-thumb mt-0">
                        <img className="i-width" src="/assets/images/service-details/card-image/api.webp" alt="A group of web developers, including a skilled web page designer, intensely reviewing code on a computer screen in a modern office environment." />
                      </div>
                    </div>
                    <div className="col-lg-6 col-sm-6">
                      <div className="service-details-icon-box">
                        <div className="service-page-title2">
                          <h4 className="mt-0">Building Powerful Mobile Experiences</h4>

                          <p className="changeColor bold">One App, Every Device - Android & iOS Perfectly Aligned</p>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Smooth Navigation & Engagement</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              High-Speed Performance Across Platforms{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Unified Look & Feel for Every Screen</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Scalable Development with Ongoing Support</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="faq-section">
            <div className="container">
              <div className="row align-items-center">

                <div className="col-lg-8 order-2 order-lg-1 pl-5">
                  <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 className="col-lg-4 mb-4 mb-lg-0 order-1 order-lg-2 text-center mt-3">
                  <div className="testimonial-thumb">
                    <img
                      src="/assets/images/service-details/faq/2.webp"
                      alt="FAQ"
                      className="img-fluid"
                    />
                  </div>
                </div>

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

        </div>

        {/* <div className="about-area new-style bg-white pt-0">
                <div className="container">
                    <div className="row align-items-center justify-content-center">
                        <div className="col-lg-10">
                            <div className="row g-3">
                                <div className="col-12">
                    <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>
                </div> */}


        {/*==================================================*/}
        {/* Start consen Subscribe Area */}
        {/*==================================================*/}
        <div className="sub">
          <div className="container">
            <SubCard />
          </div>
        </div>

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