-

frontend/src/pages/Careers.jsx

@@ -33,6 +33,33 @@ const _data = {
     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,
@@ -230,6 +257,36 @@ export default function Careers({ forwardedRef }) {
 
   const api_url = process.env.REACT_APP_API_URL;
 
+  useEffect(() => {
+    const stepsContainer = document.querySelector('#steps-container');
+    const stepsImage = document.querySelector('#steps-image');
+    console.log(stepsImage);
+
+    function isInViewport(el) {
+      const rect = el.getBoundingClientRect();
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+      );
+    }
+
+    document.addEventListener(
+      'scroll',
+      function () {
+        const stepsImageSrc = isInViewport(stepsContainer)
+          ? 'https://images.unsplash.com/photo-1588689195067-cb368b2da826?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
+          : 'https://images.unsplash.com/photo-1588689194901-a1fb731a43e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=721&q=80';
+
+        stepsImage.src = stepsImageSrc;
+      },
+      {
+        passive: true,
+      },
+    );
+  }, []);
+
   useEffect(() => {
     document.title = 'Careers';
   }, []);
@@ -334,64 +391,89 @@ export default function Careers({ forwardedRef }) {
             heading="Becoming a Part of Our Team"
             subheading="Selection Process"
           />
-          <div className="no-scroll 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 pl-3">
             {/* Dynamic Image */}
-            <img src={ImgStep1} alt="Img" className="absolute top-1/4 left-1/2 w-2/5" />
+            <img
+              id="steps-image"
+              src={ImgStep1}
+              alt="Image not found"
+              className="absolute top-1/4 left-1/2 w-2/5 bg-fixed"
+            />
 
             {/* Section 1 */}
-            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
-              <div className="w-1/2">
-                <h3 className="h3-heading">Shape The Future</h3>
+            <div
+              id="steps-container"
+              className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]"
+            >
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepOne.heading}</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.
+                  {_data.selectionProcess.stepOne.paragraph}
                 </p>
-                <button className="btn-secondary mt-6">
-                  Open Positions
-                </button>
+                <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 gap-16 min-h-[54vh]">
-              <div className="w-1/2">
-                <h3 className="h3-heading">Shape The Future</h3>
+            <div className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepTwo.heading}</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.
+                  {_data.selectionProcess.stepTwo.paragraph}
                 </p>
               </div>
               <div className="w-1/2"></div>
             </div>
 
             {/* Section 3 */}
-            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
-              <div className="w-1/2">
-                <h3 className="h3-heading">Shape The Future</h3>
+            <div className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepThree.heading}</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.
+                  {_data.selectionProcess.stepThree.paragraph}
                 </p>
               </div>
               <div className="w-1/2"></div>
             </div>
 
             {/* Section 4 */}
-            <div className="flex flex-row items-start justify-center gap-16 min-h-[54vh]">
-              <div className="w-1/2">
-                <h3 className="h3-heading">Shape The Future</h3>
+            <div className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepFour.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.selectionProcess.stepFour.paragraph}
+                </p>
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+
+            {/* Section 5 */}
+            <div className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepFive.heading}</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.
+                  {_data.selectionProcess.stepFive.paragraph}
                 </p>
               </div>
               <div className="w-1/2"></div>
