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

"use client";

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

/* Here be dragons */
const Introduction = () => {
  return (
    <View
      bg_color="bg-primary-500 bg-opacity-75"
      txt_color="text-primary-100"
      id="introduction"
      className="overflow-hidden relative"
    >
      {/* "relative" above makes the background work */}
      {/* we have to do some funky stuff with margins to get the look 
          we want for the home page */}
      <div className="min-h-screen my-10 md:my-[-6rem] flex flex-col md:justify-between">
        {/* bumpers so the content doesn't overlap with the navbar*/}
        <div className="h-0 md:h-48"></div>
        <div className="flex items-center flex-col md:flex-row gap-12 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="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">
            <Image
              className="shadow-superPortraitR shadow-secondary-500 rounded-3xl w-fit"
              src={drFeelyPic}
              alt="Headshot of Dr. Feely"
            />
          </div>
        </div>
        {/* bumpers so the content doesn't overlap with the navbar. 
            need one on the bottom too because justify-between */}
        <div className="h-0 md:h-32"></div>
      </div>

      {/* bouncy arrow :) */}
      <div className="bg-secondary-500 rounded-full hidden md:block ml-[-10px] mb-4 absolute bottom-0 left-1/2 animate-bounce drop-shadow-xl p-1.5">
        <ChevronDoubleDownIcon
          width="20px"
          className=""
        ></ChevronDoubleDownIcon>
      </div>
      {/* background image magic */}
      <HomePageCarousel className="h-full w-full absolute top-0 left-0 z-[-2]"></HomePageCarousel>
      <div className="h-full w-full absolute top-0 left-0 z-[-3] bg-primary-500"></div>
    </View>
  );
};

export default Introduction;