contact, footer, and external links

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

@@ -4,6 +4,7 @@ import LearnMoreLink from "@/components/LearnMoreLink";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import scalpPoints from "@/public/content/scalp_points.png";
+import ExtLearnMoreLink from "@/components/ExtLearnMoreLink";
 
 const ScalpAcupuncture = () => {
   return (
@@ -66,14 +67,13 @@ const ScalpAcupuncture = () => {
               The file below has real patient cases and outcomes. Check it out
               for yourself and see YNSA in action!
             </div>
-            <LearnMoreLink
+            <ExtLearnMoreLink
               href="/content/patient-resources/scalp_acupuncture.pdf"
               target="_blank"
               className="block"
             >
-              Patient Before-and-Afters [PDF]{" "}
-              <ArrowTopRightOnSquareIcon className="inline w-[20px] align-[-3px]" />
-            </LearnMoreLink>
+              Patient Before-and-Afters [PDF]
+            </ExtLearnMoreLink>
           </Card>
         </div>
       </div>

website/app/(pages)/nor/views/NOR.tsx

@@ -1,25 +1,47 @@
-import View from "@/components/View";
+import CenterView from "@/components/CenterView";
+import ExtLearnMoreLink from "@/components/ExtLearnMoreLink";
+import NORBrain from "@/public/content/NOR_brain.png";
+import Image from "next/image";
 
 const NOR = () => {
   return (
-    <View bg_color="bg-primary-100" txt_color="text-primary-500" id="nor">
+    <CenterView bg_color="bg-primary-100" txt_color="text-primary-500" id="nor">
+      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
+        <div className="basis-2/5">
           <h1>Neuro Ocular Release</h1>
           <p>
-        Neuro-ocular release (NOR) is a new osteopathic manipulative procedure
-        that involves the indirect method of manual techniques. It may be used
-        alone, or it may be used as an activating force for other indirect
-        methods of treatment. By utilizing the visual system, NOR accesses
-        pathways that reset the central and peripheral nervous systems. In doing
-        so, NOR more effectively alleviates somatic disfunction in less
-        time&mdash;only three seconds&mdash;than traditional methods alone.
+            Neuro-ocular release (NOR) is a new osteopathic manipulative
+            procedure that involves the indirect method of manual techniques. It
+            may be used alone, or it may be used as an activating force for
+            other indirect methods of treatment. By utilizing the visual system,
+            NOR accesses pathways that reset the central and peripheral nervous
+            systems. In doing so, NOR more effectively alleviates somatic
+            disfunction in less time&mdash;only three seconds&mdash;than
+            traditional methods alone.
           </p>
+          <ExtLearnMoreLink
+            target="_blank"
+            href="/content/doctor-resources/nor_article.pdf"
+            className="my-5"
+          >
+            Read Dr. Feely's Paper on NOR [PDF]
+          </ExtLearnMoreLink>
           <h2>Want to learn more?</h2>
           <p>
-        Access to NOR content is only available to account holders. To request
-        access, contact Dr. Feely at the link below.
+            Access to NOR content is only available to account holders. To
+            request access, contact Dr. Feely at the link below.
           </p>
           <p>Already have an account?</p>
-    </View>
+        </div>
+        <div className="basis-2/5">
+          <Image
+            src={NORBrain}
+            alt="NOR Diagram"
+            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
+          />
+        </div>
+      </div>
+    </CenterView>
   );
 };
 

website/app/layout.tsx

@@ -1,6 +1,7 @@
 import Navbar from "@/components/Navbar";
 import "./globals.css";
 import Footer from "@/components/Footer";
+import Contact from "@/components/Contact";
 
 export default function RootLayout({
   children,
@@ -12,6 +13,7 @@ export default function RootLayout({
       <body>
         <Navbar></Navbar>
         {children}
+        <Contact></Contact>
         <Footer></Footer>
       </body>
     </html>

website/components/ArtLink.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const ArtLink = (props: any) => {
   return (
-    <div>
+    <div className={props.divClasses}>
       <Link
         {...props}
         className={

website/components/Contact.tsx

@@ -0,0 +1,49 @@
+import ArtLink from "./ArtLink";
+import View from "./View";
+import left from "@/public/content/logo_unicorn.png";
+import right from "@/public/content/logo_lion.png";
+import Image from "next/image";
+
+const Contact = () => {
+  return (
+    <View
+      bg_color="bg-neutral-800"
+      txt_color="text-neutral-200"
+      className="!min-h-0"
+    >
+      <div className="flex flex-col items-center">
+        <div className="md:flex md:flex-row md:items-center md:gap-10">
+          <div>
+            <Image
+              src={left}
+              alt="Stately unicorn from Dr. Feely's coat of arms"
+              className="hidden h-32 w-auto md:block"
+            />
+          </div>
+          <div>
+            <h1 className="my-5 text-5xl">Contact Dr. Feely</h1>
+            <div className="text-center text-2xl">
+              at{" "}
+              <ArtLink
+                className="hover:drop-shadow-light"
+                href="mailto:rafeely@drfeely.com"
+                divClasses="inline"
+              >
+                rafeely@drfeely.com
+              </ArtLink>
+            </div>
+          </div>
+          <div>
+            <Image
+              src={right}
+              alt="Stately lion from Dr. Feely's coat of arms"
+              className="hidden h-32 w-auto md:block"
+            />
+          </div>
+        </div>
+      </div>
+    </View>
+  );
+};
+
+export default Contact;

website/components/ExtLearnMoreLink.tsx

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

website/components/Footer.tsx

@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <footer className="w-full  bg-neutral-800 text-neutral-300">
+    <footer className="w-full  bg-neutral-900 text-neutral-200">
       <div className="mx-auto w-11/12 py-12 lg:w-5/6">
         <div className="ml-8 grid gap-12 md:m-0 md:grid-cols-5 md:flex-row">
           <div className="">