real jobs

frontend/src/api/JobsDataLayer.jsx

+import React from 'react'
+import JobCardsWrapper from '../components/CareerCardsTemplates/JobCardsWrapper'
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
+import useDataApi from '../hooks/useDataApi';
+import useFetchCollections from '../hooks/useFetchCollections';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+  'icon',
+  'keys',
+  'reqs',
+  'offers',
+];
+
+const JobsDataLayer = () => {
+
+    
+  const strapi = strapiApiBuilder('jobs', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+
+  return (
+     <JobCardsWrapper data={data} />
+  )
+}
+
+export default JobsDataLayer

frontend/src/api/JobsPartialDataLayer.jsx

+import React, { Fragment } from 'react';
+import JobCardsWrapper from '../components/CareerCardsTemplates/JobCardsWrapper';
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
+import useDataApi from '../hooks/useDataApi';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [];
+
+const JobsPartialDataLayer = ({ children }) => {
+  const strapi = strapiApiBuilder('jobs', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
+
+  console.log(data);
+
+  return <Fragment>{data => <Fragment data={data}>{children}</Fragment>}</Fragment>;
+};
+
+export default JobsPartialDataLayer;

frontend/src/components/CareerCardsTemplates/CareerCard.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 
+const api_url = process.env.REACT_APP_API_URL;
+
 const CareerCard = ({ card, setExpanded, setExpandedCard }) => {
   return (
     <div
       onClick={() => {
-        setExpanded(true);
         setExpandedCard(card);
+        setExpanded(true);   
       }}
       className={'card max-w-[360px]'}
     >
       <img
-        src={card.icon}
-        alt="icon alt"
-        className={'ml-auto mr-auto block w-[70px] bg-none text-dark-gray'}
+        src={api_url + card.icon.data.attributes.url}
+        alt={card.icon.data.attributes.alternativeText}
+        className={'ml-auto mr-auto block w-[70px] bg-none text-dark-gray rounded-full'}
       />
-      <h3 className={'mt-6 font-semibold text-2xl'}>{card.role}</h3>
-      <p className={'mt-6 text-sm'}>{card.shortDetails}</p>
-      <a
-        href={'#'}
-        className={
-          'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
-        }
-      >
-        Read More
-      </a>
+      <h3 className={'mt-6 font-semibold text-2xl'}>{card.title}</h3>
+      <p className={'mt-6 text-sm'}>{card.experience}</p>
     </div>
   );
 };

frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

 import { useNavigate } from 'react-router-dom';
 import net from './../../assets/icons/net.svg';
 
+const api_url = process.env.REACT_APP_API_URL;
 
-
-
-const ExpandedCard = ({ card, setExpanded, setExpandedCard, forwarderdRef, setJobForm, jobForm }) => {
+const ExpandedCard = ({
+  card,
+  setExpanded,
+  setExpandedCard,
+  forwarderdRef,
+  setJobForm,
+  jobForm,
+}) => {
   const linkTo = useNavigate();
 
-  const changeContext = (value) => {
+  console.log(card);
+
+  const changeContext = value => {
     setJobForm({
       ...jobForm,
       position: value,
     });
-  }
-
-  useEffect(() => {
-    console.log(jobForm)
-  },[jobForm]);
+  };
 
-  const handleNavigate = (tab, position) => {
-    changeContext(card.nugget);
+  const handleNavigate = (tab) => {
+    changeContext(card.tag);
     linkTo('/contact', { tab: { tab } });
-    //card.tag
-    //console.log(card.nugget);
   };
-
-
   return (
     <div
       ref={forwarderdRef}
         'dark:text-white card-no-hover w-full h-fit shadow-md rounded-md px-12 lg:px-32 py-12 lg:py-16'
       }
     >
-      {card.templateFlag === 1 && (
-        <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">
-              <TriangleButton
-                onClick={() => {
-                  setExpanded(false);
-                  setExpandedCard({});
-                }}
-                direction={'left'}
-              />
-            </div>
-            <div className="hidden lg:block absolute top-20 md:top-[15rem] left-12">
-              <TriangleButton
-                onClick={() => {
-                  setExpanded(false);
-                  setExpandedCard({});
-                }}
-                direction={'left'}
-              />
-            </div>
-
-            <img
-              src={card.icon}
-              className="ml-auto mr-auto block w-[70px] text-dark-gray bg-none"
+      <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">
+            <TriangleButton
+              onClick={() => {
+                setExpanded(false);
+                setExpandedCard({});
+              }}
+              direction={'left'}
             />
-            <h3 className="ml-6 w-full font-semibold text-2xl">{card.role}</h3>
           </div>
-          <p className="mt-6 text-sm">{card.extended.shortDetails}</p>
-          <h4 className="mt-6 font-semibold text-lg">Key Responsibilities:</h4>
-          <ul>
-            {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>
-            {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>
-            {
-              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="#"
-              className="btn btn_primary mt-8 transition-all hover:transition-all"
-              onClick={()=>handleNavigate(false, card.nugget)}
-            >
-              Apply
-            </a>
-          </div>
-        </div>
-      )}
-      {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">
-              <TriangleButton
-                onClick={() => {
-                  setExpanded(false);
-                  setExpandedCard({});
-                }}
-                direction={'left'}
-              />
-            </div>
-            <div className="hidden lg:block absolute top-20 left-12">
-              <TriangleButton
-                onClick={() => {
-                  setExpanded(false);
-                  setExpandedCard({});
-                }}
-                direction={'left'}
-              />
-            </div>
-
-            <img
-              src={net}
-              className="ml-auto mr-auto block w-[70px] bg-baby-blue text-dark-gray"
+          <div className="hidden lg:block absolute top-20 md:top-[15rem] left-12">
+            <TriangleButton
+              onClick={() => {
+                setExpanded(false);
+                setExpandedCard({});
+              }}
+              direction={'left'}
             />
-            <h3 className="ml-6 w-full font-semibold text-2xl">{card.role}</h3>
           </div>
-          <p className="mt-6 text-sm">{card.extended.paragraph}</p>
-          <h4 className="mt-6 font-semibold text-lg">What We Offer:</h4>
-          <ul>
-            {card.extended.offer.map((item, index) => (
+
+          <img
+            src={api_url + card.icon.data.attributes.url}
+            className="ml-auto mr-auto block w-[70px] text-dark-gray bg-none rounded-full"
+          />
+          <h3 className="ml-6 w-full font-semibold text-2xl">{card.title}</h3>
+        </div>
+        <p className="mt-6 text-sm">{card.experience}</p>
+        <h4 className="mt-6 font-semibold text-lg">{card.keyTitle}:</h4>
+        <ul>
+          {card &&
+            card.keys &&
+            card.keys.map((item, index) => (
               <li className="list-disc ml-6" key={index}>
-                {item}
+                {item.ParagraphElement}
               </li>
             ))}
-          </ul>
-          <br />
-          <h4 className="mt-6 font-semibold text-lg">Requirements:</h4>
-          <ul>
-            {card.extended.requirements.map((item, index) => (
+        </ul>
+        <br />
+        <h4 className="mt-6 font-semibold text-lg">{card.reqTitle}:</h4>
+        <ul>
+          {card &&
+            card.reqs &&
+            card.reqs.map((item, index) => (
               <li className="list-disc ml-6" key={index}>
-                {item}
-              </li>
-            ))}
-          </ul>
-          <br />
-          <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}>
-                {item}
+                {item.ParagraphElement}
               </li>
             ))}
-          </ul>
-          <br />
-          <p className="mt-6 text-sm">{card.extended.conslusionParagraph}</p>
-          <br />
-          <div className="flex flex-row w-full items-center justify-end">
-            <a
-              href="#"
-              className="btn btn_primary mt-8 transition-all hover:transition-all"
-              onClick={()=>handleNavigate(false, card.nugget)}
-            >
-              Apply
-            </a>
-          </div>
+        </ul>
+        <br />
+        <h4 className="mt-6 font-semibold text-lg">{card.offerTitle}:</h4>
+        <ul>
+          {card.offers && card.offers.map((item, index) => (
+            <li className="list-disc ml-6" key={index}>
+              {item.ParagraphElement}
+            </li>
+          ))}
+        </ul>
+        <br />
+        <div className="flex flex-row w-full items-center justify-end">
+          <a
+            href="#"
+            className="btn btn_primary mt-8 transition-all hover:transition-all"
+            onClick={() => handleNavigate(false)}
+          >
+            Apply
+          </a>
         </div>
-      )}
+      </div>
     </div>
   );
 };

frontend/src/components/CareerCardsTemplates/JobCardsWrapper.jsx

               data.map((item, index) => (
                 <Fragment key={index}>
                   <CareerCard
-                    card={item}
+                    card={item.attributes}
                     setExpanded={setIsComponentVisible}
                     setExpandedCard={setExpandedCard}
                   />

frontend/src/components/HRProcess.jsx

               {/* Dot */}
               <div className="z-10 p-[0.36rem] rounded-full bg-white border-solid border border-dg-primary-900 absolute -left-[0.63%] top-[1%]"></div>
 
-              <div className="sm:w-1/2 ml-8">
+              <div className="flex flex-col sm:w-1/2 ml-8">
                 <h3 className="h3-heading">{item.heading}</h3>
                 <p className="text-sm text-dark-gray dark:text-white mt-4">
                   {item.paragraph}
                 </p>
                 {item.cto != null && (
-                  <button className="btn-secondary mt-6 min-w-fit">{item.cto}</button>
+                  <a href='#jobs' className="btn-secondary mt-6 min-w-fit">{item.cto}</a>
                 )}
               </div>
               <div className="w-1/2"></div>

frontend/src/context/index.js

 import React from "react";
 
+//to be deleted
+
 export const ClientFormContext = React.createContext({
     tag: '',
     subject: '',

frontend/src/pages/Careers.jsx

 import JobCardsWrapper from '../components/CareerCardsTemplates/JobCardsWrapper';
 import net from '../assets/icons/net.svg'
 import legal from '../assets/icons/LegalJob.svg';
+import JobsDataLayer from '../api/JobsDataLayer';
 
 const api_url = process.env.REACT_APP_API_URL;
 
               <div className="absolute hidden -ml-64 md:block">
                 <OrbitOnScroll />
               </div>
-
-              <JobCardsWrapper data={_data.job} />
+              <JobsDataLayer />
             </div>
           </Wrapper>