55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Carousel from "@/components/Carousel";
|
|
import { ChevronDoubleDownIcon } from "@heroicons/react/24/solid";
|
|
import drFeelyPic from "@/public/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—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;
|