diligent lfe

frontend/package-lock.json

         "react-markdown": "^8.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
+        "react-useanimations": "^2.10.0",
         "styled-components": "^5.3.5",
         "tailwind.macro": "^0.5.10",
         "web-vitals": "^2.1.3",
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz",
+      "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A=="
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
         "node": ">=10"
       }
     },
+    "node_modules/react-useanimations": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/react-useanimations/-/react-useanimations-2.10.0.tgz",
+      "integrity": "sha512-MzGNv8vkvb6qEvMBCj+O6nUloUHSJRubMAH3uE7J4M+pjt5ud5xDaXBrQgv5GbvBg29XzviKWHTfvvkofDEu+Q==",
+      "dependencies": {
+        "lottie-web": "^5.5.7"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz",
+      "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A=="
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
         }
       }
     },
+    "react-useanimations": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/react-useanimations/-/react-useanimations-2.10.0.tgz",
+      "integrity": "sha512-MzGNv8vkvb6qEvMBCj+O6nUloUHSJRubMAH3uE7J4M+pjt5ud5xDaXBrQgv5GbvBg29XzviKWHTfvvkofDEu+Q==",
+      "requires": {
+        "lottie-web": "^5.5.7"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

frontend/package.json

     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-useanimations": "^2.10.0",
     "styled-components": "^5.3.5",
     "tailwind.macro": "^0.5.10",
     "web-vitals": "^2.1.3",

frontend/src/assets/icons/volume.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="white"/>
+<path d="M5.5 10V14C5.5 16 6.5 17 8.5 17H9.93C10.3 17 10.67 17.11 10.99 17.3L13.91 19.13C16.43 20.71 18.5 19.56 18.5 16.59V7.41003C18.5 4.43003 16.43 3.29003 13.91 4.87003L10.99 6.70003C10.67 6.89003 10.3 7.00003 9.93 7.00003H8.5C6.5 7.00003 5.5 8.00003 5.5 10Z" stroke="#292D32" stroke-width="1.5"/>
+</svg>

frontend/src/components/shared/VideoComponent.jsx

+import React, { useRef } from 'react';
+import { useEffect } from 'react';
+
+import { useState } from 'react';
+import UseAnimations from 'react-useanimations';
+import volume from 'react-useanimations/lib/volume';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const VideoComponent = ({ source }) => {
+  const [mute, setMute] = useState(true);
+
+  const vidRef = useRef();
+  const muteRef = useRef();
+
+  function toggleMute() {
+    var video = vidRef.current;
+    video.muted = !video.muted;
+    setMute(!mute);
+  }
+  useEffect(() => {
+    console.log(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} />
+      </video>
+      <div className="absolute bottom-16 right-4 md:bottom-24 md:right-8 rounded-full overflow-clip">
+        <UseAnimations
+          reverse={mute}
+          onClick={() => {
+            toggleMute();
+          }}
+          size={50}
+          wrapperStyle={{ background: 'white', padding:'5px' }}
+          animation={volume}
+          speed={0.7}
+        />
+      </div>
+
+      {/* <div className="">
+        <button
+          className={'unmuted toggle-sound' + (mute ? ' sound-mute' : null)}
+          onClick={() => toggleMute()}
+        >
+          <div className="sound">
+            <div className="sound--icon">
+              <Speaker />
+            </div>
+            <div className="sound--wave sound--wave_one"></div>
+            <div className="sound--wave sound--wave_two"></div>
+            <div className="sound--wave sound--wave_three"></div>
+          </div>
+        </button>
+      </div> */}
+    </div>
+  );
+};
+
+export default VideoComponent;

frontend/src/pages/Careers.jsx

 import { useNavigate } from 'react-router-dom';
 import useAnalytics from './../hooks/useAnalytics';
 import HRProcess from '../components/HRProcess';
+import VideoComponent from './../components/shared/VideoComponent';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
-  heading: {
-    heading: 'Join Our Team of Diligent Minds',
-    subheading: 'Careers',
-  },
-  selectionProcess: {
-    stepOne: {
-      heading: 'Application',
-      paragraph:
-        'You consider Diligent to be the best fit for your professional growth? Send us your CV now! All open positions and information on how to apply are listed on our website. If you require additional details? For any questions, please contact us at hr@dilig.net.',
-    },
-    stepTwo: {
-      heading: 'Preselection',
-      paragraph:
-        'The HR team, as well as the team leader of the team for which you are applying, will check your CV. It is a top priority for the HR team! Following that, you will receive a phone call from us with the option to agree on the next stage of selection, which can be done online or in person at our office.',
-    },
-    stepThree: {
-      heading: 'HR interview',
-      paragraph:
-        'Let’s get to know each other! We will give you a brief introduction to our business, culture, and working environment during the interview with the recruiter. We will discuss your job history, interests, and ambitions for advancing your professional career together. We’ll also respond to any inquiries you might have for us.',
-    },
-    stepFour: {
-      heading: 'Technical interview',
-      paragraph:
-        'In order to better evaluate your level of technical expertise, you will discuss your project experiences with our experienced engineers, answer questions regarding the technology you worked on, and complete a task (depending on the role).',
-    },
-    stepFive: {
-      heading: 'Feedback',
-      paragraph:
-        'Feedback is the final step in our selection procedure. You will receive general feedback regarding your interview. If we are a match, we will send you an offer and specify the working conditions.',
-    },
-  },
   job: {
     NetDev: {
       id: 1,
       },
     },
   },
-  life: {
-    heading: 'A Culture That’s Serious About Work and Fun',
-    subheading: 'Diligent life',
-    italic: {
-      heading: 'Life At diligent',
-      paragraph:
-        'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
-      heading2: 'What It Means to Work With Us',
-    },
-    cards: [
-      {
-        id: 1,
-        title: 'Shape the Future',
-        paragraph:
-          'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
-      },
-      {
-        id: 2,
-        title: 'Life-Long Learning',
-        paragraph:
-          'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
-      },
-      {
-        id: 3,
-        title: 'A Unique Culture',
-        paragraph:
-          'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.',
-      },
-      {
-        id: 4,
-        title: 'Make the Impossible Better',
-        paragraph:
-          "If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We'd love to learn more about you.",
-      },
-    ],
-  },
-  values: {
-    heading: 'Benefits',
-    cards: [
-      {
-        id: 0,
-        iconUrl: Care,
-        title: 'Care',
-        paragraph:
-          'We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. ',
-      },
-      {
-        id: 1,
-        iconUrl: Culture,
-        title: 'Culture',
-        paragraph:
-          'Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more.',
-      },
-      {
-        id: 2,
-        iconUrl: Doing,
-        title: 'Learn by Doing',
-        paragraph:
-          'Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team.',
-      },
-      {
-        id: 3,
-        iconUrl: Ideas,
-        title: 'Ideas Over Hierarchy',
-        paragraph:
-          'We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action.',
-      },
-    ],
-  },
   cards: [
     {
       id: 0,
       link: '/casestudyticketing',
     },
   ],
-  connect: {
-    heading: 'Connect and Grow With Us',
-    paragraph:
-      'At Diligent, we are passionately proud of our culture and feel that everyone, including those who are not yet on the team, should have the opportunity to experience it. Because of this, we participate in Open Doors. Our coworkers are actively involved in the local tech communities. We take satisfaction in giving back as well, assisting college students or seasoned professionals who want to start a career in IT.',
-    subtitle: 'Check out how we have fun together!',
-    sliderImages: [],
-  },
-  ActionCard: {
-    heading: 'Step up Your Career!',
-    paragraph:
-      'We are continuously on the lookout for talented people to grow our business.',
-    primaryBtn: 'Apply',
-    secondaryBtn: 'About Us',
-  },
 };
 
 export default function Careers({ forwardedRef }) {
   const [cntCareers, setCntCareers] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
- 
+
 
   useEffect(() => {
     document.title = 'Careers';
 
   useAnalytics('Careers');
 
-  useEffect(async () => {
-    var vid = document.getElementById('animation');
-    vid.playbackRate = 2;
-    axios
-      .get(
-        `${api_url}/api/n-careerspage?populate[0]=diligent_life&populate[1]=diligent_life.heading_section&populate[2]=diligent_life.CTO&populate[3]=diligent_life.media_text.media&populate[4]=selection_process.heading&populate[5]=selection_process.steps.media&populate[6]=positions_heading&populate[7]=positions_card.Image&populate[8]=benefits_heading&populate[9]=benefits_card.media`,
-      )
-      .then(res => {
-        //console.log(res.data.data.attributes);
-        setCntCareers(res.data.data.attributes);
-        setIsLoaded(true);
-      })
-      .catch(err => {
-        console.log(err);
-        setIsLoaded(false);
-      });
+  useLayoutEffect(() => {
+    const fetch = async () => {
+      var vid = document.getElementById('animation');
+      vid.playbackRate = 2;
+      axios
+        .get(
+          `${api_url}/api/n-careerspage?populate[0]=diligent_life&populate[1]=diligent_life.heading_section&populate[2]=diligent_life.CTO&populate[3]=diligent_life.media_text.media&populate[4]=selection_process.heading&populate[5]=selection_process.steps.media&populate[6]=positions_heading&populate[7]=positions_card.Image&populate[8]=benefits_heading&populate[9]=benefits_card.media&populate[10]=ActionCard&populate[11]=Video`,
+        )
+        .then(res => {
+          setCntCareers(res.data.data.attributes);
+          setIsLoaded(true);
+        })
+        .catch(err => {
+          console.log(err);
+          setIsLoaded(false);
+        });
+    };
+    fetch();
   }, []);
 
   const link = useNavigate();
 
+  useEffect(() => {
+    console.log(cntCareers);
+  }, [cntCareers]);
+
+
+  //useEffect(() => { vidRef.current.play(); },[]);
+
   if (!isLoaded) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
               <p className="paragraph">
                 {cntCareers.diligent_life.heading_section.paragraph}
               </p>
-              <div className="w-full py-48p lg:py-72p">
-                <iframe
-                  className="m-auto w-4/5 h-[250px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[450px] lg:w-[960px] lg:h-[540px]"
-                  src={cntCareers.diligent_life.heading_section.link}
-                  title="YouTube video player"
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                ></iframe>
-              </div>
+              {/* Video Frame */}
+              {cntCareers && cntCareers.Video != undefined ? (
+                <VideoComponent source={cntCareers.Video.data.attributes.url} />
+              ) : null}
             </div>
           </div>
 
             heading={cntCareers.selection_process.heading.heading}
             subheading={cntCareers.selection_process.heading.subheading}
           />
-         <HRProcess cntCareers={cntCareers} img={ImgStep1} />
+          <HRProcess cntCareers={cntCareers} img={ImgStep1} />
         </Wrapper>
 
         {/* Open Positions */}
           </section>
         </Wrapper>
 
-
         {/* Action Card */}
-        <Wrapper>
-          <div className="my-90p">
-            <ActionCard
-              title={_data.ActionCard.heading}
-              text={_data.ActionCard.paragraph}
-              btn1={_data.ActionCard.primaryBtn}
-              btn2={_data.ActionCard.secondaryBtn}
-              link1={'/contact'}
-              link2={'/about'}
-            />
-          </div>
-        </Wrapper>
+        {cntCareers ? (
+          <Wrapper>
+            <div className="my-90p">
+              <ActionCard
+                title={cntCareers.ActionCard.title}
+                text={cntCareers.ActionCard.paragraph}
+                btn1={cntCareers.ActionCard.ButtonPrimary}
+                btn2={cntCareers.ActionCard.ButtonSecondary}
+                link1={'/contact'}
+                link2={'/about'}
+              />
+            </div>
+          </Wrapper>
+        ) : null}
       </div>
     </PageLayout>
   );

frontend/src/pages/DiligentLife.jsx

 import PageLayout from '../layout/PageLayout';
 import TimelineCard from '../components/TimelineCard';
 //import useAnalytics from '../hooks/useAnalytics';
+import VideoComponent from './../components/shared/VideoComponent';
 
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
   const api_url = process.env.REACT_APP_API_URL;
 
   useEffect(() => {
-    document.title = 'Careers';
+    document.title = 'Diligent Life';
   }, []);
 
   //useAnalytics();
     vid.playbackRate = 2;
     axios
       .get(
-        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
+        `${api_url}/api/n-careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon&populate[3]=Video`,
       )
       .then(res => {
-        //console.log(res.data.data.attributes);
         setCntCareers(res.data.data.attributes);
         setIsLoaded(true);
       })
       });
   }, []);
 
