export function AboutDescriptionCardsWithVisualImage() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-12">
          <div className="flex w-full flex-col items-center justify-start gap-3 lg:items-start">
            <span className="text-center text-base leading-relaxed font-medium text-gray-500 lg:text-start">
              About Our Agency
            </span>
            <div className="flex w-full flex-col items-center justify-start gap-5 lg:flex-row lg:gap-8">
              <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
                Exploring the Strategies and Vision That Define Our Digital
                Agency’s Success
              </h2>
              <button className="flex items-center justify-center rounded-xl border border-blue-300 px-6 py-3 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-blue-500">
                <span className="px-2 py-px text-lg leading-7 font-semibold whitespace-nowrap text-blue-600">
                  Learn More
                </span>
                {/* SVG removed */}
              </button>
            </div>
          </div>
          <div className="grid w-full grid-cols-1 items-start justify-start gap-y-9 lg:grid-cols-12 lg:gap-x-9 lg:gap-y-0">
            <img
              className="col-span-12 mx-auto h-auto w-auto rounded-3xl object-cover lg:col-span-5 lg:h-full"
              src="https://pagedone.io/asset/uploads/1724153186.png"
              alt="About Us image"
            />
            <div className="col-span-12 grid h-full w-full grid-cols-1 flex-col items-start justify-center gap-5 md:grid-cols-2 lg:col-span-7">
              <div className="inline-flex h-full w-full flex-col items-start justify-center gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out hover:border-gray-400">
                <div className="flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-4">
                  <div className="inline-flex items-center justify-start gap-2.5">
                    <div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-indigo-50">
                      {/* SVG removed */}
                    </div>
                    <div className="inline-flex flex-col items-start justify-center">
                      <h3 className="font-manrope text-2xl leading-9 font-bold text-indigo-600">
                        40k+
                      </h3>
                      <h6 className="text-base leading-relaxed font-normal text-gray-500">
                        Task Fulfilled
                      </h6>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-start justify-start gap-1.5">
                  <h4 className="text-xl leading-8 font-semibold text-gray-900">
                    Prepared for the Journey Ahead
                  </h4>
                  <p className="text-base leading-relaxed font-normal text-gray-500">
                    Every detail is planned, ensuring we’re ready for the
                    journey ahead.
                  </p>
                </div>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-center gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out hover:border-gray-400">
                <div className="flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-4">
                  <div className="inline-flex items-center justify-start gap-2.5">
                    <div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-indigo-50">
                      {/* SVG removed */}
                    </div>
                    <div className="inline-flex flex-col items-start justify-center">
                      <h3 className="font-manrope text-2xl leading-9 font-bold text-indigo-600">
                        18
                      </h3>
                      <h6 className="text-base leading-relaxed font-normal text-gray-500">
                        Years of Experience
                      </h6>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-start justify-start gap-1.5">
                  <h4 className="text-xl leading-8 font-semibold text-gray-900">
                    Extensive Experience Backed by Time
                  </h4>
                  <p className="text-base leading-relaxed font-normal text-gray-500">
                    Years of experience guarantee exceptional results.
                  </p>
                </div>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-center gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out hover:border-gray-400">
                <div className="flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-4">
                  <div className="inline-flex items-center justify-start gap-2.5">
                    <div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-indigo-50">
                      {/* SVG removed */}
                    </div>
                    <div className="inline-flex flex-col items-start justify-center">
                      <h3 className="font-manrope text-2xl leading-9 font-bold text-indigo-600">
                        24k+
                      </h3>
                      <h6 className="text-base leading-relaxed font-normal text-gray-500">
                        Satisfied Client
                      </h6>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-start justify-start gap-1.5">
                  <h4 className="text-xl leading-8 font-semibold text-gray-900">
                    Prepared for Any Client Challenge
                  </h4>
                  <p className="text-base leading-relaxed font-normal text-gray-500">
                    We’re ready to meet client needs with tailored solutions and
                    great service.
                  </p>
                </div>
              </div>
              <div className="inline-flex h-full w-full flex-col items-start justify-center gap-5 rounded-2xl border border-gray-200 bg-white p-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out hover:border-gray-400">
                <div className="flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-4">
                  <div className="inline-flex items-center justify-start gap-2.5">
                    <div className="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-indigo-50">
                      {/* SVG removed */}
                    </div>
                    <div className="inline-flex flex-col items-start justify-center">
                      <h3 className="font-manrope text-2xl leading-9 font-bold text-indigo-600">
                        35
                      </h3>
                      <h6 className="text-base leading-relaxed font-normal text-gray-500">
                        Awards Achieved
                      </h6>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col items-start justify-start gap-1.5">
                  <h4 className="text-xl leading-8 font-semibold text-gray-900">
                    Prestigious Awards Earned and Celebrated
                  </h4>
                  <p className="text-base leading-relaxed font-normal text-gray-500">
                    We celebrate awards earned, reflecting our commitment to
                    excellence.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}