export function ModernTeamCardsWithBorders() {
  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="flex w-full flex-col items-center justify-start gap-1.5">
            <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900">
              Our Exceptional Team
            </h2>
            <p className="text-center text-lg leading-relaxed font-normal text-gray-500">
              Empowered by passion and skill, our Exceptional Team turns
              challenges into opportunities for growth.
            </p>
          </div>
          <div className="grid w-full grid-cols-1 flex-col items-center justify-start gap-5 md:grid-cols-2 lg:grid-cols-3">
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex h-[60px] w-[60px] items-start justify-start gap-2.5 rounded-full bg-gray-200">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404454.png"
                    alt="Priya Bhatt image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Priya Bhatt
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  Owner
                </span>
              </div>
            </div>
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex h-[60px] w-[60px] items-start justify-start gap-2.5 rounded-full bg-gray-300">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404466.png"
                    alt="Kiran Saxena image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Kiran Saxena
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  Founder
                </span>
              </div>
            </div>
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex h-[60px] w-[60px] items-start justify-start gap-2.5 rounded-full bg-[#cfc0af]">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404555.png"
                    alt="Rajesh Dixit image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Rajesh Dixit
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  HR
                </span>
              </div>
            </div>
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex h-20 w-20 items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex items-start justify-start gap-2.5 rounded-full bg-gray-200">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404564.png"
                    alt="Rohit Sharma image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Rohit Sharma
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  Project Manager
                </span>
              </div>
            </div>
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex h-20 w-20 items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex items-start justify-start gap-2.5 rounded-full bg-slate-300">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404663.png"
                    alt="Manish Malhotra image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Manish Malhotra
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  Developer
                </span>
              </div>
            </div>
            <div className="group relative inline-flex w-full flex-col items-center justify-start pt-10">
              <div className="cardBox absolute top-0 inline-flex h-20 w-20 items-center justify-center gap-2.5 bg-white p-2.5">
                <div className="flex items-start justify-start gap-2.5 rounded-full bg-[#afbac8]">
                  <img
                    className="rounded-full object-cover"
                    src="https://pagedone.io/asset/uploads/1722404613.png"
                    alt="Vikram Reddy image"
                  />
                </div>
              </div>
              <div className="flex w-full flex-col items-center justify-start gap-0.5 rounded-xl border border-gray-200 bg-white px-5 pt-12 pb-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-700 ease-in-out group-hover:border-emerald-700">
                <h6 className="text-center text-base leading-relaxed font-medium text-gray-900">
                  Vikram Reddy
                </h6>
                <span className="text-center text-xs leading-normal font-normal text-emerald-700">
                  Marketing Manager
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}