export function HighlightedTestimonialCardSlider() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid w-full grid-cols-1 items-center justify-start gap-3 lg:grid-cols-2 lg:gap-12 xl:gap-24">
          <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
            Discover how this platform is helping professionals manage.
          </h2>
          <p className="text-center text-lg leading-relaxed font-normal text-gray-500 lg:text-start">
            Discover how Pagedone involves crafting a comprehensive approach
            focused on attracting new customers while ensuring the loyalty and
            satisfaction of existing ones.
          </p>
        </div>
      </div>
      {/*Slider Wrapper*/}
      <div className="swiper-container gallery-top w-full py-16 xl:overflow-hidden">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      saving me valuable time. The support team has been
                      attentive and knowledgeable, ensuring a smooth{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      The customer service team at Pagedone went above and
                      beyond to help me resolve a billing issue.{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      saving me valuable time. The support team has been
                      attentive and knowledgeable, ensuring a smooth{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      The customer service team at Pagedone went above and
                      beyond to help me resolve a billing issue.
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      saving me valuable time. The support team has been
                      attentive and knowledgeable, ensuring a smooth{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      The customer service team at Pagedone went above and
                      beyond to help me resolve a billing issue.{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="swiper-slide">
            <div className="swiper-box inline-flex flex-col items-start justify-start border-t-2 border-red-600 bg-white shadow-[0px_15px_50px_-4px_rgba(16,_24,_40,_0.06)]">
              <div className="flex flex-col items-center justify-start gap-3">
                <div className="flex flex-col items-center justify-start gap-1.5">
                  <h6 className="text-center text-base leading-relaxed font-medium text-black">
                    Edward Hisley
                  </h6>
                  <span className="text-center text-xs leading-normal font-normal text-gray-600">
                    Chief Marketing Officer
                  </span>
                </div>
                <div className="inline-flex items-start justify-center gap-6">
                  <div className="testiComma font-manrope text-8xl leading-[128px] font-medium text-red-600">
                    “
                  </div>
                  <div className="flex items-start justify-center gap-1.5 pt-7">
                    <p className="testiPara text-center text-sm leading-snug font-normal text-gray-700">
                      saving me valuable time. The support team has been
                      attentive and knowledgeable, ensuring a smooth{" "}
                    </p>
                    <p className="testiPara1 text-center text-base leading-normal font-normal text-gray-700">
                      I have been using pagedone for several months now, and I
                      must say that it has made my life a lot easier. The
                      platform's intuitive interface and ease of use have
                      allowed me to manage my finances more effectively and make
                      informed.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-3.5 flex items-center justify-center">
        <button
          id="slider-button-left"
          className="swiper-button-prev group mr-9 flex h-[52px] w-[52px] items-center justify-center rounded-full border border-red-600 bg-transparent shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-transparent hover:bg-red-600"
        >
          {/* SVG removed */}
        </button>
        <button
          id="slider-button-right"
          className="swiper-button-next group flex h-[52px] w-[52px] items-center justify-center rounded-full border border-red-600 bg-transparent shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-transparent hover:bg-red-600"
        >
          {/* SVG removed */}
        </button>
      </div>
    </section>
  )
}