export function BasicTeamMemberSection() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-12">
          <div className="grid w-full grid-cols-1 items-center justify-start gap-3.5 lg:grid-cols-2 xl:gap-2.5">
            <div className="inline-flex w-full flex-col items-center justify-center gap-2.5 lg:items-start">
              <h6 className="text-center text-base leading-relaxed font-normal text-gray-500 lg:text-start">
                Our Team
              </h6>
              <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
                Skilled Team Innovating the Product
              </h2>
            </div>
            <p className="text-center text-lg leading-relaxed font-normal text-gray-500 lg:text-start">
              Our skilled team continuously innovates, ensuring our product
              stays ahead of industry standards.
            </p>
          </div>
          <div className="grid w-full grid-cols-1 flex-col items-start justify-start md:grid-cols-2 lg:grid-cols-4">
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#d6d0cf]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503459.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#f1adc6]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503470.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#cdb5ba]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503487.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#bdbdbd]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503509.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#c7bcbd]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503520.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#d3ddee]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503530.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-slate-300">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503540.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
            <div className="card group relative flex w-full items-center justify-start">
              <div className="flex w-full items-start justify-start gap-2.5 border border-gray-200 bg-[#d6d3ca]">
                <img
                  className="w-full object-cover"
                  src="https://pagedone.io/asset/uploads/1722503550.png"
                  alt="Team Member Image"
                />
              </div>
              <div className="cardBox absolute -z-10 flex h-full w-full items-center justify-center gap-2 px-5 pt-10 pb-5 transition-all duration-700 ease-in-out group-hover:z-10">
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
                <a className="relative">{/* SVG removed */}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}