drfeely.com/website/app/views/Introduction.tsx

"use client";

import Carousel from "@/components/Carousel";
import { ChevronDoubleDownIcon } from "@heroicons/react/24/solid";
import drFeelyPic from "@/public/content/dr_feely_headshot.png";
import Image from "next/image";

const Introduction = () => {
  return (
    <section
      className="text-primary-100 relative min-h-screen bg-primary-500 z-[-20]"
      id="introduction"
    >
      <div className="min-h-screen bg-transparent w-full 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">
            <Image
              className="shadow-superPortraitR shadow-secondary-500 rounded-3xl max-w-sm w-full md:max-w-md"
              src={drFeelyPic}
              alt="Headshot of Dr. Feely"
            />
          </div>
        </div>
        <div className="bg-secondary-500 rounded-full hidden md:inline-block ml-[-10px] mb-3 absolute bottom-0 left-1/2 animate-bounce drop-shadow-xl p-1.5">
          <a href="/#philosophy">
            <ChevronDoubleDownIcon
              width="20px"
              className=""
            ></ChevronDoubleDownIcon>
          </a>
        </div>
      </div>
      <Carousel className="absolute top-0 left-0 h-full w-full z-[-10]"></Carousel>
    </section>
  );
};

export default Introduction;