export function GallerySectionWithAutoplaySlider() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-10 grid gap-2.5 lg:mb-16">
          <span className="w-full text-center text-sm leading-snug font-medium text-gray-600">
            A Photographic Journey
          </span>
          <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900">
            Captured Memories Collection
          </h2>
        </div>
      </div>
      <div className="relative overflow-x-hidden">
        <div className="swiper-container swiper--bottom mb-8">
          <div className="swiper-wrapper">
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024287.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024299.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024310.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024320.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024331.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024287.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024299.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024310.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024320.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024331.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024287.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024299.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024310.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024320.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024331.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
          </div>
        </div>
        <div className="swiper-container swiper--top">
          <div className="swiper-wrapper">
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024341.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024352.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024363.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024377.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024341.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024352.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024363.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024377.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024388.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024398.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024341.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024352.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024363.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024377.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024388.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
            <div className="swiper-slide h-[260px] w-[280px]">
              <div className="flex h-[260px] w-[280px] items-center justify-center">
                <img
                  src="https://pagedone.io/asset/uploads/1714024398.png"
                  alt="Gallery image"
                  className="h-[260px] w-[280px] rounded-lg object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}