drfeely.com/app/views/components/Edu.tsx

import ImageCard from "@/components/ImageCard";
import atStillU from "@/public/content/at_still_university.jpg";
import davenportHospital from "@/public/content/davenport_hospital.png";
import trumanState from "@/public/content/truman-state.jpeg";
import { default as Image } from "next-image-export-optimizer";

interface Props {
  className?: string;
}

const Edu = ({ className }: Props) => {
  const eduImgDims = "h-full w-full object-cover";
  const eduImgWrapperStyle = "h-32 md:h-56 overflow-hidden";
  const eduTextWrapperStyle = "m-10 mt-7";
  return (
    <div className={className}>
      <h2>Schooling</h2>
      <div className="">
        <div className="flex flex-col gap-4 md:flex-row">
          <ImageCard className="basis-1/3">
            <div className={eduImgWrapperStyle}>
              <Image
                src={trumanState}
                alt="Truman state university"
                className={eduImgDims}
              />
            </div>
            <div className={eduTextWrapperStyle}>
              <h2>Truman State University</h2>
              <div>B.S. - Zoology/Chemistry</div>
            </div>
          </ImageCard>
          <ImageCard className="basis-1/3">
            <div className={eduImgWrapperStyle}>
              <Image
                src={atStillU}
                alt="A.T. Still university"
                className={eduImgDims}
              />
            </div>
            <div className={eduTextWrapperStyle}>
              <h2>A.T. Still University</h2>
              <strong>Kirksville College of Osteopathic Medicine</strong>
              <div>Doctor of Osteopathy</div>
            </div>
          </ImageCard>
          <ImageCard className="basis-1/3">
            <div className={eduImgWrapperStyle}>
              <Image
                src={davenportHospital}
                alt="Davenport osteopathic hospital"
                className={eduImgDims}
              />
            </div>
            <div className={eduTextWrapperStyle}>
              <h2>Davenport Osteopathic Hospital</h2>
              <div>Rotating Internship Training Program</div>
            </div>
          </ImageCard>
        </div>
      </div>
    </div>
  );
};

export default Edu;