export function ReviewCardsWithColumnGrid() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-16">
          <h2 className="text-center text-4xl font-bold text-gray-900">
            What our customers says about{" "}
            <span className="bg-gradient-to-tr from-indigo-600 to-violet-600 bg-clip-text text-transparent">
              Pagedone
            </span>
          </h2>
        </div>
        <div className="mx-auto grid max-w-sm grid-cols-1 gap-8 sm:max-w-lg md:max-w-3xl md:grid-cols-2 lg:max-w-full lg:grid-cols-3">
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              Thanks to pagedone, I feel more informed and confident about my
              investment decisions than ever before.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704349534.png"
                  alt="Emily image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Emily Johnson
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    Design Lead
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              Pagedone has made it possible for me to stay on top of my
              portfolio and make informed decisions quickly and easily.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704349514.png"
                  alt="Olivia image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Olivia Carter
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    Product Designer
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              I've been using pagedone for a year now and it's made managing my
              finances so much easier.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704351062.png"
                  alt="Wyatt image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Wyatt Turner
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    CEO
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              Thanks to pagedone, I was able to easily and securely transfer
              funds to my family overseas.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704349572.png"
                  alt="Ethan image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Ethan Miller
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    CEO
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              The customer service team at pagedone went above and beyond to
              help me resolve a billing issue.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704351103.png"
                  alt="Jackson image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Jackson Bennett
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    Design Lead
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
          <div className="group relative w-full rounded-xl border border-solid border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-600 hover:bg-indigo-50 sm:px-6 sm:py-8">
            <p className="min-h-[85px] border-b border-solid border-gray-200 pb-3 leading-6 text-gray-600 transition-all duration-500 group-hover:text-gray-900 sm:min-h-[105px] sm:pb-8">
              Pagedone is simply the best tool of investment in the market right
              now.
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <img
                  src="https://pagedone.io/asset/uploads/1704351139.png"
                  alt="Henry image"
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-medium text-gray-900">
                    Henry Foster
                  </h5>
                  <span className="text-xs text-gray-500 transition-all duration-500 group-hover:text-indigo-600">
                    Product Designer
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 text-amber-500 transition-all duration-500">
                {/* SVG removed */}
                <span className="text-base font-semibold text-indigo-600">
                  4.9
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}