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="Top Custom Website Creators in Toronto | Metatroncube" description="Build a standout website in Toronto with Metatroncube - custom designs, smooth UX, & high-performance sites crafted to elevate your brand online." />
      <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>Unlock the Potential of Your Online Presence with<span> Metatroncube Software Solutions</span>   – Premier Web Design in Toronto</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            At Metatroncube Software Solutions, we understand that the digital landscape of Toronto is not just about being seen—it’s about being memorable. Specializing in innovative website creation, our Toronto-based web design experts blend aesthetics with functionality, crafting bespoke websites that capture the essence of your brand and engage your target audience.
                          </p>
                          <p className="targets">
                            Specializing in innovative website creation, our Toronto-based web design experts blend aesthetics with functionality, crafting bespoke websites.
                          </p>

                        </div>


                        <div>

                          <div className="service-page-title">
                            <h3> Why Choose Metatroncube <span className="meta"> for Website Design in Toronto?</span>
                            </h3>

                            <p>
                              <span className="bold">  Expertise in Local Trends:</span> As a leading website design company in Toronto, we have our finger on the pulse of the city’s digital demands and aesthetic preferences. Whether you are a startup or an established enterprise, our tailored solutions ensure your website stands out in a competitive market.

                            </p>

                            <p><span className="bold">Comprehensive Web Design Solutions:</span> Our services encompass everything from initial design to final launch, and beyond. ‘Website creation Toronto’ is more than just a keyword for us—it’s a commitment to delivering end-to-end solutions that enhance your online visibility and functionality.</p>

                            <p>
                              <span className="bold">SEO-Driven Design: </span> With keywords like ‘web design Toronto’ drawing significant search volumes, we prioritize SEO from the ground up. Our designs are not only visually appealing but also optimized for search engines, ensuring that your site ranks well for ‘website design Toronto’ and related queries.
                            </p>

                            <p>
                              <span className="bold">Customized Strategies for Every Client:</span> Understanding that each business has unique needs, we offer customized web design solutions tailored to meet your specific objectives. Our strategic approach ensures that every element of your site, from layout to content, aligns with your overall business goals.
                            </p>

                            <p>
                              <span className="bold">Responsive and Reliable Support: </span> At Metatroncube, we believe in building relationships beyond contracts. Our team is always ready to assist you with any updates, technical issues, or strategic advice to keep your website performing at its best.

                            </p>

                          </div>

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


                  <div className="service-page-title">
                    <h4> Your Website Is Your <span className="meta">First Impression</span>
                    </h4>

                    <p>In today’s fast-paced digital world, your website often makes the first impression on potential clients and customers. Metatroncube Software Solutions ensures it’s a lasting one. Our team leverages the latest technologies and creative strategies to deliver websites that are not only visually striking but also highly functional and user-friendly.</p>

                  </div>

                  <div className="service-page-title">
                    <h4> Ready to Elevate Your <span className="meta">Online Presence? </span>
                    </h4>

                    <p>If you’re looking for top-tier web design in Toronto, look no further than Metatroncube Software Solutions. Contact us today to discuss how we can transform your online presence with a stunning, effective, and SEO-optimized website tailored just for you.</p>

                     <p>Let’s create a digital experience that resonates with your audience and elevates your brand. Discover the difference with Metatroncube—where your vision meets our expertise.</p>

                  </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;