export function HorizontalTeamCards() {
  return (
    <section>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex w-full flex-col items-center justify-start gap-9 py-16 lg:flex-row lg:py-0 xl:gap-12">
          <div className="inline-flex w-auto flex-col items-center justify-center gap-4 lg:w-[450px] lg:items-start lg:gap-14 xl:w-[636px]">
            <div className="flex w-full flex-col items-center justify-center gap-1.5 lg:items-start">
              <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
                Our outstanding, strong, and inspired team
              </h2>
              <p className="text-center text-lg leading-relaxed font-normal text-gray-500 lg:text-start">
                These team members strive to ensure our product is the best it
                can be.
              </p>
            </div>
            <button className="flex items-center justify-center rounded-xl bg-indigo-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-indigo-800">
              <span className="px-2 py-px text-base leading-relaxed font-semibold text-white">
                Join Our Team
              </span>
            </button>
          </div>
          <div className="relative mx-auto flex h-[700px] w-auto flex-row gap-5 overflow-hidden md:h-[800px] lg:w-[680px] lg:gap-8 xl:w-[532px]">
            <div className="swiper-container w-fit">
              <div className="swiper-wrapper flex h-fit w-fit gap-8">
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#d7c7c1]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425743.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Kevin Roy
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-gray-200">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425753.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-center justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Jeksha Sharma
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#cdb5ba]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425764.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Harsh Patel
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-gray-300">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425775.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Sanjna Mehta
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#d7c7c1]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425743.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Kevin Roy
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-gray-200">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425753.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-center justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Jeksha Sharma
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#cdb5ba]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425764.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Harsh Patel
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-gray-300">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425775.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Sanjna Mehta
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="swiper-container1 w-fit">
              <div className="swiper-wrapper flex h-fit w-fit gap-8">
                <div className="swiper-slide">
                  <div className="relative inline-flex h-[250px] flex-col items-start justify-center gap-8 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#cfc0af]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425929.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Deep Saxena
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#c7bcbd]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425941.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Karan Pandey
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#bdbdbd]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425952.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Sanjay Reddy
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#877593]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425963.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Mahi Malhotra
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#d6d3ca]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425974.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Diksha Bhatt
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative inline-flex h-[250px] flex-col items-start justify-center gap-8 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#cfc0af]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425929.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Deep Saxena
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#c7bcbd]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425941.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Karan Pandey
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="relative flex h-[250px] flex-col items-start justify-start gap-2.5 md:w-[250px]">
                    <div className="inline-flex items-start justify-start gap-2.5 rounded-xl bg-[#bdbdbd]">
                      <img
                        className="rounded-xl object-cover"
                        src="https://pagedone.io/asset/uploads/1722425952.png"
                      />
                    </div>
                    <div className="absolute bottom-0 inline-flex w-full items-start justify-between gap-1.5 rounded-br-xl rounded-bl-xl bg-black/5 p-2.5 backdrop-blur-[20px]">
                      <h6 className="text-base leading-relaxed font-medium text-white">
                        Sanjay Reddy
                      </h6>
                      <div className="flex items-center justify-end gap-1.5">
                        <a className="relative h-5 w-5 rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                        <a className="flex h-5 w-5 items-center justify-center rounded-[15px]">
                          {/* SVG removed */}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}