export function CenterModeSliderWithDarkVersion() {
  return (
    <section className="bg-black py-24">
      <div className="flex w-full flex-col items-center justify-start gap-6 pb-10 lg:pb-12">
        <h5 className="text-center text-lg leading-relaxed font-medium text-white">
          Testimonial
        </h5>
        <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-white">
          Elevating Customer Interactions
        </h2>
      </div>
      <div className="swiper mySwiper">
        <div className="swiper-wrapper h-fit">
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111083.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Harsh P.
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease
                  allowing me to make informed decisions quickly and easily.
                </p>
              </div>
            </div>
          </div>
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111094.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Julia Roberts
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease.
                  This efficiency allows me to manage confident and informed.
                </p>
              </div>
            </div>
          </div>
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111103.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Benjamin Evans
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-medium text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease.
                  This efficiency allows me to manage my investments.
                </p>
              </div>
            </div>
          </div>
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111083.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Harsh P.
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease
                  allowing me to make informed decisions quickly and easily.
                </p>
              </div>
            </div>
          </div>
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111094.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Julia Roberts
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease.
                  This efficiency allows me to manage confident and informed.
                </p>
              </div>
            </div>
          </div>
          <div className="swiper-slide group relative grid overflow-hidden rounded-2xl">
            <div className="flex items-center justify-start gap-4 rounded-2xl bg-gray-900 pr-4">
              <img
                className="rounded-l-2xl object-cover"
                src="https://pagedone.io/asset/uploads/1721111103.png"
              />
              <div className="inline-flex flex-col items-start justify-start gap-4">
                <div className="flex flex-col items-start justify-start gap-0.5">
                  <h6 className="text-base leading-relaxed font-medium text-white">
                    Benjamin Evans
                  </h6>
                  <div className="inline-flex items-start justify-start gap-1">
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                    <a href="#">{/* SVG removed */}</a>
                  </div>
                </div>
                <p className="text-base leading-relaxed font-medium text-gray-300">
                  Pagedone has empowered me to stay on top of my portfolio,
                  enabling me to make quick and informed decisions with ease.
                  This efficiency allows me to manage my investments.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}