+  useEffect(() => {
+    console.log(cntCareers)
+  },[cntCareers])
+
   if (!isLoaded) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
           <div className="my-20p">
             <div>
               <p className="paragraph">{_data.life.italic.paragraph}</p>
-              <div className="w-full pt-72p">
-                <iframe
-                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[960px] lg:h-[540px]"
-                  src="https://www.youtube.com/embed/PFHIqqHRS4s?controls=0&autoplay=0&mute=1"
-                  title="YouTube video player"
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                ></iframe>
-              </div>
+              {cntCareers && cntCareers.Video != undefined ? (
+                <VideoComponent source={cntCareers.Video.data.attributes.url} />
+              ) : null}
+              
             </div>
           </div>
         </Wrapper>

frontend/src/routes.js

         nav:true,
         drop: [
           {
-            path:"/diligentlife",
+            path:'/diligentlife',
             component: <DiligentLife />,
             title: 'Diligent Life',
             exact: true,
             nav:true,
           },
-          {
-            path:"/diligentminds",
-            component: <DiligentMinds />,
-            title: 'Diligent Minds',
-            exact: true,
-            nav:true,
-          },
-          {
-            path:"/eventstimeline",
-            component: <EventsTimeline />,
-            title: 'Events Timeline',
-            exact: true,
-            nav:true,
-          },
-        ]
+          // {
+          //   path:"/diligentminds",
+          //   component: <DiligentMinds />,
+          //   title: 'Diligent Minds',
+          //   exact: true,
+          //   nav:true,
+          // },
+          // {
+          //   path:"/eventstimeline",
+          //   component: <EventsTimeline />,
+          //   title: 'Events Timeline',
+          //   exact: true,
+          //   nav:true,
+          // },
+        ],
       },
       {
         path: '/about',

frontend/yarn.lock

   dependencies:
     "js-tokens" "^3.0.0 || ^4.0.0"
 
+"lottie-web@^5.5.7":
+  "integrity" "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A=="
+  "resolved" "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz"
+  "version" "5.10.2"
+
 "lower-case@^2.0.2":
   "integrity" "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg=="
   "resolved" "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz"
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^16 || ^17 || ^18", "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.2", "react-dom@>= 16.8.0", "react-dom@>=16.8", "react-dom@>=16.8 || ^17.0.0 || ^18.0.0":
+"react-dom@*", "react-dom@^16 || ^17 || ^18", "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.2", "react-dom@>= 16.8.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8 || ^17.0.0 || ^18.0.0":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
   optionalDependencies:
     "fsevents" "^2.3.2"
 
+"react-useanimations@^2.10.0":
+  "integrity" "sha512-MzGNv8vkvb6qEvMBCj+O6nUloUHSJRubMAH3uE7J4M+pjt5ud5xDaXBrQgv5GbvBg29XzviKWHTfvvkofDEu+Q=="
+  "resolved" "https://registry.npmjs.org/react-useanimations/-/react-useanimations-2.10.0.tgz"
+  "version" "2.10.0"
+  dependencies:
+    "lottie-web" "^5.5.7"
+
 "react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.4.1", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"