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);

components/Icons/SDI.js

@@ -44,7 +44,7 @@ export default function Home() {
         </section>
 
         <section className="margin-bottom-1 img-wrapper">
-          <Image src={`/imgs/Contact.jpg`} layout="fill" className="next-img" priority={true}/>
+          <img src={`/imgs/Contact.jpg`} />
         </section>
 
         <section className="margin-bottom-1">
@@ -66,16 +66,6 @@ export default function Home() {
         </section>
       </main>
       <Footer />
-      <style jsx global>
-        {`
-          .next-img {
-            height: 100%;
-            width: 90%;
-            object-fit: cover;
-            border-radius: 5px;
-          }
-        `}
-      </style>
 
       <style jsx>{`
         .card {
@@ -89,13 +79,17 @@ export default function Home() {
           border-radius: 10px;
           transition: color 0.15s ease, border-color 0.15s ease;
         }
+
         .img-wrapper {
           height: 350px;
           text-align: center;
+        }
+        .img-wrapper img {
+          height: 100%;
           width: 90%;
-          position: relative;
+          object-fit: cover;
+          border-radius: 5px;
         }
-
         .logo {
           height: 1em;
         }
@@ -119,186 +113,6 @@ export default function Home() {
           }
         }
       `}</style>
-      <style jsx global>{`
-        @font-face {
-          font-family: "matiasregular";
-          src: url("/fonts/matias-webfont.woff2") format("woff2"), url("/fonts/matias-webfont.woff") format("woff");
-          font-weight: normal;
-          font-style: normal;
-        }
-
-        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap");
-        :root {
-        }
-        html,
-        body {
-          padding: 0px;
-          margin: 0px;
-          overflow-x: hidden;
-          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
-            Droid Sans, Helvetica Neue, sans-serif;
-          font-family: "matiasregular", "Open Sans", sans-serif;
-        }
-
-        .container {
-          min-height: 100vh;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          max-width: var(--content-width);
-          margin: 0 auto;
-        }
-
-        header {
-          width: 100%;
-          background-image: var(--gradient);
-          position: fixed;
-          top: 0;
-          z-index: 9999999;
-          box-shadow: var(--shadow-small);
-        }
-
-        section {
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          border-radius: var(--border-radius);
-        }
-
-        .description {
-          line-height: 1.5;
-          font-size: 1.5rem;
-        }
-
-        .grid {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-wrap: wrap;
-
-          max-width: 800px;
-          margin-top: 3rem;
-        }
-
-        main {
-          flex: 1;
-          display: flex;
-          width: 100%;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          margin: 0 auto;
-          padding-top: var(--nav-height);
-          transition: padding-top 0.5s ease;
-        }
-
-        * {
-          box-sizing: border-box;
-        }
-
-        h1,
-        h2,
-        h3 {
-          letter-spacing: 6px;
-        }
-
-        h1,
-        .like-1 {
-          font-size: 2em;
-        }
-
-        h2,
-        .like-2 {
-          font-size: 1.5em;
-        }
-
-        h3,
-        .like-3 {
-          font-size: 1.17em;
-        }
-
-        h4 {
-          font-size: 1em;
-        }
-
-        a,
-        a:hover,
-        a:active,
-        a:visited {
-          color: inherit;
-          text-decoration: none;
-        }
-
-        .no-margin {
-          margin: 0;
-        }
-
-        .margin-1 {
-          margin: 60px 0;
-        }
-
-        .margin-top-1 {
-          margin-top: 60px;
-        }
-
-        .margin-bottom-1 {
-          margin-bottom: 60px;
-        }
-
-        .margin-2 {
-          margin: 25px 0;
-        }
-
-        .margin-top-2 {
-          margin-top: 25px;
-        }
-
-        .margin-bottom-2 {
-          margin-bottom: 25px;
-        }
-
-        .shadow-3 {
-          box-shadow: var(--elevation-3);
-        }
-
-        .scrolled {
-          --nav-height: 85px;
-        }
-        .scrolled + main {
-          --nav-height: 85px;
-        }
-        .scrolled .navigation {
-          --logo-size: 60px;
-          --logo-circle: 70px;
-        }
-
-        @media (max-width: 768px) {
-          :root {
-            --border-radius: 0;
-          }
-          .margin-1 {
-            margin: 40px 0;
-          }
-
-          .margin-top-1 {
-            margin-top: 40px;
-          }
-
-          .margin-bottom-1 {
-            margin-bottom: 40px;
-          }
-          .scrolled {
-            --nav-height: 80px;
-          }
-
-          .scrolled .navigation {
-            --hamburger-size: 25px;
-            --logo-size: 50px;
-            --logo-circle: 60px;
-          }
-        }
-      `}</style>
     </div>
   );
 }