|
|
|
@@ -1,7 +1,12 @@ |
|
|
|
import { useState, useEffect } from 'react'; |
|
|
|
import { useState, useEffect, useRef } from 'react'; |
|
|
|
import { useInView } from 'react-intersection-observer'; |
|
|
|
import axios from 'axios'; |
|
|
|
|
|
|
|
import ImgStep1 from '../assets/images/CaseStudy/CentralizedSmall.png'; |
|
|
|
import ImgStep2 from '../assets/images/Careers/events.png'; |
|
|
|
import ImgStep3 from '../assets/images/CaseStudy/CentralizedSmall.png'; |
|
|
|
import ImgStep4 from '../assets/images/Careers/events.png'; |
|
|
|
import ImgStep5 from '../assets/images/CaseStudy/CentralizedSmall.png'; |
|
|
|
import ImgEvents from '../assets/images/Careers/events.png'; |
|
|
|
|
|
|
|
import Care from './../assets/icons/values/care.svg'; |
|
|
|
@@ -255,37 +260,9 @@ export default function Careers({ forwardedRef }) { |
|
|
|
const [cntCareers, setCntCareers] = useState(''); |
|
|
|
const [isLoaded, setIsLoaded] = useState(''); |
|
|
|
|
|
|
|
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'; |
|
|
|
{/*const { ref: myRef, inView: elementIsVisible } = useInView();*/} |
|
|
|
|
|
|
|
stepsImage.src = stepsImageSrc; |
|
|
|
}, |
|
|
|
{ |
|
|
|
passive: true, |
|
|
|
}, |
|
|
|
); |
|
|
|
}, []); |
|
|
|
const api_url = process.env.REACT_APP_API_URL; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
document.title = 'Careers'; |
|
|
|
@@ -364,26 +341,6 @@ export default function Careers({ forwardedRef }) { |
|
|
|
{cntCareers.diligent_life.CTO.cto_button} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="hidden"> |
|
|
|
<section |
|
|
|
id="life" |
|
|
|
className="dark:bg-dg-primary-1700 flex flex-row items-center justify-center" |
|
|
|
> |
|
|
|
<div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0"> |
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full"> |
|
|
|
{_data.life.cards.map((item, index) => ( |
|
|
|
<CardLife |
|
|
|
key={index} |
|
|
|
number={item.id} |
|
|
|
heading={item.title} |
|
|
|
paragraph={item.paragraph} |
|
|
|
/> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Selection Process */} |
|
|
|
@@ -393,13 +350,16 @@ export default function Careers({ forwardedRef }) { |
|
|
|
heading={cntCareers.selection_process.heading.heading} |
|
|
|
subheading={cntCareers.selection_process.heading.subheading} |
|
|
|
/> |
|
|
|
<div className="no-scroll flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3"> |
|
|
|
<div |
|
|
|
id="steps-container" |
|
|
|
className="no-scroll flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3" |
|
|
|
> |
|
|
|
{/* Dynamic Image */} |
|
|
|
<img |
|
|
|
id="steps-image" |
|
|
|
src={ImgStep1} |
|
|
|
alt="Image not found" |
|
|
|
className="hidden sm:block absolute top-1/4 left-1/2 w-2/5 bg-fixed" |
|
|
|
className="hidden sm:block absolute top-1/4 left-1/2 w-2/5 bg-fixed transition-all" |
|
|
|
/> |
|
|
|
|
|
|
|
{cntCareers.selection_process.steps.map((item, index) => ( |
|
|
|
@@ -417,7 +377,9 @@ export default function Careers({ forwardedRef }) { |
|
|
|
|
|
|
|
<div className="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"> |
|
|
|
<p |
|
|
|
className="text-sm text-dark-gray dark:text-white mt-4" |
|
|
|
> |
|
|
|
{item.paragraph} |
|
|
|
</p> |
|
|
|
{item.cto != null && ( |
|
|
|
@@ -431,30 +393,27 @@ export default function Careers({ forwardedRef }) { |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Main Heading */} |
|
|
|
{/* Open Positions */} |
|
|
|
<Wrapper padding={' py-90p'}> |
|
|
|
<h1 className="hidden">Careers - Join our Team</h1> |
|
|
|
<PageTitle |
|
|
|
heading={cntCareers.positions_heading.heading} |
|
|
|
subheading={cntCareers.positions_heading.subheading} |
|
|
|
left |
|
|
|
color |
|
|
|
/> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Open Positions */} |
|
|
|
<Wrapper padding={' pb-90p md:pt-90p'}> |
|
|
|
<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 className="pt-72p"> |
|
|
|
<div className="absolute hidden -ml-64 md:block"> |
|
|
|
<OrbitOnScroll /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section |
|
|
|
id="jobs" |
|
|
|
className="flex items-center justify-center max-w-custom m-auto" |
|
|
|
> |
|
|
|
<div className="w-full"> |
|
|
|
<CardCareers2 cards={_data.job} /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Benefits Section */} |
|
|
|
@@ -539,22 +498,6 @@ export default function Careers({ forwardedRef }) { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Other */} |
|
|
|
<div className="hidden"> |
|
|
|
<Wrapper bg padding={' py-90p'}> |
|
|
|
<PageTitle heading={_data.connect.heading} color /> |
|
|
|
<p className="paragraph my-32p">{_data.connect.paragraph}</p> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper> |
|
|
|
<section id="highlight" className="flex flex-col items-center justify-center"> |
|
|
|
<HighlighedText text={_data.connect.subtitle} /> |
|
|
|
</section> |
|
|
|
</Wrapper> |
|
|
|
<Wrapper> |
|
|
|
<AboutUsSlider /> |
|
|
|
</Wrapper> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</PageLayout> |
|
|
|
); |
