Multiple Career's subpages

frontend/src/App.js

@@ -13,6 +13,9 @@ const Home = lazy(() => import('./pages/Home'));
 const Portfolio = lazy(() => import('./pages/Portfolio'));
 const Services = lazy(() => import('./pages/Services'));
 const Careers = lazy(() => import('./pages/Careers'));
+const DiligentLife = lazy(() => import('./pages/DiligentLife'));
+const DiligentMinds = lazy(() => import('./pages/DiligentMinds'));
+const EventsTimeline = lazy(() => import('./pages/EventsTimeline'));
 const About = lazy(() => import('./pages/About'));
 const BlogPost = lazy(() => import('./components/BlogPost'));
 const ProcessPage = lazy(() => import('./pages/ProcessPage'));
@@ -78,6 +81,9 @@ function App() {
           <Route exact path="/portfolio" element={<Portfolio />}/>
           <Route exact path="/process" element={<ProcessPage />}/>
           <Route exact path="/careers" element={<Careers />}/>
+          <Route exact path="/diligentlife" element={<DiligentLife />}/>
+          <Route exact path="/diligentminds" element={<DiligentMinds />}/>
+          <Route exact path="/eventstimeline" element={<EventsTimeline />}/>
           <Route exact path="/about" element={<About />}/>
           <Route exact path="/contact" element={<ContactPage />}/>
           <Route exact path="/casestudybi" element={<CaseStudyBI />}/>

frontend/src/index.css

@@ -50,4 +50,9 @@ code {
     monospace;
 }
 
+.no-scroll::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
 @import "./styles/import.styles.css";

frontend/src/pages/Careers.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import axios from 'axios';
 
 import ImgStep1 from '../assets/images/CaseStudy/CentralizedSmall.png';
+import ImgEvents from '../assets/images/Careers/events.png';
 
 import Care from './../assets/icons/values/care.svg';
 import Doing from './../assets/icons/values/doing.svg';
@@ -21,6 +22,9 @@ import AboutUsSlider from '../components/shared/AboutUsSlider';
 import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
 import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
 import PageLayout from '../layout/PageLayout';
+import TimelineCard from '../components/TimelineCard';
+
+import { useNavigate } from 'react-router-dom';
 //import useAnalytics from '../hooks/useAnalytics';
 
 // eslint-disable-next-line no-underscore-dangle
@@ -145,7 +149,7 @@ const _data = {
     ],
   },
   values: {
-    heading: 'Values',
+    heading: 'Benefits',
     cards: [
       {
         id: 0,
@@ -250,6 +254,8 @@ export default function Careers({ forwardedRef }) {
       });
   }, []);
 
+  const link = useNavigate();
+
   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">
