career card

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",

frontend/src/components/CardCareers.jsx

@@ -1,106 +0,0 @@
-import propTypes from 'prop-types';
-
-import { useState } from 'react';
-import { ReactComponent as BackTriangle } from '../assets/graphics/BackTriangle.svg';
-import TriangleButton from './shared/TriangleButton';
-
-const api_url = process.env.REACT_APP_API_URL;
-
-
-
-export default function CardCareers(props) {
-  const [hideJob, setHideJob] = useState(true);
-
-  return (
-
-    <div
-      className={'transition-all hover:transition-all pb-0 hover:pb-12 flex flex-col justify-center items-center w-4/5 lg:w-5/6 mb-8 lg:mb-0 lg:mr-8 group'
-      }
-    >
-      {/* Collapsed Card */}
-      { hideJob && <div>
-      <img
-        src={api_url + props.image}
-        className={
-            'ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4'
-        }
-      />
-      <h3 className={'mt-6 font-semibold text-2xl'}>
-        {props.heading}
-      </h3>
-      <p className={'mt-6 text-sm'}>{props.paragraph}</p>
-      <a
-        href={'#' + props.heading.split(' ')[0]}
-        onClick={() => setHideJob(!hideJob)}
-        className={'min-w-max btn btn_primary mt-8 opacity-0 transition-all group-hover:opacity-100 group-hover:transition-all'
-        }
-      >
-        Read More
-      </a>
-      </div>}
-     
-      
-
-      {/* Expanded Job */}
-      { !hideJob &&       <div
-        id={props.heading.split(' ')[0]}
-        className={
-          !hideJob
-            ? 'hidden'
-            : 'dark:text-white w-full h-fit shadow-md rounded-md px-12 lg:px-16 py-12 lg:py-16'
-        }
-      >
-        <div className="flex flex-col items-start justify-center text-left">
-          <div className="flex flex-row items-center justify-start">
-            <div className='mr-4'>
-              <TriangleButton onClick={() => setHideJob(!hideJob)} direction={'left'}/>
-            </div>
-           
-
-            <img
-              src={api_url + props.image}
-              className="ml-auto mr-auto block w-2/5 bg-baby-blue text-dark-gray rounded-full p-4"
-            />
-            <h3 className="ml-6 w-full font-semibold text-2xl">{props.heading}</h3>
-          </div>
-          <p className="mt-6 text-sm">{props.paragraph}</p>
-          <h4 className="mt-6 font-semibold text-lg">{props.requirements_heading}</h4>
-          <p className="mt-6 text-sm">{props.requirements_paragraph}</p>
-          <br />
-          <h4 className="mt-6 font-semibold text-lg">{props.expectations_heading}</h4>
-          <p className="mt-6 text-sm">{props.expectations_paragraph}</p>
-          <h4 className="mt-6 font-semibold text-lg">{props.benefits_heading}</h4>
-          <p className="mt-6 text-sm">{props.benefits_paragraph}</p>
-          <div className="flex flex-row w-full items-center justify-end">
-            <a
-              href="#contact"
-              onClick={() => {
-                setHideJob(!hideJob);
-                props.setClickedPosition('#' + props.hash_position);
-              }}
-              className="btn btn_primary mt-8 transition-all hover:transition-all"
-            >
-              Apply
-            </a>
-          </div>
-        </div>
-      </div>}
-
-    </div>
-  );
-}
-
-CardCareers.propTypes = {
-  key: propTypes.number,
-  image: propTypes.string,
-  heading: propTypes.string,
-  paragraph: propTypes.string,
-  requirements_heading: propTypes.string,
-  requirements_paragraph: propTypes.string,
-  expectations_heading: propTypes.string,
-  expectations_paragraph: propTypes.string,
-  benefits_heading: propTypes.string,
-  benefits_paragraph: propTypes.string,
-  hash_position: propTypes.string,
-  setClickedPosition: propTypes.func,
-};

frontend/src/components/CardCareers2.jsx → frontend/src/components/CareerCardsTemplates/CardCareers2.jsx

@@ -1,15 +1,11 @@
 import propTypes from 'prop-types';
 
