67 lines
2.7 KiB
TypeScript
67 lines
2.7 KiB
TypeScript
"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—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;
|