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 types of graphic design services do you offer?",
      content:
        " We provide a wide range of services including logo creation, branding, social media creatives, marketing materials, packaging design, and custom visuals tailored to your business.",
      animationDelay: ".5s",
    },
    {
      id: 2,
      title: "Do you create custom designs or use templates?",
      content:
        "All our designs are fully custom-made to reflect your brand identity. We don’t rely on pre-made templates - every project is unique and tailored to your goals.",
      animationDelay: ".5s",
    },
    {
      id: 3,
      title: " Can you redesign or refresh my existing branding?",
      content:
        " Yes, we specialize in rebranding and design refresh services. Whether you need a modernized logo or a complete design overhaul, we help your brand stay relevant.",
      animationDelay: ".5s",
    },
    {
      id: 4,
      title: "How do you ensure my designs align with my brand identity?",
      content:
        "We take time to understand your business, values, and target audience. Every design is built around your brand guidelines to ensure consistency and recognition across all platforms.",
      animationDelay: ".5s",
    },
  ];

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

  return (
    <>
      <ConsenHead title="Top Graphic Design Service Providers in India - Metatroncube" description="MetatronCube India is among the top graphic design service providers in India, offering logo design, branding, social media creatives." />
      <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-solutions">
                          <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/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 India</h2>
                          {/* <h6>Graphic Design Services: <span className="meta">Branding and Identity Design</span></h6> */}
                        </div>
                        <div className="serivce-details-desc ">
                          <p>
                            At Metatroncube Software Solutions, we believe design is more than just visuals - it’s a way to communicate, connect, and inspire. Our graphic design services blend creativity with strategy to craft designs that elevate your brand identity, engage your audience, and leave a lasting impression. From logos to branding, social media creatives to marketing collateral, our designers bring your vision to life with innovation and precision.
                          </p>

                        </div>


                        <div>

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

                            <p>           <span className="bold">Logo & Brand Identity Design:</span> Your logo is the face of your brand - it should be memorable, timeless, and impactful. We design custom logos and brand identity systems that capture your values and differentiate you from competitors, ensuring a strong foundation for all your marketing efforts.</p>

                            <p>
                              <span className="bold">Social Media Creatives:</span> Stand out in the fast-paced world of social media with engaging visuals and graphics. Our team designs eye-catching posts, banners, ads, and stories optimized for platforms like Instagram, Facebook, and LinkedIn to increase visibility and audience engagement.
                            </p>

                            <p>
                              <span className="bold"> Marketing Collateral Design:</span> From brochures and flyers to business cards and presentations, we design print and digital assets that reinforce your message and strengthen your brand presence. Each piece is crafted to be visually compelling while serving your specific business objectives.
                            </p>

                            <p>
                              <span className="bold">Web & UI Graphics:  </span>Enhance your digital platforms with custom graphics tailored for websites and apps. From banners and infographics to icons and UI elements, we ensure your visuals are not only attractive but also aligned with user experience principles.
                            </p>
                            <p>
                              <span className="bold">Packaging & Product Design: </span>First impressions matter. Our packaging design services help products stand out on the shelves and online marketplaces. With a balance of creativity and market relevance, we design packaging that communicates value and builds trust.
                            </p>
                            <p>
                              <span className="bold">Why Choose Metatroncube for Graphic Design?: </span>Partnering with us means working with a team that combines artistic creativity, design expertise, and brand strategy. We go beyond aesthetics to deliver designs that tell your story, connect with your audience, and strengthen your brand identity.
                            </p>
                            <p className="targets">
                              Design with Purpose. Create with Impact. - Graphics That Speak Louder Than Words.
                            </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>Creative Visual Design</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>From brand logos to social media creatives, we craft visuals that capture attention and communicate your story.
                            Our designs blend creativity with strategy, ensuring your brand stands out in every space.</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>Designs That Inspire Impact</h4>
                        </div>
                        <div className="services-detials-desc">
                          <p>We focus on creating graphics that are not only visually appealing but also meaningful.
                            Whether it’s digital campaigns, print media, or UI elements, our designs spark engagement and build lasting impressions.
                          </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">Designing Visual Stories That Inspire</h4>

                          <h6 className="changeColor bold">Creative Graphics That Strengthen Your Brand Identity</h6>
                        </div>
                        <div className="widget-service-details-icon">
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Eye-Catching Logos & Brand Assets
</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span>
                              {" "}
                              Consistent Visual Language Across Media{" "}
                            </span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Engaging Designs for Digital & Print</span>
                          </p>
                          <p>
                            <i className="bi bi-check-lg mr-2" />{" "}
                            <span> Creative Concepts that Leave a Lasting Impact</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;