Add meet the team

Author: luthfib

.env

@@ -0,0 +1,2 @@
+# Created by Vercel CLI
+NEXT_PUBLIC_MAINTENANCE="false"

LSS_ComingSoon/css/main.css

@@ -0,0 +1,36 @@
+const Container = ({ children, background }) => (
+  <>
+    <div className="container">
+      <div className="inner-container">{children}</div>
+    </div>
+    <style jsx>{`
+      .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .inner-container {
+        background: ${background || "var(--primary-medium)"};
+        border-radius: var(--border-radius);
+        width: 90%;
+        padding: 40px 40px;
+        box-shadow: var(--shadow-primary-medium);
+        display: flex;
+        flex-flow: column;
+        font-weight: bold;
+      }
+
+      @media (max-width: 768px) {
+        .inner-container {
+          padding: 40px 30px;
+          width: 100%;
+        }
+      }
+    `}</style>
+  </>
+);
+
+export default Container;

LSS_ComingSoon/index.html

@@ -0,0 +1,14 @@
+const StaffIcon = ({ path, staffName }) => {
+  return (
+    <>
+      <img src={path} alt={staffName} className={"staff-img"} />
+      <style jsx>{`
+        .staff-img {
+          height: 225px;
+          width: 100%;
+        }
+      `}</style>
+    </>
+  );
+};
+export default StaffIcon;

components/Container.js

@@ -54,6 +54,7 @@ const renderLogo = (logo, logoImg) => {
     );
   }
 };
+
 const renderImg = (img) => {
   if (img) {
     return (
@@ -99,52 +100,47 @@ const ServiceSingle = ({ innerText, logo, logoImg, img, textAlign }) => (
       {renderImg(img)}
     </div>
     <style jsx>{`
-
       .serviceSingle {
         display: flex;
         flex-direction: column;
         width: 100%;
-        justify-content:center;
+        justify-content: center;
         align-items: center;
       }
 
       .serviceContainer {
         max-width: 500px;
         margin: auto;
-        text-align: left;       
+        text-align: left;
       }
 
       .serviceContainer h4 {
-          text-align: center;
+        text-align: center;
       }
 
       .serviceDescription {
-          background: var(--primary-medium);
-          border-radius: var(--border-radius);
-          width: 90%;
-          padding: 40px 40px;
-          box-shadow: var(--shadow-primary-medium);
-          display: flex;
-          flex-flow: column;
-          text-align: ${textAlign};
-          font-weight: bold;
+        background: var(--primary-medium);
+        border-radius: var(--border-radius);
+        width: 90%;
+        padding: 40px 40px;
+        box-shadow: var(--shadow-primary-medium);
+        display: flex;
+        flex-flow: column;
+        text-align: ${textAlign};
+        font-weight: bold;
       }
 
- 
-
-
-      
-        @media (max-width: 768px) {
-          .serviceDescription {
-            padding: 40px 30px;
-            width: 100%;
-          }
+      @media (max-width: 768px) {
+        .serviceDescription {
+          padding: 40px 30px;
+          width: 100%;
+        }
 
-          .img-wrapper {
+        .img-wrapper {
           height: 150px;
         }
-  
-      `}</style>
+      }
+    `}</style>
 
     <style jsx global>{`
       .headline {

components/Icons/SAF.js

@@ -3,11 +3,13 @@ export const useOnWindowScroll = (ref, css, scroll) => {
   useEffect(() => {
     // console.log(ref);
     const scrolled = () => {
-      if (window.scrollY > scroll) {
-        ref.current.classList.add(`${css}`);
-      } else {
-        // console.log(ref);
-        ref.current.classList.remove(`${css}`);
+      if (ref.current) {
+        if (window.scrollY > scroll) {
+          ref.current.classList.add(`${css}`);
+        } else {
+          // console.log(ref);
+          ref.current.classList.remove(`${css}`);
+        }
       }
     };
     window.addEventListener("scroll", scrolled);