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: "What is an app development agency?",
      content:
        "An app development agency is a company that specializes in creating software applications for various platforms, such as mobile devices, web, and desktop. These agencies have teams of professionals who handle the entire app development process, including ideation, design, coding, testing, and deployment. They may also provide post-launch services such as app maintenance, updates, and marketing.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "How much does it cost to hire someone to build a mobile app?",
      content:
        "The cost to hire someone to build a mobile app can vary widely depending on several factors, including the complexity of the app, the platform(s) it will run on, the geographic location of the developers, and the level of design and functionality required. Simple apps may start in the range of a few thousand dollars, while more complex applications can cost tens or even hundreds of thousands of dollars.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "How do I choose a mobile app development agency?",
      content: (
        <>
          <p className="changeColor pl-0">Choosing a mobile app development agency involves several considerations:</p>
          <ul>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Portfolio:</span> Look at their past work to assess their experience and expertise.
            </li>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Technical Skills: </span> Ensure they have the technical skills necessary for your specific app requirements.
            </li>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Client Testimonials: </span> Check client reviews and testimonials to gauge their reliability and customer service.
            </li>
            <li >
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Process Transparency: </span> The agency should have a clear development process and be willing to keep you informed throughout.
            </li>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold">Post-Launch Support:</span> Find out if they offer maintenance and support services after the app is launched.

            </li>
          </ul>

        </>
      ),
      animationDelay: ".5s",
    },


    {
      id: 4,
      title: "What are the benefits of hiring a mobile app development agency instead of freelancers ?",
      content: (
        <>
          <p className="changeColor pl-0 ">Hiring a mobile app development agency brings several advantages over individual freelancers:</p>
          <ul>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Team Expertise: </span> Agencies have a team of experts with diverse skills, providing a comprehensive approach to development.
            </li>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold">Scalability: </span> They can scale resources up or down according to project needs, which is harder with freelancers.
            </li>
            <li>
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold">Accountability: </span> Agencies typically have a higher level of professional accountability and established business practices.
            </li>
            <li >
              {/* <i className="bi bi-check-lg mr-2" />{" "} */}
              <span className="bold"> Continuity: </span> TThey can offer continuity and support, ensuring your project won't stall if an individual becomes unavailable.
            </li>
          </ul>

        </>
      ),
      animationDelay: ".5s",
    },

  ];

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

  return (
    <>
      <ConsenHead title="Web & Mobile Application Development Agency in Waterloo, Canada" description="Top mobile apps designer services for Android in Canada. Leading mobile application development company in Waterloo. Choose us for top-notch app development service." />
      <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-marketing-agency-in-canada">
                          <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>Android App Excellence</h4>
                          </div>
                          <div className="services-detials-desc">
                            <p>Navigate Android's versatility with apps that deliver. Our Android solutions merge market trends with user-centric design for standout Play Store presence.</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" alr="iOS development craftsmanship"></img>
                        </div>
                        <div>
                          <div className="service-details-title">
                            <h4>iOS Development Craftsmanship</h4>
                          </div>
                          < div className="services-detials-desc">
                            <p>Experience the artistry of iOS apps. We build with precision, ensuring every app meets Apple's high standards for sleek design and flawless functionality.
                            </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">Crafting Cross-Platform Mobile Masterpieces</h4>

                          <p className="changeColor bold">Seamless Apps for Android and iOS Users Alike</p>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Unified User Experience</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Optimized Performance{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Design Consistency</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Continuous Integration and Deployment</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;