import SubCard from "@/src/components/AboveFooter";
import Graphic from "@/src/components/services-details-banner/graphic.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 GraphicDesigning = () => {
  const faqsData = [
    {
      id: 1,
      title: "What makes a good graphic design?",
      content:
        "Good graphic design effectively communicates a message through visual hierarchy, composition, color, typography, and appropriate use of space. It should be aesthetically pleasing, functionally effective, and aligned with the brand’s identity.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "How important is graphic design for my business?",
      content:
        "Graphic design is crucial for creating a professional image, attracting potential customers, and differentiating your brand from competitors. It can influence customer perceptions and decision-making, ultimately impacting the success of your business.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: "Can graphic design impact the user experience of my website or app?",
      content:
        "Absolutely. Good graphic design can significantly improve the user experience by organizing information in an intuitive manner, creating easy navigation, and ensuring a visually enjoyable journey which can lead to higher user engagement and retention.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "Should I have a consistent design theme across all my business materials?",
      content:
        "Consistency in design across all materials is key to building brand recognition and trust. A unified theme reinforces your brand identity and ensures that customers have a coherent experience with your brand, whether it’s on your website, in a brochure, or on social media.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Best Branding Service & Graphic Design agency in Waterloo, Canada" description="Top graphic designing agency in Waterloo. Leading graphic design company in Canada offering graphic design service, and branding solutions. Best branding agencies." />
      <Layout>
        <Graphic pageName={"GRAPHIC DESIGN SERVICES"} />
        <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 className="active">
                        <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/graphic-design.webp" alt="Graphic design services professional sketching logo concepts with a draft logo displayed on the computer screen." />
                      </div>
                      <div className="service-details-content">
                        <div className="consen-section-title mt-4">
                          <h2 className="pb-3"><span>Graphic Design Services </span>at Metatroncube</h2>
                          <h6>Graphic Design Services: <span className="meta">Branding and Identity Design</span></h6>
                        </div>
                        <div className="serivce-details-desc ">
                          <p>
                            Elevate your corporate persona with Metatroncube’s Graphic Design Services. We specialize in creating logos and brand elements that are not only visually stunning but also embody your company’s core values, ensuring a consistent and powerful brand identity.
                          </p>

                        </div>


                        <div>

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

                            <p>           <span className="bold">Graphic Design Services: Marketing Collateral Design</span> Amplify your marketing strategy with Metatroncube’s Graphic Design Services. Our team expertly produces brochures, flyers, and banners that not only grab attention but also convey your message effectively, making every piece of marketing collateral count.</p>

                            <p>
                              <span className="bold">Graphic Design Services: UI/UX Design</span> With Metatroncube’s Graphic Design Services, your digital presence will become more intuitive and visually appealing. Our commitment to refined UI/UX design ensures a seamless, user-friendly experience that translates into increased engagement and customer satisfaction.
                            </p>

                            <p>
                              <span className="bold"> Graphic Design Services: Packaging Design</span> Distinguish your products with the innovative packaging design offered by Metatroncube’s Graphic Design Services. We understand the critical role of packaging in market success and design with the intent to make your products stand out and resonate with consumers.
                            </p>

                            <p>
                              <span className="bold">Graphic Design Services: Infographics and Data Visualization  </span>Transform data into impactful stories with Metatroncube’s Graphic Design Services. Our expertise in infographics and data visualization makes complex information easily digestible, visually engaging, and suitable for a variety of platforms, from annual reports to social media posts.
                            </p>
                            <p className="targets">
                              Designing Tomorrow’s Vision Today — Metatroncube: Where Creativity Meets Strategy.
                            </p>


                            <p className="mb-5">
                              By choosing Metatroncube for your graphic design needs, you’re not just getting a service; you’re investing in a visual strategy that amplifies your brand’s presence and connects with your customers on a deeper level.
                            </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/5.webp" alt="Brand identity design"></img>
                        </div>
                        <div className="service-details-title">
                          <h4>Brand Identity Design </h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Shape a unique brand identity that stands out.</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/6.webp" alt="Print & digital media design"></img>
                        </div>
                        <div className="service-details-title">
                          <h4>Print & Digital Media Design</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>Craft visuals that engage and resonate across media  </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/graphic.webp" alt="Graphic designer reviewing logo designs on a computer screen in a bright office." />
                      </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">Visual Storytelling at Its Finest</h4>

                          <h6 className="changeColor bold">Crafting Designs That Captivate and Communicate</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Branding That Connects</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Marketing Collateral{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Digital Interface Design</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>Packaging That Pops</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/3.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 GraphicDesigning;