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="">View Dr. Feely's resources for doctors:</div>
-        <Link
-          href="/content/doctor-resources/point-categories.pdf"
-          target="_blank"
-          className="block"
-        >
-          Point Categories [PDF]
-        </Link>
+      <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 acupuncture resources</h2>
+            <ArtLink
+              href="/content/doctor-resources/point-categories.pdf"
+              target="_blank"
+              className="hover:drop-shadow-light"
+            >
+              Point Categories [PDF]
+              <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>
-        Acupuncture, a practice originating in China over 5,000 years ago,
-        diverges from Western paradigms with its emphasis on holistic patterns
-        and relationships. The French Jesuits introduced acupuncture to Europe
-        in the 17th Century, but its reception was lukewarm due to the clash
-        between Eastern and Western worldviews. The effectiveness of acupuncture
-        was long backed by anecdotal evidence until 1976 when controlled
-        experiments started gaining ground. Today, at least 17 lines of evidence
-        underscore its impact.
-      </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{" "}
+            <strong>emphasis on holistic patterns and relationships.</strong>{" "}
+            The French Jesuits introduced acupuncture to Europe in the 17th
+            Century, but its reception was lukewarm due to the clash between
+            Eastern and Western worldviews. The effectiveness of acupuncture was
+            backed only by anecdotal evidence until 1976, when{" "}
+            <strong>
+              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>
-        Key developments include acupuncture's introduction to Europe by French
-        Jesuits in the 17th Century, where it struggled due to paradigm
-        differences. Its anecdotal effectiveness gave way to scientific scrutiny
-        around 1976, leading to numerous controlled experiments that affirmed
-        its pain-relieving effects. Acupuncture's basis lies in endorphin
-        release, with three main endorphin-releasing sites being identified.
-      </p>
-
-      <p>
-        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
-        relief, addiction treatment, gastrointestinal disorders, and more.
-        Across the world, its integration into modern medical practices gained
-        traction over time, with many physicians incorporating it into their
-        treatments.
-      </p>
+      <div className="mt-10 flex flex-col items-center justify-around md:mt-20 md:flex-row">
+        <div className="basis-2/5">
+          <Image
+            src={acu1}
+            alt="Person performing acupuncture"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+        </div>
+        <div className="basis-2/5">
+          <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{" "}
+            <strong>
+              notable outcomes in pain relief, addiction treatment,
+              gastrointestinal disorders, and more.
+            </strong>{" "}
+            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>
-        Auriculotherapy utilizes the external ear's auricle to alleviate pain,
-        dysfunction, and diseases throughout the body. The ear's auricle is a
-        complete microsystem representing over 200 acupuncture points related to
-        vertebrae, nerves, organs, and the central nervous system. Dr. Paul
-        Nogier of France developed the concept of somatic tropic correspondence
-        in the auricle, building upon ancient Chinese acupuncture practices.
-      </p>
-
-      <p>
-        Auriculotherapy gained scientific validation through studies like the
-        1980 research by Abbot et al., 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 efficacy in pain relief and natural healing
-        is demonstrated through increased skin conductivity and Vascular
-        Autonomic Signal (VAS) response.
-      </p>
-
-      <p>
-        Both body acupuncture and auriculotherapy facilitate natural healing,
-        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.
-      </p>
-    </View>
+      <div className="flex flex-col items-center justify-around md:flex-row">
+        <div className="basis-2/5">
+          <Image
+            src={earAcu1}
+            alt="Ear acupuncture"
+            className="rounded-lg drop-shadow-2xl"
+          />
+        </div>
+        <div className="basis-2/5">
+          <h1 className="text-5xl md:text-7xl">Auriculotherapy</h1>
+          <div className="my-10">
+            Auriculotherapy utilizes the external ear's auricle to{" "}
+            <strong>alleviate pain, dysfunction, and diseases</strong>{" "}
+            throughout the body. The ear's auricle is a complete microsystem
+            representing over 200 acupuncture points related to vertebrae,
+            nerves, organs, and the central nervous system. Dr. Paul Nogier of
+            France developed the concept of somatic tropic correspondence in the
+            auricle,{" "}
+            <strong>
+              building upon ancient Chinese acupuncture practices.
+            </strong>
+          </div>
+          <LearnMoreLink href="/articles/ear-acupuncture">
+            Learn more about ear acupuncture
+          </LearnMoreLink>
+        </div>
+      </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>
-        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
-        treat conditions like post-CVA, paralysis, aphasia, and more.
-      </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 treat conditions like post-CVA, paralysis, aphasia, and
+            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>
-        YNSA employs a distinctive neck diagnostic method, developed by Dr.
-        Yamamoto, to determine meridian dysfunction's Yin/Yang and left/right
-        aspects. Immediate feedback from acupuncture needle placement aids
-        accurate diagnosis and treatment. I witnessed Dr. Yamamoto's success
-        firsthand during hospital rounds, where he achieved notable improvements
-        in stroke patients using minimal scalp needle placements.
-      </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 aspects. Immediate feedback from acupuncture needle
+            placement aids accurate diagnosis and treatment. Dr. Feely witnessed
+            Dr. Yamamoto's success firsthand during hospital rounds, where he
+            achieved notable improvements in stroke patients using minimal scalp
+            needle placements.
+          </div>
 