@@ -295,7 +301,9 @@ export default function Careers({ forwardedRef }) {
               atmosphere where you constantly learn and improve, this is the place for
               you. We'd love to learn more about you.
             </p>
-            <button className="btn-secondary">Read More</button>
+            <button className="btn-secondary" onClick={() => link('/diligentlife')}>
+              Read More
+            </button>
           </div>
 
           <div className="hidden">
@@ -323,64 +331,67 @@ export default function Careers({ forwardedRef }) {
         <Wrapper bg padding={' py-90p'}>
           <PageTitle
             left
-            heading="Becoming a part of our team"
+            heading="Becoming a Part of Our Team"
             subheading="Selection Process"
           />
-          <div className="flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p">
+          <div className="no-scroll flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p">
             {/* Dynamic Image */}
             <img src={ImgStep1} alt="Img" className="absolute top-1/4 left-1/2 w-2/5" />
 
             {/* Section 1 */}
-            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
               <div className="w-1/2">
-                <h3>Application 1</h3>
-                <p className="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.
+                <h3 className="h3-heading">Shape The Future</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  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.
                 </p>
+                <button className="btn-secondary mt-6">
+                  Open Positions
+                </button>
               </div>
               <div className="w-1/2"></div>
             </div>
 
             {/* Section 2 */}
-            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
               <div className="w-1/2">
-                <h3>Application 2</h3>
-                <p className="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.
+                <h3 className="h3-heading">Shape The Future</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  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.
                 </p>
               </div>
               <div className="w-1/2"></div>
             </div>
 
             {/* Section 3 */}
-            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
               <div className="w-1/2">
-                <h3>Application 3</h3>
-                <p className="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.
+                <h3 className="h3-heading">Shape The Future</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  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.
                 </p>
               </div>
               <div className="w-1/2"></div>
             </div>
 
             {/* Section 4 */}
-            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
               <div className="w-1/2">
-                <h3>Application 4</h3>
-                <p className="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.
+                <h3 className="h3-heading">Shape The Future</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  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.
                 </p>
               </div>
               <div className="w-1/2"></div>
@@ -416,10 +427,7 @@ export default function Careers({ forwardedRef }) {
 
         {/* Values Section */}
         <Wrapper bg padding={' py-90p'}>
-          <section
-            id="values"
-            className="flex flex-row items-center justify-center mt-16"
-          >
+          <section id="values" className="flex flex-row items-center justify-center">
             <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
               <h2 className="heading text-dg-secondary">{_data.values.heading}</h2>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
@@ -437,29 +445,51 @@ export default function Careers({ forwardedRef }) {
         </Wrapper>
 
         {/* Diligent Minds */}
-        <Wrapper padding={' py-90p'}>
-          <PageTitle
-            left
-            heading="Personal Development & Success Stories"
-            subheading="Diligent Minds"
-          />
-          <Wrapper padding={' py-72p'}>
-            <CardsGrid data={_data.cards} />
+        <div className="hidden">
+          <Wrapper padding={' py-90p'}>
+            <PageTitle
+              left
+              heading="Personal Development & Success Stories"
+              subheading="Diligent Minds"
+            />
+            <Wrapper padding={' py-72p'}>
+              <CardsGrid data={_data.cards} />
+            </Wrapper>
+            <div className="flex flex-col md:flex-row items-center justify-center gap-8">
+              <p className="paragraph w-full md:w-1/2 lg:w-3/4">
+                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.
+              </p>
+              <button className="btn-secondary" onClick={() => link('/diligentminds')}>
+                Read More
+              </button>
+            </div>
           </Wrapper>
-          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
-            <p className="paragraph w-full md:w-1/2 lg:w-3/4">
-              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.
-            </p>
-            <button className="btn-secondary">Read More</button>
-          </div>
-        </Wrapper>
+        </div>
 
         {/* Event's Timeline */}
-        <Wrapper bg padding={' py-90p'}>
+        <Wrapper padding={' py-90p'}>
           <PageTitle left heading="Event's Timeline" subheading="Events" />
+          <div className="mt-20p flex flex-col gap-8 items-center justify-center">
+            <p className="paragraph">
+              The main objective is to create a solution that meets the requirements of
+              stakeholders while integrating with existing IT systems to get data without
+              impacting the system. The solution should use only an MS stack of
+              technologies while taking care of sensitive data, and maintaining and
+              providing up-to-date data. The solution should also be a comfortable and
+              reliable, user-friendly solution for everyday work.
+            </p>
+            <img
+              src={ImgEvents}
+              alt="Find out more about Diligent Events!"
+              className="w-2/5"
+            />
+            <button className="btn-secondary" onClick={() => link('/eventstimeline')}>
+              Find Out More
+            </button>
+          </div>
         </Wrapper>
 
         {/* Action Card */}

frontend/src/pages/DiligentLife.jsx

@@ -0,0 +1,274 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+import Img1 from '../assets/images/Careers/img1.png';
+import Img2 from '../assets/images/Careers/img2.png';
+import Img3 from '../assets/images/Careers/img3.png';
+import Img4 from '../assets/images/Careers/img4.png';
+
+import CardsGrid from '../components/CardsGrid';
+
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+import PageTitle from '../components/shared/PageTitle';
+import HighlighedText from '../components/shared/HighlighedText';
+import CardValues from '../components/shared/CardValues';
+import CardLife from '../components/shared/CardLife';
+import ActionCard from '../components/shared/ActionCard';
+import AboutUsSlider from '../components/shared/AboutUsSlider';
+import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
+import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
+import PageLayout from '../layout/PageLayout';
+import TimelineCard from '../components/TimelineCard';
+//import useAnalytics from '../hooks/useAnalytics';
+
+// eslint-disable-next-line no-underscore-dangle
+const _data = {
+    heading: {
+      heading: 'Join Our Team of Diligent Minds',
+      subheading: 'Careers',
+    },
+    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.",
+        },
+      ],
+    },
+    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 [clickedPosition, setClickedPosition] = useState('');
+  const [cntCareers, setCntCareers] = useState('');
+  const [isLoaded, setIsLoaded] = useState('');
+
+  const api_url = process.env.REACT_APP_API_URL;
+
+  useEffect(() => {
+    document.title = 'Careers';
+  }, []);
+
+  //useAnalytics();
+
+  useEffect(async () => {
+    var vid = document.getElementById('animation');
+    vid.playbackRate = 2;
+    axios
+      .get(
+        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
+      )
+      .then(res => {
+        //console.log(res.data.data.attributes);
+        setCntCareers(res.data.data.attributes);
+        setIsLoaded(true);
+      })
+      .catch(err => {
+        console.log(err);
+        setIsLoaded(false);
+      });
+  }, []);
+
+  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">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
+        {/* Diligent Life */}
+        <Wrapper padding={' py-90p'}>
+          <PageTitle
+            left
+            heading={_data.life.heading}
+            subheading={_data.life.subheading}
+          />
+
+          <div className="my-20p">
+            <div>
+              <p className="paragraph">{_data.life.italic.paragraph}</p>
+              <div className="w-full py-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>
+            </div>
+          </div>
+
+          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
+            <p className="paragraph w-full">
+              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.
+            </p>
+          </div>
+        </Wrapper>
+
+        {/* Left-Right Content */}
+        <Wrapper bg padding={' py-90p'}>
+          {/* Shape The Future */}
+          <section
+            id="challanges_solution"
+            className="flex flex-col items-center justify-center mt-16"
+          >
+            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+              <div className="w-full md:w-1/2 md:pr-16">
+                <div>
+                  <h3 className="h3-heading">Shape The Future</h3>
+                  <p className="text-sm text-dark-gray dark:text-white mt-4">
+                    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.
+                  </p>
+                </div>
+              </div>
+              <img
+                src={Img1}
+                alt="Case Study main image"
+                className="text-center w-full md:w-1/2"
+              />
+            </div>
+          </section>
+
+          {/* Shape The Future */}
+          <section
+            id="challanges_solution"
+            className="flex flex-col items-center justify-center mt-16"
+          >
+            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+              <img
+                src={Img2}
+                alt="Case Study main image"
+                className="text-center w-full md:w-1/2"
+              />
+              <div className="w-full md:w-1/2 md:pl-16">
+                <div>
+                  <h3 className="h3-heading">Shape The Future</h3>
+                  <p className="text-sm text-dark-gray dark:text-white mt-4">
+                    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.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Shape The Future */}
+          <section
+            id="challanges_solution"
+            className="flex flex-col items-center justify-center mt-16"
+          >
+            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+              <div className="w-full md:w-1/2 md:pr-16">
+                <div>
+                  <h3 className="h3-heading">Shape The Future</h3>
+                  <p className="text-sm text-dark-gray dark:text-white mt-4">
+                    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.
+                  </p>
+                </div>
+              </div>
+              <img
+                src={Img3}
+                alt="Case Study main image"
+                className="text-center w-full md:w-1/2"
+              />
+            </div>
+          </section>
+
+          {/* Shape The Future */}
+          <section
+            id="challanges_solution"
+            className="flex flex-col items-center justify-center mt-16"
+          >
+            <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+              <img
+                src={Img4}
+                alt="Case Study main image"
+                className="text-center w-full md:w-1/2"
+              />
+              <div className="w-full md:w-1/2 md:pl-16">
+                <div>
+                  <h3 className="h3-heading">Shape The Future</h3>
+                  <p className="text-sm text-dark-gray dark:text-white mt-4">
+                    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.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </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>
+      </div>
+    </PageLayout>
+  );
+}

