export function CustomerFeedbackWithProductImage() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-6">
        <div className="inline-flex w-full flex-col items-start justify-start gap-8">
          <h2 className="font-manrope w-full text-4xl leading-normal font-bold text-black">
            Our Customer Reviews
          </h2>
          <div className="flex w-full flex-col items-end justify-start gap-11 lg:flex-row">
            <div className="flex w-full items-center justify-center gap-8 rounded-2xl bg-indigo-50 p-8">
              <div className="inline-flex flex-col items-center justify-start gap-6 pr-6">
                <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-black">
                  4.3
                </h2>
                <div className="flex flex-col items-center justify-start gap-4">
                  <div className="inline-flex items-start justify-center gap-6">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                  </div>
                  <h5 className="text-center text-xl leading-8 font-medium text-gray-400">
                    46 Ratings
                  </h5>
                </div>
              </div>
            </div>
            <div className="inline-flex w-full flex-col items-start justify-start gap-5">
              <div className="flex w-full items-center">
                <p className="py-[1px] text-lg font-medium text-black">5.0</p>
                <p className="mx-5 h-2.5 w-full rounded-lg bg-indigo-100 xl:w-[420px]">
                  <span className="flex h-full w-[250px] rounded-[30px] bg-indigo-600 sm:w-[301px] lg:w-[250px] xl:w-[301px]" />
                </p>
                <p className="py-[1px] text-lg font-medium whitespace-nowrap text-gray-500">
                  9k Reviews
                </p>
              </div>
              <div className="flex w-full items-center">
                <p className="py-[1px] text-lg font-medium text-black">4.0</p>
                <p className="mx-5 h-2.5 w-full rounded-lg bg-indigo-100 xl:w-[420px]">
                  <span className="flex h-full w-[189px] rounded-[30px] bg-indigo-600" />
                </p>
                <p className="py-[1px] text-lg font-medium whitespace-nowrap text-gray-500">
                  9k Reviews
                </p>
              </div>
              <div className="flex w-full items-center">
                <p className="py-[1px] text-lg font-medium text-black">3.0</p>
                <p className="mx-5 h-2.5 w-full rounded-lg bg-indigo-100 xl:w-[420px]">
                  <span className="flex h-full w-[117px] rounded-[30px] bg-indigo-600" />
                </p>
                <p className="py-[1px] text-lg font-medium whitespace-nowrap text-gray-500">
                  5k Reviews
                </p>
              </div>
              <div className="flex w-full items-center">
                <p className="py-[1px] text-lg font-medium text-black">2.0</p>
                <p className="mx-5 h-2.5 w-full rounded-lg bg-indigo-100 xl:w-[420px]">
                  <span className="flex h-full w-[171px] rounded-[30px] bg-indigo-600" />
                </p>
                <p className="py-[1px] text-lg font-medium whitespace-nowrap text-gray-500">
                  2k Reviews
                </p>
              </div>
              <div className="flex w-full items-center">
                <p className="py-[1px] text-lg font-medium text-black">1.0</p>
                <p className="mr-5 ml-6 h-2.5 w-full rounded-lg bg-indigo-100 xl:w-[420px]">
                  <span className="flex h-full w-[149px] rounded-[30px] bg-indigo-600" />
                </p>
                <p className="py-[1px] pl-1.5 text-lg font-medium whitespace-nowrap text-gray-500">
                  1k Reviews
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-11 flex flex-col gap-8">
          <div className="inline-flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-9">
            <div className="inline-flex w-full items-center justify-start gap-8">
              <div className="flex w-full items-center justify-start gap-5">
                <div className="flex items-start justify-start">
                  <div className="flex items-start justify-start gap-2.5">
                    <img
                      src="https://pagedone.io/asset/uploads/1714980261.png"
                      alt="Avtar image"
                      className="rounded-full object-cover"
                    />
                  </div>
                </div>
                <div className="inline-flex flex-col items-start justify-start">
                  <h5 className="text-lg leading-8 font-semibold text-black">
                    Marco MacGyver
                  </h5>
                  <h6 className="text-sm leading-snug font-normal text-gray-400">
                    Nov 01, 2023
                  </h6>
                </div>
              </div>
              <div className="flex items-start justify-end gap-1">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
            </div>
            <p className="text-lg leading-8 font-normal text-gray-600">
              Gravida nulla amet quam viverra lacus et iaculis eget et. Iaculis
              lacus nam eget donec non ac tincidunt non. Pulvinar varius eget
              massa pretium est senectus augue etiam nec. Amet semper et rhoncus
              mus sit elit. Sagittis sociis sit elit vitae. Diam quis lacinia
              habitasse odio venenatis fermentum at a ornare. Tristique feugiat
              arcu in amet dui sed sit nisi.
            </p>
            <div className="inline-flex w-full items-start justify-start gap-3.5">
              <img
                className="rounded-lg object-cover"
                alt="Sofa image"
                src="https://pagedone.io/asset/uploads/1714979701.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="Sofa image"
                src="https://pagedone.io/asset/uploads/1714979710.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="Sofa image"
                src="https://pagedone.io/asset/uploads/1714979720.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="Sofa image"
                src="https://pagedone.io/asset/uploads/1714979731.png"
              />
            </div>
          </div>
          <div className="inline-flex w-full flex-col items-start justify-start gap-4 border-b border-gray-200 pb-9">
            <div className="inline-flex w-full items-center justify-start gap-8">
              <div className="flex w-full items-center justify-start gap-5">
                <div className="flex items-start justify-start">
                  <div className="flex items-start justify-start gap-2.5">
                    <img
                      src="https://pagedone.io/asset/uploads/1714980270.png"
                      alt="Avtar image"
                      className="rounded-full object-cover"
                    />
                  </div>
                </div>
                <div className="inline-flex flex-col items-start justify-start">
                  <h5 className="text-lg leading-8 font-semibold text-black">
                    Robert Karmazov
                  </h5>
                  <h6 className="text-sm leading-snug font-normal text-gray-400">
                    Nov 01, 2023
                  </h6>
                </div>
              </div>
              <div className="flex items-start justify-end gap-1">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
              </div>
            </div>
            <p className="text-lg leading-8 font-normal text-gray-600">
              Habitasse nunc porta malesuada velit id in. Sed sit sed elementum
              tortor ultrices. Tortor et vel ipsum elementum donec justo quam.
              Nisl adipiscing odio ac lorem ornare eu lacus a tellus. Amet ipsum
              integer feugiat non cursus est imperdiet. Sed elementum vitae
              ornare morbi arcu semper nunc. Quis mi enim etiam tempor cras.
              Ultrices nisl faucibus
            </p>
            <div className="inline-flex w-full items-start justify-start gap-3.5">
              <img
                className="rounded-lg object-cover"
                alt="leaf image"
                src="https://pagedone.io/asset/uploads/1714980373.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="leaf image"
                src="https://pagedone.io/asset/uploads/1714980383.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="leaf image"
                src="https://pagedone.io/asset/uploads/1714980393.png"
              />
              <img
                className="rounded-lg object-cover"
                alt="leaf image"
                src="https://pagedone.io/asset/uploads/1714980403.png"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}