🎨 restructures header, navigation, hero image

src/components/NavigationBarScroll.jsx

@@ -0,0 +1,25 @@
+import NavigationScrollLogo from "./NavigationScrollLogo"
+import PageLink from "./PageLink"
+import ScrollLink from "./ScrollLink"
+import { Navbar } from "flowbite-react"
+
+const NavigationBarScroll = () => {
+  return (
+    <Navbar fluid>
+      <NavigationScrollLogo />
+      <div>
+        <Navbar.Toggle />
+      </div>
+      <Navbar.Collapse>
+        <ScrollLink linkName="celebration" location="#celebration" />
+        <ScrollLink linkName="helpful information" location="#info" />
+        <ScrollLink linkName="our story" location="#our-story" />
+        <ScrollLink linkName="photo gallery" location="#photos" />
+        <ScrollLink linkName="contact us" location="#contact" />
+        <PageLink linkName="rsvp" location="/rsvp" />
+      </Navbar.Collapse>
+    </Navbar>
+  )
+}
+
+export default NavigationBarScroll

src/components/NavigationScrollLogo.jsx

@@ -0,0 +1,17 @@
+import leafLogo from "../assets/leaf-decoration.png"
+
+const NavigationScrollLogo = () => {
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+  return (
+    <img
+      src={leafLogo}
+      className="mr-2 w-20 hover:cursor-pointer"
+      alt="Kayti and Jake wedding logo"
+      onClick={handleScrollToTop}
+    />
+  )
+}
+
+export default NavigationScrollLogo

src/components/PageLink.jsx

@@ -5,7 +5,7 @@ const PageLink = ({ linkName, location }) => {
   return (
     <Link
       to={location}
-      className="border-gray-100 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent block border-b py-2 pl-3 pr-4 hover:cursor-pointer md:border-0 md:p-0"
+      className="md:hover:bg-transparent text-gray block border-b px-3 py-2 font-alice text-xs uppercase hover:cursor-pointer md:border-0 md:p-0"
     >
       {linkName}
     </Link>

src/components/ScrollLink.jsx

@@ -5,7 +5,7 @@ const ScrollLink = ({ linkName, location }) => {
   return (
     <AnchorLink
       href={location}
-      className="border-gray-100 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent block border-b py-2 pl-3 pr-4 hover:cursor-pointer md:border-0 md:p-0"
+      className="md:hover:bg-transparent text-gray block border-b px-3 py-2 font-alice text-xs uppercase hover:cursor-pointer md:border-0 md:p-0"
     >
       {linkName}
     </AnchorLink>

src/index.css

@@ -12,14 +12,15 @@
     font-family: "Garamond";
     src: url("../fonts/EBGaramond-Medium.ttf");
   }
+  @font-face {
+    font-family: "Alice";
+    src: url("../fonts/Alice-Regular.ttf");
+  }
 }
 
 :root {
   margin: 0;
   font-family: Garamond;
   font-size: 16pt;
   width: 100vw;
-  color: #121f32;
-  background-image: url(./assets/background.png);
-  background-attachment: fixed;
 }

src/pages/Main.jsx

@@ -1,24 +1,24 @@
-import NavigationMain from "../components/NavigationMain"
+import NavigationBarScroll from "../components/NavigationBarScroll"
+import AboveTheFold from "../sections/AboveTheFold"
 import Celebration from "../sections/Celebration"
-import Ceremony from "../sections/Ceremony"
 import Contact from "../sections/Contact"
-import Landing from "../sections/Hero"
+import HelpfulInfo from "../sections/HelpfulInfo"
 import OurStory from "../sections/OurStory"
+import PhotoGallery from "../sections/PhotoGallery"
+import SummaryText from "../sections/SummaryText"
 
 const Main = () => {
   return (
     <>
-      <div className="hover:cursor-pointer">
-        <NavigationMain />
+      <div className="sticky top-0 z-10">
+        <NavigationBarScroll />
       </div>
-      <Landing />
-      <hr className="m-8" />
+      <AboveTheFold />
+      <SummaryText />
       <Celebration />
-      <hr className="m-8" />
+      <HelpfulInfo />
       <OurStory />
-      <hr className="m-8" />
-      <Ceremony />
-      <hr className="m-8" />
+      <PhotoGallery />
       <Contact />
       <hr className="m-8" />
     </>

src/sections/AboveTheFold.jsx

@@ -0,0 +1,33 @@
+import hero from "../assets/hero.jpeg"
+import heroMobile from "../assets/hero-mobile.jpeg"
+
+const AboveTheFold = () => {
+  return (
+    <>
+      {/* mobile view */}
+      <div className="text-center md:hidden">
+        <img
+          src={heroMobile}
+          alt="Kayti and Jake sitting outdoors in the foreground of a mountain with wispy clouds in the sky"
+          className="opacity-50"
+        />
+        <div className="absolute left-0 right-0 top-20">
+          <h1 className="font-moontime text-6xl">Kayti and Jake</h1>
+        </div>
+      </div>
+      {/* full screen view */}
+      <div className="hidden text-center md:contents">
+        <img
+          src={hero}
+          alt="Kayti and Jake sitting outdoors in the foreground of a mountain with wispy clouds in the sky"
+          className="object-cover opacity-50"
+        />
+        <div className="absolute left-0 right-0 top-20">
+          <h1 className="font-moontime text-9xl">Kayti and Jake</h1>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default AboveTheFold

tailwind.config.js

@@ -13,7 +13,7 @@ export default {
       },
       screens: {
         sm: "640px",
-        md: "768px",
+        md: "1000px",
         lg: "1024px",
         xl: "1280px",
         "2xl": "1536px"
@@ -30,7 +30,11 @@ export default {
       greenGold: "#b2935b",
       greenGoldLight: "#ded1b8",
       blackFont: "#121f32",
-      error: "#cc0000"
+      error: "#cc0000",
+      champagne: "#f7e7ce",
+      eucalyptus: "#465c47",
+      white: "#ffffff",
+      gray: "#6c6868"
     },
     opacity: {
       50: ".50"