frontend/src/pages/DiligentMinds.jsx

@@ -0,0 +1,307 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+import ImgStep1 from '../assets/images/CaseStudy/CentralizedSmall.png';
+
+import Care from './../assets/icons/values/care.svg';
+import Doing from './../assets/icons/values/doing.svg';
+import Culture from './../assets/icons/values/culture.svg';
+import Ideas from './../assets/icons/values/ideas.svg';
+
+import CardsGrid from '../components/CardsGrid';
+
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+import PageTitle from '../components/shared/PageTitle';
+import HighlighedText from '../components/shared/HighlighedText';
+import CardValues from '../components/shared/CardValues';
+import CardLife from '../components/shared/CardLife';
+import ActionCard from '../components/shared/ActionCard';
+import AboutUsSlider from '../components/shared/AboutUsSlider';
+import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
+import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
+import PageLayout from '../layout/PageLayout';
+import TimelineCard from '../components/TimelineCard';
+//import useAnalytics from '../hooks/useAnalytics';
+
+// eslint-disable-next-line no-underscore-dangle
+const _data = {
+  heading: {
+    heading: 'Join Our Team of Diligent Minds',
+    subheading: 'Careers',
+  },
+  job: {
+    NetDev: {
+      id: 1,
+      templateFlag: 1,
+      role: '.Net Developer',
+      nugget: '.Net',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        requirements: [
+          'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Good knowledge of software design patterns',
+          'Good knowledge of databases and database design',
+          'Experience in working with microservices is a big plus',
+          'The ability to work in a big team but also to work independently',
+          'Excellent communication skills',
+        ],
+        key: [
+          'Working as a full-stack developer on various project and products',
+          'Working with 3rd-party APIs',
+          'Working on different integration scenarios',
+          'Setting up project structure and architecture',
+          'Being involved in full project development, from writing a specification to deploying a finished product',
+        ],
+        offer: [
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Opportunity to work in teams with experienced engineers',
+          'Competitive employment conditions',
+          'An environment that will make you feel good about your job',
+          'Challenging and diverse projects',
+          'Support in your personal and professional growth',
+          'Flexible working hours',
+          'Private health insurance',
+        ],
+      },
+    },
+    NetDevIntern: {
+      id: 2,
+      templateFlag: 2,
+      role: '.Net Developer Internship',
+      nugget: '.NetInernship',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        offer: [
+          'Paid internship',
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Experience of working in a team',
+          'Work on real project with real clients',
+          'Mentorship from industry leaders',
+          'Support in your personal and professional growth',
+          'Lots of team activities and perks',
+          'Modern working place with a positive and fun atmosphere',
+        ],
+        requirements: [
+          'Fundamentals of data structures ',
+          'Fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Fundamentals of databases and database design',
+          'Team player and fast learner',
+          'Analytical and problem-solving skills',
+        ],
+        selectionProcess: [
+          'Application',
+          'CV Screening',
+          'HR Interview',
+          'Technical Interview',
+          'Internship - offer & contract',
+        ],
+        conslusionParagraph:
+          'At the end of the selection process, we will select interns able to join our team for a 3 months internship and arrange the beginning of the practice personally with you.',
+      },
+    },
+  },
+  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: 'Values',
+    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,
+      title: 'BI Healthcare Solution System',
+      imgUrl:
+        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
+      alt: 'BI Healthcare Solution System',
+      link: '/casestudybi',
+    },
+    {
+      id: 1,
+      title: 'Resource Planning System',
+      imgUrl:
+        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
+      alt: 'Resource Planning System',
+      link: '/casestudyresource',
+    },
+    {
+      id: 2,
+      title: 'Ticketing System for Passengers',
+      imgUrl:
+        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
+      alt: 'Ticketing System for Passengers',
+      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 [clickedPosition, setClickedPosition] = useState('');
+  const [cntCareers, setCntCareers] = useState('');
+  const [isLoaded, setIsLoaded] = useState('');
+
+  const api_url = process.env.REACT_APP_API_URL;
+
+  useEffect(() => {
+    document.title = 'Careers';
+  }, []);
+
+  //useAnalytics();
+
+  useEffect(async () => {
+    var vid = document.getElementById('animation');
+    vid.playbackRate = 2;
+    axios
+      .get(
+        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
+      )
+      .then(res => {
+        //console.log(res.data.data.attributes);
+        setCntCareers(res.data.data.attributes);
+        setIsLoaded(true);
+      })
+      .catch(err => {
+        console.log(err);
+        setIsLoaded(false);
+      });
+  }, []);
+
+  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">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
+        {/* Diligent Minds */}
+        <Wrapper padding={' py-90p'}>
+          <PageTitle
+            left
+            heading="Personal Development & Success Stories"
+            subheading="Diligent Minds"
+          />
+          <Wrapper padding={' py-72p'}>
+            <CardsGrid data={_data.cards} />
+          </Wrapper>
+          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
+            <p className="paragraph w-full md:w-1/2 lg:w-3/4">
+              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.
+            </p>
+            <button className="btn-secondary">
+              Read More
+            </button>
+          </div>
+        </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>
+      </div>
+    </PageLayout>
+  );
+}

