pavle.golubovic
/
website-new
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

added pictures selection process

blog-new
Pavle Golubovic 2 anni fa
parent
02f4002404
commit
e8964f3ae4
7 ha cambiato i file con 139 aggiunte e 91 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 116
    75
      frontend/src/components/HRProcess.jsx
  2. 1
    1
      frontend/src/components/shared/Navigation.jsx
  3. 1
    1
      frontend/src/components/shared/PageTitle.jsx
  4. 2
    2
      frontend/src/components/shared/VideoComponent.jsx
  5. 6
    5
      frontend/src/pages/Careers.jsx
  6. 8
    7
      frontend/src/routes.js
  7. 5
    0
      frontend/src/styles/cards.css

+ 116
- 75
frontend/src/components/HRProcess.jsx Vedi File

@@ -1,91 +1,132 @@
import React, {useRef, useEffect} from 'react';
import React, { useRef, useEffect } from 'react';
import { useScroll } from 'framer-motion';

const HRProcess = ({data, img}) => {
console.log(data);
const api_url = process.env.REACT_APP_API_URL;

const ref = useRef(null);
const { scrollYProgress } = useScroll({ container: ref });
useEffect(() => {
const removeB = scrollYProgress.onChange((value) => {
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');
}
const HRProcess = ({ data }) => {
//console.log(data);

const ref = useRef(null);
const { scrollYProgress } = useScroll({ container: ref });

useEffect(() => {
const imageArray = document.querySelectorAll('.image-switch');
//console.log(imageArray);
const switchImage = scrollYProgress.onChange(value => {
if (value <= 0.1) {
imageArray.forEach(el => el.classList.remove('active-image'));
imageArray[0].classList.add('active-image');
}
if (value > 0.1) {
imageArray.forEach(el => el.classList.remove('active-image'));
imageArray[1].classList.add('active-image');
}
if (value > 0.4) {
imageArray.forEach(el => el.classList.remove('active-image'));
imageArray[2].classList.add('active-image');
}
if (value > 0.6) {
imageArray.forEach(el => el.classList.remove('active-image'));
imageArray[3].classList.add('active-image');
}
if (value > 0.8) {
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');
// }

return () => {
removeB();
};
// 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 () => {
switchImage();
};
});

return (
<div
ref={ref}
id="steps-container"
className="steps-container flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3"
>
{/* Dynamic Image */}

<img
id="img-one"
src={img}
alt="Image not found"
className="bg-fixed hidden sm:block absolute top-1/4 left-1/2 w-2/5 transition-all "
/>
<img
id="img-two"
src={img}
alt="Image not found"
className="bg-fixed hidden sm:block opacity-0 absolute top-1/4 left-1/2 w-2/5 transition-all rotate-180"
/>

<div className="local">
ref={ref}
id="steps-container"
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) => (
<>
{/* Section */}
<div
id={item.id}
className="relative flex flex-col sm:flex-row items-start justify-center sm:gap-16 min-h-fit max-h[100vh] mb-28 md:mb-56"
>
{/* Line */}
<hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
<img
key={index}
src={api_url + item.media.data.attributes.url}
alt={item.media.data.attributes.alternativeText}
className={
'image-switch bg-fixed hidden sm:block opacity-0 absolute top-1/4 left-1/2 w-2/5 transition-all' +
(index == 0 ? ' active-image' : '')
}
/>
))}

{/* 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="local">
{data.selection_process.steps.map((item, index) => (
<>
{/* Section */}
<div
id={item.id}
className="relative flex flex-col sm:flex-row items-start justify-center sm:gap-16 min-h-fit max-h[100vh] mb-28 md:mb-56"
>
{/* Line */}
<hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />

<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">
{item.paragraph}
</p>
{item.cto != null && (
<button className="btn-secondary mt-6 min-w-fit">
{item.cto}
</button>
)}
{/* 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">
<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>
)}
</div>
<div className="w-1/2"></div>
</div>
<div className="w-1/2"></div>
</div>
</>
))}
</>
))}
</div>
</div>
</div>
)
}
);
};

export default HRProcess
export default HRProcess;

+ 1
- 1
frontend/src/components/shared/Navigation.jsx Vedi File

@@ -58,7 +58,7 @@ export default function Navigation({ links, scrollToView, activeLinks, forwarded
className="hidden md:flex space-x-8 lg:space-x-10 items-center"
>
{links.map((item, index) =>
item.drop ? (
(item.drop && item.drop > 0) ? (
<div>
<a
href={item.path}

+ 1
- 1
frontend/src/components/shared/PageTitle.jsx Vedi File

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
const PageTitle = ({heading, subheading, left, color, pb }) => {
return (
<div className={"flex flex-col gap-8p"+ (left ? " text-left items-start":" text-center items-center") + (color ? " text-dg-secondary" : " ") + (pb ? ' pb-2' :' ')}>
<h6 className={"subheading text-inherit" + (left ? " text-left":" text-center")}>{subheading}</h6>
<h6 className={"subheading " + (left ? " text-left":" text-center")}>{subheading}</h6>
<h1 className={"heading text-inherit" + (left ? " text-left":" text-center")}>{heading}</h1>
</div>
)

+ 2
- 2
frontend/src/components/shared/VideoComponent.jsx Vedi File

@@ -6,7 +6,7 @@ import volume from 'react-useanimations/lib/volume';

const api_url = process.env.REACT_APP_API_URL;

const VideoComponent = ({ source }) => {
const VideoComponent = ({ source, alt }) => {
const [mute, setMute] = useState(true);

const vidRef = useRef();
@@ -21,7 +21,7 @@ const VideoComponent = ({ source }) => {
return (
<div className="w-full py-48p lg:py-72p relative">
<video autoPlay loop ref={vidRef} muted className="rounded-[32px]">
<source type="video/mp4" src={api_url + source} />
<source type="video/mp4" src={api_url + source} alt={api_url + alt} />
</video>
<div className="absolute bottom-16 right-4 md:bottom-24 md:right-8 rounded-full overflow-clip">
<UseAnimations

+ 6
- 5
frontend/src/pages/Careers.jsx Vedi File

@@ -174,7 +174,7 @@ export default function Careers({ forwardedRef }) {

const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);

console.log(data);
//console.log(data);

useEffect(() => {
document.title = 'Careers';
@@ -218,7 +218,7 @@ export default function Careers({ forwardedRef }) {

{/* Video Frame */}
{data && data.Video != undefined ? (
<VideoComponent source={data.Video.data.attributes.url} />
<VideoComponent source={data.Video.data.attributes.url} alt={data.Video.data.attributes.alternativeText} />
) : null}
</div>
</div>
@@ -227,12 +227,13 @@ export default function Careers({ forwardedRef }) {
<p className="paragraph w-full lg:w-3/4">
{data.diligent_life.CTO.cto_paragraph}
</p>
<button
{/* Disabled becouse no content on that page */}
{/* <button
className="btn-secondary min-w-fit"
onClick={() => link('/diligentlife')}
>
{data.diligent_life.CTO.cto_button}
</button>
</button> */}
</div>
</Wrapper>

@@ -243,7 +244,7 @@ export default function Careers({ forwardedRef }) {
heading={data.selection_process.heading.heading}
subheading={data.selection_process.heading.subheading}
/>
<HRProcess data={data} img={ImgStep1} />
<HRProcess data={data} />
</Wrapper>

{/* Open Positions */}

+ 8
- 7
frontend/src/routes.js Vedi File

@@ -87,13 +87,14 @@ const routes = [
exact: true,
nav:true,
drop: [
{
path:'/diligentlife',
component: <DiligentLife />,
title: 'Diligent Life',
exact: true,
nav:true,
},
// enable after we add content
// {
// path:'/diligentlife',
// component: <DiligentLife />,
// title: 'Diligent Life',
// exact: true,
// nav:true,
// },
// {
// path:"/diligentminds",
// component: <DiligentMinds />,

+ 5
- 0
frontend/src/styles/cards.css Vedi File

@@ -22,6 +22,7 @@
.card-plain {
@apply p-12
}

}

.leaf {
@@ -33,3 +34,7 @@
border: 1px solid #D4D4D4;
border-radius: 18px;
}

.active-image {
opacity: 1 !important;
}

Write Preview
Loading…
Annulla
Salva