<div
      ref={container}
      className="flex flex-col py-20 container mx-auto gap-8 px-4 lg:px-0"
    >
      <h2 className="font-inter text-light text-4xl lg:text-5xl  font-semibold overflow-hidden">
        <span className="heading inline-block">Consulting Portfolio</span>
      </h2>
      <p className="desc font-inter text-grey font-light text-lg">
        Leveraging my extensive experience, I offer consulting services in the
        following areas:
      </p>
      <div className="flex flex-wrap gap-4 max-w-[800px]">
        {[
          "Sales Enablement",
          "Product Development",
          "Go to Market Strategy",
          "Account-Based Marketing (ABM)",
          "Partner Channel Management",
          "CRM Systems (Salesforce)",
          "B2B Marketing",
          "Budget Management",
          "Strategic Planning",
          "Sales Operations",
          "Commercial Enablement",
          "Customer Experience (CX)",
          "Lead Generation",
          "Brand Strategy",
          "Training & Development",
          "Business Development",
          "Stakeholder Management",
        ].map((e, i) => {
          return (
            <h5
              key={i}
              className="cate font-inter text-accent border-accent border rounded-full p-4 text-xs font-light"
            >
              {e}
            </h5>
          );
        })}
      </div>
      <h4 className="notable overflow-hidden font-inter text-light text-3xl font-semibold mt-12 clip-square">
        <span className="heading-1 inline-block">Notable Projects</span>
      </h4>
      <div className=" flex flex-col lg:flex-row gap-8">
        {[
          {
            tag: "Implemented Advanced",
            heading: "Marketing Technologies",
            desc: "Boosted performance and efficiency by implementing cutting-edge marketing technologies.",
          },
          {
            tag: "Developed Comprehensive",
            heading: "Digital Marketing Strategies",
            desc: "Crafted detailed digital marketing strategies for both B2C and B2B clients, driving significant growth.",
          },
          {
            tag: "Led Successful Business",
            heading: "Development Initiatives",
            desc: "Led business development initiatives that resulted in substantial growth and market expansion.",
          },
        ].map((e, i) => {
          return (
            <div key={i} className="note flex bg-light-dark rounded-3xl p-6">
              <div className="flex flex-col gap-2">
                <div className="flex justify-between items-center">
                  <div className="flex flex-col gap-1">
                    <h5 className="font-inter text-grey font-thin text-xl">
                      {e.tag}
                    </h5>
                    <h3 className="font-inter text-light text-xl">
                      {e.heading}
                    </h3>
                  </div>
                  <Link href="/">
                    <Image
                      className="h-10 w-10 min-w-10"
                      src={`/awardIcon/link-color.png`}
                      height={40}
                      width={40}
                      alt="icon"
                    />
                  </Link>
                </div>
                <p className="font-inter text-light font-light text-xs leading-loose">
                  {e.desc}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>

"JSX to HTML"