export function ConnectedTeamImagesWithAHoverEffect() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl overflow-hidden px-4 sm:px-6 lg:px-8">
        <div className="pb-10 lg:pb-12">
          <span className="mx-auto flex w-full items-center justify-center pb-2.5 text-center text-base leading-6 font-normal text-indigo-500">
            Members
          </span>
          <h2 className="w-full text-center text-4xl leading-normal font-bold text-gray-900">
            Meet Our Talents
          </h2>
        </div>
        {/*Slider Wrapper*/}
        <div className="relative mx-auto w-auto">
          <div className="swiper-container gallery-top w-full overflow-hidden pt-6">
            <div className="swiper-wrapper mx-auto flex w-max pb-4">
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#877593] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507236.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box mt-5justify-start relative mx-auto flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Sanya Desai
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-gray-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507245.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Noah Anderson
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#c7bcbd] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507255.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Abhishek Nair
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-stone-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507265.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Emma Davis
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#cdd3c5] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507274.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Benjamin Evans
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#877593] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507236.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box mt-5justify-start relative mx-auto flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Sanya Desai
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-gray-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507245.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Noah Anderson
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#c7bcbd] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507255.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Abhishek Nair
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-stone-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507265.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Emma Davis
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#cdd3c5] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507274.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Benjamin Evans
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#877593] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507236.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box mt-5justify-start relative mx-auto flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Sanya Desai
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-gray-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507245.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Noah Anderson
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#c7bcbd] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507255.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Abhishek Nair
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-stone-200 transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507265.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Emma Davis
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
              <div className="swiper-slide">
                <div className="mb-5 flex items-center justify-start gap-2.5 rounded-xl bg-[#cdd3c5] transition-all duration-700 ease-in-out">
                  <img
                    className="w-full shrink grow basis-0 rounded-xl object-cover"
                    src="https://pagedone.io/asset/uploads/1722507274.png"
                    alt="Team Member Image"
                  />
                </div>
                <div className="swiper-box relative mx-auto mt-5 flex flex-col items-center justify-center gap-1">
                  <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                    Benjamin Evans
                  </h5>
                  <span className="text-center text-sm leading-normal font-normal text-indigo-600">
                    Developer
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}