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: "What’s the difference between UI and UX design?",
      content:
        " UI (User Interface) focuses on the look and feel of a product - colors, typography, layouts, and visuals. UX (User Experience) ensures that the product is intuitive, user-friendly, and meets the needs of your audience. Together, they create seamless digital experiences.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "How do you make sure a design is user-friendly?",
      content:
        "We conduct user research, usability testing, and iterative design improvements to ensure the interface is simple, engaging, and easy to navigate for all users.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "Do you design for both web and mobile platforms?",
      content:
        " Yes, our team creates responsive designs that adapt beautifully across web applications, mobile apps, and other digital platforms, ensuring consistency everywhere.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "How long does a typical UI/UX project take?",
      content:
        " The timeline depends on the scope - small projects may take a few weeks, while complex applications with multiple features can take several months.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Professional UI/UX Design Services in India - MetatronCube" description="MetatronCube India offers professional UI/UX design services for websites and apps. We create intuitive, user-friendly, & digital experiences." />
      <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:+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/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>
                            A powerful digital experience starts with great design. At Metatroncube Software Solutions, our UI/UX design services are focused on crafting intuitive, engaging, and user-friendly interfaces that not only look stunning but also deliver seamless functionality. From wireframes to prototypes, we ensure every interaction enhances the user journey and supports your business goals.
                          </p>

                        </div>


                        <div>

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

                            <p>
                              <span className="bold">User Research & Strategy:</span> Understanding your audience is the foundation of effective design. We conduct in-depth user research, competitor analysis, and usability studies to create strategies that guide the design process and ensure your product resonates with real users.
                            </p>

                            <p>           <span className="bold">Wireframing & Prototyping:</span> Before the final design, we develop wireframes and interactive prototypes that map out user flows and functionalities. This approach allows you to visualize the product early, test usability, and refine features before development begins.</p>

                            <p>
                              <span className="bold">UI Design & Visual Identity:</span> Our designers create modern, clean, and visually appealing interfaces that align with your brand identity. From typography and color schemes to icons and layouts, every element is designed to enhance clarity, accessibility, and engagement.
                            </p>

                            <p>
                              <span className="bold">UX Design & Interaction Flow:</span> We focus on building frictionless user experiences with logical navigation, responsive layouts, and intuitive workflows. The goal: to reduce complexity, improve usability, and maximize customer satisfaction.
                            </p>

                            <p>
                              <span className="bold">Usability Testing & Optimization:</span> Design is an iterative process. We perform user testing, heat mapping, and feedback analysis to identify usability issues and continuously improve the product, ensuring your app or website evolves with user needs.
                            </p>
                            <p>
                              <span className="bold">Why Choose Metatroncube for UI/UX Design?:</span> With a blend of creativity, user psychology, and design expertise, we go beyond visuals to create digital experiences that convert and delight. Whether it’s a mobile app, website, or enterprise platform, our UI/UX design services ensure your product is both beautiful and functional.
                            </p>
                            <p className="targets">
                              Design for Users. Build for Growth. - UI/UX Solutions That Inspire Engagement.
                            </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>User-Centric Interfaces</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>We design intuitive, responsive, and visually engaging interfaces that make every interaction seamless.
                            Our focus is on usability and aesthetics, ensuring your digital products feel natural and enjoyable to use.
                          </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>Experiences That Connect</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>From wireframes and prototypes to polished UI/UX designs, we create experiences that drive engagement.
                            Every design decision is made to simplify journeys, strengthen connections, and maximize user satisfaction.
                          </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">Shaping Experiences Users Love</h4>

                          <h6 className="changeColor bold">Smart Designs That Blend Beauty with Simplicity</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>Effortless Navigation for Every User</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Flexible Layouts for Any Screen Size{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>Visually Striking Yet Highly Practical</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Interactive Wireframes & Scalable Systems</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;