const Introduction = () => {
  return (
    <section className="text-primary-100" id="introduction">
      <div className="min-h-screen w-full bg-primary-500 flex items-center relative z-[-2] overflow-hidden">
        <div className="w-11/12 lg:w-5/6 mt-32 my-14 md:mt-12 md:my-0 mx-auto flex items-center flex-col gap-12 md:gap-4 md:flex-row md:justify-around">
          <hgroup className="basis-6/12">
            <div className="relative">
              <div className="before:absolute before:-left-52 before:-top-44 before:z-[-1] before:content-textAccent">
                <h1 className="text-7xl lg:text-7xl font-cormorant pb-10">
                  Richard A. Feely, DO
                </h1>
              </div>
            </div>
            <p className="text-2xl">
              Dr. Feely is a highly accomplished physician with over 25 years of
              experience in osteopathic medicine, acupuncture, herbal medicine,
              and family practice. He specializes in the treatment of
              neuromusculoskeletal pain&mdash;especially back pain, neck pain
              and headaches.
            </p>
          </hgroup>
          <div className="basis-4/12 flex justify-center">
            <img
              className="shadow-superPortraitR shadow-secondary-500 rounded-3xl max-w-sm w-full"
              src="/dr_feely_headshot.png"
              alt="Headshot of Dr. Feely"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default Introduction;