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




const UiUxDesign = () => {
  const faqsData = [
    {
      id: 1,
      title: "GPT What does a UI/UX design agency do?",
      content:
        "A UI/UX design agency specializes in creating user interfaces and user experiences for digital products like websites, mobile apps, and software. They focus on understanding user behaviors and needs to design intuitive, engaging, and visually appealing interfaces. Their work involves research, wireframing, prototyping, testing, and iterating designs to ensure a product is not only easy and pleasant to use but also meets the goals of the business.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "What do UI/UX designers charge?",
      content:
        "The cost of hiring UI/UX designers can vary widely based on factors like location, experience, the complexity of the project, and whether they are freelancers or part of an agency. Freelance UI/UX designers may charge anywhere from $50 to $200 per hour, while agencies might have set rates for projects, which can range from a few thousand dollars for basic designs to tens of thousands for more complex, large-scale projects.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "Is UI/UX still in demand?",
      content:
        "Absolutely, UI/UX is still in high demand. As the digital landscape continues to grow and evolve, the need for skilled UI/UX designers remains critical. Companies recognize the importance of providing excellent user experiences to attract and retain customers, making UI/UX a key factor in the success of digital products.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "How does good UI/UX design benefit a business?",
      content:
        "Good UI/UX design significantly benefits a business by enhancing user satisfaction, which in turn can lead to increased user engagement, higher retention rates, and improved conversion rates. A well-designed, user-friendly interface makes it easier for users to navigate and interact with a product, leading to a positive experience that can boost the brand's reputation, customer loyalty, and ultimately, the business's bottom line.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Best UI/UX Designing Company in Waterloo, Canada" description="Establish the best UI/UX design company in Waterloo to improve user experiences. Create user-friendly interfaces for digital success." />
      <Layout>
        <UiUx pageName={"UI / UX DESIGNING"} />
        <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>
                        <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 className="active">
                        <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/ui-ux.webp" alt="A team of UI/UX designers collaboratively working on a high-fidelity interface mockup with color palettes and design elements." />
                      </div>
                      <div className="service-details-content">
                        <div className="consen-section-title mt-4 mb-4 ">
                          <h2><span>UI/UX Design</span> Services at Metatroncube</h2>
                        </div>
                        <div className="serivce-details-desc">
                          <p>
                            Elevate your digital presence with Metatroncube’s UI/UX Design Services, where user experience meets stunning aesthetics. Our design team focuses on creating interfaces that are not only visually appealing but also intuitively navigable, ensuring users enjoy every interaction with your digital product. From initial research to final implementation, we craft experiences that delight users and drive engagement.
                          </p>

                        </div>


                        <div>

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

                            <p>
                              <span className="bold">Research and Strategy:</span> Understanding your users is key. We begin with in-depth research and analysis to inform our design strategy, ensuring that every decision is data-driven and user-centered.
                            </p>

                            <p>           <span className="bold">User Interface (UI) Design:</span> Captivate your audience with beautifully designed interfaces. Our UI designs are tailored to be clear, concise, and visually engaging, enhancing the overall aesthetic of your digital product.</p>

                            <p>
                              <span className="bold">User Experience (UX) Design:</span> Craft a seamless journey through your digital landscape. We map out the user flow to create intuitive and accessible experiences, which keep users coming back.
                            </p>

                            <p>
                              <span className="bold">Prototyping and Testing:</span> Bring concepts to life with interactive prototypes. We validate our designs through rigorous user testing, refining the user experience to near perfection.
                            </p>

                            <p>
                              <span className="bold">Responsive and Adaptive Design:</span> Prepare your product for every screen and device. Our responsive designs ensure your app or website performs flawlessly, no matter where it’s accessed from.
                            </p>
                            <p className="targets">
                              Designing with Empathy, Perfecting with Insight — Metatroncube: Shaping Experiences That Resonate.
                            </p>


                            <p className="mb-5">
                              By integrating Metatroncube’s UI/UX Design Services into your project, you’re choosing a partner dedicated to exceptional design and optimal user experiences. Let’s create something extraordinary together.
                            </p>



                          </div>

                        </div>
                      </div>
                    </div>
                  </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/7.webp" alt="Web consultant"></img>
                        </div>
                        <div className="service-details-title">
                          <h4>Web Consultant</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Your growth starts with the right advice. Let’s build smarter, not harder.</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/8.webp" alt="Creative design"></img>
                        </div>
                        <div className="service-details-title">
                          <h4>Creative Design</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>If you want design that speaks, sells, and sticks, you’re in the right place.</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/ui-ux.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">Designing Intuitive Digital Experiences</h4>

                          <h6 className="changeColor bold">Where Every Pixel Counts.</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>Intuitive Navigation</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Engaging Visuals{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>User-Centered Approach</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>Accessibility and Inclusion</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/4.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 UiUxDesign;