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




const WebDevelopment = () => {
  const faqsData = [
    {
      id: 1,
      title: "Can you redesign my existing website instead of building a new one?",
      content:
        "Yes, we provide complete website redesign services. Whether your site needs a modern look, better performance, or SEO improvements, we can transform your current website into a responsive, user-friendly, and optimized platform.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "Do you build multilingual websites for global audiences?",
      content:
        "Absolutely! We create multilingual and multi-currency websites that help businesses expand internationally. With language switchers, localized SEO, and content management systems, your website can easily cater to a global customer base.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "How do you ensure my website loads fast?",
      content:
        "We optimize performance using lightweight code, image compression, caching, CDN integration, and speed testing tools. Faster websites mean lower bounce rates and better Google rankings.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "Will my website integrate with third-party tools like CRMs or payment gateways?",
      content:
        "Yes, we specialize in API and third-party integrations such as CRMs, ERPs, chatbots, and payment gateways. This ensures your website connects seamlessly with your business processes.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Affordable Website Development Services - MetatronCube India" description="MetatronCube India offers affordable website development services, responsive web design, & to help businesses grow with professional websites." />
      <Layout>
        <Web pageName={" WEBSITE 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 className="active">
                        <Link legacyBehavior href="/service/website-development-company">
                          <a> Website Development </a>
                        </Link>
                      </li>
                      <li>
                        <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/web-development.webp" alt="A web page designer consulting with a diverse team over documents on a table, indicative of a collaborative web development process." />
                      </div>
                      <div className="service-details-content">
                        <div className="consen-section-title mt-3 mb-4">
                          <h2><span>Custom Website Development </span> Services at Metatroncube India</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            In today’s fast-paced digital world, a website is more than an online presence - it’s your brand’s digital identity, communication hub, and business growth engine. At Metatroncube India, we believe every website should be a perfect balance of creativity, functionality, and performance.
                          </p>
                          <p className="targets">
                            Your website is not just a destination; it’s a customer journey that begins with a single click.
                          </p>


                          <p>
                            Our website development services go beyond coding and visuals. We take time to understand your industry, target audience, and business objectives so we can build custom websites that engage visitors, strengthen your brand, and generate measurable results.
                          </p>

                          <p>
                            With a team of experienced developers, designers, and digital strategists, we leverage the latest web technologies to deliver platforms that are visually compelling, SEO-friendly, and technically sound. Whether you’re a startup building visibility, a growing business scaling operations, or an enterprise seeking innovation, we tailor solutions to fit your needs.

                          </p>
                        </div>


                        <div>


                          <div className="service-page-title">
                            <h3>Our Website Development Approach:
                              <span className="meta"> Innovation Meets Strategy</span>
                            </h3>

                            <p>
                              At Metatroncube, every website project is treated as a <b>unique opportunity</b> to create impact. We don’t just design websites - we build <b>digital experiences</b> that align with your business goals and resonate with your audience.
                            </p>

                            <div className="service-details-icon-box">
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Understanding Your Business:</span> We start with detailed consultations to capture your vision, objectives, and user expectations. This ensures alignment from day one.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Strategic Roadmap:</span> Based on your goals, we plan the site architecture, features, and design style to maximize both usability and brand appeal.
                                  </div>

                                </p>


                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Creative Design & Development:</span> Our designers craft responsive, user-friendly mockups, while our developers turn them into fast, secure, and scalable websites using the latest technologies.
                                  </div>

                                </p>


                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Testing & SEO Optimization:</span> Rigorous quality checks ensure performance across devices and browsers, while our SEO practices boost visibility on Google and other search engines.
                                  </div>

                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Launch & Post-Launch Care:</span> Deployment is just the start - we provide <b>maintenance, updates, and performance tracking</b> to keep your website ahead.
                                  </div>

                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Feedback & Improvements:</span> Your feedback shapes iterations, ensuring your site continues to evolve with your business.
                                  </div>

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





                            <div className="service-details-icon-box">
                              <h3>Core Features of
                                <span className="meta"> Our Website Development Services</span>
                              </h3>

                              <p>
                                What makes <b>Metatroncube India</b> stand out is our ability to transform ideas into h<b>igh-performing digital solutions</b>. Here’s how we deliver excellence:
                              </p>
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">1. Custom Website Design:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Unique Brand Identity: </span> Tailored designs that reflect your brand personality and engage your target market.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">User-Centric Layouts:</span> Prioritizing UI/UX design for intuitive navigation and stronger conversions.
                                  </div>

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



                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">2. Mobile-First & Responsive Development</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Cross-Device Adaptability:</span> Seamless performance on desktops, tablets, and smartphones.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Speed & Performance:</span> Optimized loading times to reduce bounce rates and improve SEO rankings.
                                  </div>

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




                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">3. Advanced Web Technologies</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Modern Frameworks:  </span>  Expertise in <b>ReactJS, AngularJS, Laravel, Node.js, and PHP</b> for cutting-edge functionality.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Scalability & Security: </span> Secure coding practices with growth-ready architecture.
                                  </div>

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




                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">4. SEO-Optimized Websites</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Search Visibility:</span> Built-in SEO structure with meta tags, schema markup, and keyword-rich content strategies.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Content Integration:</span> SEO-friendly content writing to improve ranking and attract organic traffic.
                                  </div>

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





                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">5. CMS Development & Integration</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Easy Content Management:</span> Powerful CMS platforms like WordPress or Headless CMS for effortless updates.

                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Custom Modules:</span> E-commerce stores, blogs, event calendars, and tailored features integrated with ease.
                                  </div>

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


                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">6. Maintenance & Analytics</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Post-Launch Support:</span> Continuous monitoring, upgrades, and bug fixes.

                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Data-Driven Insights:</span> Integration with Google Analytics, Search Console, and reporting tools for business intelligence.
                                  </div>

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


                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">Why Choose Metatroncube for Website Development?</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">SEO-Friendly Website Development</span>for better Google rankings

                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Custom eCommerce Solutions </span>to grow your online store
                                  </div>

                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Enterprise-Grade Web Applications </span>with secure integrations
                                  </div>

                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Responsive Design & UI/UX Expertise </span> for higher engagement
                                  </div>

                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Proven Web Development Company in India </span>with 100+ projects delivered
                                  </div>

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


                                   <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">Final Thoughts</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                 At Metatroncube Software Solutions, our goal is to create websites that don’t just look impressive but also perform exceptionally well. By combining creativity, technology, and strategic planning, we deliver digital solutions that elevate your brand, enhance user experience, and drive business growth.

                                </p>

                                <p>
                                Your website is the foundation of your digital presence. Let us help you build one that sets you apart.
                                </p>
                              </div>
                            </div>



                          </div>

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

                  <div class="service-page-title2 portfolio"><h1 className="pb-0"><span className="meta"> Our</span> Portfolio:</h1></div>


                  <div className="row">
                    <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/1.webp" aly="Innovative web solutions"></img>
                        </div>
                        <div className="service-details-title">
                          <h4>Creative Website Development</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Delivering custom web solutions designed to showcase your brand, attract customers, and drive measurable results.</p>
                        </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/2.webp" alt="Cutting-edge technology" />
                        </div>
                        <div className="service-details-title ">
                          <h4>Advanced Web Technologies</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Using the latest web development frameworks and tools to build websites that are secure, scalable, and high-performing.</p>
                        </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/web-devo.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>Unified Solutions</h4>

                          <h6 className="changeColor">Bring all your digital needs together with fully integrated web services.</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Personalized Design</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Device-Friendly Layouts{" "}
                            </span>
                          </p >
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Search-Optimized Structure</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Enterprise-Grade Security </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">
                  <div className="testimonial-thumb text-center mt-3">
                    <img
                      src="/assets/images/service-details/faq/1.webp"
                      alt="FAQ"
                      className="img-fluid"
                    />
                  </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 WebDevelopment;