fastpocket/Frontend/sections/TeamSections/SquaredMediumSizeImage.tsx

import React from "react";

function SquaredMediumSizeImage() {
  return (
    <>
      {/* <!-- Team --> */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* <!-- Title --> */}
        <div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
          <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
            Our leadership
          </h2>
        </div>
        {/* <!-- End Title --> */}

        {/* <!-- Grid --> */}
        <div className="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-12">
          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                David Forren
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Founder / CEO
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Amil Evara
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                UI/UX Designer
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Ebele Egbuna
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Support Consultant
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Maria Powers
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Director of sales
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Delia Pawelke
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Front-end Developer
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Tom Lowry
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                UI/UX Designer
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Louise Donadieu
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Support Consultant
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Jeff Fisher
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Project Manager
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}

          <div className="text-center">
            <img
              className="rounded-xl sm:w-48 lg:w-60 mx-auto"
              src="https://images.unsplash.com/photo-1602452920335-6a132309c7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
              alt="Image Description"
            />
            <div className="mt-2 sm:mt-4">
              <h3 className="text-sm font-medium secondary-content sm:text-base lg:text-lg">
                Sophia Harrington
              </h3>
              <p className="text-xs secondary-content sm:text-sm lg:text-base">
                Project Manager
              </p>
            </div>
          </div>
          {/* <!-- End Col --> */}
        </div>
        {/* <!-- End Grid --> */}
      </div>
      {/* <!-- End Team --> */}
    </>
  );
}

export default SquaredMediumSizeImage;