export function CenterModeFeatureCardSlider() {
  return (
    <section className="py-24">
      <div className="inline-flex w-full flex-col items-center justify-start gap-12">
        <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex w-full flex-col items-center justify-between gap-5 lg:flex-row lg:gap-10">
            <div className="inline-flex flex-col items-center justify-start gap-3.5 lg:items-start">
              <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
                Driving Excellence, Empowering Industries
              </h2>
              <p className="w-full text-center text-lg leading-relaxed font-normal text-gray-500 lg:max-w-3xl lg:text-start">
                Driving Excellence, Empowering Industries focuses on delivering
                superior solutions and innovations that enhance operational
                efficiency and fuel industry growth.
              </p>
            </div>
            <button className="flex w-full items-center justify-center rounded-xl bg-orange-600 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:bg-orange-700 sm:w-fit">
              <span className="px-2 py-px text-base leading-relaxed font-semibold whitespace-nowrap text-white">
                Get Started
              </span>
              {/* SVG removed */}
            </button>
          </div>
        </div>
        <div className="swiper-container testimonial-slider-rtl" dir="rtl">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086516.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Industrial Automation &amp; Control
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086529.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Customized Infrastructure
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086541.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Standards Compliance System
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086551.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Engineering &amp; Design Services
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086561.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Safety and Security Services
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086516.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Industrial Automation &amp; Control
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086529.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Customized Infrastructure
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086541.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Standards Compliance System
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086551.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Engineering &amp; Design Services
                </span>
              </div>
            </div>
            <div className="swiper-slide">
              <img
                src="https://pagedone.io/asset/uploads/1720086561.png"
                alt="Empowering Industries image"
                className="object-cover"
              />
              <div className="absolute bottom-0 flex w-full items-center justify-between gap-3.5 border-t-2 border-orange-500 bg-gray-900 p-3">
                <a className="flex h-[34px] w-[34px] items-center justify-center rounded-full border border-orange-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-orange-600">
                  {/* SVG removed */}
                </a>
                <span className="text-base leading-relaxed font-medium text-white">
                  Safety and Security Services
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}