Add hero component

Author: mariana-caldas

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - decoration components
 - nav component styling and intersection api
 - CardsColumns.js and Card.js
+- Header.js component
 
 ### Fixed
 

components/Hero.js

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import Nav from './Nav';
+import Container from './Container';
+import styles from '../styles/Hero.module.scss';
+
+export default function Hero({
+  title,
+  imgBg,
+  imgAlt,
+  dynamicTitle,
+  content,
+  customClass,
+  titleClass,
+}) {
+  return (
+    <div className={`${styles.header} ${customClass && styles[customClass]}`}>
+      <Nav />
+      <Image
+        src={imgBg}
+        alt={imgAlt}
+        className={styles.imageBg}
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+        priority
+      />
+      <Container className={styles.header__content}>
+        <div className={styles.header__content__upper}>
+          <h1 className={`${titleClass && styles[titleClass]}`}>
+            {title}
+            {dynamicTitle && <span> {dynamicTitle}</span>}
+          </h1>
+        </div>
+        <div className={styles.header__content__bottom}>
+          <p>{content}</p>
+        </div>
+      </Container>
+    </div>
+  );
+}

components/Layout.js

@@ -1,15 +1,61 @@
-import Nav from './Nav';
+import { useRouter } from 'next/router';
+import Hero from './Hero';
 import Meta from './Meta';
 import Footer from './Footer';
 import styles from '../styles/Layout.module.scss';
 
 export default function Layout({ children }) {
+  const router = useRouter();
+  const heroOptions = {
+    '/': {
+      imgBg: '/images/home-bg.png',
+      imgAlt: 'Homepage',
+      title: 'Web Dev Path is about',
+      dynamicTitle: 'Community',
+      content:
+        'We help junior tech professionals, such as developers and designers, to grow.',
+    },
+    '/about': {
+      imgBg: '/images/about-us-bg.png',
+      imgAlt: 'About Us',
+      title: 'About Us',
+      titleClass: 'accent-title',
+      content:
+        'While the demand for web developers only increases, becoming one can be quite a journey!',
+    },
+    '/contact': {
+      imgBg: '/images/about-us-bg.png',
+      imgAlt: 'Contact Us',
+      title: 'Contact Us',
+      titleClass: 'accent-title',
+      content:
+        'We help junior tech professionals, such as developers and designers, to grow.',
+    },
+    '/blog': {
+      imgBg: '/images/about-us-bg.png',
+      imgAlt: 'Blog',
+      title: 'Our Blog',
+      titleClass: 'accent-title',
+      content:
+        'We help junior tech professionals, such as developers and designers, to grow.',
+    },
+    '/404': {
+      imgBg: '/images/about-us-bg.png',
+      imgAlt: 'Not Found',
+      title: 'Not Found',
+      titleClass: 'accent-title',
+      content:
+        'We help junior tech professionals, such as developers and designers, to grow.',
+    },
+  };
   return (
     <>
       <Meta />
-      <Nav />
-      <main className={styles.main}>{children}</main>
-      <Footer />
+      <main className={styles.main}>
+        <Hero {...heroOptions[router.pathname]} />
+        {children}
+        <Footer />
+      </main>
     </>
   );
 }

components/Nav.js

@@ -15,6 +15,7 @@ export default function Nav() {
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
+        if (!containerRef.current) return;
         if (!entry.isIntersecting) {
           containerRef.current.classList.add(styles.sticky);
         } else {

pages/about-us.js renamed to pages/about.js

@@ -7,21 +7,12 @@ import { white, primary } from '../styles/TwoColumn.module.scss';
 
 export default function Home() {
   return (
-    <div className={styles.inner}>
-      <div className={styles.description}>
-        <h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
-        <p>
-          Hold our hand and enjoy the road to learn how to start a new project,
-          the magic behind Github while working in a team environment, and much
-          more...
-        </p>
-      </div>
-
+    <>
       <TwoColumn
         title="Let's grow together."
         image="/images/join-us.jpg"
         content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
-        link="/about-us"
+        link="/about"
         customBtnClass="inverted-grey"
       />
 
@@ -48,7 +39,7 @@ export default function Home() {
           'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
           'Are you an experienced web dev who wants to become a mentor? Welcome!',
         ]}
-        links={['/about-us', '/contact-us', '/about-us']}
+        links={['/about', '/contact', '/about']}
         linkText={['Learn more', 'Contact us', 'Learn more']}
       />
 
@@ -59,10 +50,10 @@ export default function Home() {
         content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
         color={white}
         bgColor={primary}
-        link="/about-us"
+        link="/about"
         customInnerClass="non-profit"
         customBtnClass="inverted-white"
       />
-    </div>
+    </>
   );
 }

pages/contact-us.js renamed to pages/contact.js

@@ -0,0 +1,46 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 10;
+  position: relative;
+  @include desktop {
+    height: 100vh;
+  }
+
+  .accent-title {
+    color: $primary-accent-color;
+  }
+
+  &__content {
+    z-index: 10;
+    color: $white;
+    padding-top: 9%;
+
+    &__upper {
+      max-width: 41rem;
+      span {
+        color: $primary-accent-color;
+        font-style: italic;
+        font-weight: bold;
+        line-height: 3.5rem;
+        @include desktop {
+          font-size: 4.5rem;
+          line-height: 5rem;
+        }
+      }
+    }
+
+    &__bottom {
+      max-width: 41rem;
+      padding-bottom: 5rem;
+
+      @include desktop {
+        padding-bottom: 0;
+      }
+    }
+  }
+}