Add volunteers page

src/App.js

@@ -7,6 +7,7 @@ import {lazy, useState, Suspense, useEffect} from 'react';
 import {Route, Redirect, Switch, useLocation} from 'react-router-dom';
 
 const Home = lazy(() => retry(() => import('./components/Home')));
+const Volunteers = lazy(() => retry(() => import('./components/Volunteers')));
 const About = lazy(() => retry(() => import('./components/About')));
 const State = lazy(() => retry(() => import('./components/State')));
 const LanguageSwitcher = lazy(() =>
@@ -31,6 +32,12 @@ const App = () => {
       displayName: 'Blog',
       showInNavbar: true,
     },
+    {
+      pageLink: '/volunteers',
+      view: Volunteers,
+      displayName: 'Volunteers',
+      showInNavbar: true,
+    },
     {
       pageLink: '/about',
       view: About,

src/App.scss

@@ -894,6 +894,7 @@ h6 {
       display: flex;
       padding: 1px;
       text-decoration: none;
+      white-space: nowrap;
 
       &:hover {
         background-color: $red-hover;
@@ -3993,6 +3994,189 @@ footer {
   }
 }
 
+.Volunteers {
+  align-items: center;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  margin-left: 6rem;
+  margin-top: 4rem;
+  min-height: 30rem;
+  width: calc(100% - 6rem);
+
+  .wrapper {
+    max-width: 80%;
+
+    .description {
+      background: $blue-light;
+      border-radius: 0.25rem;
+      color: $blue;
+      font-size: 14px;
+      line-height: 1.5;
+      margin-bottom: 3rem;
+      padding: 1rem;
+      text-align: justify;
+      text-justify: inter-word;
+    }
+  }
+
+  .members {
+    display: grid;
+    grid-auto-rows: 6.5rem;
+    grid-column-gap: 1%;
+    grid-row-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    width: 80%;
+
+    .last {
+      display: flex;
+      position: relative;
+
+      .Member {
+        background-color: $gray-light-opaque;
+        box-sizing: border-box;
+        height: 100%;
+        position: absolute;
+        width: 70%;
+
+        &:hover {
+          background-color: $gray-hover-opaque;
+        }
+
+        &.second {
+          background-color: $white;
+          left: 15%;
+
+          &:hover {
+            background-color: $gray-hover-opaque;
+          }
+        }
+
+        &.third {
+          left: 30%;
+        }
+      }
+    }
+
+    .Member {
+      align-items: center;
+      background-color: $gray-light;
+      border-radius: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      padding: 1rem;
+      position: relative;
+      text-decoration: none;
+
+      > a {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      &:hover {
+        background-color: $gray-hover;
+      }
+
+      .image {
+        aspect-ratio: 1;
+        border-radius: 10px;
+        height: 100%;
+        margin-right: 1rem;
+
+        svg {
+          border-radius: 10px;
+          height: 100%;
+          width: 100%;
+        }
+      }
+
+      .link-external {
+        align-self: flex-start;
+        color: $gray;
+        margin-left: 1rem;
+      }
+
+      .details {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        pointer-events: none;
+        position: relative;
+        white-space: nowrap;
+        width: 100%;
+
+        .name {
+          color: #343a40ee;
+          font-weight: 600;
+          margin: 0;
+          margin-bottom: 0.25rem;
+        }
+
+        .bio {
+          color: $blue;
+          font-size: 12px;
+          margin: 0;
+          margin-bottom: 0.25rem;
+        }
+
+        .socials {
+          align-items: center;
+          cursor: pointer;
+          display: flex;
+          line-height: 1.5rem;
+          margin-top: auto;
+          transition: opacity 0.15s ease-in-out;
+
+          .icon {
+            pointer-events: all;
+          }
+
+          svg {
+            margin-right: 0.5rem;
+          }
+
+          .github {
+            color: #6c757dbb;
+
+            &:hover {
+              color: $gray;
+            }
+          }
+
+          .linkedin {
+            color: $blue-mid;
+
+            &:hover {
+              color: $blue;
+            }
+          }
+
+          .instagram {
+            color: $pink-mid;
+
+            &:hover {
+              color: $pink;
+            }
+          }
+
+          .twitter {
+            color: $pblue-mid;
+
+            &:hover {
+              color: $pblue;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .About {
   display: flex;
   flex-direction: column;
@@ -4656,6 +4840,7 @@ footer {
   .map-container,
   .Links,
   .Summary,
+  .Volunteers,
   .About,
   .updates,
   .updates-header,
@@ -4938,6 +5123,16 @@ footer {
       height: 13rem;
     }
   }
+
+  .Volunteers {
+    margin-left: 0;
+
+    .wrapper,
+    .members {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
 }
 
 // Dark Mode
@@ -5257,6 +5452,40 @@ footer {
     }
   }
 
+  .Volunteers {
+    .members {
+      .last {
+        .Member {
+          &:hover {
+            background-color: #212130;
+          }
+
+          &.second {
+            background-color: $dark-m-gray;
+
+            &:hover {
+              background-color: #212130;
+            }
+          }
+        }
+      }
+
+      .Member {
+        background-color: #1e1e30;
+
+        &:hover {
+          background-color: $gray-hover;
+        }
+
+        .details {
+          .name {
+            color: $gray;
+          }
+        }
+      }
+    }
+  }
+
   .About {
     .question {
       color: $gray !important;
@@ -5331,6 +5560,24 @@ footer {
   }
 }
 
+.fadeInDown {
+  animation-duration: 0.45s;
+  animation-fill-mode: both;
+  animation-name: fadeInDown;
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
 .rotateDownRight {
   animation-duration: 0.25s;
   animation-fill-mode: both;

src/components/Banner.js

@@ -5,7 +5,7 @@ function Banner(props) {
   const {t} = useTranslation();
 
   return (
-    <div className="Banner fadeInUp" style={{animationDelay: '0.4s'}}>
+    <div className="Banner fadeInDown" style={{animationDelay: '0.4s'}}>
       <div className="wrapper">
         <div className="alert-icon">
           <AlertIcon size={16} />

src/components/Navbar.js

@@ -7,7 +7,7 @@ import {
 import locales from '../i18n/locales.json';
 
 import {useState, useCallback, useRef} from 'react';
-import {Book, HelpCircle, Home, Moon, Sun} from 'react-feather';
+import {Book, HelpCircle, Home, Moon, Sun, Users} from 'react-feather';
 import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
 import {useTransition, animated} from 'react-spring';
@@ -86,6 +86,11 @@ function Navbar({pages, showLanguageSwitcher, setShowLanguageSwitcher}) {
                 <Book {...activeNavIcon('/blog')} />
               </span>
             </Link>
+            <Link to="/volunteers">
+              <span>
+                <Users {...activeNavIcon('/volunteers')} />
+              </span>
+            </Link>
             <Link to="/about">
               <span>
                 <HelpCircle {...activeNavIcon('/about')} />