export function ResponsiveColumnView() {
  return (
    <section className="bg-gray-50 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-14">
          <h2 className="font-manrope mx-auto mb-14 text-center text-4xl leading-10 font-extrabold text-gray-900 md:text-5xl md:leading-[4rem] lg:max-w-2xl">
            Don’t take our word for it.
            <span className="text-indigo-600"> Trust our customers</span>
          </h2>
        </div>
        <div className="mx-auto max-w-md columns-1 gap-7 md:max-w-3xl md:columns-2 lg:max-w-full lg:columns-3">
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704349534.png"
                  alt="Karla image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">Karla Lynn</h5>
                  <span className="text-sm text-gray-500">@karlalynn98</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                I've been using{" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>{" "}
                for a year now and it's made managing my finances so much
                easier. 🙌
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704349572.png"
                  alt="Arlene image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">Arlene McCoy</h5>
                  <span className="text-sm text-gray-500">@arlenemccoy65</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                {" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>{" "}
                “I Love this." 😍
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704349514.png"
                  alt="Jenny image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">Jenny Wilson</h5>
                  <span className="text-sm text-gray-500">@jennywilson968</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                This{" "}
                <a href="javascript:;" className="text-indigo-700">
                  @pagedone
                </a>{" "}
                has transformed the way I manage my investments, making it
                easier than ever to keep track of my portfolio and maximize my
                returns. 😊
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704351062.png"
                  alt="Annette image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">
                    Annette Black
                  </h5>
                  <span className="text-sm text-gray-500">@annetteblack35</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                {" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>
                has helped me save money, reduce my debt, and invest in my
                future - it's the complete financial package.
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704351103.png"
                  alt="Darrell image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">
                    Darrell Steward
                  </h5>
                  <span className="text-sm text-gray-500">
                    @darrellsteward68
                  </span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                Thanks to{" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>
                , I feel more confident and informed about my investment
                decisions than ever before.
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704351139.png"
                  alt="Ronald image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">
                    Ronald Richards
                  </h5>
                  <span className="text-sm text-gray-500">
                    @ronaldrichards47
                  </span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                {" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>{" "}
                I love this. It is very easy to use{" "}
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704353467.png"
                  alt="Marvin image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">
                    Marvin McKinney
                  </h5>
                  <span className="text-sm text-gray-500">
                    @marvinmckinney45
                  </span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                {" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>{" "}
                it's truly been a game-changer for me.😊😍
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704353431.png"
                  alt="Arlene image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">Arlene McCoy</h5>
                  <span className="text-sm text-gray-500">@arlenemccoy65</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                Awesome work{" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
          <div className="mb-7 h-auto break-inside-avoid rounded-xl border border-solid border-gray-300 bg-white p-4 min-[400px]:p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-5">
                <img
                  src="https://pagedone.io/asset/uploads/1704353370.png"
                  alt="Jane image"
                  className="h-14 w-14 rounded-full object-cover"
                />
                <div className="block">
                  <h5 className="mb-1 font-bold text-gray-900">Jane Cooper</h5>
                  <span className="text-sm text-gray-500">@janecooper65</span>
                </div>
              </div>
              <div className="relative"></div>
            </div>
            <div className="py-6">
              <p className="leading-7 text-gray-900">
                {" "}
                <a href="javascript:;" className="text-indigo-600">
                  @pagedone
                </a>{" "}
                You guys solved my struggle insanely quick and loved to
                recommend pagedone to friends 🙌
              </p>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">1k</span>
                </div>
                <div className="flex items-center gap-1">
                  {/* SVG removed */}
                  <span className="block text-sm text-gray-500">500</span>
                </div>
              </div>
              <h6 className="text-right text-sm text-gray-500">
                08:10 PM | 23 Mar 2022
              </h6>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}