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:+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>Metatroncube: Empowering Your Digital Journey </span> in Waterloo</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            Welcome to Metatroncube Software Solutions, where innovation in web design meets Waterloo’s vibrant business landscape. As Waterloo’s premier website designers, we specialize in creating bespoke digital solutions that capture the essence of your business and connect you with your target audience. Our expertise in understanding the local market nuances positions us uniquely to elevate your online presence.
                          </p>

                        </div>


                        <div>

                          <div className="service-page-title">
                            <p>
                              Why Choose Metatroncube for Your Waterloo Business: In Waterloo’s thriving economic scene, your business deserves a website that stands out. At Metatroncube Software Solutions, we:

                            </p>

                            <p>
                              <span className="bold">  Grasp Local Dynamics:</span> Our deep understanding of Waterloo’s business environment means your website will effectively engage with your local audience.

                            </p>

                            <p>           <span className="bold">Provide Customized Web Solutions:</span> From startups to established enterprises, our approach is tailor-made to fit your unique digital needs.</p>

                            <p>
                              <span className="bold">Focus on Collaboration:</span>  Your vision is our blueprint. We collaborate with you closely to ensure your website reflects your brand’s ethos and goals.
                            </p>


                          </div>


                          <div className="service-page-title">
                            <div className="consen-section-title mt-3 mb-4">
                              <h2><span>Our </span>Services:</h2>
                            </div>

                            <p>
                              <span className="bold">  Bespoke Website Design:</span> We craft visually stunning and functionally superior websites that represent your brand’s personality.

                            </p>

                            <p>           <span className="bold">Responsive Web Development: </span> Our websites are optimized for all devices, ensuring a seamless user experience.
                            </p>

                            <p>
                              <span className="bold">E-Commerce Platforms:</span>  Elevate your online sales with our intuitive e-commerce solutions designed for maximum customer engagement and conversion.
                            </p>

                            <p>
                              <span className="bold">SEO and Digital Marketing:</span>  Boost your online visibility with our strategic SEO and comprehensive digital marketing services.
                            </p>

                            <p>
                              <span className="bold">Local Success Stories: </span>  Metatroncube has a proven track record of empowering Waterloo businesses through exceptional web design.
                            </p>


                          </div>
                          <p className="targets">
                            Shaping Digital Destinies with Precision and Passion — Metatroncube, Your Local Web Artisans.
                          </p>
                        </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;