Merge branch 'master' into feature/add-footer-copyright

Author: mariana-caldas

CHANGELOG.md

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

components/Hero.js

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+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,
+  dynamicTitles = [],
+  content,
+  customClass,
+  titleClass,
+}) {
+  const [titleIndex, setTitleIndex] = useState(0);
+  const handleTitleIndex = () => {
+    setTitleIndex(titleIndex >= dynamicTitles.length - 1 ? 0 : titleIndex + 1);
+  };
+
+  useEffect(() => {
+    const dynamicTitleEl = document.getElementById('dynamicTitle');
+    if (dynamicTitleEl.style.opacity === '1') {
+      dynamicTitleEl.style.opacity = '0';
+    } else {
+      dynamicTitleEl.style.opacity = '1';
+    }
+  }, [titleIndex]);
+
+  setTimeout(handleTitleIndex, 1350);
+
+  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}
+            {dynamicTitles && (
+              <span id="dynamicTitle"> {dynamicTitles[titleIndex]}</span>
+            )}
+          </h1>
+        </div>
+        <div className={styles.header__content__bottom}>
+          <p>{content}</p>
+        </div>
+      </Container>
+    </div>
+  );
+}

components/Layout.js

@@ -1,15 +1,25 @@
-import Nav from './Nav';
+import { useRouter } from 'next/router';
+import { heroOptions } from '../utils/hero-options';
+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 heroPathKeys = Object.keys(heroOptions)
+    .sort((a, b) => a - b)
+    .filter(k => router.pathname.startsWith(k));
+
+  const heroKey = heroPathKeys[heroPathKeys.length - 1];
   return (
     <>
       <Meta />
-      <Nav />
-      <main className={styles.main}>{children}</main>
-      <Footer />
+      <main className={styles.main}>
+        <Hero {...heroOptions[heroKey]} />
+        {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

@@ -1,7 +1,7 @@
 export default function AboutUs() {
   return (
     <div className="about-us">
-      <h1>About Us</h1>
+      <h2>About Us</h2>
       <p>We're building this page.</p>
       <p>Stay tuned!</p>
     </div>

pages/blog/first-post.js

@@ -1,7 +1,7 @@
 export default function FirstPost() {
   return (
-    <div class="post">
-      <h1>First Post</h1>
+    <div className="post">
+      <h2>First Post</h2>
       <p>We're building this page.</p>
       <p>Stay tuned!</p>
     </div>

pages/blog/index.js

@@ -3,7 +3,7 @@ import Link from 'next/link';
 export default function Blog() {
   return (
     <div className="blog">
-      <h1>Blog Page</h1>
+      <h2>Blog Page</h2>
       <p>We're building this page. Stay tuned!</p>
       <ul>
         <li>

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

@@ -1,7 +1,7 @@
 export default function ContactUs() {
   return (
     <div className="contact-us">
-      <h1>Contact Us</h1>
+      <h2>Contact Us</h2>
       <p>We're building this page.</p>
       <p>Stay tuned!</p>
     </div>

pages/index.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>
+    </>
   );
 }