-import { useEffect, useState } from 'react';
-import { ReactComponent as BackTriangle } from '../assets/graphics/BackTriangle.svg';
-import Wrapper from '../layout/Wrapper';
+import { useState } from 'react';
+import Wrapper from '../../layout/Wrapper';
 import ExpandedCard from './ExpandedCard';
-import TriangleButton from './shared/TriangleButton';
 import CareerCard from './CareerCard';
-import Grid from '../layout/Grid';
-import { ref } from 'yup';
-import useClickOutside from '../hooks/useClickOutside';
-import useComponentVisible from '../hooks/useClickOutside';
+//import useClickOutside from '../../hooks/useClickOutside';
+import useComponentVisible from '../../hooks/useClickOutside';
 
 const api_url = process.env.REACT_APP_API_URL;
 
@@ -29,12 +25,14 @@ export default function CardCareers2({ cards }) {
         {isComponentVisible ?
          <ExpandedCard card={expandedCard} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard}></ExpandedCard>
          :
-        <div className='flex flex-row justify-center w-full'>
-          {
+        <div className='flex flex-col md:flex-row justify-center w-full gap-8'>
+          {/* {
             cards.map((item, index) => (
               <CareerCard card={item} key={index} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />
             ))
-          }
+          } */}
+          <CareerCard card={cards.NetDev} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />
+          <CareerCard card={cards.NetDevIntern} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />
 
         </div>
 }

frontend/src/components/CareerCard.jsx → frontend/src/components/CareerCardsTemplates/CareerCard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import net from './../assets/icons/net.svg';
+import net from './../../assets/icons/net.svg';
 
 const _card = {
   role: '.Net Developer',

frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

@@ -0,0 +1,210 @@
+import React, { useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import TriangleButton from '../shared/TriangleButton';
+import { useNavigate } from 'react-router-dom';
+import net from './../../assets/icons/net.svg';
+import { m } from 'framer-motion';
+import useClickOutside from '../../hooks/useClickOutside';
+import { UIContext } from '../../context';
+
+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 linkTo = useNavigate();
+
+  const {uiContext, setUiContext} = useContext(UIContext);
+
+  useEffect(() => {
+    console.log(card);
+  }, [])
+
+  function handleContext(id) {
+    setUiContext({
+      ...uiContext,
+      tab: id,
+    });
+  }
+  
+
+  return (
+    <div
+      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'
+      }
+    >
+      {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 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"
+            />
+            <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>
+            {_data.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>
+            ))}
+          </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>
+            ))}
+          </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={()=> handleContext(card.id)}
+            >
+              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"
+            />
+            <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) => (
+              <li className="list-disc ml-6" key={index}>
+                {item}
+              </li>
+            ))}
+          </ul>
+          <br />
+          <h4 className="mt-6 font-semibold text-lg">Requirements:</h4>
+          <ul>
+            {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">Our selection process has the following steps:</h4>
+          <ul>
+            {card.extended.selectionProcess.map((item, index) => (
+              <li className="list-decimal ml-6" key={index}>
+                {item}
+              </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="/contact"
+              className="btn btn_primary mt-8 transition-all hover:transition-all"
+              onClick={()=> handleContext(card.id)}
+            >
+              Apply
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ExpandedCard.propTypes = {};
+
+export default ExpandedCard;

frontend/src/components/ExpandedCard.jsx

@@ -1,108 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import TriangleButton from './shared/TriangleButton';
-import { useNavigate } from 'react-router-dom';
-import net from './../assets/icons/net.svg';
-import { m } from 'framer-motion';
-import useClickOutside from '../hooks/useClickOutside';
-
-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 linkTo = useNavigate();
-
-  return (
-    <div
-    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'
-    }
-  >
-    <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"
-        />
-        <h3 className="ml-6 w-full font-semibold text-2xl">{card.role}</h3>
-      </div>
-      <p className="mt-6 text-sm">{_card.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>
-          ))}
-      </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>
-          ))}
-      </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>
-          ))}
-      </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"
-        >
-          Apply
-        </a>
-      </div>
-    </div>
-  </div>
-  )
-}
-
-ExpandedCard.propTypes = {}
-
-export default ExpandedCard

