|
|
|
@@ -22,89 +22,63 @@ import PageLayout from '../layout/PageLayout'; |
|
|
|
import TimelineCard from '../components/TimelineCard'; |
|
|
|
//import useAnalytics from '../hooks/useAnalytics'; |
|
|
|
import VideoComponent from '../components/shared/VideoComponent'; |
|
|
|
|
|
|
|
// eslint-disable-next-line no-underscore-dangle |
|
|
|
const _data = { |
|
|
|
heading: { |
|
|
|
heading: 'Join Our Team of Diligent Minds', |
|
|
|
subheading: 'Careers', |
|
|
|
}, |
|
|
|
life: { |
|
|
|
heading: 'A Culture That’s Serious About Work and Fun', |
|
|
|
subheading: 'Diligent life', |
|
|
|
italic: { |
|
|
|
heading: 'Life At diligent', |
|
|
|
paragraph: |
|
|
|
'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career. To create an inspiring work life, we collaborate as a team both inside and outside of the office.', |
|
|
|
heading2: 'What It Means to Work With Us', |
|
|
|
}, |
|
|
|
cards: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
title: 'Shape the Future', |
|
|
|
paragraph: |
|
|
|
'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
title: 'Life-Long Learning', |
|
|
|
paragraph: |
|
|
|
'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience. Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
title: 'A Unique Culture', |
|
|
|
paragraph: |
|
|
|
'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
title: 'Make the Impossible Better', |
|
|
|
paragraph: |
|
|
|
"If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We'd love to learn more about you.", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
ActionCard: { |
|
|
|
heading: 'Step up Your Career!', |
|
|
|
paragraph: |
|
|
|
'We are continuously on the lookout for talented people to grow our business.', |
|
|
|
primaryBtn: 'Apply', |
|
|
|
secondaryBtn: 'About Us', |
|
|
|
}, |
|
|
|
}; |
|
|
|
import useAnalytics from '../hooks/useAnalytics'; |
|
|
|
import useDataApi from '../hooks/useDataApi'; |
|
|
|
import { strapiApiBuilder } from '../utils/strapiApiBuilder'; |
|
|
|
import ReactHelmet from './../components/shared/ReactHelmet'; |
|
|
|
import Paragraph from '../components/blog-micro-components/Paragraph'; |
|
|
|
import { ReactComponent as Tick } from '../assets/icons/Tick.svg'; |
|
|
|
import Quote from '../components/blog-micro-components/Quote'; |
|
|
|
import H3 from '../components/blog-micro-components/H3'; |
|
|
|
import ActionCard_Array from '../components/shared/ActionCard_Array'; |
|
|
|
|
|
|
|
import { ReactComponent as PurpleHex } from '../assets/graphics/Culture/PurpleHex.svg'; |
|
|
|
import { ReactComponent as BlueHex } from '../assets/graphics/Culture/BlueHex.svg'; |
|
|
|
import { ReactComponent as YellowTriangle } from '../assets/graphics/Culture/TriangleYellow.svg'; |
|
|
|
import H2 from '../components/blog-micro-components/H2'; |
|
|
|
|
|
|
|
const strapiPopulate = [ |
|
|
|
'Heading', |
|
|
|
'HeadingParagraph', |
|
|
|
'ParagraphArray', |
|
|
|
'Cards', |
|
|
|
'Cards.img', |
|
|
|
'SecondHeading', |
|
|
|
'SecondHeadingParagraph', |
|
|
|
'Stats', |
|
|
|
'Quote', |
|
|
|
'WorkTogether', |
|
|
|
'WorkTogether.paragraphs', |
|
|
|
'SEO', |
|
|
|
'SEO.metaSocial', |
|
|
|
'SEO.metaImage', |
|
|
|
'SEO.metaSocial.image', |
|
|
|
]; |
|
|
|
|
|
|
|
const graphicArray = [ |
|
|
|
<PurpleHex key={0} className="z-0 scale-75 md:scale-1" />, |
|
|
|
<YellowTriangle key={1} className="z-0 scale-75 md:scale-1" />, |
|
|
|
<BlueHex key={0} className="z-0 scale-75 md:scale-1" />, |
|
|
|
]; |
|
|
|
|
|
|
|
export default function Culture({ forwardedRef }) { |
|
|
|
const [clickedPosition, setClickedPosition] = useState(''); |
|
|
|
const [cntCareers, setCntCareers] = useState(''); |
|
|
|
const [isLoaded, setIsLoaded] = useState(''); |
|
|
|
const [graphics, setGraphics] = useState([]); |
|
|
|
|
|
|
|
const api_url = process.env.REACT_APP_API_URL; |
|
|
|
|
|
|
|
const strapi = strapiApiBuilder('culture-page', strapiPopulate, ''); |
|
|
|
|
|
|
|
const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi); |
|
|
|
|
|
|
|
useAnalytics('Culture'); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
document.title = 'Culture'; |
|
|
|
}, []); |
|
|
|
|
|
|
|
//useAnalytics(); |
|
|
|
|
|
|
|
useEffect(async () => { |
|
|
|
var vid = document.getElementById('animation'); |
|
|
|
vid.playbackRate = 2; |
|
|
|
axios |
|
|
|
.get( |
|
|
|
`${api_url}/api/n-careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon&populate[3]=Video`, |
|
|
|
) |
|
|
|
.then(res => { |
|
|
|
setCntCareers(res.data.data.attributes); |
|
|
|
setIsLoaded(true); |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.log(err); |
|
|
|
setIsLoaded(false); |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
//console.log(data); |
|
|
|
|
|
|
|
if (!isLoaded) { |
|
|
|
if (isLoading) { |
|
|
|
return ( |
|
|
|
<div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold"> |
|
|
|
<video id="animation" width="540" height="540" autoPlay muted loop> |
|
|
|
@@ -117,130 +91,132 @@ export default function Culture({ forwardedRef }) { |
|
|
|
|
|
|
|
return ( |
|
|
|
<PageLayout> |
|
|
|
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden"> |
|
|
|
{/* Diligent Life */} |
|
|
|
<Wrapper padding={' py-90p'}> |
|
|
|
<PageTitle |
|
|
|
left |
|
|
|
heading={_data.life.heading} |
|
|
|
subheading={_data.life.subheading} |
|
|
|
/> |
|
|
|
|
|
|
|
<div className="my-20p"> |
|
|
|
<div> |
|
|
|
<p className="paragraph">{_data.life.italic.paragraph}</p> |
|
|
|
{cntCareers && cntCareers.Video != undefined ? ( |
|
|
|
<VideoComponent source={cntCareers.Video.data.attributes.url} /> |
|
|
|
) : null} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
|
|
|
|
{/* Left-Right Content */} |
|
|
|
<Wrapper bg padding={' py-90p'}> |
|
|
|
{/* Shape The Future */} |
|
|
|
<section |
|
|
|
id="challanges_solution" |
|
|
|
className="flex flex-col items-center justify-center mt-16" |
|
|
|
> |
|
|
|
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0"> |
|
|
|
<div className="w-full md:w-1/2 md:pr-16"> |
|
|
|
<div> |
|
|
|
<h3 className="h3-heading">{_data.life.cards[0].title}</h3> |
|
|
|
<p className="text-sm text-dark-gray dark:text-white mt-4"> |
|
|
|
{_data.life.cards[0].paragraph} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
src={Img1} |
|
|
|
alt="Case Study main image" |
|
|
|
className="text-center w-full md:w-1/2" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
{/* Shape The Future */} |
|
|
|
<section |
|
|
|
id="challanges_solution" |
|
|
|
className="flex flex-col items-center justify-center mt-16" |
|
|
|
> |
|
|
|
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0"> |
|
|
|
<img |
|
|
|
src={Img2} |
|
|
|
alt="Case Study main image" |
|
|
|
className="text-center w-full md:w-1/2" |
|
|
|
/> |
|
|
|
<div className="w-full md:w-1/2 md:pl-16"> |
|
|
|
<div> |
|
|
|
<h3 className="h3-heading">{_data.life.cards[1].title}</h3> |
|
|
|
<p className="text-sm text-dark-gray dark:text-white mt-4"> |
|
|
|
{_data.life.cards[1].paragraph} |
|
|
|
</p> |
|
|
|
{/* {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null} */} |
|
|
|
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32p md:pt-90p overflow-hidden"> |
|
|
|
{/* Our Philosophy */} |
|
|
|
{data && data.Heading && data.HeadingParagraph && ( |
|
|
|
<Wrapper padding={' py-90p'}> |
|
|
|
<PageTitle |
|
|
|
left |
|
|
|
heading={data?.Heading?.title} |
|
|
|
subheading={data?.Heading?.subtitle} |
|
|
|
/> |
|
|
|
<Paragraph data={data.HeadingParagraph.field} /> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
{/* Ticks */} |
|
|
|
{data && data.ParagraphArray && data.ParagraphArray.length > 0 && ( |
|
|
|
<Wrapper padding={' md:py-32p'}> |
|
|
|
<div className="md:px-90p flex flex-col md:grid md:grid-cols-2 gap-8p"> |
|
|
|
{data.ParagraphArray.map((item, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
className="flex flex-row gap-2 justify-start items-center" |
|
|
|
> |
|
|
|
<Tick /> |
|
|
|
<h4 className="capitalize font-semibold text-[24px] md:text-[30px] leading-[36px] md:leading-[45px] text-transparent bg-clip-text bg-gradient-to-r from-[#90278F] to-[#8468BF]">{item.field}</h4> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
{/* Shape The Future */} |
|
|
|
<section |
|
|
|
id="challanges_solution" |
|
|
|
className="flex flex-col items-center justify-center mt-16" |
|
|
|
> |
|
|
|
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0"> |
|
|
|
<div className="w-full md:w-1/2 md:pr-16"> |
|
|
|
<div> |
|
|
|
<h3 className="h3-heading">{_data.life.cards[2].title}</h3> |
|
|
|
<p className="text-sm text-dark-gray dark:text-white mt-4"> |
|
|
|
{_data.life.cards[2].paragraph} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
src={Img3} |
|
|
|
alt="Case Study main image" |
|
|
|
className="text-center w-full md:w-1/2" |
|
|
|
/> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Cards */} |
|
|
|
{data && data.Cards && ( |
|
|
|
<Wrapper padding={' py-90p'}> |
|
|
|
<div id="values" className="flex flex-col items-center justify-center mt-16"> |
|
|
|
{data.Cards && |
|
|
|
data.Cards.length > 0 && |
|
|
|
data.Cards.map((item, i) => ( |
|
|
|
<div |
|
|
|
key={i} |
|
|
|
className={ |
|
|
|
'my-8 flex flex-col gap-[32px] md:gap-0 justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0' + |
|
|
|
(i % 2 ? ' md:flex-row' : ' md:flex-row-reverse') |
|
|
|
} |
|
|
|
> |
|
|
|
<div className="w-full md:w-1/2 md:pr-16"> |
|
|
|
<div> |
|
|
|
<h3 className="h3-heading">{item.title}</h3> |
|
|
|
<p className="text-sm text-dark-gray dark:text-white mt-4"> |
|
|
|
{item.paragraph} |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
src={api_url + item.img.data.attributes.url} |
|
|
|
alt={item.img.data.attributes.alternativeText} |
|
|
|
className="text-center w-full md:w-1/2" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
|
|
|
|
{/* Shape The Future */} |
|
|
|
<section |
|
|
|
id="challanges_solution" |
|
|
|
className="flex flex-col items-center justify-center mt-16" |
|
|
|
> |
|
|
|
<div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0"> |
|
|
|
<img |
|
|
|
src={Img4} |
|
|
|
alt="Case Study main image" |
|
|
|
className="text-center w-full md:w-1/2" |
|
|
|
/> |
|
|
|
<div className="w-full md:w-1/2 md:pl-16"> |
|
|
|
<div> |
|
|
|
<h3 className="h3-heading">{_data.life.cards[3].title}</h3> |
|
|
|
<p className="text-sm text-dark-gray dark:text-white mt-4"> |
|
|
|
{_data.life.cards[3].paragraph} |
|
|
|
</p> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Second Title */} |
|
|
|
{data && data.Heading && data.HeadingParagraph && ( |
|
|
|
<Wrapper padding={' py-[32px] md:py-90p'}> |
|
|
|
<PageTitle |
|
|
|
left |
|
|
|
heading={data?.SecondHeading?.title} |
|
|
|
subheading={data?.SecondHeading?.subtitle} |
|
|
|
/> |
|
|
|
<Paragraph data={data.SecondHeadingParagraph.field} /> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Quote */} |
|
|
|
{data && data.SecondHeading && data.SecondHeadingParagraph && ( |
|
|
|
<Wrapper padding={' py-[16px] md:py-[64px]'}> |
|
|
|
<Quote color larger data={data.Quote.field} /> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Stats */} |
|
|
|
{data && data.Stats && data.Stats.length > 0 && ( |
|
|
|
<Wrapper gradient padding={' py-[64px]'}> |
|
|
|
<div className="flex flex-col gap-[64px] px-[16px] md:px-[64px] py-[32px]"> |
|
|
|
{data.Stats.map((item, index) => ( |
|
|
|
<div |
|
|
|
key={index} |
|
|
|
className="flex flex-row gap-[48px] items-center text-white" |
|
|
|
> |
|
|
|
<div className="relative"> |
|
|
|
<div className="absolute -left-[36px] -top-[24px] md:-left-8 md:-top-2 z-0"> |
|
|
|
{graphicArray.length > index |
|
|
|
? graphicArray[index] |
|
|
|
: graphicArray[index - 3]} |
|
|
|
</div> |
|
|
|
<H2 |
|
|
|
data={item.value} |
|
|
|
styleProps={ |
|
|
|
' relative text-white capitalize text-[32px] leading-[38px] md:text-[64px] md:leading-[72px] z-[1000]' |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<H2 data={item.title} styleProps={' text-white capitalize text-[18px] md:text-[32px]'} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</Wrapper> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Action Card */} |
|
|
|
<Wrapper> |
|
|
|
<div className="my-90p"> |
|
|
|
<ActionCard |
|
|
|
title={_data.ActionCard.heading} |
|
|
|
text={_data.ActionCard.paragraph} |
|
|
|
btn1={_data.ActionCard.primaryBtn} |
|
|
|
btn2={_data.ActionCard.secondaryBtn} |
|
|
|
link1={'/contact'} |
|
|
|
link2={'/about'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
{data && data.WorkTogether && ( |
|
|
|
<Wrapper> |
|
|
|
<div className="my-90p"> |
|
|
|
<ActionCard_Array |
|
|
|
title={data.WorkTogether.title} |
|
|
|
text={data.WorkTogether.paragraphs} |
|
|
|
btn1={data.WorkTogether.ButtonPrimary} |
|
|
|
btn2={data.WorkTogether.ButtonSecondary} |
|
|
|
link1={'/contact'} |
|
|
|
link2={'/about'} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Wrapper> |
|
|
|
)} |
|
|
|
</div> |
|
|
|
</PageLayout> |
|
|
|
); |