@@ -425,7 +507,7 @@ export default function Careers({ forwardedRef }) {
           </section>
         </Wrapper>
 
-        {/* Values Section */}
+        {/* Benefits Section */}
         <Wrapper bg padding={' py-90p'}>
           <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">
@@ -481,11 +563,9 @@ export default function Careers({ forwardedRef }) {
               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"
-            />
+            <div className="w-screen">
+              <AboutUsSlider />
+            </div>
             <button className="btn-secondary" onClick={() => link('/eventstimeline')}>
               Find Out More
             </button>

frontend/src/pages/DiligentLife.jsx

@@ -24,54 +24,54 @@ import TimelineCard from '../components/TimelineCard';
 
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
-    heading: {
-      heading: 'Join Our Team of Diligent Minds',
-      subheading: 'Careers',
+  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',
     },
-    life: {
-      heading: 'A Culture That’s Serious About Work and Fun',
-      subheading: 'Diligent life',
-      italic: {
-        heading: 'Life At diligent',
+    cards: [
+      {
+        id: 1,
+        title: 'Shape the Future',
         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',
+          '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.',
       },
-      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',
-    },
-  };
+      {
+        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('');
@@ -129,7 +129,7 @@ export default function Careers({ forwardedRef }) {
           <div className="my-20p">
             <div>
               <p className="paragraph">{_data.life.italic.paragraph}</p>
-              <div className="w-full py-72p">
+              <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"
@@ -141,15 +141,6 @@ export default function Careers({ forwardedRef }) {
               </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 */}
@@ -162,12 +153,9 @@ export default function Careers({ forwardedRef }) {
             <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>
+                  <h3 className="h3-heading">{_data.life.cards[0].title}</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.
+                    {_data.life.cards[0].paragraph}
                   </p>
                 </div>
               </div>
@@ -192,12 +180,9 @@ export default function Careers({ forwardedRef }) {
               />
               <div className="w-full md:w-1/2 md:pl-16">
                 <div>
-                  <h3 className="h3-heading">Shape The Future</h3>
+                  <h3 className="h3-heading">{_data.life.cards[1].title}</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.
+                    {_data.life.cards[1].paragraph}
                   </p>
                 </div>
               </div>
@@ -212,12 +197,9 @@ export default function Careers({ forwardedRef }) {
             <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>
+                  <h3 className="h3-heading">{_data.life.cards[2].title}</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.
+                    {_data.life.cards[2].paragraph}
                   </p>
                 </div>
               </div>
@@ -242,12 +224,9 @@ export default function Careers({ forwardedRef }) {
               />
               <div className="w-full md:w-1/2 md:pl-16">
                 <div>
-                  <h3 className="h3-heading">Shape The Future</h3>
+                  <h3 className="h3-heading">{_data.life.cards[3].title}</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.
+                    {_data.life.cards[3].paragraph}
                   </p>
                 </div>
               </div>

frontend/src/pages/EventsTimeline.jsx

@@ -266,16 +266,32 @@ export default function Careers({ forwardedRef }) {
   return (
     <PageLayout>
       <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
-        {/* Event's Timeline */}
+        {/* Selection Process */}
         <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">
+          <PageTitle
+            left
+            heading="Becoming a Part of Our Team"
+            subheading="Selection Process"
+          />
+          <div className="no-scroll flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3">
             {/* Dynamic Image */}
-            <img src={ImgStep1} alt="Img" className="absolute top-1/4 left-1/2 w-2/5" />
+            <img
+              id="steps-image"
+              src={ImgStep1}
+              alt="Image not found"
+              className="absolute top-1/4 left-1/2 w-2/5 bg-fixed"
+            />
 
             {/* Section 1 */}
-            <div className="flex flex-row items-start justify-center min-h-[54vh]">
-              <div className="w-1/2 min-w-fit">
+            <div
+              id="steps-container"
+              className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]"
+            >
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 min-w-fit ml-8">
                 <TimelineCard
                   key="1"
                   id="1"
@@ -288,43 +304,61 @@ export default function Careers({ forwardedRef }) {
             </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 className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepTwo.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.selectionProcess.stepTwo.paragraph}
+                </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="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 className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepThree.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.selectionProcess.stepThree.paragraph}
+                </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="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 className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepFour.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.selectionProcess.stepFour.paragraph}
+                </p>
+              </div>
+              <div className="w-1/2"></div>
+            </div>
+
+            {/* Section 5 */}
+            <div className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]">
+              {/* Line */}
+              <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+              {/* 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="w-1/2 ml-8">
+                <h3 className="h3-heading">{_data.selectionProcess.stepFive.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.selectionProcess.stepFive.paragraph}
+                </p>
               </div>
               <div className="w-1/2"></div>
             </div>