-      <p>
-        This approach's efficacy has led Dr. Feely to integrate Dr. Yamamoto's
-        methods into his own practice, successfully addressing chronic and
-        injury-related symptoms. The technique's unique diagnostic process and
-        interactive nature contribute to its success in treating neurological
-        conditions and enhancing patients' well-being.
-      </p>
-
-      <Link
-        href="/content/patient-resources/scalp_acupuncture.pdf"
-        target="_blank"
-        className="block"
-      >
-        Patient Before-and-Afters [PDF]{" "}
-        <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
-      </Link>
-    </View>
+          <div className="my-10">
+            This approach's efficacy has led Dr. Feely to integrate Dr.
+            Yamamoto's methods into his own practice, successfully addressing
+            chronic and injury-related symptoms. The technique's unique
+            diagnostic process and interactive nature contribute to its success
+            in treating neurological conditions and enhancing patients'
+            well-being.
+          </div>
+        </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]
+              <ArrowTopRightOnSquareIcon className="inline w-[20px] align-[-3px]" />
+            </LearnMoreLink>
+          </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.
-        Whereas the six yin meridians were indirectly connected to the ear by
-        its corresponding yang meridian. These ancient Chinese ear acupuncture
+        the six yang meridians were connected to the auricle of the ear. Whereas
+        the six yin meridians were indirectly connected to the ear by its
+        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>
-          <Link href="/articles/neural-biological-mechanisms" className="block">
+          </ArtLink>
+          <ArtLink
+            href="/articles/neural-biological-mechanisms"
+            className="hover:drop-shadow-light"
+          >
             Neural Biological Mechanisms
-          </Link>
-          <Link
+          </ArtLink>
+          <ArtLink
             href="/articles/intervertebral-disc-herniation"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             The Basics of Intervertebral Disc Herniation
-          </Link>
-          <Link href="/articles/cranial-manipulation" className="block">
+          </ArtLink>
+          <ArtLink
+            href="/articles/cranial-manipulation"
+            className="hover:drop-shadow-light"
+          >
             Cranial Manipulation
-          </Link>
-          <Link href="/articles/the-trauma-of-birth" className="block">
+          </ArtLink>
+          <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>
-          <Link href="/articles/omt-codes" className="block">
+          </ArtLink>
+          <ArtLink
+            href="/articles/omt-codes"
+            className="hover:drop-shadow-light"
+          >
             OMT Codes
-          </Link>
-          <Link
+          </ArtLink>
+          <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>
-          <Link href="/articles/acupuncture-letter" className="block">
+          </ArtLink>
+          <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>
-          <Link
+          </ArtLink>
+          <ArtLink
             href="/articles/international-acupuncture-bibliography"
-            className="block"
+            className="hover:drop-shadow-light"
           >
             International Acupuncture Bibliography
-          </Link>
-          <Link href="/articles/acupuncture-references" className="block">
+          </ArtLink>
+          <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>
-        <Link href="/articles/coccydynia-case-report" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/coccydynia-case-report">
           Coccydynia Case Report
