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: "Is my website builder allowed on site?",
      content:
        "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "How to soft launch your business?",
      content:
        "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "How to turn visitors into contributors",
      content:
        "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "How can i find my app solutions?",
      content:
        "There are many variations of passages the majority have suffered alteration in some fo injected humour, or randomised words believable.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Best Web Design Agency | Web Development Company waterloo, Canada" description="Top web design agency in Waterloo, Canada. Offering web development services to create stunning websites. Choose us best website design and development service." />
      <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:+1-647-679-7651  ">
                        <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:+1-647-679-7651  ">
                        <a>
                          <h5 className="card-color">+1-647-679-7651</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>Web Page Design in Waterloo Metatroncube:
                          </span> Crafting Digital Artistry in Web Page Design for Waterloo Community</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            Discover Personalized Web Design with Waterloo’s Creative Architects At Metatroncube Software Solutions, nestled in the heart of Waterloo’s innovation district, we pride ourselves on being the leading web designers in Waterloo. Our team combines the latest technological advancements with a touch of creative flair to ensure that each web solution we deliver is not only visually striking but also provides a stellar user experience that resonates with your audience.
                          </p>
                          {/* <p className="targets">
                            A website is not just an online destination; it’s a digital journey that starts with a single click.
                          </p> */}


                          <p>
                            Redefining Aesthetics with Purposeful Web Design Our journey in website design transcends typical aesthetics. As dedicated website designers in Waterloo, we delve into the fabric of your brand’s story, weaving a digital narrative that captures your essence and establishes a meaningful connection with your visitors. Our ethos, deeply rooted in the concept of “Web Page Design Waterloo,” sets a benchmark for innovation and quality in the digital realm.
                          </p>

                          <p>
                            Tailoring Web Solutions for Waterloo’s Diverse Businesses We understand that each brand is unique, especially when it comes to small businesses that form the backbone of Waterloo’s economy. As small businesses web designers in Waterloo, we offer personalized and tailored web solutions that reflect the distinct identity of each client, ensuring a unique and compelling digital presence that stands out in the marketplace.
                          </p>
                        </div>


                        <div>

                          <div className="service-page-title">

                            <p>
                              Embracing a User-Centric Design Philosophy At the core of Metatroncube’s strategy is a profound emphasis on the user experience. We meticulously research user behaviors and preferences to ensure that each website we craft is not only intuitive but thoroughly engaging, meeting the high standards we set for “Web Page Design Waterloo.”
                            </p>

                            <p>
                              Harnessing Advanced Technology for Dynamic Web Solutions With an arsenal of cutting-edge technology at our disposal, we create web designs that are both robust and scalable. Our commitment to leveraging modern tools and innovative techniques reinforces our stature as a pioneer in “Web Page Design Waterloo,” prepared to take on the challenges of an ever-evolving digital landscape.
                            </p>

                            <p> Enhancing Visibility with SEO-Optimized Design In today’s digital age, SEO is not an afterthought but a fundamental aspect of web design. Our designs are meticulously optimized to improve your site’s ranking on search engines, thereby increasing your online visibility and driving valuable organic traffic as part of our comprehensive “Web Page Design Waterloo” services.</p>

                            <p>
                              Dedicated Support for Your Evolving Online Needs Our engagement with you goes beyond the website launch. We are committed to providing continuous support, ensuring that your digital platform remains cutting-edge and responsive to the changing needs of your business, reflecting the vibrant and innovative spirit of “Web Page Design Waterloo.”
                            </p>

                            <p>
                              Embark on a Collaborative Design Journey with Metatroncube Your journey towards an outstanding web presence starts here at Metatroncube. Let us take you beyond your expectations, as we showcase the pinnacle of “Web Page Design Waterloo.” Join us in crafting a digital experience that’s as impactful as the city we serve.
                            </p>

                            <p>
                              Experience the pinnacle of web design with Metatroncube. Together, let’s shape a distinguished and effective digital footprint for your brand in Waterloo.
                            </p>

                            <div className="col-lg-12">
                              <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>

                            <p className="targets">
                              Web Page Design Waterloo: Where Your Digital Dreams Take Flight. Transforming Visions into Virtual Masterpieces.
                            </p>


                          </div>


                          {/* <div className="service-page-title">
                            <h3>Key Features of Our Website Development Services:
                              <span className="meta"> Crafting Digital Excellence</span>
                            </h3>

                            <p>
                              At Metatroncube, our website development services are distinguished by a series of key features that ensure each project we undertake is not just completed but is transformed into a digital masterpiece. Here’s what sets our services a part:
                            </p>

                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0">1. Custom Design:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Tailored Aesthetics:</span> Every website we create is tailored to reflect your brand’s unique identity. Our designers work closely with you to ensure the visual elements resonate with your brand and appeal to your target audience.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">User Experience Focus:</span> We prioritize user experience (UX) in our designs, ensuring that navigation is intuitive and that the website is accessible to all users, thereby enhancing user engagement and satisfaction.
                                  </div>

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





                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">2. Responsive and Mobile-Friendly:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Cross-Device Compatibility: </span> Understanding the importance of mobile traffic, we ensure your website looks great and functions seamlessly across all devices and screen sizes.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Speed Optimization: </span> We optimize for speed, reducing load times to improve user experience and boost 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 Technologies:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Cutting-Edge Solutions: </span> Our team stays abreast of the latest technological trends in web development, from advanced frontend frameworks to efficient backend solutions.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Scalability and Security:  </span>We build websites that are not only robust and secure but also scalable, ensuring they can grow and evolve with your business.
                                  </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:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Visibility and Ranking:  </span> Our development process includes SEO optimization to ensure your site ranks well on search engines, driving organic traffic and increasing visibility.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Content Strategy:  </span>We assist in developing a content strategy that aligns with SEO best practices, ensuring your website’s content is relevant, engaging, and optimized for search engines.
                                  </div>

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




                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">5. Comprehensive CMS Integration:</p>
                              </div>
                              <div className="widget-service-details-icon">
                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Easy Management:  </span> We integrate powerful content management systems (CMS) to give you control over your content, allowing for easy updates and management.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Custom Features: </span>Depending on your needs, we can include custom features in the CMS, like e-commerce capabilities, blogs, or event calendars.
                                  </div>

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





                            <div className="service-details-icon-box">
                              <div className="service-page-title2">
                                <p className="bold mb-0   mt-4">6. Ongoing Support and 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> Our relationship doesn’t end at launch. We provide ongoing support and maintenance to ensure your website remains up-to-date and performs optimally.
                                  </div>
                                </p>

                                <p>
                                  <i className="bi bi-check-lg mr-2" />{" "}
                                  <div>
                                    <span className="bold1">Data-Driven Insights: </span>We equip your site with analytics tools so you can monitor performance and user engagement, helping you make informed decisions for future growth.

                                  </div>

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


                            <p className="mt-4">
                              In summary, our website development services at Metatroncube are a blend of aesthetics, functionality, technology, and strategy. We commit to delivering a product that not only meets but exceeds your expectations, driving your business forward in the digital realm.
                            </p>

                          </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>Innovative Web Solutions</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Customized digital experiences to elevate your brand.</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>Cutting-Edge Technology</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Leveraging the latest tech to create responsive, fast, and secure websites.</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>Seamless Integration</h4>

                          <h6 className="changeColor">Streamline your online presence with effortlessly integrated web services.</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Customized Design</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Responsive Layouts{" "}
                            </span>
                          </p >
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> SEO-Optimized</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Robust 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;