landing and nav (hopefully) done

app/accupuncture/page.tsx

@@ -1,5 +1,5 @@
 const Accupuncture = () => {
-  return <div>Accupuncture</div>;
+  return <main>Accupuncture</main>;
 };
 
 export default Accupuncture;

app/articles/page.tsx

@@ -1,5 +1,5 @@
 const Articles = () => {
-  return <div>Articles</div>;
+  return <main>Articles</main>;
 };
 
 export default Articles;

app/globals.css

@@ -13,4 +13,7 @@
     @apply text-primary-500;
     @apply font-abel;
   }
+  main {
+    @apply text-lg;
+  }
 }

app/layout.tsx

@@ -3,7 +3,7 @@ import "./globals.css";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Dr. Richard Feely",
+  title: "Dr. Richard Feely | Home",
   description: `Dr. Feely is a highly accomplished physician with over 25 years
     of experience in osteopathic medicine, acupuncture, herbal medicine, and
     family practice. He specializes in the treatment of neuromusculoskeletal

app/nor/page.tsx

@@ -1,5 +1,5 @@
 const NeuroOcularRelease = () => {
-  return <div>NeuroOcularRelease</div>;
+  return <main>NeuroOcularRelease</main>;
 };
 
 export default NeuroOcularRelease;

app/osteopathy/page.tsx

@@ -1,5 +1,5 @@
 const Osteopathy = () => {
-  return <div>Osteopathy</div>;
+  return <main>Osteopathy</main>;
 };
 
 export default Osteopathy;

app/page.tsx

@@ -1,5 +1,15 @@
+import Accomplishments from "./views/Accomplishments";
+import Bio from "./views/Bio";
+import Landing from "./views/Landing";
+
 const Home = () => {
-  return <div>Home</div>;
+  return (
+    <main>
+      <Landing></Landing>
+      <Bio></Bio>
+      <Accomplishments></Accomplishments>
+    </main>
+  );
 };
 
 export default Home;

app/views/Accomplishments.tsx

@@ -0,0 +1,17 @@
+const Accomplishments = () => {
+  return (
+    <section className="text-primary-500">
+      <div className="h-screen w-full bg-primary-300 flex items-center">
+        <div className="w-11/12 lg:w-5/6 mx-auto flex items-center flex-col md:flex-row">
+          <div className="lg:basis-60">
+            <h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10">
+              Richard A. Feely, DO
+            </h1>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accomplishments;

app/views/Bio.tsx

@@ -0,0 +1,17 @@
+const Bio = () => {
+  return (
+    <section className="text-primary-500">
+      <div className="h-screen w-full bg-primary-100 flex items-center">
+        <div className="w-11/12 lg:w-5/6 mx-auto flex items-center flex-col md:flex-row">
+          <div className="basis-2/5">
+            <h1 className="z-[45] text-7xl lg:text-9xl font-cormorant pb-10">
+              Richard A. Feely, DO
+            </h1>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Bio;

app/views/Landing.tsx

@@ -0,0 +1,35 @@
+const Landing = () => {
+  return (
+    <section className="text-primary-100">
+      <div className="min-h-screen w-full bg-primary-500 flex items-center relative z-[-2] overflow-hidden">
+        <div className="w-11/12 lg:w-5/6 mt-32 my-14 md:mt-12 md:my-0 mx-auto flex items-center flex-col gap-12 md:gap-4 md:flex-row md:justify-around">
+          <div className="basis-6/12">
+            <div className="relative">
+              <div className="before:absolute before:-left-52 before:-top-44 before:z-[-1] before:content-textAccent">
+                <h1 className="text-7xl lg:text-7xl font-cormorant pb-10">
+                  Richard A. Feely, DO
+                </h1>
+              </div>
+            </div>
+            <h2 className="text-2xl">
+              Dr. Feely is a highly accomplished physician with over 25 years of
+              experience in osteopathic medicine, acupuncture, herbal medicine,
+              and family practice. He specializes in the treatment of
+              neuromusculoskeletal pain&mdash;especially back pain, neck pain
+              and headaches.
+            </h2>
+          </div>
+          <div className="basis-4/12 flex justify-center">
+            <img
+              className="shadow-superPortrait shadow-secondary-500 rounded-3xl max-w-sm w-full"
+              src="/dr_feely_cutout_headshot_2.png"
+              alt="Picture of Dr. Feely"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Landing;

components/Navbar/NavPages.tsx

@@ -2,11 +2,16 @@ import { useState } from "react";
 import NavLink from "./NavLink";
 
 interface Props {
+  currentPage: string;
+  setCurrentPage: (page: string) => void;
   currentPageClasses: string;
 }
 
-const NavPages = ({ currentPageClasses }: Props) => {
-  const [currentPage, setCurrentPage] = useState("/");
+const NavPages = ({
+  currentPage,
+  setCurrentPage,
+  currentPageClasses,
+}: Props) => {
   return (
     <>
       <NavLink

components/Navbar/index.tsx

@@ -1,16 +1,44 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
 import NavPages from "./NavPages";
 
 const Navbar = () => {
+  const [currentPage, setCurrentPage] = useState("/");
+  const [isTopOfPage, setIsTopOfPage] = useState(true);
   const [menuActive, setMenuActive] = useState(false);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY === 0) {
+        setIsTopOfPage(true);
+      } else {
+        setIsTopOfPage(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
-    <nav className="bg-primary-500 text-primary-100">
+    <nav
+      className={
+        "bg-primary-500 text-primary-100 fixed top-0  w-full " +
+        (isTopOfPage
+          ? "bg-transparent"
+          : "z-40 bg-opacity-60 backdrop-blur-sm drop-shadow")
+      }
+    >
       <div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
-        <div className="font-cormorant text-2xl p-5">Richard A. Feely, DO</div>
+        <div
+          className={
+            "font-cormorant text-2xl p-5 " +
+            (isTopOfPage ? "text-transparent select-none" : "")
+          }
+        >
+          Richard A. Feely, DO
+        </div>
 
         {/* Burger icon */}
         <div className="md:hidden w-[30px] text-tertiary-300">
@@ -18,7 +46,7 @@ const Navbar = () => {
         </div>
         {/* Burger menu */}
         {menuActive ? (
-          <div className="text-lg animate-fadeIn fixed bottom-0 right-0 z-50 h-full bg-secondary-500 drop-shadow-lg ">
+          <div className="text-lg animate-fadeIn z-50 fixed top-0 right-0  h-screen bg-secondary-500 drop-shadow-lg ">
             <div className="px-12 py-5 flex flex-col gap-6 text-primary-500 text-right">
               <div className="pb-3 flex justify-end ">
                 <XMarkIcon
@@ -26,7 +54,11 @@ const Navbar = () => {
                   onClick={() => setMenuActive((e) => !e)}
                 ></XMarkIcon>
               </div>
-              <NavPages currentPageClasses="text-primary-100"></NavPages>
+              <NavPages
+                currentPage={currentPage}
+                setCurrentPage={setCurrentPage}
+                currentPageClasses="text-primary-100"
+              ></NavPages>
             </div>
           </div>
         ) : (
@@ -34,8 +66,17 @@ const Navbar = () => {
         )}
 
         {/* Nav Bar */}
-        <div className="hidden md:flex font-abel tems-center gap-6 p-5 text-lg text-tertiary-300">
-          <NavPages currentPageClasses="text-secondary-500"></NavPages>
+        <div
+          className={
+            "hidden md:flex font-abel tems-center gap-6 text-lg text-tertiary-300 " +
+            (isTopOfPage ? "px-5 py-24" : "p-5")
+          }
+        >
+          <NavPages
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            currentPageClasses="text-secondary-500"
+          ></NavPages>
         </div>
       </div>
     </nav>

tailwind.config.js

@@ -47,6 +47,12 @@ module.exports = {
         fadeIn: "fadeIn 75ms ease-in",
         fadeOut: "fadeOut 500ms ease-out",
       },
+      boxShadow: {
+        superPortrait: "75px 75px 250px 0px",
+      },
+      content: {
+        textAccent: "url('/text_accent.png')",
+      },
     },
   },
   plugins: [],