formatting on osteopathy and home

website/app/(pages)/acupuncture/page.tsx

@@ -1,8 +1,17 @@
+import { Metadata } from "next";
 import AcuForDocs from "./views/AcuForDocs";
 import BasicsAndHist from "./views/BasicsAndHist";
 import EarAcupuncture from "./views/EarAcupuncture";
 import ScalpAcupuncture from "./views/ScalpAcupuncture";
 
+export const metadata: Metadata = {
+  title: "Dr. Feely | Acupuncture",
+  description: `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.`,
+};
+
 const Acupuncture = () => {
   return (
     <main>

website/app/(pages)/articles/(content)/layout.tsx

@@ -1,4 +1,5 @@
 "use client";
+import GenericButton from "@/components/GenericButton";
 import { ArrowLongLeftIcon, ArrowSmallUpIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { ReactNode, useEffect, useState } from "react";
@@ -26,19 +27,20 @@ const ArticlesLayout = ({ children }: Props) => {
     <div className="w-11/12 md:w-2/5 mx-auto mt-20">
       <Link href="/articles" className="font-bold block my-5">
         <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
-        Back to Articles
+        View all Articles
       </Link>
       {children}
       <Link href="/articles" className="font-bold block my-5">
         <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
-        Back to Articles
+        View all Articles
       </Link>
+      {/* For some reason if I use a <Link> here it doesn't scroll all the way to the top of the page. */}
       {isTopOfPage ? (
         <></>
       ) : (
         <a
           href="#"
-          className=" fixed bottom-0 md:right-1/4 md:mr-[-4rem] right-0 mr-5 mb-5 p-3 bg-primary-100 rounded-lg drop-shadow-2xl flex flex-col items-center hover:drop-shadow-xl transition-all duration-300"
+          className="p-3 m-3 rounded-lg align-middle drop-shadow-md hover:drop-shadow-xl transition-all duration-300 fixed bottom-0 md:right-1/4 md:mr-[-4rem] right-0 mr-5 mb-5 bg-primary-100 flex items-center flex-col"
         >
           <ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
           <div className="text-sm italic">To Top</div>

website/app/(pages)/articles/page.tsx

@@ -1,6 +1,15 @@
+import { Metadata } from "next";
 import ArtsForDocs from "./views/ArtsForDocs";
 import ArtsForPatients from "./views/ArtsForPatients";
 
+export const metadata: Metadata = {
+  title: "Dr. Feely | Articles",
+  description: `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.`,
+};
+
 const Articles = () => {
   return (
     <main>

website/app/(pages)/nor/page.tsx

@@ -1,7 +1,16 @@
+import { Metadata } from "next";
 import NOR from "./views/NOR";
 import NORArticles from "./views/NORArticles";
 import NORVideos from "./views/NORVideos";
 
+export const metadata: Metadata = {
+  title: "Dr. Feely | NOR",
+  description: `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.`,
+};
+
 const NeuroOcularRelease = () => {
   return (
     <main>

website/app/(pages)/osteopathy/page.tsx

@@ -1,11 +1,20 @@
 import OsteoForDocs from "./views/OsteoForDocs";
 import PediatricCare from "./views/PediatricCare";
-import WhatIsOsteo from "./views/OsteoBasics";
+import OsteoBasics from "./views/OsteoBasics";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dr. Feely | Osteopathy",
+  description: `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.`,
+};
 
 const Osteopathy = () => {
   return (
     <main>
-      <WhatIsOsteo></WhatIsOsteo>
+      <OsteoBasics></OsteoBasics>
       <PediatricCare></PediatricCare>
       <OsteoForDocs></OsteoForDocs>
     </main>

website/app/(pages)/osteopathy/views/OsteoBasics.tsx

@@ -1,126 +1,54 @@
 const OsteoBasics = () => {
   return (
     <section className="min-h-screen" id="osteobasics">
-      <div>
+      <p>
-        <h2>History</h2>
+        Osteopathic Medicine finds its roots in the pioneering work of Dr.
-        <p>
+        Andrew Taylor Still, who challenged the medical practices of his time.
-          Osteopathic Medicine finds its roots in the pioneering work of Dr.
+        In 1874, Dr. Still developed a groundbreaking philosophy that viewed the
-          Andrew Taylor Still, who challenged the medical practices of his time.
+        body as an interconnected unit, where all its systems work harmoniously
-          In 1874, Dr. Still developed a groundbreaking philosophy that viewed
+        to maintain health. This idea was revolutionary, as it diverged from the
-          the body as an interconnected unit, where all its systems work
+        prevailing notion of treating diseases in isolation. Dr. Still
-          harmoniously to maintain health. This idea was revolutionary, as it
+        emphasized the significance of the musculoskeletal system, recognizing
-          diverged from the prevailing notion of treating diseases in isolation.
+        that structural imbalances could lead to dysfunction and illness. His
-          Dr. Still emphasized the significance of the musculoskeletal system,
+        philosophy laid the groundwork for the modern practice of Osteopathic
-          recognizing that structural imbalances could lead to dysfunction and
+        Medicine, which continues to evolve and adapt to contemporary medical
-          illness. His philosophy laid the groundwork for the modern practice of
+        knowledge.
-          Osteopathic Medicine, which continues to evolve and adapt to
+      </p>
-          contemporary medical knowledge.
-        </p>
-      </div>
 
-      <div>
+      <p>
-        <h2>Overview</h2>
+        Osteopathic Medicine today embraces a holistic approach that encompasses
-        <p>
+        several fundamental principles:
-          Osteopathic Medicine today embraces a holistic approach that
+      </p>
-          encompasses several fundamental principles:
+      <p>
-        </p>
+        <strong>The Body as a Unit:</strong> Unlike traditional medicine, which
-        <ul>
+        often focuses on isolated symptoms, Osteopathic Medicine views the body
-          <li>
+        as a unified entity. Each system influences and interacts with the
-            <strong>The Body as a Unit:</strong> Unlike traditional medicine,
+        others, emphasizing the importance of considering the whole person.
-            which often focuses on isolated symptoms, Osteopathic Medicine views
+      </p>
-            the body as a unified entity. Each system influences and interacts
+      <p>
-            with the others, emphasizing the importance of considering the whole
+        <strong>Reciprocal Relationship of Structure and Function:</strong>{" "}
-            person.
+        Osteopathy recognizes that structural abnormalities can affect bodily
-          </li>
+        functions, and vice versa. This understanding guides Osteopathic
-          <li>
+        Physicians in diagnosing and treating not just symptoms, but underlying
-            <strong>Reciprocal Relationship of Structure and Function:</strong>{" "}
+        causes.
-            Osteopathy recognizes that structural abnormalities can affect
+      </p>
-            bodily functions, and vice versa. This understanding guides
+      <p>
-            Osteopathic Physicians in diagnosing and treating not just symptoms,
+        <strong>Self-Regulating Mechanisms:</strong> The body possesses its own
-            but underlying causes.
+        mechanisms for maintaining health and balance. Osteopathic Physicians
-          </li>
+        trust in the body's innate ability to heal and regulate itself, and they
-          <li>
+        work to support and enhance these mechanisms.
-            <strong>Self-Regulating Mechanisms:</strong> The body possesses its
+      </p>
-            own mechanisms for maintaining health and balance. Osteopathic
+      <p>
-            Physicians trust in the body's innate ability to heal and regulate
+        <strong>Rational Therapy:</strong> Osteopathic Physicians base their
-            itself, and they work to support and enhance these mechanisms.
+        treatments on a profound understanding of anatomy, physiology, and
-          </li>
+        pathology. This knowledge allows them to provide targeted and effective
-          <li>
+        care.
-            <strong>Rational Therapy:</strong> Osteopathic Physicians base their
+      </p>
-            treatments on a profound understanding of anatomy, physiology, and
+      <p>
-            pathology. This knowledge allows them to provide targeted and
+        Osteopathic Medicine isn't limited to addressing physical ailments. It
-            effective care.
+        also takes into account environmental, emotional, and psychological
-          </li>
+        factors that contribute to a patient's well-being.
-        </ul>
+      </p>
-        <p>
-          Osteopathic Medicine isn't limited to addressing physical ailments. It
-          also takes into account environmental, emotional, and psychological
-          factors that contribute to a patient's well-being.
-        </p>
-      </div>
-
-      <div>
-        <h2>Osteopathic Manipulative Treatment (OMT)</h2>
-        <p>
-          Osteopathic Manipulative Treatment (OMT) stands as a hallmark of
-          Osteopathic Medicine. Through OMT, Osteopathic Physicians employ their
-          hands to diagnose, treat, and prevent a wide range of conditions. This
-          non-invasive approach involves various manual techniques to manipulate
-          muscles, joints, and tissues. OMT aims to restore balance, alleviate
-          pain, and enhance the body's natural healing processes. Scientific
-          studies have validated the effectiveness of OMT in diverse conditions,
-          such as musculoskeletal pain, migraines, and even post-surgical
-          recovery. The use of OMT underscores Osteopathic Physicians'
-          commitment to providing comprehensive care beyond conventional
-          treatments.
-        </p>
-      </div>
-
-      <div>
-        <h2>DOs vs MDs</h2>
-        <p>
-          While both D.O.s and M.D.s are licensed physicians with similar
-          educational foundations, there are notable distinctions:
-        </p>
-        <ul>
-          <li>
-            <strong>Education:</strong> Osteopathic Medical education places a
-            special emphasis on holistic care and the musculoskeletal system.
-            This knowledge equips D.O.s with a unique perspective on the
-            interplay between body systems.
-          </li>
-          <li>
-            <strong>Primary Care Focus:</strong> A substantial percentage of
-            D.O.s specialize in primary care fields such as family medicine,
-            pediatrics, and internal medicine. This aligns with Osteopathic
-            Medicine's emphasis on preventive health and wellness.
-          </li>
-          <li>
-            <strong>Osteopathic Manipulation:</strong> One of the most
-            significant differences is the incorporation of OMT into Osteopathic
-            practice. This hands-on approach allows D.O.s to provide an added
-            dimension of care, enhancing their ability to diagnose and treat a
-            wide range of conditions.
-          </li>
-        </ul>
-      </div>
-
-      <div>
-        <h2>Conclusion</h2>
-        <p>
-          Osteopathic Medicine, stemming from the visionary work of Dr. Andrew
-          Taylor Still, stands as a holistic and patient-centered approach to
-          healthcare. It acknowledges the body's intricate interconnectedness
-          and empowers patients to actively participate in their well-being.
-          Osteopathic Physicians blend cutting-edge medical advancements with
-          the art of touch, enabling them to diagnose, treat, and prevent
-          ailments with precision and compassion. As the medical landscape
-          continues to evolve, Osteopathic Medicine remains steadfast in its
-          commitment to providing comprehensive care that addresses not only
-          symptoms but the underlying factors contributing to health and
-          wellness.
-        </p>
-      </div>
     </section>
   );
 };

website/app/(pages)/osteopathy/views/PediatricCare.tsx

@@ -1,65 +1,128 @@
+import LearnMoreButton from "@/components/LearnMoreButton";
+import View from "@/components/View";
+import childInCast from "@/public/content/child_in_cast.jpg";
+import childWithCold from "@/public/content/child_with_cold.jpg";
+import infant from "@/public/content/infant.jpg";
+import sickChild from "@/public/content/sick_child.jpg";
+import downSyndrome from "@/public/content/down_syndrome.jpg";
+import Image from "next/image";
+import Card from "@/components/Card";
+
 const PediatricCare = () => {
+  const imageClass = "w-full md:max-w-md rounded-lg drop-shadow-2xl";
+  const pClass = "my-8";
   return (
-    <section className="min-h-screen" id="pediatriccare">
+    <View
-      <h1>DIGESTIVE PROBLEMS</h1>
+      bg_color="bg-primary-300"
-      <p>
+      txt_color="text-primary-500"
-        Newborns frequently experience gastrointestinal issues, from spitting up
+      id="pediatriccare"
-        to colicky crying. Osteopathic manipulative treatment can aid in
+    >
-        resolving these problems by addressing structural issues caused by
+      <h1>Pediatrics</h1>
-        difficult births that irritate the vagus nerve, affecting the digestive
+      <div className="grid md:grid-cols-2 place-items-center gap-y-20 my-10">
-        system. By correcting misalignments and tissue tensions around abdominal
+        <Card>
-        organs, such as the umbilical area and esophagus-stomach junction,
+          <h2>Digestive Problems</h2>
-        infants can handle feeding and gas more effectively. Additionally,
+          <p className={pClass}>
-        dietary adjustments for breastfed or formula-fed infants might alleviate
+            Osteopathic treatment offers a holistic approach to childhood health
-        digestive distress. Healthy dietary choices during infancy are crucial
+            problems. For newborns, misaligned abdominal fascia causing
-        for proper organ and brain development.
+            digestive issues can be corrected, promoting normal digestion.
-      </p>
+            Injuries to the lower back or sacrum can lead to digestive troubles,
+            and osteopathic care targets the pelvic diaphragm to restore proper
+            function, particularly vital after injuries or surgery. Vague
+            complaints like tummy aches and nausea find relief through this
+            approach. Osteopathic treatment provides a comprehensive way to
+            alleviate childhood digestive and urinary issues, supporting
+            healthier development.
+          </p>
+          <LearnMoreButton href="/articles/pediatric-digestive-problems">
+            Keep reading about osteopathy and digestion
+          </LearnMoreButton>
+        </Card>
+        <Image src={sickChild} alt="Sick Child" className={imageClass} />
 
-      <h1>DOWN SYNDROME</h1>
+        <Image
-      <p>
+          src={downSyndrome}
-        Osteopathic manipulative treatment (OMT) can benefit individuals with
+          alt="Diagram of down syndrome chromosomes"
-        Down syndrome by improving body structure and function interrelation.
+          className={imageClass}
-        Down syndrome, caused by a third copy of chromosome 21, involves
+        />
-        developmental and muscle tone challenges. OMT can address structural
+        <Card>
-        anomalies contributing to characteristic facial features and health
+          <h2>Down Syndrome</h2>
-        complications. OMT can improve sinus and respiratory issues, growth
+          <p className={pClass}>
-        delays, and motor skill development by addressing cranial shape, neural
+            Osteopathic manipulative treatment (OMT) can benefit individuals
-        pathways, and skeletal abnormalities.
+            with Down syndrome by improving body structure and function
-      </p>
+            interrelation. Down syndrome, caused by a third copy of chromosome
+            21, involves developmental and muscle tone challenges. OMT can
+            address structural anomalies contributing to characteristic facial
+            features and health complications. OMT can improve sinus and
+            respiratory issues, growth delays, and motor skill development by
+            addressing cranial shape, neural pathways, and skeletal
+            abnormalities.
+          </p>
+          <LearnMoreButton href="/articles/pediatric-down-syndrome">
+            Learn more about OMT and down syndrome
+          </LearnMoreButton>
+        </Card>
 
-      <h1>ORTHOPEDIC PROBLEMS</h1>
+        <Card>
-      <p>
+          <h2>Orthopedic Problems</h2>
-        Childhood orthopedic problems are often seen in the lower extremities
+          <p className={pClass}>
-        like feet, legs, knees, and hips. Birth-related stress or prolonged
+            Childhood orthopedic problems are often seen in the lower
-        growth can lead to various issues. Osteopathic manipulative treatment
+            extremities like feet, legs, knees, and hips. Birth-related stress
-        (OMT) can help correct structural problems caused by birth complications
+            or prolonged growth can lead to various issues. Osteopathic
-        or other factors. OMT can address conditions like congenital hip issues,
+            manipulative treatment (OMT) can help correct structural problems
-        tibial torsion, gait abnormalities, and sports injuries, promoting
+            caused by birth complications or other factors. OMT can address
-        healthy structural growth and preventing long-term problems.
+            conditions like congenital hip issues, tibial torsion, gait
-      </p>
+            abnormalities, and sports injuries, promoting healthy structural
+            growth and preventing long-term problems.
+          </p>
+          <LearnMoreButton href="/articles/pediatric-orthopedic-problems">
+            Discover how OMT can alleviate orthopedic issues
+          </LearnMoreButton>
+        </Card>
+        <Image
+          src={childInCast}
+          alt="Child with a broken ankle"
+          className={imageClass}
+        />
 
-      <h1>RESPIRATORY HEALTH</h1>
+        <Image
-      <p>
+          src={childWithCold}
-        The common cold is an opportunity for a child's immune system to
+          alt="Child with a cold"
-        develop, but complications like pneumonia can be problematic.
+          className={imageClass}
-        Osteopathic manipulative treatment (OMT) can prevent complications by
+        />
-        addressing lymphatic drainage, muscle tension, and structural issues
+        <Card>
-        related to respiratory health. OMT can also aid in respiratory allergies
+          <h2>Respiratory Health</h2>
-        and asthma by optimizing rib cage and diaphragm function, reducing the
+          <p className={pClass}>
-        need for medication and improving immune responses.
+            The common cold is an opportunity for a child's immune system to
-      </p>
+            develop, but complications like pneumonia can be problematic.
+            Osteopathic manipulative treatment (OMT) can prevent complications
+            by addressing lymphatic drainage, muscle tension, and structural
+            issues related to respiratory health. OMT can also aid in
+            respiratory allergies and asthma by optimizing rib cage and
+            diaphragm function, reducing the need for medication and improving
+            immune responses.
+          </p>
+          <LearnMoreButton href="/articles/pediatric-orthopedic-problems">
+            Dive deeper into respitory health and osteopathy
+          </LearnMoreButton>
+        </Card>
 
-      <h1>TREATMENT FOR NEWBORNS</h1>
+        <Card>
-      <p>
+          <h2>Treatment for Newborns</h2>
-        Osteopathic treatment for newborns aims to correct structural stresses
+          <p className={pClass}>
-        caused by the birth process. Birth complications can lead to various
+            Osteopathic treatment for newborns aims to correct structural
-        issues, and osteopathic manipulative treatment (OMT) helps babies
+            stresses caused by the birth process. Birth complications can lead
-        recover and develop optimally. OMT addresses skull and nerve issues
+            to various issues, and osteopathic manipulative treatment (OMT)
-        caused by birth, helping to resolve irritability, developmental delays,
+            helps babies recover and develop optimally. OMT addresses skull and
-        and other problems. OMT can benefit children with Down syndrome, aiding
+            nerve issues caused by birth, helping to resolve irritability,
-        respiratory health, growth concerns, and motor development.
+            developmental delays, and other problems.
-      </p>
+          </p>
-    </section>
+          <LearnMoreButton href="/articles/pediatric-orthopedic-problems">
+            Learn more about OMT and infants
+          </LearnMoreButton>
+        </Card>
+        <Image src={infant} alt="Infant baby" className={imageClass} />
+      </div>
+    </View>
   );
 };
 

website/app/globals.css

@@ -16,7 +16,18 @@
   main {
     @apply text-lg;
   }
+  h1 {
+    @apply text-7xl;
+    @apply font-cormorant;
+  }
+  h2 {
+    @apply text-2xl;
+    @apply font-bold;
+    @apply my-3;
+  }
+}
 
+@layer components {
   .ArticleContent h2 {
     @apply text-xl;
     @apply font-bold;

website/app/layout.tsx

@@ -1,16 +1,7 @@
 import Navbar from "@/components/Navbar";
 import "./globals.css";
-import type { Metadata } from "next";
 import Footer from "@/components/Footer";
 
-export const metadata: Metadata = {
-  title: "Dr. Richard Feely | Home",
-  description: `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.`,
-};
-
 export default function RootLayout({
   children,
 }: {

website/app/page.tsx

@@ -1,8 +1,17 @@
+import { Metadata } from "next";
 import AcademicWork from "./views/AcademicWork";
 import CertsAndFellows from "./views/CertsAndFellows";
 import EduAndProExp from "./views/EduAndProExp";
 import Introduction from "./views/Introduction";
 
+export const metadata: Metadata = {
+  title: "Dr. Richard A. Feely | Home",
+  description: `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.`,
+};
+
 const Home = () => {
   return (
     <main>

website/app/views/AcademicWork.tsx

@@ -2,7 +2,7 @@ const AcademicWork = () => {
   return (
     <section className="min-h-screen" id="academicwork">
       <div className="">
-        <div>Academic Appointments</div>
+        <h2>Academic Appointments</h2>
         <div>
           <div>2016-2017</div>
           <div>World Health Organization</div>
@@ -50,7 +50,7 @@ const AcademicWork = () => {
         </div>
       </div>
       <div className="">
-        <div>Books</div>
+        <h2>Books</h2>
         <div>
           <div>2011</div>
           <div>
@@ -79,7 +79,7 @@ const AcademicWork = () => {
         </div>
       </div>
       <div className="">
-        <div>Articles</div>
+        <h2>Articles</h2>
         <div>
           <div>2020</div>
           <div>

website/app/views/CertsAndFellows.tsx

@@ -2,7 +2,7 @@ const CertsAndFellows = () => {
   return (
     <section className="min-h-screen" id="certsandfellows">
       <div className="">
-        <div>Board Certifications</div>
+        <h2>Board Certifications</h2>
         <div>
           <div>2001, 2011</div>
           <div>American Board of Medical Acupuncture</div>
@@ -39,7 +39,7 @@ const CertsAndFellows = () => {
         </div>
       </div>
       <div className="">
-        <div>Fellowships</div>
+        <h2>Fellowships</h2>
         <div>
           <div>2017</div>
           <div>FAQAURP</div>
@@ -70,7 +70,7 @@ const CertsAndFellows = () => {
         </div>
       </div>
       <div className="">
-        <div>Awards</div>
+        <h2>Awards</h2>
         <div>
           <div>2019</div>
           <div>Andrew Taylor Still Medallion of Honor</div>

website/app/views/EduAndProExp.tsx

@@ -2,7 +2,7 @@ const EduAndProExp = () => {
   return (
     <section className="min-h-screen" id="eduandproexp">
       <div className="">
-        <div>Education</div>
+        <h2>Education</h2>
         <div>
           <div>Truman State University</div>
           <div>B.S. - Zoology/Chemistry</div>
@@ -22,7 +22,7 @@ const EduAndProExp = () => {
         </div>
       </div>
       <div className="">
-        <div>Professional Experience</div>
+        <h2>Professional Experience</h2>
         <div>
           <div>Feely Center for Optimal Health</div>
           <div>2000-Present</div>

website/app/views/Introduction.tsx

@@ -16,9 +16,7 @@ const Introduction = () => {
           <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">
+                <h1 className="pb-10">Richard A. Feely, DO</h1>
-                  Richard A. Feely, DO
-                </h1>
               </div>
             </div>
             <p className="text-2xl">

website/components/Card.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+interface Props {
+  className?: string;
+  children?: ReactNode;
+}
+
+const Card = ({ className, children }: Props) => {
+  return (
+    <div
+      className={"bg-primary-100 rounded-lg p-10 drop-shadow-2xl " + className}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

website/components/GenericButton.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+interface Props {
+  className?: string;
+  href: string;
+  children?: ReactNode;
+}
+
+const GenericButton = ({ className, href, children }: Props) => {
+  return (
+    <Link
+      href={href}
+      className={
+        "inline-block text-center p-3 m-3 rounded-lg align-middle drop-shadow-md hover:drop-shadow-xl transition-all duration-300 " +
+        className
+      }
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default GenericButton;

website/components/LearnMoreButton.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import GenericButton from "./GenericButton";
+import { ArrowLongRightIcon } from "@heroicons/react/24/solid";
+
+interface Props {
+  className?: string;
+  href: string;
+  children?: ReactNode;
+}
+
+const LearnMoreButton = ({ className, href, children }: Props) => {
+  return (
+    <GenericButton
+      href={href}
+      className={
+        "bg-primary-500 text-primary-100 font-bold hover:bg-secondary-500 my-0 " +
+        className
+      }
+    >
+      {children}{" "}
+      <ArrowLongRightIcon className="w-[24px] inline"></ArrowLongRightIcon>
+    </GenericButton>
+  );
+};
+
+export default LearnMoreButton;

website/components/Navbar/index.tsx

@@ -31,10 +31,10 @@ const Navbar = () => {
   return (
     <nav
       className={
-        "bg-primary-500 text-primary-100 fixed top-0 z-40 w-full " +
+        "bg-primary-500 text-primary-100 fixed top-0 z-40 w-full transition-all " +
         (useSmallNav
-          ? "bg-transparent"
+          ? "bg-transparent pt-5 md:pt-0 duration-100"
-          : "bg-opacity-75 backdrop-blur-sm drop-shadow")
+          : "pt-0 bg-opacity-75 backdrop-blur-sm drop-shadow duration-200 delay-100")
       }
     >
       <div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
@@ -43,14 +43,16 @@ const Navbar = () => {
             src={useSmallNav ? logo_small : logo_small}
             alt="Feely Center Logo"
             className={
-              "drop-shadow-2xl " +
+              "drop-shadow-2xl  transition-all duration-300 " +
               (useSmallNav ? "w-24 md:w-44" : "w-16 md:w-24")
             }
           />
           <div
             className={
-              "font-cormorant text-2xl p-5 " +
+              "font-cormorant text-2xl p-5 whitespace-nowrap transition-all " +
-              (useSmallNav ? "text-transparent select-none" : "")
+              (useSmallNav
+                ? "text-transparent select-none duration-100"
+                : "duration-300 delay-100")
             }
           >
             Richard A. Feely, DO
@@ -81,7 +83,7 @@ const Navbar = () => {
         {/* Nav Bar */}
         <div
           className={
-            "hidden md:flex font-abel items-center gap-6 text-lg text-tertiary-300 " +
+            "hidden md:flex font-abel items-center gap-6 text-lg text-tertiary-300  transition-all duration-300 " +
             (useSmallNav ? "px-5 py-24" : "p-5")
           }
         >

website/components/View.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+interface Props {
+  bg_color: string;
+  txt_color: string;
+  className?: string;
+  children?: ReactNode;
+  id?: string;
+}
+
+const View = ({ bg_color, txt_color, className, children, id }: Props) => {
+  return (
+    <section
+      className={
+        "min-h-screen w-full " + bg_color + " " + txt_color + " " + className
+      }
+      id={id}
+    >
+      <div className="w-11/12 lg:w-5/6 mx-auto py-24">{children}</div>
+    </section>
+  );
+};
+
+export default View;

website/tailwind.config.js

@@ -27,7 +27,6 @@ module.exports = {
       fontFamily: {
         abel: ["Abel", "sans-serif"],
         cormorant: ["Cormorant", "serif"],
-        frankRuhl: ["Frank Ruhl Libre", "serif"],
       },
       screens: {
         lg: "1100px",
@@ -61,6 +60,7 @@ module.exports = {
     },
   },
   plugins: [],
+
   future: {
     hoverOnlyWhenSupported: true,
   },