Merge branch 'dev' into staging

frontend/src/components/HRProcess.jsx

@@ -1,91 +1,132 @@
-import React, {useRef, useEffect} from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useScroll } from 'framer-motion';
 
-const HRProcess = ({data, img}) => {
-  console.log(data);
+const api_url = process.env.REACT_APP_API_URL;
 
-    const ref = useRef(null);
-    const { scrollYProgress } = useScroll({ container: ref });
-  
-    useEffect(() => {
-      const removeB = scrollYProgress.onChange((value) => {
-        if (value > 0.5)
-        {
-            document.querySelector('#img-one').classList.add('opacity-0');
-            document.querySelector('#img-one').classList.remove('opacity-1');
-            document.querySelector('#img-two').classList.remove('opacity-0');
-            document.querySelector('#img-two').classList.add('opacity-1');
-        }
-        else{
-            document.querySelector('#img-one').classList.remove('opacity-0');
-            document.querySelector('#img-one').classList.add('opacity-1');
-            document.querySelector('#img-two').classList.add('opacity-0');
-            document.querySelector('#img-two').classList.remove('opacity-1');
-        }
+const HRProcess = ({ data }) => {
+  //console.log(data);
+
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({ container: ref });
+
+  useEffect(() => {
+    const imageArray = document.querySelectorAll('.image-switch');
+    //console.log(imageArray);
+    const switchImage = scrollYProgress.onChange(value => {
+      if (value <= 0.1) {
+        imageArray.forEach(el => el.classList.remove('active-image'));
+        imageArray[0].classList.add('active-image');
+      }
+      if (value > 0.1) {
+        imageArray.forEach(el => el.classList.remove('active-image'));
+        imageArray[1].classList.add('active-image');
+      }
+      if (value > 0.4) {
+          imageArray.forEach(el => el.classList.remove('active-image'));
+          imageArray[2].classList.add('active-image');
+      }
+      if (value > 0.6) {
+        imageArray.forEach(el => el.classList.remove('active-image'));
+          imageArray[3].classList.add('active-image');
+      }
+      if (value > 0.8) {
+        imageArray.forEach(el => el.classList.remove('active-image'));
+          imageArray[4].classList.add('active-image');
       }
-        
-      );
+      // switch (value) {
+      //   case value > 0.2:
+      //     console.log(1);
+      //     //document.querySelectorAll('.image-switch');
+      //     imageArray.forEach(el => el.classList.remove('active-image'));
+      //     imageArray[1].classList.add('active-image');
+      //     break;
+      //   case value > 0.4:
+      //     console.log(2);
+      //     imageArray.forEach(el => el.classList.remove('active-image'));
+      //     imageArray[2].classList.add('active-image');
+      //     break;
+      //   case value > 0.6:
+      //     imageArray.forEach(el => el.classList.remove('active-image'));
+      //     imageArray[3].classList.add('active-image');
+      //     break;
+      //   case value > 0.8:
+      //     imageArray.forEach(el => el.classList.remove('active-image'));
+      //     imageArray[4].classList.add('active-image');
+      //     break;
+      //   default:
+      //     imageArray.forEach(el => el.classList.remove('active-image'));
+      //     imageArray[0].classList.add('active-image');
+      // }
 
-      return () => {
-       
-        removeB();
-      };
+      // if (value > 0.5)
+      // {
+      //     document.querySelector('#img-one').classList.add('opacity-0');
+      //     document.querySelector('#img-one').classList.remove('opacity-1');
+      //     document.querySelector('#img-two').classList.remove('opacity-0');
+      //     document.querySelector('#img-two').classList.add('opacity-1');
+      // }
+      // else{
+      //     document.querySelector('#img-one').classList.remove('opacity-0');
+      //     document.querySelector('#img-one').classList.add('opacity-1');
+      //     document.querySelector('#img-two').classList.add('opacity-0');
+      //     document.querySelector('#img-two').classList.remove('opacity-1');
+      // }
     });
 
+    return () => {
+      switchImage();
+    };
+  });
 
   return (
     <div
-    ref={ref}
-    id="steps-container"
-    className="steps-container flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3"
-  >
-    {/* Dynamic Image */}
-
-    <img
-      id="img-one"
-      src={img}
-      alt="Image not found"
-      className="bg-fixed hidden sm:block absolute top-1/4 left-1/2 w-2/5  transition-all "
-    />
-    <img
-      id="img-two"
-      src={img}
-      alt="Image not found"
-      className="bg-fixed hidden sm:block opacity-0 absolute top-1/4 left-1/2 w-2/5  transition-all rotate-180"
-    />
-
-    <div className="local">
+      ref={ref}
+      id="steps-container"
+      className="steps-container no-scrollbar flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3"
+    >
+      {/* Dynamic Image */}
       {data.selection_process.steps.map((item, index) => (
-        <>
-          {/* Section */}
-          <div
-            id={item.id}
-            className="relative flex flex-col sm:flex-row items-start justify-center sm:gap-16 min-h-fit max-h[100vh] mb-28 md:mb-56"
-          >
-            {/* Line */}
-            <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+        <img
+          key={index}
+          src={api_url + item.media.data.attributes.url}
+          alt={item.media.data.attributes.alternativeText}
+          className={
+            'image-switch bg-fixed hidden sm:block opacity-0 absolute top-1/4 left-1/2 w-2/5  transition-all' +
+            (index == 0 ? ' active-image' : '')
+          }
+        />
+      ))}
 
-            {/* Dot */}
-            <div className="z-10 p-[0.36rem] rounded-full bg-white border-solid border border-dg-primary-900 absolute -left-[0.63%] top-[1%]"></div>
+      <div className="local">
+        {data.selection_process.steps.map((item, index) => (
+          <>
+            {/* Section */}
+            <div
+              id={item.id}
+              className="relative flex flex-col sm:flex-row items-start justify-center sm:gap-16 min-h-fit max-h[100vh] mb-28 md:mb-56"
+            >
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
 
-            <div className="sm:w-1/2 ml-8">
-              <h3 className="h3-heading">{item.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {item.paragraph}
-              </p>
-              {item.cto != null && (
-                <button className="btn-secondary mt-6 min-w-fit">
-                  {item.cto}
-                </button>
-              )}
+              {/* Dot */}
+              <div className="z-10 p-[0.36rem] rounded-full bg-white border-solid border border-dg-primary-900 absolute -left-[0.63%] top-[1%]"></div>
+
+              <div className="sm:w-1/2 ml-8">
+                <h3 className="h3-heading">{item.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {item.paragraph}
+                </p>
+                {item.cto != null && (
+                  <button className="btn-secondary mt-6 min-w-fit">{item.cto}</button>
+                )}
+              </div>
+              <div className="w-1/2"></div>
             </div>
-            <div className="w-1/2"></div>
-          </div>
-        </>
-      ))}
+          </>
+        ))}
+      </div>
     </div>
-  </div>
-  )
-}
+  );
+};
 
-export default HRProcess
+export default HRProcess;

frontend/src/components/shared/Navigation.jsx

@@ -58,7 +58,7 @@ export default function Navigation({ links, scrollToView, activeLinks, forwarded
             className="hidden md:flex space-x-8 lg:space-x-10 items-center"
           >
             {links.map((item, index) =>
-              item.drop ? (
+              (item.drop && item.drop > 0) ? (
                 <div>
                   <a
                     href={item.path}

frontend/src/components/shared/PageTitle.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 const PageTitle = ({heading, subheading, left, color, pb }) => {
     return (
         <div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " text-dg-secondary" : " ") + (pb ? ' pb-2' :' ')}>
-            <h6 className={"subheading text-inherit" + (left ? " text-left":" text-center")}>{subheading}</h6>
+            <h6 className={"subheading " + (left ? " text-left":" text-center")}>{subheading}</h6>
             <h1 className={"heading text-inherit" + (left ? " text-left":" text-center")}>{heading}</h1>
         </div>
     )

frontend/src/components/shared/VideoComponent.jsx

@@ -6,7 +6,7 @@ import volume from 'react-useanimations/lib/volume';
 
 const api_url = process.env.REACT_APP_API_URL;
 
-const VideoComponent = ({ source }) => {
+const VideoComponent = ({ source, alt }) => {
   const [mute, setMute] = useState(true);
 
   const vidRef = useRef();
@@ -21,7 +21,7 @@ const VideoComponent = ({ source }) => {
   return (
     <div className="w-full py-48p lg:py-72p relative">
       <video autoPlay loop ref={vidRef} muted className="rounded-[32px]">
-        <source type="video/mp4" src={api_url + source} />
+        <source type="video/mp4" src={api_url + source} alt={api_url + alt} />
       </video>
       <div className="absolute bottom-16 right-4 md:bottom-24 md:right-8 rounded-full overflow-clip">
         <UseAnimations

frontend/src/pages/Careers.jsx

@@ -174,7 +174,7 @@ export default function Careers({ forwardedRef }) {
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
 
-  console.log(data);
+  //console.log(data);
 
   useEffect(() => {
     document.title = 'Careers';
@@ -218,7 +218,7 @@ export default function Careers({ forwardedRef }) {
 
                 {/* Video Frame */}
                 {data && data.Video != undefined ? (
-                  <VideoComponent source={data.Video.data.attributes.url} />
+                  <VideoComponent source={data.Video.data.attributes.url} alt={data.Video.data.attributes.alternativeText} />
                 ) : null}
               </div>
             </div>
@@ -227,12 +227,13 @@ export default function Careers({ forwardedRef }) {
               <p className="paragraph w-full lg:w-3/4">
                 {data.diligent_life.CTO.cto_paragraph}
               </p>
-              <button
+              {/* Disabled becouse no content on that page */}
+              {/* <button
                 className="btn-secondary min-w-fit"
                 onClick={() => link('/diligentlife')}
               >
                 {data.diligent_life.CTO.cto_button}
-              </button>
+              </button> */}
             </div>
           </Wrapper>
 
@@ -243,7 +244,7 @@ export default function Careers({ forwardedRef }) {
               heading={data.selection_process.heading.heading}
               subheading={data.selection_process.heading.subheading}
             />
-            <HRProcess data={data} img={ImgStep1} />
+            <HRProcess data={data} />
           </Wrapper>
 
           {/* Open Positions */}

frontend/src/routes.js

@@ -87,13 +87,14 @@ const routes = [
         exact: true,
         nav:true,
         drop: [
-          {
-            path:'/diligentlife',
-            component: <DiligentLife />,
-            title: 'Diligent Life',
-            exact: true,
-            nav:true,
-          },
+          // enable after we add content
+          // {
+          //   path:'/diligentlife',
+          //   component: <DiligentLife />,
+          //   title: 'Diligent Life',
+          //   exact: true,
+          //   nav:true,
+          // },
           // {
           //   path:"/diligentminds",
           //   component: <DiligentMinds />,

frontend/src/styles/cards.css

@@ -22,6 +22,7 @@
     .card-plain {
       @apply p-12
     }
+
   }
 
   .leaf {
@@ -33,3 +34,7 @@
     border: 1px solid #D4D4D4;
     border-radius: 18px;
   }
+
+  .active-image {
+    opacity: 1 !important;
+  }