frontend/src/components/shared/Contact.jsx

@@ -14,6 +14,7 @@ import { ClientFormContext } from '../../context';
 import { JobFormContext } from '../../context';
 import PageTitle from './PageTitle';
 import Wrapper from '../../layout/Wrapper';
+import { UIContext } from './../../context/index';
 
 export default function Contact(props) {
   const [tab, setTab] = useState(true);
@@ -27,7 +28,7 @@ export default function Contact(props) {
     //if (event.button !== 0)
     event.preventDefault();
   }
-
+  const {uiContext, setUiContext} = useContext(UIContext);
   const clientContext = useContext(ClientFormContext);
   const jobContext = useContext(JobFormContext);
 

frontend/src/components/shared/HashPositions.jsx

@@ -4,8 +4,11 @@ import propTypes from 'prop-types';
 
 const _data = {
   job: [{
-    id:0,
+    id:1,
     position: ".Net"
+  },{
+    id:2,
+    position: ".NetInternship"
   },
 ]
 }

frontend/src/context/index.js

@@ -21,6 +21,7 @@ export const JobFormContext = React.createContext({
 });
 
 export const UIContext = React.createContext({
-  tab: '',
+  tab: true,
   contactRef: '',
+  position: 0,
 })

frontend/src/pages/Careers.jsx

@@ -1,9 +1,6 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 
-import CardCareers from '../components/CardCareers';
-import Contact from '../components/shared/Contact';
-
 import Animation_Diligent from '../assets/animation_diligent.webm';
 import Wrapper from '../layout/Wrapper';
 import PageTitle from '../components/shared/PageTitle';
@@ -12,7 +9,7 @@ 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/CardCareers2';
+import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
 import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
 import PageLayout from '../layout/PageLayout';
 //import useAnalytics from '../hooks/useAnalytics';
@@ -24,14 +21,81 @@ const _data = {
     subheading: 'Careers',
   },
   job: {
-    cards: [
-      {
-        nugget: '.Net',
+      NetDev: {
+        id:1,
+        templateFlag:1,
         role: '.Net Developer',
-        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.',
+        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',
@@ -151,25 +215,7 @@ export default function Careers({ forwardedRef }) {
             className="flex items-center justify-center max-w-custom m-auto"
           >
             <div className="w-full">
-              {/* {cntCareers.job.map(job => (
-            <div key={job.id}>
-              <CardCareers 
-              image={job.icon.data.attributes.url}
-              heading={job.heading}
-              paragraph={job.paragraph}
-              requirements_heading={job.requirements_heading}
-              requirements_paragraph={job.requirements_paragraph}
-              expectations_heading={job.expectations_heading}
-              expectations_paragraph={job.expectations_paragraph}
-              benefits_heading={job.benefits_heading}
-              benefits_paragraph={job.benefits_paragraph}
-              hash_position={job.position}
-              setClickedPosition={setClickedPosition}
-            />
-              </div>
-            
-          ))} */}
-              <CardCareers2 cards={_data.job.cards} />
+              <CardCareers2 cards={_data.job} />
             </div>
           </section>
         </Wrapper>

frontend/src/pages/ContactPage.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Contact from '../components/shared/Contact';
+import { UIContext } from '../context';
 import PageLayout from '../layout/PageLayout';
 //import useAnalytics from '../hooks/useAnalytics';
 
@@ -7,19 +8,19 @@ function ContactPage() {
   const [data, setData] = useState('');
   const [isLoaded, setIsLoaded] = useState('');
 
-
   useEffect(() => {
     document.title = 'Contact Us';
   }, []);
 
   //useAnalytics();
 
-
   return (
     <PageLayout>
       <section id="contact" className="h-fit bg-baby-blue dark:bg-dg-primary-1600 mt-90p">
         <h1 className="hidden">Contact us: Tell Us about Your Idea!</h1>
-        <Contact defaultIndex={0} />
+        <UIContext.Provider value={UIContext}>
+          <Contact />
+        </UIContext.Provider>
       </section>
     </PageLayout>
   );