export function CreativeTeamComponent() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto grid h-full w-full grid-cols-1 items-center justify-start gap-8 sm:w-96 lg:w-full lg:grid-cols-3">
          <div className="inline-flex w-full flex-col items-start justify-start gap-8">
            <div className="flex w-full flex-col items-start justify-start gap-3 lg:gap-5">
              <h2 className="font-manrope w-full text-center text-5xl leading-normal font-bold text-gray-900 lg:text-start lg:text-7xl lg:leading-tight">
                Team Members
              </h2>
              <p className="w-full text-center text-lg leading-relaxed font-normal text-gray-600 lg:text-start">
                Our team is dedicated to pushing the boundaries of innovation
                and excellence.
              </p>
            </div>
            <div className="flex flex-col items-start justify-start gap-4">
              <img
                className="w-full border-b border-gray-200 object-cover pb-4"
                src="https://pagedone.io/asset/uploads/1722849114.png"
                alt="Noah Anderson Image"
              />
              <div className="inline-flex items-center justify-start">
                <h3 className="font-manrope text-4xl leading-normal font-semibold text-gray-900">
                  Noah Anderson
                </h3>
              </div>
              <h5 className="text-lg leading-relaxed font-normal text-gray-600">
                We have worked tirelessly to create a tool that empowers users
                to efficiently.
              </h5>
              <div className="inline-flex items-center justify-start gap-5">
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
              </div>
            </div>
          </div>
          <div className="inline-flex w-full flex-col items-start justify-center">
            <div className="flex flex-col items-start justify-start gap-4">
              <img
                className="w-full border-b border-gray-200 object-cover pb-4"
                src="https://pagedone.io/asset/uploads/1722849129.png"
                alt="Samuel Turner Image"
              />
              <div className="inline-flex items-center justify-start">
                <h3 className="font-manrope text-4xl leading-normal font-semibold text-gray-900">
                  Samuel Turner
                </h3>
              </div>
              <h5 className="text-lg leading-relaxed font-normal text-gray-600">
                Our commitment to excellence drives us to continuously enhance
                our platform.
              </h5>
              <div className="inline-flex items-center justify-start gap-5">
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
              </div>
            </div>
          </div>
          <div className="inline-flex h-full w-full flex-col items-start justify-start pb-20 lg:pb-0">
            <div className="flex flex-col items-start justify-start gap-4">
              <img
                className="w-full border-b border-gray-200 object-cover pb-4"
                src="https://pagedone.io/asset/uploads/1722849139.png"
                alt="Mia Thompson Image"
              />
              <div className="inline-flex items-center justify-start">
                <h3 className="font-manrope text-4xl leading-normal font-semibold text-gray-900">
                  Mia Thompson
                </h3>
              </div>
              <h5 className="text-lg leading-relaxed font-normal text-gray-600">
                We strive to provide the best tools for optimizing productivity
                and achieving.
              </h5>
              <div className="inline-flex items-center justify-start gap-5">
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
                <a className="group flex h-6 w-6 items-center justify-center rounded-[15px]">
                  {/* SVG removed */}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}