Adding homepage hero effect

Author: mariana-caldas

components/Hero.js

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import Nav from './Nav';
 import Container from './Container';
@@ -7,13 +8,23 @@ export default function Hero({
   title,
   imgBg,
   imgAlt,
-  dynamicTitle,
+  dynamicTitles = [],
   content,
   customClass,
   titleClass,
 }) {
+  const [titleIndex, setTitleIndex] = useState(0);
+  const handleTitleIndex = () =>
+    setTitleIndex(titleIndex === dynamicTitles.length - 1 ? 0 : titleIndex + 1);
+
+  useEffect(() => {
+    setTimeout(handleTitleIndex, 1350);
+  }, [titleIndex]);
+
   return (
-    <div className={`${styles.header} ${customClass && styles[customClass]}`}>
+    <div
+      className={`${styles.header} ${customClass ? styles[customClass] : ''}`}
+    >
       <Nav />
       <Image
         src={imgBg}
@@ -26,9 +37,9 @@ export default function Hero({
       />
       <Container className={styles.header__content}>
         <div className={styles.header__content__upper}>
-          <h1 className={`${titleClass && styles[titleClass]}`}>
+          <h1 className={titleClass ? `${styles[titleClass]}` : ''}>
             {title}
-            {dynamicTitle && <span> {dynamicTitle}</span>}
+            {dynamicTitles && <span> {dynamicTitles[titleIndex]}</span>}
           </h1>
         </div>
         <div className={styles.header__content__bottom}>

components/Layout.js

@@ -1,58 +1,22 @@
 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 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.',
-    },
-  };
+  const heroPathKeys = Object.keys(heroOptions)
+    .sort((a, b) => a - b)
+    .filter(k => router.pathname.startsWith(k));
+
+  const heroKey = heroPathKeys[heroPathKeys.length - 1];
   return (
     <>
       <Meta />
       <main className={styles.main}>
-        <Hero {...heroOptions[router.pathname]} />
+        <Hero {...heroOptions[heroKey]} />
         {children}
         <Footer />
       </main>

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.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>

styles/_variables.scss

@@ -25,6 +25,3 @@ $box-shadow-bottom: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
 //Fonts
 $copy-font: 'Assistant';
 $heading-font: 'Open Sans';
-
-//Constants
-$nav-height: 184px;

utils/hero-options.js

@@ -0,0 +1,42 @@
+export const heroOptions = {
+  '/': {
+    imgBg: '/images/home-bg.png',
+    imgAlt: 'Homepage',
+    title: 'Web Dev Path is about',
+    dynamicTitles: ['community', 'learning', 'growth'],
+    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.',
+  },
+};