61 lines
2.4 KiB
TypeScript
61 lines
2.4 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="relative overflow-hidden"
|
|
>
|
|
{/* "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="my-10 flex min-h-screen items-center md:my-[-6rem]">
|
|
<div className="flex flex-col items-center gap-12 p-0 md:mb-32 md:mt-48 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="">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="w-fit rounded-3xl shadow-superPortraitR shadow-secondary-500"
|
|
src={drFeelyPic}
|
|
alt="Headshot of Dr. Feely"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* bouncy arrow :) */}
|
|
<div className="absolute bottom-0 left-1/2 mb-4 ml-[-10px] hidden animate-bounce rounded-full bg-secondary-500 p-1.5 drop-shadow-xl md:block">
|
|
<ChevronDoubleDownIcon
|
|
width="20px"
|
|
className=""
|
|
></ChevronDoubleDownIcon>
|
|
</div>
|
|
{/* background image magic */}
|
|
<HomePageCarousel className="absolute left-0 top-0 z-[-2] h-full w-full"></HomePageCarousel>
|
|
<div className="absolute left-0 top-0 z-[-3] h-full w-full bg-primary-500"></div>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Introduction;
|