frontend/src/pages/EventsTimeline.jsx

@@ -0,0 +1,350 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+import ImgStep1 from '../assets/images/CaseStudy/CentralizedSmall.png';
+import ImgEvents from '../assets/images/Careers/events.png';
+
+import Care from './../assets/icons/values/care.svg';
+import Doing from './../assets/icons/values/doing.svg';
+import Culture from './../assets/icons/values/culture.svg';
+import Ideas from './../assets/icons/values/ideas.svg';
+
+import CardsGrid from '../components/CardsGrid';
+
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+import PageTitle from '../components/shared/PageTitle';
+import HighlighedText from '../components/shared/HighlighedText';
+import CardValues from '../components/shared/CardValues';
+import CardLife from '../components/shared/CardLife';
+import ActionCard from '../components/shared/ActionCard';
+import AboutUsSlider from '../components/shared/AboutUsSlider';
+import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
+import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
+import PageLayout from '../layout/PageLayout';
+import TimelineCard from '../components/TimelineCard';
+//import useAnalytics from '../hooks/useAnalytics';
+
+// eslint-disable-next-line no-underscore-dangle
+const _data = {
+  heading: {
+    heading: 'Join Our Team of Diligent Minds',
+    subheading: 'Careers',
+  },
+  job: {
+    NetDev: {
+      id: 1,
+      templateFlag: 1,
+      role: '.Net Developer',
+      nugget: '.Net',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        requirements: [
+          'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Good knowledge of software design patterns',
+          'Good knowledge of databases and database design',
+          'Experience in working with microservices is a big plus',
+          'The ability to work in a big team but also to work independently',
+          'Excellent communication skills',
+        ],
+        key: [
+          'Working as a full-stack developer on various project and products',
+          'Working with 3rd-party APIs',
+          'Working on different integration scenarios',
+          'Setting up project structure and architecture',
+          'Being involved in full project development, from writing a specification to deploying a finished product',
+        ],
+        offer: [
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Opportunity to work in teams with experienced engineers',
+          'Competitive employment conditions',
+          'An environment that will make you feel good about your job',
+          'Challenging and diverse projects',
+          'Support in your personal and professional growth',
+          'Flexible working hours',
+          'Private health insurance',
+        ],
+      },
+    },
+    NetDevIntern: {
+      id: 2,
+      templateFlag: 2,
+      role: '.Net Developer Internship',
+      nugget: '.NetInernship',
+      shortDetails:
+        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
+      extended: {
+        paragraph:
+          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
+        offer: [
+          'Paid internship',
+          'Full Remote position',
+          'A fast-growth company with stable projects and strong international clients',
+          'Experience of working in a team',
+          'Work on real project with real clients',
+          'Mentorship from industry leaders',
+          'Support in your personal and professional growth',
+          'Lots of team activities and perks',
+          'Modern working place with a positive and fun atmosphere',
+        ],
+        requirements: [
+          'Fundamentals of data structures ',
+          'Fundamentals and knowledge of .NET architecture concepts & patterns',
+          'Fundamentals of databases and database design',
+          'Team player and fast learner',
+          'Analytical and problem-solving skills',
+        ],
+        selectionProcess: [
+          'Application',
+          'CV Screening',
+          'HR Interview',
+          'Technical Interview',
+          'Internship - offer & contract',
+        ],
+        conslusionParagraph:
+          'At the end of the selection process, we will select interns able to join our team for a 3 months internship and arrange the beginning of the practice personally with you.',
+      },
+    },
+  },
+  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: 'Values',
+    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,
+      title: 'BI Healthcare Solution System',
+      imgUrl:
+        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
+      alt: 'BI Healthcare Solution System',
+      link: '/casestudybi',
+    },
+    {
+      id: 1,
+      title: 'Resource Planning System',
+      imgUrl:
+        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
+      alt: 'Resource Planning System',
+      link: '/casestudyresource',
+    },
+    {
+      id: 2,
+      title: 'Ticketing System for Passengers',
+      imgUrl:
+        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
+      alt: 'Ticketing System for Passengers',
+      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 [clickedPosition, setClickedPosition] = useState('');
+  const [cntCareers, setCntCareers] = useState('');
+  const [isLoaded, setIsLoaded] = useState('');
+
+  const api_url = process.env.REACT_APP_API_URL;
+
+  useEffect(() => {
+    document.title = 'Careers';
+  }, []);
+
+  //useAnalytics();
+
+  useEffect(async () => {
+    var vid = document.getElementById('animation');
+    vid.playbackRate = 2;
+    axios
+      .get(
+        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
+      )
+      .then(res => {
+        //console.log(res.data.data.attributes);
+        setCntCareers(res.data.data.attributes);
+        setIsLoaded(true);
+      })
+      .catch(err => {
+        console.log(err);
+        setIsLoaded(false);
+      });
+  }, []);
+
+  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">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
+        {/* Event's Timeline */}
+        <Wrapper bg padding={' py-90p'}>
+          <PageTitle left heading="Event's Timeline" subheading="Events" />
+          <div className="no-scroll flex flex-col items-start justify-start overflow-auto h-[75vh] pt-72p">
+            {/* Dynamic Image */}
+            <img src={ImgStep1} alt="Img" className="absolute top-1/4 left-1/2 w-2/5" />
+
+            {/* Section 1 */}
+            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+              <div className="w-1/2 min-w-fit">
+                <TimelineCard
+                  key="1"
+                  id="1"
+                  title="Heading"
+                  subtitle="Subheading"
+                  paragraph="Paragraph over here. Lorem ipsum. Paragraph over here. Lorem ipsum."
+                />
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+
+            {/* Section 2 */}
+            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+              <div className="w-1/2 min-w-fit">
+                <TimelineCard
+                  key="2"
+                  id="2"
+                  title="Heading"
+                  subtitle="Subheading"
+                  paragraph="Paragraph over here. Lorem ipsum. Paragraph over here. Lorem ipsum."
+                />
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+
+            {/* Section 3 */}
+            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+              <div className="w-1/2 min-w-fit">
+                <TimelineCard
+                  key="3"
+                  id="3"
+                  title="Heading"
+                  subtitle="Subheading"
+                  paragraph="Paragraph over here. Lorem ipsum. Paragraph over here. Lorem ipsum."
+                />
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+
+            {/* Section 4 */}
+            <div className="flex flex-row items-start justify-center min-h-[54vh]">
+              <div className="w-1/2 min-w-fit">
+                <TimelineCard
+                  key="4"
+                  id="4"
+                  title="Heading"
+                  subtitle="Subheading"
+                  paragraph="Paragraph over here. Lorem ipsum. Paragraph over here. Lorem ipsum."
+                />
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+          </div>
+        </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>
+      </div>
+    </PageLayout>
+  );
+}