-        </Link>
-        <Link href="/articles/chronic-muscle-pain" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/chronic-muscle-pain">
           Chronic Muscle Pain
-        </Link>
-        <Link href="/articles/arthritis-and-exercise" className="block">
+        </ArtLink>
+        <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>
-        <Link href="/articles/cranial-osteopathy-faq" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/cranial-osteopathy-faq">
           Cranial Osteopathy FAQ
-        </Link>
-        <Link href="/articles/intro-to-osteopathy" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/intro-to-osteopathy">
           Introduction to Osteopathy
-        </Link>
-        <Link href="/articles/osteopath-comparison-table" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/osteopath-comparison-table">
           Osteopath Comparison Table
-        </Link>
-        <Link
-          href="/articles/osteopathic-manipulation-in-pregnancy"
-          className="block"
-        >
+        </ArtLink>
+        <ArtLink href="/articles/osteopathic-manipulation-in-pregnancy">
           Osteopathic Manipulation in Pregnancy
-        </Link>
-        <Link
-          href="/articles/osteopathic-manipulative-treatment"
-          className="block"
-        >
+        </ArtLink>
+        <ArtLink href="/articles/osteopathic-manipulative-treatment">
           Osteopathic Manipulative Treatment
-        </Link>
-        <Link href="/articles/osteopathy-faq" className="block">
-          Osteopathy FAQ
-        </Link>
-        <Link href="/articles/what-is-a-do" className="block">
-          What is a D.O.?
-        </Link>
+        </ArtLink>
+        <ArtLink href="/articles/osteopathy-faq">Osteopathy FAQ</ArtLink>
+        <ArtLink href="/articles/what-is-a-do">What is a D.O.?</ArtLink>
       </div>
       <div>
         <h2>Pediatric Osteopathy</h2>
-        <Link href="/articles/pediatric-digestive-problems" className="block">
+        <ArtLink href="/articles/pediatric-digestive-problems">
           Digestive Problems
-        </Link>
-        <Link href="/articles/pediatric-down-syndrome" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/pediatric-down-syndrome">
           Down Syndrome
-        </Link>
-        <Link href="/articles/pediatric-orthopedic-problems" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/pediatric-orthopedic-problems">
           Orthopedic Problems
-        </Link>
-        <Link href="/articles/pediatric-respiratory-health" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/pediatric-respiratory-health">
           Respiratory Health
-        </Link>
-        <Link
-          href="/articles/pediatric-treatment-for-newborns"
-          className="block"
-        >
+        </ArtLink>
+        <ArtLink href="/articles/pediatric-treatment-for-newborns">
           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>
-        <Link href="/articles/acupuncture-history" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/acupuncture-history">
           Acupuncture History
-        </Link>
-        <Link href="/articles/ear-acupuncture" className="block">
-          Ear Acupuncture
-        </Link>
-        <Link href="/articles/ear-acupuncture-faq" className="block">
+        </ArtLink>
+        <ArtLink href="/articles/ear-acupuncture">Ear Acupuncture</ArtLink>
+        <ArtLink href="/articles/ear-acupuncture-faq">
           Ear Acupuncture FAQ
-        </Link>
-        <Link href="/articles/scalp-acupuncture" className="block">
-          Scalp Acupuncture
-        </Link>
-        <Link
-          href="/articles/yamamoto-new-scalp-acupuncture-faq"
-          className="block"
-        >
+        </ArtLink>
+        <ArtLink href="/articles/scalp-acupuncture">Scalp Acupuncture</ArtLink>
+        <ArtLink href="/articles/yamamoto-new-scalp-acupuncture-faq">
           Yamamoto New Scalp Acupuncture FAQ{" "}
