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

54 lines
2.2 KiB
TypeScript

"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;