new job card

frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

 import { m } from 'framer-motion';
 import useClickOutside from '../../hooks/useClickOutside';
 import { UIContext } from '../../context';
+import { ref } from 'yup';
 
-const _data = {
-  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',
-  ],
-};
 
-const _card = {
-  role: '.Net Developer',
-  shortDetails:
-    '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.',
-};
 
-const ExpandedCard = ({ card, setExpanded, setExpandedCard }) => {
+const ExpandedCard = ({ card, setExpanded, setExpandedCard, forwarderdRef }) => {
   const linkTo = useNavigate();
 
   const handleNavigate = (tab, position) => {
-    linkTo('/contact', { tab: { tab}, position: { position } });
-  }
-  
-
+    linkTo('/contact', { tab: { tab }, position: { position } });
+  };
 
-  
+  console.log(card);
 
   return (
     <div
+      ref={forwarderdRef}
       className={
         'dark:text-white card-no-hover w-full h-fit shadow-md rounded-md px-12 lg:px-32 py-12 lg:py-16'
       }
                 direction={'left'}
               />
             </div>
-            <div className="hidden lg:block absolute top-20 left-12">
+            <div className="hidden lg:block absolute top-20 md:top-[15rem] left-12">
               <TriangleButton
                 onClick={() => {
                   setExpanded(false);
           <p className="mt-6 text-sm">{card.extended.shortDetails}</p>
           <h4 className="mt-6 font-semibold text-lg">Key Responsibilities:</h4>
           <ul>
-            {_data.key.map((item, index) => (
-              <li className="list-disc ml-6" key={index}>
-                {item}
-              </li>
-            ))}
+            {card &&
+              card.extended.key &&
+              card.extended.key.map((item, index) => (
+                <li className="list-disc ml-6" key={index}>
+                  {item}
+                </li>
+              ))}
           </ul>
           <br />
           <h4 className="mt-6 font-semibold text-lg">Requirements:</h4>
           <ul>
-            {_data.requirements.map((item, index) => (
-              <li className="list-disc ml-6" key={index}>
-                {item}
-              </li>
-            ))}
+            {card &&
+              card.extended.requirements &&
+              card.extended.requirements.map((item, index) => (
+                <li className="list-disc ml-6" key={index}>
+                  {item}
+                </li>
+              ))}
           </ul>
           <br />
           <h4 className="mt-6 font-semibold text-lg">What We Offer:</h4>
           <ul>
-            {_data.offer.map((item, index) => (
-              <li className="list-disc ml-6" key={index}>
-                {item}
-              </li>
-            ))}
+            {
+              card.extended.offer.map((item, index) => (
+                <li className="list-disc ml-6" key={index}>
+                  {item}
+                </li>
+              ))}
           </ul>
           <br />
           <div className="flex flex-row w-full items-center justify-end">
             <a
               href="/contact"
               className="btn btn_primary mt-8 transition-all hover:transition-all"
-              onClick={handleNavigate(false, ".Net")}
+              onClick={handleNavigate(false, card.nugget)}
             >
               Apply
             </a>
           </div>
         </div>
       )}
-       {card.templateFlag === 2 && (
+      {card.templateFlag === 2 && (
         <div className="flex flex-col items-start justify-center text-left">
           <div className="flex flex-row items-center justify-start">
             <div className="mr-4 lg:hidden">
             ))}
           </ul>
           <br />
-          <h4 className="mt-6 font-semibold text-lg">Our selection process has the following steps:</h4>
+          <h4 className="mt-6 font-semibold text-lg">
+            Our selection process has the following steps:
+          </h4>
           <ul>
             {card.extended.selectionProcess.map((item, index) => (
               <li className="list-decimal ml-6" key={index}>
           </ul>
           <br />
           <p className="mt-6 text-sm">{card.extended.conslusionParagraph}</p>
-          <br/>
+          <br />
           <div className="flex flex-row w-full items-center justify-end">
             <a
               href="/contact"
               className="btn btn_primary mt-8 transition-all hover:transition-all"
-              onClick={handleNavigate(false, ".Net")}
+              onClick={handleNavigate(false, '.Net')}
             >
               Apply
             </a>

frontend/src/components/CareerCardsTemplates/JobCardsWrapper.jsx

+import React, { Fragment } from 'react';
+import CareerCard from './CareerCard';
+import { useState } from 'react';
+import useComponentVisible from './../../hooks/useClickOutside';
+import ExpandedCard from './ExpandedCard';
+
+const JobCardsWrapper = ({ data }) => {
+  const [expandedCard, setExpandedCard] = useState({});
+
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+
+  return (
+    <section id="jobs" className="flex items-center justify-center max-w-custom m-auto">
+      <div className="w-full flex flex-col md:flex-row gap-8">
+        {isComponentVisible ? (
+          <ExpandedCard
+            card={expandedCard}
+            setExpanded={setIsComponentVisible}
+            setExpandedCard={setExpandedCard}
+            forwarderdRef={ref}
+          ></ExpandedCard>
+        ) : (
+          <div className="flex flex-col md:flex-row justify-center items-center w-full gap-8">
+            {data &&
+              data.length > 0 &&
+              data.map((item, index) => (
+                <Fragment key={index}>
+                  <CareerCard
+                    card={item}
+                    setExpanded={setIsComponentVisible}
+                    setExpandedCard={setExpandedCard}
+                  />
+                </Fragment>
+              ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default JobCardsWrapper;

frontend/src/components/HRProcess.jsx

         imageArray.forEach(el => el.classList.remove('active-image'));
           imageArray[4].classList.add('active-image');
       }
-      // switch (value) {
-      //   case value > 0.2:
-      //     console.log(1);
-      //     //document.querySelectorAll('.image-switch');
-      //     imageArray.forEach(el => el.classList.remove('active-image'));
-      //     imageArray[1].classList.add('active-image');
-      //     break;
-      //   case value > 0.4:
-      //     console.log(2);
-      //     imageArray.forEach(el => el.classList.remove('active-image'));
-      //     imageArray[2].classList.add('active-image');
-      //     break;
-      //   case value > 0.6:
-      //     imageArray.forEach(el => el.classList.remove('active-image'));
-      //     imageArray[3].classList.add('active-image');
-      //     break;
-      //   case value > 0.8:
-      //     imageArray.forEach(el => el.classList.remove('active-image'));
-      //     imageArray[4].classList.add('active-image');
-      //     break;
-      //   default:
-      //     imageArray.forEach(el => el.classList.remove('active-image'));
-      //     imageArray[0].classList.add('active-image');
-      // }
-
-      // if (value > 0.5)
-      // {
-      //     document.querySelector('#img-one').classList.add('opacity-0');
-      //     document.querySelector('#img-one').classList.remove('opacity-1');
-      //     document.querySelector('#img-two').classList.remove('opacity-0');
-      //     document.querySelector('#img-two').classList.add('opacity-1');
-      // }
-      // else{
-      //     document.querySelector('#img-one').classList.remove('opacity-0');
-      //     document.querySelector('#img-one').classList.add('opacity-1');
-      //     document.querySelector('#img-two').classList.add('opacity-0');
-      //     document.querySelector('#img-two').classList.remove('opacity-1');
-      // }
     });
 
     return () => {
       className="steps-container no-scrollbar flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3"
     >
       {/* Dynamic Image */}
-      {data.selection_process.steps.map((item, index) => (
+      {/* {data.selection_process.steps.map((item, index) => (
         <img
           key={index}
           src={api_url + item.media.data.attributes.url}
             (index == 0 ? ' active-image' : '')
           }
         />
-      ))}
+      ))} */}
 
       <div className="local">
         {data.selection_process.steps.map((item, index) => (

frontend/src/components/shared/HashPositions.jsx

     id:1,
     position: ".Net"
   },
+  {
+    id:2,
+    position: "Legal"
+  },
 ]
 }
 

frontend/src/components/shared/JobForm.jsx

                         )}
                       </div>
 
-                      <div className="col-span-1 sm:col-span-1 lg:col-span-1"></div>
+                      <div className="col-span-1 sm:col-span-1 lg:col-span-1 mt-8">Or contact us directly via email <a className='text-semibodld text-dg-primary-600' href="mailto:hr@dilig.net">hr@dilig.net</a></div>
                     </div>
                   </div>
                 </div>

frontend/src/pages/Careers.jsx

 import { strapiApiBuilder } from './../utils/strapiApiBuilder';
 import useDataApi from './../hooks/useDataApi';
 import ReactHelmet from './../components/shared/ReactHelmet';
+import JobCardsWrapper from '../components/CareerCardsTemplates/JobCardsWrapper';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 
 // eslint-disable-next-line no-underscore-dangle
 const _data = {
-  job: {
-    NetDev: {
+  job: [
+    {
       id: 1,
       templateFlag: 1,
       role: '.Net Developer',
         ],
       },
     },
-    NetDevIntern: {
+    {
       id: 2,
-      templateFlag: 2,
-      role: '.Net Developer Internship',
-      nugget: '.NetInernship',
+      templateFlag: 1,
+      role: 'Pravno Administrativni Satadnik',
+      nugget: 'Legal',
       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.',
+        // paragraph:
+        //   'Team Diligent Legalllllllll',
+          requirements: [
+            'University degree (Faculty of Law)',
+            '1+ years of experience ',
+            'Highly developed communication and interpersonal skills',
+            'Efficiency, precision, and dedication at work',
+            'Excellent organizational skills for setting priorities, working with multiple tasks simultaneously, and meeting deadlines',
+            'Proactive, energetic and results-oriented',
+            'A good understanding of Microsoft Excel and Google Sheets is an advantage',
+            'The ability to work in a team but also to work independently',
+          ],
+          key: [
+            'Drafting contracts, agreements, and all legal documents related to labor law',
+            'Accuracy and timely management of documentation',
+            'Adopting general regulations',
+            'Monitoring legislative and subordinate regulations and ensuring their implementation',
+            'Preparing and issuing appropriate certificates and declarations',
+            'Updating data in relevant databases',
+            'Internal and external delivery of documentation and receiving mail',
+          ],
+          offer: [
+            'Support in your personal and professional growth',
+            'Flexible working hours',
+            'Private health insurance',
+            'Competitive employment conditions',
+            'Lots of team activities and perks',
+            'A modern working place with a positive and fun atmosphere',
+          ],
       },
     },
-  },
-  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',
-    },
   ],
 };
 
               <div className="absolute hidden -ml-64 md:block">
                 <OrbitOnScroll />
               </div>
-              <section
-                id="jobs"
-                className="flex items-center justify-center max-w-custom m-auto"
-              >
-                <div className="w-full">
-                  <CardCareers2 cards={_data.job} />
-                </div>
-              </section>
+
+              <JobCardsWrapper data={_data.job} />
             </div>
           </Wrapper>