-        </Link>
-        <Link
+        </ArtLink>
+        <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>
-        Osteopathic Medicine finds its roots in the pioneering work of Dr.
-        Andrew Taylor Still, who challenged the medical practices of his time.
-        In 1874, Dr. Still developed a groundbreaking philosophy that viewed the
-        body as an interconnected unit, 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 laid the groundwork for the modern practice of Osteopathic
-        Medicine, which continues to evolve and adapt to contemporary medical
-        knowledge.
-      </p>
+      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
+        <div className="basis-2/5">
+          <Image
+            src={drStill}
+            alt="Dr. A.T. Still"
+            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+          <div className="mt-2 text-center text-base italic">
+            Dr. A.T. Still
+          </div>
+        </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.
+          </div>
+          <LearnMoreLink href="/articles/intro-to-osteopathy">
+            Explore the basics of osteopathy
+          </LearnMoreLink>
+        </div>
+      </div>
 
-      <p>
-        Osteopathic Medicine today embraces a holistic approach that encompasses
-        several fundamental principles:
-      </p>
-      <p>
-        <strong>The Body as a Unit:</strong> Unlike traditional medicine, which
-        often focuses on isolated symptoms, Osteopathic Medicine views the body
-        as a unified entity. Each system influences and interacts with the
-        others, emphasizing the importance of considering the whole person.
-      </p>
-      <p>
-        <strong>Reciprocal Relationship of Structure and Function:</strong>{" "}
-        Osteopathy recognizes that structural abnormalities can affect bodily
-        functions, and vice versa. This understanding guides Osteopathic
-        Physicians in diagnosing and treating not just symptoms, but underlying
-        causes.
-      </p>
-      <p>
-        <strong>Self-Regulating Mechanisms:</strong> The body possesses its own
-        mechanisms for maintaining health and balance. Osteopathic Physicians
-        trust in the body's innate ability to heal and regulate itself, and they
-        work to support and enhance these mechanisms.
-      </p>
-      <p>
-        <strong>Rational Therapy:</strong> Osteopathic Physicians base their
-        treatments on a profound understanding of anatomy, physiology, and
-        pathology. This knowledge allows them to provide targeted and effective
-        care.
-      </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 className="mt-16">
+        <h2>Fundamental Osteopathic Principles</h2>
+        <div className="grid grid-rows-4 gap-4 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-4 lg:grid-rows-1">
+          <Card>
+            <h2>The Body as a Unit</h2>
+            <div>
+              Unlike traditional medicine, which often focuses on isolated
+              symptoms, Osteopathic Medicine views the body as a unified entity.
+              Each system influences and interacts with the others, emphasizing
+              the importance of considering the whole person.
+            </div>
+          </Card>
+          <Card>
+            <h2>Reciprocal Relationship of Structure and Function</h2>
+            <div>
+              Osteopathy recognizes that structural abnormalities can affect
+              bodily functions, and vice versa. This understanding guides
+              Osteopathic Physicians in diagnosing and treating not just
+              symptoms, but underlying causes.
+            </div>
+          </Card>
+          <Card>
+            <h2>Self-Regulating Mechanisms</h2>
+            <div>
+              The body possesses its own mechanisms for maintaining health and
+              balance. Osteopathic Physicians trust in the body's innate ability
+              to heal and regulate itself, and they work to support and enhance
+              these mechanisms.
+            </div>
+          </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.
+        </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="">
-        <div className="">View Dr. Feely's resources for doctors:</div>
-        <Link href="/articles/feelys-osteopathic-dictionary" className="block">
-          Feely's Abridged Osteopathic Dictionary
-        </Link>
-        <Link href="/articles/omt-codes" className="block">
-          OMT Codes
-        </Link>
-        <Link
-          href="/content/doctor-resources/drg_omt_chart.pdf"
-          target="_blank"
-          className="block"
-        >
-          DRG/OMT Chart [PDF]
-        </Link>
-      </div>
-      <div className="">
-        Or, learn more by reading his articles for doctors:
+      <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"
+            >
+              Feely's Abridged Osteopathic Dictionary
+            </ArtLink>
+            <ArtLink
+              href="/articles/omt-codes"
+              className="hover:drop-shadow-light"
+            >
+              OMT Codes
+            </ArtLink>
+            <ArtLink
+              href="/content/doctor-resources/drg_omt_chart.pdf"
+              target="_blank"
+              className="hover:drop-shadow-light"
+            >
+              DRG/OMT Chart [PDF]{" "}
+              <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>
     </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",