drfeely.com/app/(pages)/articles/views/ArtsForPatients.tsx

import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import ArtLink from "@/components/ArtLink";
import CenterView from "@/components/CenterView";
import doctorBack from "@/public/content/doctor_back.jpg";
import { default as Image } from "next-image-export-optimizer";
import View from "@/components/View";

const ArtsForPatients = () => {
  return (
    <CenterView
      bg_color="bg-primary-300"
      txt_color="text-primary-500"
      id="forpatients"
    >
      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
        <div className="basis-2/5">
          <Image
            src={doctorBack}
            alt="Doctor looking at a patient's back"
            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
          />
        </div>
        <div className="basis-2/5">
          <h1>
            Articles
            <br />
            For Patients
          </h1>
          <div className="flex flex-col md:flex-row">
            <div>
              <div>
                <h2>General</h2>
                <ul className="mx-3 list-disc">
                  <li>
                    <ArtLink href="/articles/ten-stages-of-grief">
                      The Ten Stages of Grief
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/coccydynia-case-report">
                      Coccydynia Case Report
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/chronic-muscle-pain">
                      Chronic Muscle Pain
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/arthritis-and-exercise">
                      Arthritis and Excercise
                    </ArtLink>
                  </li>
                </ul>
              </div>
              <div>
                <h2>What is Osteopathy?</h2>
                <ul className="mx-3 list-disc">
                  <li>
                    <ArtLink href="/articles/cranial-osteopathy">
                      Cranial Osteopathy
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/cranial-osteopathy-faq">
                      Cranial Osteopathy FAQ
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/intro-to-osteopathy">
                      Introduction to Osteopathy
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/osteopath-comparison-table">
                      Osteopath Comparison Table
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/osteopathic-manipulation-in-pregnancy">
                      Osteopathic Manipulation in Pregnancy
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/osteopathic-manipulative-treatment">
                      Osteopathic Manipulative Treatment
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/osteopathy-faq">
                      Osteopathy FAQ
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/what-is-a-do">
                      What is a D.O.?
                    </ArtLink>
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <div>
                <h2>Pediatric Osteopathy</h2>
                <ul className="mx-3 list-disc">
                  <li>
                    <ArtLink href="/articles/pediatric-digestive-problems">
                      Digestive Problems
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/pediatric-down-syndrome">
                      Down Syndrome
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/pediatric-orthopedic-problems">
                      Orthopedic Problems
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/pediatric-respiratory-health">
                      Respiratory Health
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/pediatric-treatment-for-newborns">
                      Treatment for the Newborn
                    </ArtLink>
                  </li>
                </ul>
              </div>
              <div>
                <h2>Acupuncture</h2>
                <ul className="mx-3 list-disc">
                  <li>
                    <ArtLink href="/articles/acupuncture-basics">
                      Acupuncture Basics
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/acupuncture-history">
                      Acupuncture History
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/ear-acupuncture">
                      Ear Acupuncture
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/ear-acupuncture-faq">
                      Ear Acupuncture FAQ
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/scalp-acupuncture">
                      Scalp Acupuncture
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink href="/articles/yamamoto-new-scalp-acupuncture-faq">
                      Yamamoto New Scalp Acupuncture FAQ{" "}
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/content/patient-resources/scalp_acupuncture.pdf"
                      target="_blank"
                    >
                      Patient Before-and-Afters [PDF]{" "}
                      <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
                    </ArtLink>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </CenterView>
  );
};

export default ArtsForPatients;