export function InformativeTeamCards() {
  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-10 lg:gap-12">
          <div className="flex w-full flex-col items-center justify-start gap-5">
            <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900">
              Welcome our talented team
            </h2>
            <p className="w-full text-center text-lg leading-relaxed font-normal text-gray-500 lg:max-w-4xl">
              We are thrilled to introduce the newest members of our team. Each
              individual brings a wealth of experience, creativity, and passion
              to our organization.
            </p>
          </div>
          <div className="grid w-full grid-cols-1 flex-col items-start justify-start gap-5 lg:grid-cols-2 xl:gap-8">
            <div className="flex w-full flex-col items-center justify-start gap-4 rounded-2xl border border-gray-200 bg-white sm:flex-row sm:pr-3 lg:gap-3 xl:gap-4 xl:pr-4">
              <img
                className="h-full w-full rounded-tl-2xl rounded-tr-2xl object-cover sm:w-auto sm:rounded-tr-none sm:rounded-bl-2xl"
                src="https://pagedone.io/asset/uploads/1722842651.png"
                alt="Julia Roberts Image"
              />
              <div className="inline-flex w-full flex-col items-start justify-start gap-5 p-4 sm:p-0 lg:gap-2 xl:gap-5">
                <div className="flex w-full flex-col items-start justify-start gap-3 lg:gap-0.5 xl:gap-3">
                  <div className="inline-flex w-full items-center justify-between">
                    <h5 className="text-lg leading-relaxed font-medium text-black">
                      Julia Roberts
                    </h5>
                    <span className="text-right text-sm leading-normal font-normal text-indigo-600">
                      Product Manager
                    </span>
                  </div>
                  <p className="text-base leading-relaxed font-normal text-gray-600">
                    I have dedicated myself to pushing our limits to ensure the
                    success of our platform. We have worked tirelessly to create
                    a tool
                  </p>
                </div>
                <div className="inline-flex items-center justify-start gap-5">
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="flex w-full flex-col items-center justify-start gap-4 rounded-2xl border border-gray-200 bg-white sm:flex-row sm:pr-3 lg:gap-3 xl:gap-4 xl:pr-4">
              <img
                className="h-full w-full rounded-tl-2xl rounded-tr-2xl object-cover sm:w-auto sm:rounded-tr-none sm:rounded-bl-2xl"
                src="https://pagedone.io/asset/uploads/1722842659.png"
                alt="Mia Thompson Image"
              />
              <div className="inline-flex w-full flex-col items-start justify-start gap-5 p-4 sm:p-0 lg:gap-3 xl:gap-5">
                <div className="flex w-full flex-col items-start justify-start gap-3 lg:gap-2 xl:gap-3">
                  <div className="inline-flex w-full items-center justify-between">
                    <h5 className="text-lg leading-relaxed font-medium text-black">
                      Mia Thompson
                    </h5>
                    <span className="text-right text-sm leading-normal font-normal text-indigo-600">
                      Co- Founder
                    </span>
                  </div>
                  <p className="text-base leading-relaxed font-normal text-gray-600">
                    Our relentless commitment to innovation and excellence
                    drives us to continually enhance Pagedone, ensuring.
                  </p>
                </div>
                <div className="inline-flex items-center justify-start gap-5">
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="flex w-full flex-col items-center justify-start gap-4 rounded-2xl border border-gray-200 bg-white sm:flex-row sm:pr-3 lg:gap-3 xl:gap-4 xl:pr-4">
              <img
                className="h-full w-full rounded-tl-2xl rounded-tr-2xl object-cover sm:w-auto sm:rounded-tr-none sm:rounded-bl-2xl"
                src="https://pagedone.io/asset/uploads/1722842669.png"
                alt="Noah Anderson Image"
              />
              <div className="inline-flex w-full flex-col items-start justify-start gap-5 p-4 sm:p-0 lg:gap-3 xl:gap-5">
                <div className="flex w-full flex-col items-start justify-start gap-3 lg:gap-2 xl:gap-3">
                  <div className="inline-flex w-full items-center justify-between">
                    <h5 className="text-lg leading-relaxed font-medium text-black">
                      Noah Anderson
                    </h5>
                    <span className="text-right text-sm leading-normal font-normal text-indigo-600">
                      Seo Manager
                    </span>
                  </div>
                  <p className="text-base leading-relaxed font-normal text-gray-600">
                    Our relentless commitment to innovation and excellence
                    drives us to continually enhance Pagedone.
                  </p>
                </div>
                <div className="inline-flex items-center justify-start gap-5">
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
            <div className="flex w-full flex-col items-center justify-start gap-4 rounded-2xl border border-gray-200 bg-white sm:flex-row sm:pr-3 lg:gap-3 xl:gap-4 xl:pr-4">
              <img
                className="h-full w-full rounded-tl-2xl rounded-tr-2xl object-cover sm:w-auto sm:rounded-tr-none sm:rounded-bl-2xl"
                src="https://pagedone.io/asset/uploads/1722842678.png"
                alt="Samuel Turner Image"
              />
              <div className="inline-flex w-full flex-col items-start justify-start gap-5 p-4 sm:p-0 lg:gap-3 xl:gap-5">
                <div className="flex w-full flex-col items-start justify-start gap-3 lg:gap-2 xl:gap-3">
                  <div className="inline-flex w-full items-center justify-between">
                    <h5 className="text-lg leading-relaxed font-medium text-black">
                      Samuel Turner
                    </h5>
                    <span className="text-right text-sm leading-normal font-normal text-indigo-600">
                      Design UI/UX
                    </span>
                  </div>
                  <p className="text-base leading-relaxed font-normal text-gray-600">
                    We are dedicated to consistently improving our platform to
                    meet the evolving needs of busy professionals.
                  </p>
                </div>
                <div className="inline-flex items-center justify-start gap-5">
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                  <a className="group relative h-6 w-6 rounded-[15px]">
                    {/* SVG removed */}
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}