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

import View from "@/components/View";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import ArtLink from "@/components/ArtLink";
import CenterView from "@/components/CenterView";
import docWithClip from "@/public/content/doctor_w_clipboard.jpg";
import Image from "next/image";

const ArtsForDocs = () => {
  return (
    <CenterView
      bg_color="bg-primary-500"
      txt_color="text-primary-100"
      id="artsfordocs"
    >
      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
        <div className="basis-2/5">
          <h1>For Doctors</h1>
          <div className="flex flex-col md:flex-row">
            <div>
              <h2>Osteopathy</h2>
              <div className="mx-3 my-5">
                <div className="font-bold">Articles</div>
                <ul className="mx-3 list-disc marker:text-primary-100">
                  <li>
                    <ArtLink
                      href="/articles/osteopathic-head-pain"
                      className="hover:drop-shadow-light"
                    >
                      Head Pain
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/neural-biological-mechanisms"
                      className="hover:drop-shadow-light"
                    >
                      Neural Biological Mechanisms
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/intervertebral-disc-herniation"
                      className="hover:drop-shadow-light"
                    >
                      The Basics of Intervertebral Disc Herniation
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/cranial-manipulation"
                      className="hover:drop-shadow-light"
                    >
                      Cranial Manipulation
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/the-trauma-of-birth"
                      className="hover:drop-shadow-light"
                    >
                      The Trauma of Birth
                    </ArtLink>
                  </li>
                </ul>
              </div>
              <div className="mx-3 my-5">
                <div className="font-bold">Resources</div>
                <ul className="mx-3 list-disc marker:text-primary-100">
                  <li>
                    <ArtLink
                      href="/articles/feelys-osteopathic-dictionary"
                      className="hover:drop-shadow-light"
                    >
                      Feely's Abridged Osteopathic Dictionary
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/omt-codes"
                      className="hover:drop-shadow-light"
                    >
                      OMT Codes
                    </ArtLink>
                  </li>
                  <li>
                    <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>
                  </li>
                </ul>
              </div>
            </div>
            <div>
              <h2>Acupuncture</h2>
              <div className="mx-3 my-5">
                <div className="font-bold">Articles</div>
                <ul className="mx-3 list-disc marker:text-primary-100">
                  <li>
                    <ArtLink
                      href="/articles/five-element-acupuncture"
                      className="hover:drop-shadow-light"
                    >
                      Five Element Acupuncture
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/acupuncture-letter"
                      className="hover:drop-shadow-light"
                    >
                      Acupuncture Letter
                    </ArtLink>
                  </li>
                </ul>
              </div>
              <div className="mx-3 my-5">
                <div className="font-bold">Resources</div>
                <ul className="mx-3 list-disc marker:text-primary-100">
                  <li>
                    <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>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/international-acupuncture-bibliography"
                      className="hover:drop-shadow-light"
                    >
                      International Acupuncture Bibliography
                    </ArtLink>
                  </li>
                  <li>
                    <ArtLink
                      href="/articles/acupuncture-references"
                      className="hover:drop-shadow-light"
                    >
                      Acupuncture References
                    </ArtLink>
                  </li>
                </ul>
              </div>
              <h2>Neuro Ocular Release</h2>
              <div className="mx-3">
                <ul className="mx-3 list-disc marker:text-primary-100">
                  <li>
                    <ArtLink
                      href="/content/doctor-resources/nor_article.pdf"
                      target="_blank"
                      className="hover:drop-shadow-light"
                    >
                      Neuro-Ocular Release: A New Osteopathic Technique [PDF]{" "}
                      <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
                    </ArtLink>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className="basis-2/5">
          <Image
            src={docWithClip}
            alt="Doctor holding clipboard"
            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
          />
        </div>
      </div>
    </CenterView>
  );
};

export default ArtsForDocs;