pavle.golubovic
/
website-new
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

refactor and seo

blog-new
Pavle Golubovic 3 anos atrás
pai
0fc6a182da
commit
f604ef5e08
8 arquivos alterados com 292 adições e 452 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 3
    5
      frontend/src/components/HRProcess.jsx
  2. 2
    1
      frontend/src/components/shared/ReactHelmet.jsx
  3. 2
    6
      frontend/src/components/shared/VideoComponent.jsx
  4. 76
    242
      frontend/src/pages/About.jsx
  5. 125
    122
      frontend/src/pages/Careers.jsx
  6. 1
    1
      frontend/src/pages/Home.jsx
  7. 77
    75
      frontend/src/pages/ProcessPage.jsx
  8. 6
    0
      frontend/src/pages/WorkWithUs.jsx

+ 3
- 5
frontend/src/components/HRProcess.jsx Ver arquivo

@@ -1,14 +1,12 @@
import React, {useRef, useEffect} from 'react';
import { useScroll } from 'framer-motion';
import { ref } from 'yup';

const HRProcess = ({cntCareers, img}) => {
const HRProcess = ({data, img}) => {
console.log(data);

const ref = useRef(null);
const { scrollYProgress } = useScroll({ container: ref });
// gsap.registerPlugin(ScrollTrigger);
useEffect(() => {
const removeB = scrollYProgress.onChange((value) => {
if (value > 0.5)
@@ -57,7 +55,7 @@ const HRProcess = ({cntCareers, img}) => {
/>

<div className="local">
{cntCareers.selection_process.steps.map((item, index) => (
{data.selection_process.steps.map((item, index) => (
<>
{/* Section */}
<div

+ 2
- 1
frontend/src/components/shared/ReactHelmet.jsx Ver arquivo

@@ -1,11 +1,12 @@
import { Helmet } from 'react-helmet-async';
import PropTypes from 'prop-types';
import '../../styles/cards.css';
import { useEffect } from 'react';

const api_url = process.env.REACT_APP_API_URL;

const ReactHelmet = ({ seo }) => {
console.log(seo);
//console.log(seo);
return (
<Helmet>
<title>{seo.metaTitle}</title>

+ 2
- 6
frontend/src/components/shared/VideoComponent.jsx Ver arquivo

@@ -1,5 +1,4 @@
import React, { useRef } from 'react';
import { useEffect } from 'react';

import { useState } from 'react';
import UseAnimations from 'react-useanimations';
@@ -18,13 +17,10 @@ const VideoComponent = ({ source }) => {
video.muted = !video.muted;
setMute(!mute);
}
useEffect(() => {
console.log(source);
});

return (
<div className="w-full py-48p lg:py-72p relative">
<video autoPlay loop ref={vidRef} muted className='rounded-[32px]'>
<video autoPlay loop ref={vidRef} muted className="rounded-[32px]">
<source type="video/mp4" src={api_url + source} />
</video>
<div className="absolute bottom-16 right-4 md:bottom-24 md:right-8 rounded-full overflow-clip">
@@ -34,7 +30,7 @@ const VideoComponent = ({ source }) => {
toggleMute();
}}
size={50}
wrapperStyle={{ background: 'white', padding:'5px' }}
wrapperStyle={{ background: 'white', padding: '5px' }}
animation={volume}
speed={0.7}
/>

+ 76
- 242
frontend/src/pages/About.jsx Ver arquivo

@@ -1,7 +1,4 @@
import Contact from '../components/shared/Contact';

import { useState, useEffect } from 'react';
import axios from 'axios';
import { useEffect } from 'react';

import Animation_Diligent from '../assets/animation_diligent.webm';
import HighlighedText from '../components/shared/HighlighedText';
@@ -14,9 +11,7 @@ import Ideas from './../assets/icons/values/ideas.svg';

import NisExpress from '../assets/NE_large_logo.png';

import Djole from './../';
import valuesBG from './../assets/ValuesBG.svg';
import TimelineCardsWrapper from '../components/TimelineWrapper';
import TimelineCard from '../components/TimelineCard';
import PageTitle from '../components/shared/PageTitle';
import Wrapper from '../layout/Wrapper';
@@ -28,167 +23,6 @@ import ReactHelmet from '../components/shared/ReactHelmet';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import useDataApi from './../hooks/useDataApi';

const _data = {
heading: {
subheading: 'About Us',
heading: 'Who We Are',
imgUrl:
'https://lh4.googleusercontent.com/4AxnSLGq46gLcFyYdz1508l45FIeIhlsrb02v-AnNenATYLG15qFgIl3pbBfjHVg1nY=w2400',
paragraph:
'When ten enthusiasts came together in 2020 with the same vision and impactful goals our journey officially began. We believed that taking small steps could result in meaningful changes and help us succeed in areas of a global pandemic and rapid social changes.',
},
segment1: {
paragraph:
'Diligent Software is a collaborative software development team that delivers high-quality custom software solutions while also cultivating a work environment that promotes community, family, learning, and mentoring.',
imgUrl:
'https://lh5.googleusercontent.com/YD0JCH9v2hZ2_M42T7QD4U1CbTPolaelasj0SJF8kDQQiuRFmO9lLukjxfBqg5dxHsY=w2400',
},
segment2: {
paragraph:
'By utilizing cutting-edge technologies, our agile, multi-disciplinary teams provide a combination of product & technology strategies, intelligent experiences, and world-class engineering to help our clients become more engaging, responsive, and efficient.',
imgUrl:
'https://lh6.googleusercontent.com/WEoQNbjwT9EpeG2kM4pvdeJM4MwFoEnSj2Dn0e3vPM54iN6P911_Y0wAXvSsbspd3Lg=w2400',
},
subtitle: 'Diligent has close to 100 employees located throughout Serbia.',
subtitleImgUrl:
'https://lh5.googleusercontent.com/Nk7pWU1H028YvdMkXvH6CECmQVWtTuKpKQuTUTKzUVXfhCF1JAjXThy1585YnXYdWio=w2400',
italicParagraph:
'We understand that investing in long-term customer relationships is essential, but we also recognize the importance of providing rewarding and challenging careers for our employees.',
segment3: {
mission: {
title: 'Our Vision',
imgUrl:
'https://lh5.googleusercontent.com/IdGSbzSZ8fRwwkP43Lkzm3fQBRGqywFNpfi2Qe2bkstNXunQGM1zVFrdX4blaiSGuEM=w2400',
paragraphs: [
{
paragraph:
'Our vision is to be a leading software solutions company for a variety of industries. We believe that our growth is directly related to the success of our customers, so we are dedicated to helping them achieve their business goals. ',
},
{
paragraph:
'We want to be known as a reliable, innovative, and top-quality software service provider in the IT industry. We are constantly striving to exceed the expectations of our customers and to be the best in our field. ',
},
],
},
vision: {
title: 'Our Mission',
imgUrl:
'https://lh3.googleusercontent.com/gqO6y406jsrU5mt2c2rcbZS-2Z6Q9rg2zxHQ576LExMo1ptRx-SVZj2iAkR1wg2lNF0=w2400',
paragraphs: [
{
paragraph:
'Our mission is to help our customers grow their businesses through creative design and development solutions. We strive to deliver market-defining high-quality solutions that create value and competitive advantage for our customers around the world.',
},
{
paragraph:
'We are dedicated to providing our clients with the best possible service and continually improving our processes and capabilities to better meet their needs. ',
},
],
},
},
values: {
heading: 'Values',
cards: [
{
id: 0,
iconUrl: Care,
title: 'Care',
paragraph:
'We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. ',
},
{
id: 1,
iconUrl: Culture,
title: 'Culture',
paragraph:
'Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more.',
},
{
id: 2,
iconUrl: Doing,
title: 'Learn by Doing',
paragraph:
'Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team.',
},
{
id: 3,
iconUrl: Ideas,
title: 'Ideas Over Hierarchy',
paragraph:
'We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action.',
},
],
},

partners: {
title: 'Partners',
paragraph:
"We collaborate with Fortune 500 companies, innovative start-ups, and established industry leaders. We deliver specialized software solutions and services that enable businesses to expand and face tomorrow's problems by combining world-class engineering teams, sector knowledge, and technical experts.",
icons: [
'https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400',
'https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400',
NisExpress,
'https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400',
'https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400',
],
},
industries: {
title: 'Industries',
industries: [
{
title: 'Fintech',
paragraph:
'We help fintech startups and financial institutions to manage risk and stay ahead of the curve by developing financial software solutions and integrating them with third-party systems while ensuring the stable operation of financial systems.',
imgUrl:
'https://lh6.googleusercontent.com/hNzi8UOWwAYzL9ZFR5bPnhge1RCIPgaFDwvZ-Cz7jaIRzKOySxZi2duV5-plTpGczLE=w2400',
},
{
title: 'Healthcare',
paragraph:
'We provide the healthcare sector with seamless transitions from an offline business to a tailored digital platform. All with the assistance of cutting-edge technology to enhance the user experience and improve health care delivery.',
imgUrl:
'https://lh4.googleusercontent.com/8xQPhJ2FZrTFamSUf2EkpL_vsvjAFymUEEX4PWF-R4Mhznt6vo2kkYCHY4gZCF5XjYs=w2400',
},
],
},
timeline: {
subtitle: 'our journey',
title: 'Timeline of Our Growth',
cards: [
{
subtitle: '1st Step',
title: 'First Year of Our Work',
paragraph:
'Our journey began two years ago when a group of ten tech enthusiasts made the decision to put their ideas into practice and accomplish their goals. With more than ten years of technology experience in a variety of industries, including fintech, transportation, and healthcare, they created a modern company that can deliver solutions tailored to each client. ',
},
{
subtitle: '2nd Step',
title: 'Choosing our clients',
paragraph:
'We strive to build strong partnerships with our clients. We can proudly say that our biggest value is a long-lasting partnership with our very first clients. Good impressions and commitment lead us to the first clients. Furthermore, we continue to build long-term partnerships. ',
},
{
subtitle: '3rd Step',
title: 'Overcoming hard times',
paragraph:
'As the COVID-19 pandemic was taking off, we were extremely impressed by how well our team adapted to the changing circumstances. Diligent’s greatest strengths have always been our team of highly qualified and experienced professionals. Diligent team increased from 35 employees to 67 technology experts.',
},
{
subtitle: '4th Step',
title: 'Where We Are Today',
paragraph:
'We are constantly growing, coding the vision of the future! Today we are about to have 100 employees who diligently work on more than 50 projects, trying to give cutting-edge solutions to the most common and modern problems. Our partnerships with the clients are based on trust and commitment.',
},
{
subtitle: '5th Step',
title: 'road to future success',
paragraph:
'Professional and personal growth and development of our employees are crucial for strengthening our team. We strive hard to offer high-quality education, mentoring, and an inspiring environment where everyone may reach their full potential. This will enable us to progress as a team and achieve our long-term goals.',
},
],
},
};

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = [
@@ -203,6 +37,7 @@ const strapiPopulate = [
'Indrustries',
'Industries.Items',
'Industries.Items.Image',
'TimelineHeading',
'Timeline.Steps',
'SEO.metaSocial',
'SEO.metaImage',
@@ -220,10 +55,6 @@ export default function About() {
document.title = 'About Us';
}, []);

useEffect(() => {
console.log(data);
}, [data]);

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">
@@ -237,7 +68,7 @@ export default function About() {

return (
<PageLayout>
{/* {data.SEO && <ReactHelmet seo={data.SEO} />} */}
{(data && data.SEO) ? <ReactHelmet seo={data.SEO} /> : null}
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
{/* Heading Section */}
{data ? (
@@ -382,84 +213,87 @@ export default function About() {

{/* Partners Section */}
{data ? (
<section
id="partners"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-2/3">
<h2 className="text-center heading text-dg-secondary">
{data.Partners.heading}
</h2>
<p className="text-left paragraph mt-4">{data.Partners.paragraph}</p>
</div>
<div className="flex flex-row justify-between items-center w-full mt-16">
{data.Partners.images.data.map((item, index) => (
<img
key={index}
src={api_url + item.attributes.url}
alt={api_url + item.attributes.alternativeText}
className="w-16 md:w-20 lg:w-24"
/>
))}
</div>
</div>
</section>
<section
id="partners"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16"
>
<div className="my-16 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full md:w-2/3">
<h2 className="text-center heading text-dg-secondary">
{data.Partners.heading}
</h2>
<p className="text-left paragraph mt-4">{data.Partners.paragraph}</p>
</div>
<div className="flex flex-row justify-between items-center w-full mt-16">
{data.Partners.images.data.map((item, index) => (
<img
key={index}
src={api_url + item.attributes.url}
alt={api_url + item.attributes.alternativeText}
className="w-16 md:w-20 lg:w-24"
/>
))}
</div>
</div>
</section>
) : null}

{/* Industries Section */}
{data ? (
<section
id="industries"
className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
>
<div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
<h2 className="heading text-dg-secondary">{data.Industries.Title}</h2>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{data.Industries.Items.map((industry, index) => (
<div key={index}>
<h3 className="h3-heading">{industry.heading}</h3>
<p className="paragraph mt-2">{industry.paragraph}</p>
<img src={api_url + industry.Image.data.attributes.url} alt={api_url + industry.Image.data.attributes.alternativeText} className="m-auto" />
</div>
))}
</div>
</div>
</section>

{data ? (
<section
id="industries"
className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16"
>
<div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<div className="w-full">
<h2 className="heading text-dg-secondary">{data.Industries.Title}</h2>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{data.Industries.Items.map((industry, index) => (
<div key={index}>
<h3 className="h3-heading">{industry.heading}</h3>
<p className="paragraph mt-2">{industry.paragraph}</p>
<img
src={api_url + industry.Image.data.attributes.url}
alt={api_url + industry.Image.data.attributes.alternativeText}
className="m-auto"
/>
</div>
))}
</div>
</div>
</section>
) : null}

<Wrapper bg padding={' py-90p'}>
<PageTitle
heading={_data.timeline.title}
subheading={_data.timeline.subtitle}
left
/>
{data ? (
<Wrapper bg padding={' py-90p'}>
<PageTitle
heading={data.TimelineHeading.title}
subheading={data.TimelineHeading.subtitle}
left
/>

<div className="my-90p">
<div className="w-full relative ">
<div className="md:absolute top-[5%] left-0 w-full h-full hidden md:block">
<TimelineLogo />
</div>

<div className="my-90p">
<div className="w-full relative ">
<div className="md:absolute top-[5%] left-0 w-full h-full hidden md:block">
<TimelineLogo />
<TimelineCardsWrapper2>
{data.Timeline.Steps.map((item, index) => (
<TimelineCard
key={index}
id={index}
title={item.heading}
subtitle={item.subheading}
paragraph={item.paragraph}
/>
))}
</TimelineCardsWrapper2>
</div>

<TimelineCardsWrapper2>
{_data.timeline.cards.map((item, index) => (
<TimelineCard
key={index}
id={index}
title={item.title}
subtitle={item.subtitle}
paragraph={item.paragraph}
/>
))}
</TimelineCardsWrapper2>
</div>
</div>
</Wrapper>
</Wrapper>
) : null}
</div>
</PageLayout>
);

+ 125
- 122
frontend/src/pages/Careers.jsx Ver arquivo

@@ -32,9 +32,32 @@ import { useNavigate } from 'react-router-dom';
import useAnalytics from './../hooks/useAnalytics';
import HRProcess from '../components/HRProcess';
import VideoComponent from './../components/shared/VideoComponent';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import useDataApi from './../hooks/useDataApi';
import ReactHelmet from './../components/shared/ReactHelmet';

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = [
'diligent_life',
'diligent_life.heading_section',
'diligent_life.CTO',
'diligent_life.media_text.media',
'selection_process.heading',
'selection_process.steps.media',
'positions_heading',
'positions_card.Image',
'benefits_heading',
'benefits_card.media',
'Cards.Card3.Image',
'ActionCard',
'Video',
'SEO',
'SEO.metaSocial',
'SEO.metaImage',
'SEO.metaSocial.image',
];

// eslint-disable-next-line no-underscore-dangle
const _data = {
job: {
@@ -146,10 +169,12 @@ const _data = {

export default function Careers({ forwardedRef }) {
const [clickedPosition, setClickedPosition] = useState('');
const [cntCareers, setCntCareers] = useState('');
const [isLoaded, setIsLoaded] = useState('');

const strapi = strapiApiBuilder('n-careerspage', strapiPopulate);

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

console.log(data);

useEffect(() => {
document.title = 'Careers';
@@ -157,36 +182,11 @@ export default function Careers({ forwardedRef }) {

useAnalytics('Careers');

useLayoutEffect(() => {
const fetch = async () => {
var vid = document.getElementById('animation');
vid.playbackRate = 2;
axios
.get(
`${api_url}/api/n-careerspage?populate[0]=diligent_life&populate[1]=diligent_life.heading_section&populate[2]=diligent_life.CTO&populate[3]=diligent_life.media_text.media&populate[4]=selection_process.heading&populate[5]=selection_process.steps.media&populate[6]=positions_heading&populate[7]=positions_card.Image&populate[8]=benefits_heading&populate[9]=benefits_card.media&populate[10]=ActionCard&populate[11]=Video`,
)
.then(res => {
setCntCareers(res.data.data.attributes);
setIsLoaded(true);
})
.catch(err => {
console.log(err);
setIsLoaded(false);
});
};
fetch();
}, []);

const link = useNavigate();

useEffect(() => {
console.log(cntCareers);
}, [cntCareers]);


//useEffect(() => { vidRef.current.play(); },[]);

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>
@@ -199,111 +199,114 @@ export default function Careers({ forwardedRef }) {

return (
<PageLayout>
<div className="bg-white dark:bg-dg-primary-1700 w-full md:pt-90p overflow-hidden">
{/* Diligent Life */}
<Wrapper padding={' py-90p'}>
<PageTitle
left
heading={cntCareers.diligent_life.heading_section.heading}
subheading={cntCareers.diligent_life.heading_section.subheading}
/>
{data ? (
<div className="bg-white dark:bg-dg-primary-1700 w-full md:pt-90p overflow-hidden">
{data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
{/* Diligent Life */}
<Wrapper padding={' py-90p'}>
<PageTitle
left
heading={data.diligent_life.heading_section.heading}
subheading={data.diligent_life.heading_section.subheading}
/>

<div className="mt-20p">
<div>
<p className="paragraph">
{cntCareers.diligent_life.heading_section.paragraph}
</p>
<div className="mt-20p">
<div>
<p className="paragraph">
{data.diligent_life.heading_section.paragraph}
</p>

{/* Video Frame */}
{cntCareers && cntCareers.Video != undefined ? (
<VideoComponent source={cntCareers.Video.data.attributes.url} />
) : null}
{/* Video Frame */}
{data && data.Video != undefined ? (
<VideoComponent source={data.Video.data.attributes.url} />
) : null}
</div>
</div>
</div>

<div className="flex flex-col md:flex-row items-center justify-between lg:justify-center gap-8">
<p className="paragraph w-full lg:w-3/4">
{cntCareers.diligent_life.CTO.cto_paragraph}
</p>
<button
className="btn-secondary min-w-fit"
onClick={() => link('/diligentlife')}
>
{cntCareers.diligent_life.CTO.cto_button}
</button>
</div>
</Wrapper>
<div className="flex flex-col md:flex-row items-center justify-between lg:justify-center gap-8">
<p className="paragraph w-full lg:w-3/4">
{data.diligent_life.CTO.cto_paragraph}
</p>
<button
className="btn-secondary min-w-fit"
onClick={() => link('/diligentlife')}
>
{data.diligent_life.CTO.cto_button}
</button>
</div>
</Wrapper>

{/* Selection Process */}
<Wrapper bg padding={' py-90p'}>
<PageTitle
left
heading={cntCareers.selection_process.heading.heading}
subheading={cntCareers.selection_process.heading.subheading}
/>
<HRProcess cntCareers={cntCareers} img={ImgStep1} />
</Wrapper>
{/* Selection Process */}
<Wrapper bg padding={' py-90p'}>
<PageTitle
left
heading={data.selection_process.heading.heading}
subheading={data.selection_process.heading.subheading}
/>
<HRProcess data={data} img={ImgStep1} />
</Wrapper>

{/* Open Positions */}
<Wrapper padding={' py-90p'}>
<PageTitle
heading={cntCareers.positions_heading.heading}
subheading={cntCareers.positions_heading.subheading}
left
color
/>
<div className="pt-72p">
<div className="absolute hidden -ml-64 md:block">
<OrbitOnScroll />
{/* Open Positions */}
<Wrapper padding={' py-90p'}>
<PageTitle
heading={data.positions_heading.heading}
subheading={data.positions_heading.subheading}
left
color
/>
<div className="pt-72p">
<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>
</section>
</div>
<section
id="jobs"
className="flex items-center justify-center max-w-custom m-auto"
>
<div className="w-full">
<CardCareers2 cards={_data.job} />
</Wrapper>

{/* Benefits Section */}
<Wrapper bg padding={' py-90p'}>
<section id="values" className="flex flex-row items-center justify-center">
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto">
<h2 className="heading text-dg-secondary">
{data.benefits_heading.heading}
</h2>
<div className="grid grid-cols-1 gap-16 w-full mt-8">
{data.benefits_card.map((item, index) => (
<CardValues
key={index}
image={api_url + item.media.data.attributes.url}
heading={item.heading}
paragraph={item.paragraph}
/>
))}
</div>
</div>
</section>
</div>
</Wrapper>
</Wrapper>

{/* Benefits Section */}
<Wrapper bg padding={' py-90p'}>
<section id="values" className="flex flex-row items-center justify-center">
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto">
<h2 className="heading text-dg-secondary">
{cntCareers.benefits_heading.heading}
</h2>
<div className="grid grid-cols-1 gap-16 w-full mt-8">
{cntCareers.benefits_card.map((item, index) => (
<CardValues
key={index}
image={api_url + item.media.data.attributes.url}
heading={item.heading}
paragraph={item.paragraph}
/>
))}
{/* Action Card */}
{data ? (
<Wrapper>
<div className="my-90p">
<ActionCard
title={data.ActionCard.title}
text={data.ActionCard.paragraph}
btn1={data.ActionCard.ButtonPrimary}
btn2={data.ActionCard.ButtonSecondary}
link1={'/contact'}
link2={'/about'}
/>
</div>
</div>
</section>
</Wrapper>

{/* Action Card */}
{cntCareers ? (
<Wrapper>
<div className="my-90p">
<ActionCard
title={cntCareers.ActionCard.title}
text={cntCareers.ActionCard.paragraph}
btn1={cntCareers.ActionCard.ButtonPrimary}
btn2={cntCareers.ActionCard.ButtonSecondary}
link1={'/contact'}
link2={'/about'}
/>
</div>
</Wrapper>
) : null}
</div>
</Wrapper>
) : null}
</div>
) : null}
</PageLayout>
);
}

+ 1
- 1
frontend/src/pages/Home.jsx Ver arquivo

@@ -94,7 +94,7 @@ export default function Home({ forwardedRef }) {
} else {
return (
<PageLayout>
{/* {(data && data.SEO !== undefined) ? <ReactHelmet seo={data.SEO} /> : null} */}
{(data && data.SEO) ? <ReactHelmet seo={data.SEO} /> : null}
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32 overflow-hidden">

{/* Landing Section */}

+ 77
- 75
frontend/src/pages/ProcessPage.jsx Ver arquivo

@@ -1,24 +1,19 @@
import React, { useEffect, useState } from 'react';
import Loader from '../components/shared/Loader';
import PageTitle from '../components/shared/PageTitle';
import useFetch from '../hooks/useFetch';
import Wrapper from '../layout/Wrapper';
import ProcessCardsWrapper from '../components/shared/ProcessCardWrapper';
import ProcessCard from '../components/shared/ProcessCard';
import ActionCard from '../components/shared/ActionCard';
import axios from 'axios';

import Animation_Diligent from '../assets/animation_diligent.webm';

import { ReactComponent as ProcessSvg } from './../assets/images/Process.svg';
import { m } from 'framer-motion';
import PageLayout from '../layout/PageLayout';
import ProcessFacelessSlider from '../components/shared/ProcessFacelessSlider';
import useWindowSize from '../hooks/useWindowSize';
import ProcessSlider from '../components/ProcessSlider';
import useAnalytics from '../hooks/useAnalytics';
import useDataApi from './../hooks/useDataApi';
import { strapiApiBuilder } from '../utils/strapiApiBuilder';
import ReactHelmet from './../components/shared/ReactHelmet';

const api_url = process.env.REACT_APP_API_URL;

@@ -29,10 +24,10 @@ const strapiPopulate = [
'ProcessMobileImages',
'Step',
'Step.paragraphs',
// 'SEO',
// 'SEO.metaSocial',
// 'SEO.metaImage',
// 'SEO.metaSocial.image',
'SEO',
'SEO.metaSocial',
'SEO.metaImage',
'SEO.metaSocial.image',
];

const ProcessPage = () => {
@@ -48,10 +43,6 @@ const ProcessPage = () => {
document.title = 'Process';
}, []);

useEffect(() => {
console.log(data);
}, [data]);

useAnalytics('Process');

useEffect(() => {
@@ -59,73 +50,84 @@ const ProcessPage = () => {
else setIsMobile(false);
}, [windowInfo]);

return (
<PageLayout>
<div className="pt-32">
if (isLoading) {
return (
<div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
<video id="animation" width="540" height="540" autoPlay muted loop>
<source src={Animation_Diligent} type="video/webm" />
Loading...
</video>
</div>
);
} else {
return (
<PageLayout>
{data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
<div className="pt-32">
<Wrapper>
{data ? (
<PageTitle
left
color
heading={data.Heading.title}
subheading={data.Heading.subtitle}
/>
) : null}
{data ? (
<PageTitle
left
color
heading={data.Heading.title}
subheading={data.Heading.subtitle}
/>
) : null}

<div className="relative mx-auto my-32p md:my-90p">
{!isMobile ? (
<div className="w-full">
{data ? <img src={api_url + data.ProcessImage.data.attributes.url} alt={data.ProcessImage.data.attributes.alternativeText}></img> : null}
</div>
) : (
<div className="">
<ProcessSlider images={data.ProcessMobileImages.data} />
</div>
)}
{!isMobile ? (
<div className="w-full">
{data ? (
<img
src={api_url + data.ProcessImage.data.attributes.url}
alt={data.ProcessImage.data.attributes.alternativeText}
></img>
) : null}
</div>
) : (
<div className="">
<ProcessSlider images={data.ProcessMobileImages.data} />
</div>
)}
</div>
{data ? <p className="my-90p">{data.paragraph}</p> : null}
</Wrapper>
<Wrapper bg padding={' py-90p'}>
{data ?
(data.Step.length > 0 && (
<ProcessCardsWrapper>
{data.Step.map((item, index) => (
<ProcessCard
key={index}
id={index + 1}
title={item.title}
subtitle={item.subtitle}
text={item.paragraphs}
numeric
<Wrapper bg padding={' py-90p'}>
{data
? data.Step.length > 0 && (
<ProcessCardsWrapper>
{data.Step.map((item, index) => (
<ProcessCard
key={index}
id={index + 1}
title={item.title}
subtitle={item.subtitle}
text={item.paragraphs}
numeric
/>
))}
</ProcessCardsWrapper>
)
: null}
</Wrapper>
<Wrapper>
<div className="my-90p">
{data ? (
<ActionCard
title={data.WorkTogether.title}
text={data.WorkTogether.paragraph}
btn1={data.WorkTogether.ButtonPrimary}
btn2={data.WorkTogether.ButtonSecondary}
link1={'/contact'}
link2={'/portfolio'}
/>
))}
</ProcessCardsWrapper>

))
: null}
</Wrapper>
<Wrapper>
<div className="my-90p">
{data ? <ActionCard
title={data.WorkTogether.title}
text={data.WorkTogether.paragraph}
btn1={data.WorkTogether.ButtonPrimary}
btn2={data.WorkTogether.ButtonSecondary}
link1={'/contact'}
link2={'/portfolio'}
/> : null}
</div>
</Wrapper>
</div>
</PageLayout>
);
) : null}
</div>
</Wrapper>
</div>
</PageLayout>
);
}
};

export default ProcessPage;

+ 6
- 0
frontend/src/pages/WorkWithUs.jsx Ver arquivo

@@ -13,6 +13,7 @@ import GradientWrapper from '../components/shared/GradientWrapper';
import '../App.css';
import useAnalytics from './../hooks/useAnalytics';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import ReactHelmet from './../components/shared/ReactHelmet';

const api_url = process.env.REACT_APP_API_URL;

@@ -37,6 +38,10 @@ const strapiPopulate = [
'Download',
'OfficeImg',
'WorkTogether',
'SEO',
'SEO.metaSocial',
'SEO.metaImage',
'SEO.metaSocial.image',
];


@@ -74,6 +79,7 @@ const WorkWithUs = () => {
} else {
return (
<PageLayout>
{(data && data.SEO) ? <ReactHelmet seo={data.SEO} /> : null}
<div className="mt-[48px] md:mt-[180px]">
<Wrapper padding={' py-[48px]'}>
{data ? (

Escrever Pré-visualização
Carregando…
Cancelar
Salvar