Merge pull request #177 from nwplus/banner

Add nwHacks registrations temporarily closed banner
nwplus · Nov 14, 2023 · 1a2dbe6 · 1a2dbe6
2 parents 3ed23ed + beaf213
commit 1a2dbe6
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 23 deletions.
diff --git a/components/Banner.js b/components/Banner.js
@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+
+const BannerContainer = styled.div`
+  background: linear-gradient(92.58deg, #0defe1 0%, #78ff96 100%);
+  position: absolute;
+  z-index: 1;
+  height: 134px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+  padding: 20px 64px;
+  gap: 10px;
+  color: #2c2543;
+  font-size: 0.8rem;
+  @media (min-width: 768px) {
+    padding-right: 100px;
+    font-size: 20px;
+  }
+`
+
+const BannerHeader = styled.div`
+  font-weight: 700;
+`
+
+const BannerText = styled.div`
+  font-weight: 600;
+`
+
+const Banner = () => (
+  <BannerContainer>
+    <BannerHeader>IMPORTANT UPDATE:</BannerHeader>
+    <BannerText>
+    nwHacks 2024 is not currently accepting applications. The application form will open on November 20th, 2023.
+    </BannerText>
+  </BannerContainer>
+)
+
+export default Banner
diff --git a/components/Hero.js b/components/Hero.js
@@ -13,8 +13,9 @@ const HeroContainer = styled.div`
   padding-bottom: 69%;
   background: url(/assets/hero_illustration.svg);
   background-repeat: no-repeat;
-  background-position: top;
+  background-position: center;
   background-size: contain;
+  padding-top: 134px;
 `;
 
 const HeroTextContainer = styled.div`

diff --git a/components/NavBar.js b/components/NavBar.js
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { useState, useEffect } from 'react';
 
-import { SCREEN_BREAKPOINTS } from '../pages/_app';
+import { SCREEN_BREAKPOINTS, BANNER_OFFSET } from '../pages/_app';
 import fireDb from '../utilities/firebase';
 
 const NavBarContainer = styled.nav`
-  position: fixed;
-  top: 0;
+  position: ${p => (p.stayAtTop ? 'absolute' : 'fixed')};
+  top: ${p => (p.stayAtTop ? BANNER_OFFSET : '0')}px;
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 3;
@@ -222,6 +222,7 @@ const NavBar = () => {
   const [showDropdown, setShowDropdown] = useState(false);
   const [visibility, setVisibility] = useState('visible');
   const [opacity, setOpacity] = useState('1');
+  const [stayAtTop, setStayAtTop] = useState(true);
 
   const [config, setConfig] = useState(null);
 
@@ -230,6 +231,27 @@ const NavBar = () => {
     setConfig(wwwConfig);
   };
 
+  const handleScroll = () => {
+    let lastScroll = 0
+    return () => {
+      const scroll = window.pageYOffset || document.documentElement.scrollTop
+      if (scroll <= BANNER_OFFSET) {
+        setStayAtTop(true)
+        setVisibility('visible')
+        setOpacity('1')
+      } else if (scroll > lastScroll) {
+        setStayAtTop(false)
+        setVisibility('hidden')
+        setOpacity('0')
+        setStayAtTop(0)
+      } else {
+        setVisibility('visible')
+        setOpacity('1')
+      }
+      lastScroll = scroll
+    }
+  }
+
   useEffect(() => {
     window.addEventListener('scroll', handleScroll());
     window.addEventListener('resize', handleResize);
@@ -246,24 +268,6 @@ const NavBar = () => {
     }
   };
 
-  const handleScroll = () => {
-    var lastScroll = 0;
-    return () => {
-      const scroll = window.pageYOffset || document.documentElement.scrollTop;
-      if (scroll <= 0) {
-        setVisibility('visible');
-        setOpacity('1');
-      } else if (scroll > lastScroll) {
-        setVisibility('hidden');
-        setOpacity('0');
-      } else {
-        setVisibility('visible');
-        setOpacity('1');
-      }
-      lastScroll = scroll;
-    };
-  };
-
   if (showDropdown) {
     return (
       <>
@@ -306,7 +310,7 @@ const NavBar = () => {
   }
 
   return (
-    <NavBarContainer visibility={visibility} opacity={opacity}>
+    <NavBarContainer visibility={visibility} opacity={opacity} stayAtTop={stayAtTop}>
       <NavGroupContainer>
         <a href='/'>
           <NwPlusLogo

diff --git a/pages/_app.js b/pages/_app.js
@@ -10,6 +10,7 @@ export const SCREEN_BREAKPOINTS = {
   tabletLarge: 1024,
   desktop: 1200,
 };
+export const BANNER_OFFSET = 134;
 
 const theme = {
   colors: {

diff --git a/pages/index.js b/pages/index.js
@@ -12,6 +12,7 @@ import Hackathons from '../components/Hackathons'
 import Hero from '../components/Hero'
 import ResourceContainer from '../components/ResourceContainer'
 import Stats from '../components/Stats'
+import Banner from '../components/Banner'
 // Typography
 import {
   Title1,
@@ -105,6 +106,7 @@ export default function Home() {
       </Head>
       <Background>
         <NavBar/>
+        <Banner />
         <Hero />
         <ContentContainer
           id="about"