osteo and acu done

website/app/(pages)/acupuncture/views/AcuForDocs.tsx

@@ -1,5 +1,8 @@
+import Image from "next/image";
+import LearnMoreLinkLight from "@/components/LearnMoreLinkLight";
 import View from "@/components/View";
-import Link from "next/link";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import ArtLink from "@/components/ArtLink";
 
 const AcuForDocs = () => {
   return (
@@ -7,16 +10,36 @@ const AcuForDocs = () => {
       bg_color="bg-primary-500"
       txt_color="text-primary-100"
       id="acufordocs"
+      className="!min-h-0"
     >
-      <div className="">
+      <div className="flex h-full flex-col items-center justify-around md:flex-row">
-        <div className="">View Dr. Feely's resources for doctors:</div>
+        <div className="basis-2/5 md:text-right">
-        <Link
+          <h1>For Doctors:</h1>
+          <div className="mb-10">
+            <h2>View Dr. Feely's acupuncture resources</h2>
+            <ArtLink
               href="/content/doctor-resources/point-categories.pdf"
               target="_blank"
-          className="block"
+              className="hover:drop-shadow-light"
             >
               Point Categories [PDF]
-        </Link>
+              <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
+            </ArtLink>
+          </div>
+          <div>
+            <h2>Or, learn more by reading his articles</h2>
+            <LearnMoreLinkLight href="/articles#artsfordocs">
+              View all articles for doctors
+            </LearnMoreLinkLight>
+          </div>
+        </div>
+        <div className="basis-2/5">
+          <Image
+            src={""}
+            alt="Image of Emperor Huang Di"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+        </div>
       </div>
     </View>
   );

website/app/(pages)/acupuncture/views/BasicsAndHist.tsx

@@ -1,4 +1,8 @@
+import LearnMoreLinkLight from "@/components/LearnMoreLinkLight";
 import View from "@/components/View";
+import acuManu from "@/public/content/acupuncture_manuscript.jpg";
+import Image from "next/image";
+import acu1 from "@/public/content/acupuncture_1.jpg";
 
 const BasicsAndHist = () => {
   return (
@@ -7,35 +11,63 @@ const BasicsAndHist = () => {
       txt_color="text-primary-100"
       id="basicsandhist"
     >
-      <p>
+      <div className="flex flex-col items-center justify-around md:flex-row">
+        <div className="basis-2/5">
+          <h1 className="text-6xl md:text-7xl">Acupuncture</h1>
+          <div className="my-10">
             Acupuncture, a practice originating in China over 5,000 years ago,
-        diverges from Western paradigms with its emphasis on holistic patterns
+            diverges from Western paradigms with its{" "}
-        and relationships. The French Jesuits introduced acupuncture to Europe
+            <strong>emphasis on holistic patterns and relationships.</strong>{" "}
-        in the 17th Century, but its reception was lukewarm due to the clash
+            The French Jesuits introduced acupuncture to Europe in the 17th
-        between Eastern and Western worldviews. The effectiveness of acupuncture
+            Century, but its reception was lukewarm due to the clash between
-        was long backed by anecdotal evidence until 1976 when controlled
+            Eastern and Western worldviews. The effectiveness of acupuncture was
-        experiments started gaining ground. Today, at least 17 lines of evidence
+            backed only by anecdotal evidence until 1976, when{" "}
-        underscore its impact.
+            <strong>
-      </p>
+              controlled experiments started proving its positive impact.
+            </strong>{" "}
+            Today, at least 17 lines of evidence underscore its healing
+            properties.
+          </div>
+          <LearnMoreLinkLight href="/articles/acupuncture-history">
+            Discover acupuncture's ancient history
+          </LearnMoreLinkLight>
+        </div>
+        <div className="basis-2/5">
+          <Image
+            src={acuManu}
+            alt="Image of Dr. A.T. Still"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+        </div>
+      </div>
 
-      <p>
+      <div className="mt-10 flex flex-col items-center justify-around md:mt-20 md:flex-row">
-        Key developments include acupuncture's introduction to Europe by French
+        <div className="basis-2/5">
-        Jesuits in the 17th Century, where it struggled due to paradigm
+          <Image
-        differences. Its anecdotal effectiveness gave way to scientific scrutiny
+            src={acu1}
-        around 1976, leading to numerous controlled experiments that affirmed
+            alt="Person performing acupuncture"
-        its pain-relieving effects. Acupuncture's basis lies in endorphin
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
-        release, with three main endorphin-releasing sites being identified.
+          />
-      </p>
+        </div>
-
+        <div className="basis-2/5">
-      <p>
+          <h2>Supported by Evidence</h2>
+          <div className="my-10">
             Evidence supporting acupuncture includes experiments with endorphin
             blockers, genetic factors, and physiological pathways. Acupuncture's
-        efficacy stands at approximately 70-80%, with notable outcomes in pain
+            efficacy stands at approximately 70-80%, with{" "}
-        relief, addiction treatment, gastrointestinal disorders, and more.
+            <strong>
-        Across the world, its integration into modern medical practices gained
+              notable outcomes in pain relief, addiction treatment,
-        traction over time, with many physicians incorporating it into their
+              gastrointestinal disorders, and more.
-        treatments.
+            </strong>{" "}
-      </p>
+            Across the world, its integration into modern medical practices
+            gained traction over time, with many physicians incorporating it
+            into their treatments.
+          </div>
+          <LearnMoreLinkLight href="/articles/acupuncture-basics">
+            Read about the basics of acupuncture
+          </LearnMoreLinkLight>
+        </div>
+      </div>
     </View>
   );
 };

website/app/(pages)/acupuncture/views/EarAcupuncture.tsx

@@ -1,39 +1,71 @@
-import View from "@/components/View";
+import CenterView from "@/components/CenterView";
+import LearnMoreLink from "@/components/LearnMoreLink";
+import earAcu1 from "@/public/content/auricular_accupuncture.jpg";
+import Image from "next/image";
 
 const EarAcupuncture = () => {
   return (
-    <View
+    <CenterView
       bg_color="bg-primary-300"
       txt_color="text-primary-500"
       id="earacupuncture"
     >
-      <p>
+      <div className="flex flex-col items-center justify-around md:flex-row">
-        Auriculotherapy utilizes the external ear's auricle to alleviate pain,
+        <div className="basis-2/5">
-        dysfunction, and diseases throughout the body. The ear's auricle is a
+          <Image
-        complete microsystem representing over 200 acupuncture points related to
+            src={earAcu1}
-        vertebrae, nerves, organs, and the central nervous system. Dr. Paul
+            alt="Ear acupuncture"
-        Nogier of France developed the concept of somatic tropic correspondence
+            className="rounded-lg drop-shadow-2xl"
-        in the auricle, building upon ancient Chinese acupuncture practices.
+          />
-      </p>
+        </div>
-
+        <div className="basis-2/5">
-      <p>
+          <h1 className="text-5xl md:text-7xl">Auriculotherapy</h1>
-        Auriculotherapy gained scientific validation through studies like the
+          <div className="my-10">
-        1980 research by Abbot et al., showing endorphinogenic response. Dr.
+            Auriculotherapy utilizes the external ear's auricle to{" "}
-        Nogier's concept of embryological tissue types and hormonal basis formed
+            <strong>alleviate pain, dysfunction, and diseases</strong>{" "}
-        the foundation for understanding auricular points' somatotopic
+            throughout the body. The ear's auricle is a complete microsystem
-        functions. Auriculotherapy's efficacy in pain relief and natural healing
+            representing over 200 acupuncture points related to vertebrae,
-        is demonstrated through increased skin conductivity and Vascular
+            nerves, organs, and the central nervous system. Dr. Paul Nogier of
-        Autonomic Signal (VAS) response.
+            France developed the concept of somatic tropic correspondence in the
-      </p>
+            auricle,{" "}
-
+            <strong>
-      <p>
+              building upon ancient Chinese acupuncture practices.
-        Both body acupuncture and auriculotherapy facilitate natural healing,
+            </strong>
-        with auricular therapy becoming increasingly recognized for its
+          </div>
-        diagnostic and therapeutic potential. Although the practice originated
+          <LearnMoreLink href="/articles/ear-acupuncture">
-        in China, Dr. Nogier's work and further research revolutionized
+            Learn more about ear acupuncture
-        auriculotherapy, making it a powerful tool in modern healthcare.
+          </LearnMoreLink>
-      </p>
+        </div>
-    </View>
+      </div>
+      <div className="mt-10 flex flex-col items-start justify-around md:mt-20 md:flex-row">
+        <div className="basis-2/5">
+          <h2>Mechanism</h2>
+          Both body acupuncture and auriculotherapy{" "}
+          <strong>facilitate natural healing,</strong> with auricular therapy
+          becoming increasingly recognized for its diagnostic and therapeutic
+          potential. Although the practice originated in China, Dr. Nogier's
+          work and further research revolutionized auriculotherapy, making it a
+          powerful tool in modern healthcare.
+        </div>
+        <div className="basis-2/5">
+          <h2>Evidence</h2>
+          Auriculotherapy gained{" "}
+          <strong>
+            scientific validation through studies like the 1980 research by
+            Abbot et al.,
+          </strong>{" "}
+          showing endorphinogenic response. Dr. Nogier's concept of
+          embryological tissue types and hormonal basis formed the foundation
+          for understanding auricular points' somatotopic functions.
+          Auriculotherapy's{" "}
+          <strong>
+            efficacy in pain relief and natural healing HH demonstrated through
+            increased skin conductivity and Vascular Autonkmic Signal (VAS)
+            response.
+          </strong>
+        </div>
+      </div>
+    </CenterView>
   );
 };
 

website/app/(pages)/acupuncture/views/ScalpAcupuncture.tsx

@@ -1,49 +1,82 @@
-import View from "@/components/View";
+import Card from "@/components/Card";
+import CenterView from "@/components/CenterView";
+import LearnMoreLink from "@/components/LearnMoreLink";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
+import Image from "next/image";
 
 const ScalpAcupuncture = () => {
   return (
-    <View
+    <CenterView
       bg_color="bg-primary-100"
       txt_color="text-primary-500"
       id="scalpacupuncture"
     >
-      <p>
+      <div className="flex flex-col items-center justify-around md:flex-row">
+        <div className="basis-2/5">
+          <h1 className="text-6xl md:text-7xl">Scalp Acupuncture</h1>
+          <div className="my-10">
             In 1973, Dr. Toshikatsu Yamamoto introduced Yamamoto New Scalp
             Acupuncture (YNSA) in Miyazaki, Japan. Unlike traditional Chinese
             acupuncture, YNSA is a diagnostic and interactive treatment system
             designed to alleviate somatic and visceral pain and balance Qi.
-        Particularly effective for neurological disorders, YNSA has been used to
+            Particularly effective for neurological disorders, YNSA has been
-        treat conditions like post-CVA, paralysis, aphasia, and more.
+            used to treat conditions like post-CVA, paralysis, aphasia, and
-      </p>
+            more.
+          </div>
+          <LearnMoreLink href="/articles/scalp-acupuncture">
+            Explore YNSA and its efficacy
+          </LearnMoreLink>
+        </div>
+        <div className="basis-2/5">
+          <Image
+            src={""}
+            alt="Image of Dr. Toshikatsu Yamamoto"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+        </div>
+      </div>
 
-      <p>
+      <div className="mt-10 flex flex-col items-start justify-around md:mt-20 md:flex-row">
+        <div className="basis-2/5">
+          <h2>Method</h2>
+          <div className="my-10">
             YNSA employs a distinctive neck diagnostic method, developed by Dr.
-        Yamamoto, to determine meridian dysfunction's Yin/Yang and left/right
+            Yamamoto, to determine meridian dysfunction's Yin/Yang and
-        aspects. Immediate feedback from acupuncture needle placement aids
+            left/right aspects. Immediate feedback from acupuncture needle
-        accurate diagnosis and treatment. I witnessed Dr. Yamamoto's success
+            placement aids accurate diagnosis and treatment. Dr. Feely witnessed
-        firsthand during hospital rounds, where he achieved notable improvements
+            Dr. Yamamoto's success firsthand during hospital rounds, where he
-        in stroke patients using minimal scalp needle placements.
+            achieved notable improvements in stroke patients using minimal scalp
-      </p>
+            needle placements.
+          </div>
 
-      <p>
+          <div className="my-10">
-        This approach's efficacy has led Dr. Feely to integrate Dr. Yamamoto's
+            This approach's efficacy has led Dr. Feely to integrate Dr.
-        methods into his own practice, successfully addressing chronic and
+            Yamamoto's methods into his own practice, successfully addressing
-        injury-related symptoms. The technique's unique diagnostic process and
+            chronic and injury-related symptoms. The technique's unique
-        interactive nature contribute to its success in treating neurological
+            diagnostic process and interactive nature contribute to its success
-        conditions and enhancing patients' well-being.
+            in treating neurological conditions and enhancing patients'
-      </p>
+            well-being.
-
+          </div>
-      <Link
+        </div>
+        <div className="basis-2/5">
+          <Card>
+            <h2>See the results yourself</h2>
+            <div className="my-3">
+              The file below has real patient cases and outcomes. Check it out
+              for yourself and see YNSA in action!
+            </div>
+            <LearnMoreLink
               href="/content/patient-resources/scalp_acupuncture.pdf"
               target="_blank"
               className="block"
             >
-        Patient Before-and-Afters [PDF]{" "}
+              Patient Before-and-Afters [PDF]
-        <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
+              <ArrowTopRightOnSquareIcon className="inline w-[20px] align-[-3px]" />
-      </Link>
+            </LearnMoreLink>
-    </View>
+          </Card>
+        </div>
+      </div>
+    </CenterView>
   );
 };
 

website/app/(pages)/articles/(content)/ear-acupuncture/page.tsx

@@ -37,9 +37,9 @@ const ArticleEarAcupuncture = () => {
       <p>
         All systems of acupuncture began originally in China with the Yellow
         Emperors Classic of Internal Medicine compiled in 500 B.C. In this text,
-        the six yang meridians wereB.C. connected to the auricle of the ear.
+        the six yang meridians were connected to the auricle of the ear. Whereas
-        Whereas the six yin meridians were indirectly connected to the ear by
+        the six yin meridians were indirectly connected to the ear by its
-        its corresponding yang meridian. These ancient Chinese ear acupuncture
+        corresponding yang meridian. These ancient Chinese ear acupuncture
         points were scattered over the auricle of the ear. Ancient Egypt,
         Greece, and Rome between 500 B.C. and 100 A.D.. had recorded clinical
         uses of earring’s and other forms of ear stimulation for various

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

@@ -1,5 +1,4 @@
 "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";
@@ -24,7 +23,7 @@ const ArticlesLayout = ({ children }: Props) => {
   }, []);
 
   return (
-    <div className="mx-auto mt-20 w-11/12 md:w-2/5">
+    <div className="mx-auto mt-20 min-h-screen w-11/12 md:w-2/5">
       <Link href="/articles" className="my-5 block font-bold">
         <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
         View all Articles
@@ -34,7 +33,6 @@ const ArticlesLayout = ({ children }: Props) => {
         <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
         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 ? (
         <></>
       ) : (

website/app/(pages)/articles/views/ArtsForDocs.tsx

@@ -1,6 +1,6 @@
 import View from "@/components/View";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
+import ArtLink from "@/components/ArtLink";
 
 const ArtsForDocs = () => {
   return (
@@ -16,88 +16,112 @@ const ArtsForDocs = () => {
         <h2>Osteopathy</h2>
         <div>
           <h2>Articles</h2>
-          <Link href="/articles/osteopathic-head-pain" className="block">
+          <ArtLink
+            href="/articles/osteopathic-head-pain"
+            className="hover:drop-shadow-light"
+          >
             Head Pain
-          </Link>
+          </ArtLink>
-          <Link href="/articles/neural-biological-mechanisms" className="block">
+          <ArtLink
+            href="/articles/neural-biological-mechanisms"
+            className="hover:drop-shadow-light"
+          >
             Neural Biological Mechanisms
-          </Link>
+          </ArtLink>
-          <Link
+          <ArtLink
             href="/articles/intervertebral-disc-herniation"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             The Basics of Intervertebral Disc Herniation
-          </Link>
+          </ArtLink>
-          <Link href="/articles/cranial-manipulation" className="block">
+          <ArtLink
+            href="/articles/cranial-manipulation"
+            className="hover:drop-shadow-light"
+          >
             Cranial Manipulation
-          </Link>
+          </ArtLink>
-          <Link href="/articles/the-trauma-of-birth" className="block">
+          <ArtLink
+            href="/articles/the-trauma-of-birth"
+            className="hover:drop-shadow-light"
+          >
             The Trauma of Birth
-          </Link>
+          </ArtLink>
         </div>
         <div>
           <h2>Resources</h2>
-          <Link
+          <ArtLink
             href="/articles/feelys-osteopathic-dictionary"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             Feely's Abridged Osteopathic Dictionary
-          </Link>
+          </ArtLink>
-          <Link href="/articles/omt-codes" className="block">
+          <ArtLink
+            href="/articles/omt-codes"
+            className="hover:drop-shadow-light"
+          >
             OMT Codes
-          </Link>
+          </ArtLink>
-          <Link
+          <ArtLink
             href="/content/doctor-resources/drg_omt_chart.pdf"
             target="_blank"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             DRG/OMT Chart [PDF]{" "}
             <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
-          </Link>
+          </ArtLink>
         </div>
       </div>
       <div>
         <h2>Acupuncture</h2>
         <div>
           <h2>Articles</h2>
-          <Link href="/articles/five-element-acupuncture" className="block">
+          <ArtLink
+            href="/articles/five-element-acupuncture"
+            className="hover:drop-shadow-light"
+          >
             Five Element Acupuncture
-          </Link>
+          </ArtLink>
-          <Link href="/articles/acupuncture-letter" className="block">
+          <ArtLink
+            href="/articles/acupuncture-letter"
+            className="hover:drop-shadow-light"
+          >
             Acupuncture Letter
-          </Link>
+          </ArtLink>
         </div>
         <div>
           <h2>Resources</h2>
-          <Link
+          <ArtLink
             href="/content/doctor-resources/point-categories.pdf"
             target="_blank"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             Point Categories [PDF]{" "}
             <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
-          </Link>
+          </ArtLink>
-          <Link
+          <ArtLink
             href="/articles/international-acupuncture-bibliography"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             International Acupuncture Bibliography
-          </Link>
+          </ArtLink>
-          <Link href="/articles/acupuncture-references" className="block">
+          <ArtLink
+            href="/articles/acupuncture-references"
+            className="hover:drop-shadow-light"
+          >
             Acupuncture References
-          </Link>
+          </ArtLink>
         </div>
       </div>
       <div>
         <h2>Neuro Ocular Release</h2>
-        <Link
+        <ArtLink
           href="/content/doctor-resources/nor_article.pdf"
           target="_blank"
-          className="block"
+          className="hover:drop-shadow-light"
         >
           Neuro-Ocular Release: A New Osteopathic Technique [PDF]{" "}
           <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
-        </Link>
+        </ArtLink>
       </div>
     </View>
   );

website/app/(pages)/articles/views/ArtsForPatients.tsx

@@ -1,6 +1,6 @@
 import View from "@/components/View";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
+import ArtLink from "@/components/ArtLink";
 
 const ArtsForPatients = () => {
   return (
@@ -15,104 +15,83 @@ const ArtsForPatients = () => {
       </h1>
       <div>
         <h2>General</h2>
-        <Link href="/articles/ten-stages-of-grief" className="block">
+        <ArtLink href="/articles/ten-stages-of-grief">
           The Ten Stages of Grief
-        </Link>
+        </ArtLink>
-        <Link href="/articles/coccydynia-case-report" className="block">
+        <ArtLink href="/articles/coccydynia-case-report">
           Coccydynia Case Report
-        </Link>
+        </ArtLink>
-        <Link href="/articles/chronic-muscle-pain" className="block">
+        <ArtLink href="/articles/chronic-muscle-pain">
           Chronic Muscle Pain
-        </Link>
+        </ArtLink>
-        <Link href="/articles/arthritis-and-exercise" className="block">
+        <ArtLink href="/articles/arthritis-and-exercise">
           Arthritis and Excercise
-        </Link>
+        </ArtLink>
       </div>
       <div>
         <h2>What is Osteopathy?</h2>
-        <Link href="/articles/cranial-osteopathy" className="block">
+        <ArtLink href="/articles/cranial-osteopathy">
           Cranial Osteopathy
-        </Link>
+        </ArtLink>
-        <Link href="/articles/cranial-osteopathy-faq" className="block">
+        <ArtLink href="/articles/cranial-osteopathy-faq">
           Cranial Osteopathy FAQ
-        </Link>
+        </ArtLink>
-        <Link href="/articles/intro-to-osteopathy" className="block">
+        <ArtLink href="/articles/intro-to-osteopathy">
           Introduction to Osteopathy
-        </Link>
+        </ArtLink>
-        <Link href="/articles/osteopath-comparison-table" className="block">
+        <ArtLink href="/articles/osteopath-comparison-table">
           Osteopath Comparison Table
-        </Link>
+        </ArtLink>
-        <Link
+        <ArtLink href="/articles/osteopathic-manipulation-in-pregnancy">
-          href="/articles/osteopathic-manipulation-in-pregnancy"
-          className="block"
-        >
           Osteopathic Manipulation in Pregnancy
-        </Link>
+        </ArtLink>
-        <Link
+        <ArtLink href="/articles/osteopathic-manipulative-treatment">
-          href="/articles/osteopathic-manipulative-treatment"
-          className="block"
-        >
           Osteopathic Manipulative Treatment
-        </Link>
+        </ArtLink>
-        <Link href="/articles/osteopathy-faq" className="block">
+        <ArtLink href="/articles/osteopathy-faq">Osteopathy FAQ</ArtLink>
-          Osteopathy FAQ
+        <ArtLink href="/articles/what-is-a-do">What is a D.O.?</ArtLink>
-        </Link>
-        <Link href="/articles/what-is-a-do" className="block">
-          What is a D.O.?
-        </Link>
       </div>
       <div>
         <h2>Pediatric Osteopathy</h2>
-        <Link href="/articles/pediatric-digestive-problems" className="block">
+        <ArtLink href="/articles/pediatric-digestive-problems">
           Digestive Problems
-        </Link>
+        </ArtLink>
-        <Link href="/articles/pediatric-down-syndrome" className="block">
+        <ArtLink href="/articles/pediatric-down-syndrome">
           Down Syndrome
-        </Link>
+        </ArtLink>
-        <Link href="/articles/pediatric-orthopedic-problems" className="block">
+        <ArtLink href="/articles/pediatric-orthopedic-problems">
           Orthopedic Problems
-        </Link>
+        </ArtLink>
-        <Link href="/articles/pediatric-respiratory-health" className="block">
+        <ArtLink href="/articles/pediatric-respiratory-health">
           Respiratory Health
-        </Link>
+        </ArtLink>
-        <Link
+        <ArtLink href="/articles/pediatric-treatment-for-newborns">
-          href="/articles/pediatric-treatment-for-newborns"
-          className="block"
-        >
           Treatment for the Newborn
-        </Link>
+        </ArtLink>
       </div>
       <div>
         <h2>Acupuncture</h2>
-        <Link href="/articles/acupuncture-basics" className="block">
+        <ArtLink href="/articles/acupuncture-basics">
           Acupuncture Basics
-        </Link>
+        </ArtLink>
-        <Link href="/articles/acupuncture-history" className="block">
+        <ArtLink href="/articles/acupuncture-history">
           Acupuncture History
-        </Link>
+        </ArtLink>
-        <Link href="/articles/ear-acupuncture" className="block">
+        <ArtLink href="/articles/ear-acupuncture">Ear Acupuncture</ArtLink>
-          Ear Acupuncture
+        <ArtLink href="/articles/ear-acupuncture-faq">
-        </Link>
-        <Link href="/articles/ear-acupuncture-faq" className="block">
           Ear Acupuncture FAQ
-        </Link>
+        </ArtLink>
-        <Link href="/articles/scalp-acupuncture" className="block">
+        <ArtLink href="/articles/scalp-acupuncture">Scalp Acupuncture</ArtLink>
-          Scalp Acupuncture
+        <ArtLink href="/articles/yamamoto-new-scalp-acupuncture-faq">
-        </Link>
-        <Link
-          href="/articles/yamamoto-new-scalp-acupuncture-faq"
-          className="block"
-        >
           Yamamoto New Scalp Acupuncture FAQ{" "}
-        </Link>
+        </ArtLink>
-        <Link
+        <ArtLink
           href="/content/patient-resources/scalp_acupuncture.pdf"
           target="_blank"
-          className="block"
         >
           Patient Before-and-Afters [PDF]{" "}
           <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
-        </Link>
+        </ArtLink>
       </div>
     </View>
   );

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

@@ -1,4 +1,8 @@
 import View from "@/components/View";
+import Image from "next/image";
+import drStill from "@/public/content/dr_still.jpeg";
+import Card from "@/components/Card";
+import LearnMoreLink from "@/components/LearnMoreLink";
 
 const OsteoBasics = () => {
   return (
@@ -7,54 +11,96 @@ const OsteoBasics = () => {
       txt_color="text-primary-500"
       id="osteobasics"
     >
-      <p>
+      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
-        Osteopathic Medicine finds its roots in the pioneering work of Dr.
+        <div className="basis-2/5">
-        Andrew Taylor Still, who challenged the medical practices of his time.
+          <Image
-        In 1874, Dr. Still developed a groundbreaking philosophy that viewed the
+            src={drStill}
-        body as an interconnected unit, where all its systems work harmoniously
+            alt="Dr. A.T. Still"
-        to maintain health. This idea was revolutionary, as it diverged from the
+            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
-        prevailing notion of treating diseases in isolation. Dr. Still
+          />
-        emphasized the significance of the musculoskeletal system, recognizing
+          <div className="mt-2 text-center text-base italic">
-        that structural imbalances could lead to dysfunction and illness. His
+            Dr. A.T. Still
-        philosophy laid the groundwork for the modern practice of Osteopathic
+          </div>
-        Medicine, which continues to evolve and adapt to contemporary medical
+        </div>
+        <div className="basis-2/5">
+          <h1>Osteopathy</h1>
+          <div className="my-10">
+            Osteopathic Medicine finds its roots in the pioneering work of{" "}
+            <strong>Dr. Andrew Taylor Still</strong>, who challenged the medical
+            practices of his time. In 1874, Dr. Still developed a groundbreaking
+            philosophy that viewed the{" "}
+            <strong>body as an interconnected unit,</strong> where all its
+            systems work harmoniously to maintain health. This idea was
+            revolutionary, as it diverged from the prevailing notion of treating
+            diseases in isolation. Dr. Still emphasized the significance of the
+            musculoskeletal system, recognizing that structural imbalances could
+            lead to dysfunction and illness. His philosophy{" "}
+            <strong>
+              laid the groundwork for the modern practice of Osteopathic
+              Medicine,
+            </strong>{" "}
+            which continues to evolve and adapt to contemporary medical
             knowledge.
-      </p>
+          </div>
+          <LearnMoreLink href="/articles/intro-to-osteopathy">
+            Explore the basics of osteopathy
+          </LearnMoreLink>
+        </div>
+      </div>
 
-      <p>
+      <div className="mt-16">
-        Osteopathic Medicine today embraces a holistic approach that encompasses
+        <h2>Fundamental Osteopathic Principles</h2>
-        several fundamental principles:
+        <div className="grid grid-rows-4 gap-4 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-4 lg:grid-rows-1">
-      </p>
+          <Card>
-      <p>
+            <h2>The Body as a Unit</h2>
-        <strong>The Body as a Unit:</strong> Unlike traditional medicine, which
+            <div>
-        often focuses on isolated symptoms, Osteopathic Medicine views the body
+              Unlike traditional medicine, which often focuses on isolated
-        as a unified entity. Each system influences and interacts with the
+              symptoms, Osteopathic Medicine views the body as a unified entity.
-        others, emphasizing the importance of considering the whole person.
+              Each system influences and interacts with the others, emphasizing
-      </p>
+              the importance of considering the whole person.
-      <p>
+            </div>
-        <strong>Reciprocal Relationship of Structure and Function:</strong>{" "}
+          </Card>
-        Osteopathy recognizes that structural abnormalities can affect bodily
+          <Card>
-        functions, and vice versa. This understanding guides Osteopathic
+            <h2>Reciprocal Relationship of Structure and Function</h2>
-        Physicians in diagnosing and treating not just symptoms, but underlying
+            <div>
-        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
-        <strong>Self-Regulating Mechanisms:</strong> The body possesses its own
+              symptoms, but underlying causes.
-        mechanisms for maintaining health and balance. Osteopathic Physicians
+            </div>
-        trust in the body's innate ability to heal and regulate itself, and they
+          </Card>
-        work to support and enhance these mechanisms.
+          <Card>
-      </p>
+            <h2>Self-Regulating Mechanisms</h2>
-      <p>
+            <div>
-        <strong>Rational Therapy:</strong> Osteopathic Physicians base their
+              The body possesses its own mechanisms for maintaining health and
-        treatments on a profound understanding of anatomy, physiology, and
+              balance. Osteopathic Physicians trust in the body's innate ability
-        pathology. This knowledge allows them to provide targeted and effective
+              to heal and regulate itself, and they work to support and enhance
-        care.
+              these mechanisms.
-      </p>
+            </div>
-      <p>
+          </Card>
+          <Card>
+            <h2>Rational Therapy</h2>
+            <div>
+              Osteopathic Physicians base their treatments on a profound
+              understanding of anatomy, physiology, and pathology. This
+              knowledge allows them to provide targeted and effective care.
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      <div className="mx-auto mt-20 md:w-2/5">
+        <div className="my-10 text-center font-bold">
           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 className="flex w-full justify-center">
+          <LearnMoreLink href="/articles/osteopathic-manipulative-treatment">
+            Learn more about osteopathic treatment
+          </LearnMoreLink>
+        </div>
+      </div>
     </View>
   );
 };

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

@@ -1,5 +1,9 @@
 import View from "@/components/View";
-import Link from "next/link";
+import drStill2 from "@/public/content/dr_still_2.jpg";
+import Image from "next/image";
+import ArtLink from "@/components/ArtLink";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import LearnMoreLinkLight from "@/components/LearnMoreLinkLight";
 
 const OsteoForDocs = () => {
   return (
@@ -7,25 +11,48 @@ const OsteoForDocs = () => {
       bg_color="bg-primary-500"
       txt_color="text-primary-100"
       id="osteofordocs"
+      className="!min-h-0"
+    >
+      <div className="flex h-full flex-col items-center justify-around md:flex-row">
+        <div className="basis-2/5 md:text-right">
+          <h1>For Doctors:</h1>
+          <div className="mb-10">
+            <h2>View Dr. Feely's osteopathy resources</h2>
+            <ArtLink
+              href="/articles/feelys-osteopathic-dictionary"
+              className="hover:drop-shadow-light"
             >
-      <div className="">
-        <div className="">View Dr. Feely's resources for doctors:</div>
-        <Link href="/articles/feelys-osteopathic-dictionary" className="block">
               Feely's Abridged Osteopathic Dictionary
-        </Link>
+            </ArtLink>
-        <Link href="/articles/omt-codes" className="block">
+            <ArtLink
+              href="/articles/omt-codes"
+              className="hover:drop-shadow-light"
+            >
               OMT Codes
-        </Link>
+            </ArtLink>
-        <Link
+            <ArtLink
               href="/content/doctor-resources/drg_omt_chart.pdf"
               target="_blank"
-          className="block"
+              className="hover:drop-shadow-light"
             >
-          DRG/OMT Chart [PDF]
+              DRG/OMT Chart [PDF]{" "}
-        </Link>
+              <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
+            </ArtLink>
+          </div>
+          <div>
+            <h2>Or, learn more by reading his articles</h2>
+            <LearnMoreLinkLight href="/articles#artsfordocs">
+              View all articles for doctors
+            </LearnMoreLinkLight>
+          </div>
+        </div>
+        <div className="basis-2/5">
+          <Image
+            src={drStill2}
+            alt="Image of Dr. A.T. Still"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
         </div>
-      <div className="">
-        Or, learn more by reading his articles for doctors:
       </div>
     </View>
   );

website/components/ArtLink.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+const ArtLink = (props: any) => {
+  return (
+    <div>
+      <Link
+        {...props}
+        className={
+          "underline transition-all duration-300 hover:drop-shadow " +
+          props.className
+        }
+      >
+        {props.children}
+      </Link>
+    </div>
+  );
+};
+
+export default ArtLink;

website/components/Article.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const Article = ({ title, author, children }: Props) => {
   return (
-    <article className="ArticleContent min-h-[58.4vh]">
+    <article className="ArticleContent">
       <h1>{title}</h1>
       <h6>{author}</h6>
       {children}

website/components/CenterView.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+interface Props {
+  bg_color: string;
+  txt_color: string;
+  className?: string;
+  children?: ReactNode;
+  id?: string;
+}
+
+const CenterView = ({
+  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="mx-auto flex min-h-screen w-11/12 flex-row items-center lg:w-5/6">
+        <div className="py-24">{children}</div>
+      </div>
+    </section>
+  );
+};
+
+export default CenterView;

website/components/LearnMoreLinkLight.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { ArrowLongRightIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
+
+interface Props {
+  className?: string;
+  href: string;
+  target?: string;
+  children?: ReactNode;
+}
+
+const LearnMoreLinkLight = ({ className, href, target, children }: Props) => {
+  return (
+    <Link
+      target={target}
+      href={href}
+      className={
+        "drop-shadow-blue-md-md hover:drop-shadow-blue-xl m-3 my-0 inline-block rounded-lg bg-primary-300 p-3 text-center align-middle font-bold text-primary-500 transition-all duration-300 hover:bg-primary-100 " +
+        className
+      }
+    >
+      {children}{" "}
+      <ArrowLongRightIcon className="inline w-[24px]"></ArrowLongRightIcon>
+    </Link>
+  );
+};
+
+export default LearnMoreLinkLight;

website/tailwind.config.js

@@ -9,6 +9,20 @@ module.exports = {
   ],
   theme: {
     extend: {
+      dropShadow: {
+        light: [
+          "0 1px 2px rgba(242, 248, 255, 0.2)",
+          "0 1px 1px rgba(242, 248, 255, 0.15)",
+        ],
+        "blue-md": [
+          "0 4px 3px rgba(169, 184, 204, 0.07)",
+          "0 2px 2px rgba(169, 184, 204, 0.06)",
+        ],
+        "blue-xl": [
+          "0 20px 13px rgba(169, 184, 204, 0.03)",
+          "0 8px 5px rgba(169, 184, 204, 0.08)",
+        ],
+      },
       colors: {
         primary: {
           500: "#202948",