pavle.golubovic
/
website-new
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

nisexpress

SEO
Pavle Golubovic 3 лет назад
Родитель
74c1a5782b
Сommit
d2660f6655
2 измененных файлов: 139 добавлений и 169 удалений
Единый вид Показать статистику Diff
  1. Двоичные данные
      frontend/src/assets/NE_large_logo.png
  2. 139
    169
      frontend/src/pages/About.jsx

Двоичные данные
frontend/src/assets/NE_large_logo.png Просмотреть файл


+ 139
- 169
frontend/src/pages/About.jsx Просмотреть файл

import Culture from './../assets/icons/values/culture.svg'; import Culture from './../assets/icons/values/culture.svg';
import Ideas from './../assets/icons/values/ideas.svg'; import Ideas from './../assets/icons/values/ideas.svg';


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

import Djole from './../' import Djole from './../'
import valuesBG from './../assets/ValuesBG.svg'; import valuesBG from './../assets/ValuesBG.svg';
import TimelineCardsWrapper from '../components/TimelineWrapper'; import TimelineCardsWrapper from '../components/TimelineWrapper';
icons: [ icons: [
"https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400", "https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=w2400",
"https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400", "https://lh6.googleusercontent.com/4QxTBdL0JdRHjbujuHSEO9ysyQL7N64bykQm4DutzoAB0MOIYBODgShJ9uSChiI1kHo=w2400",
"https://lh3.googleusercontent.com/FUP12F_KVneubsnN_-W2hQnhqpvbqL1-uuLtFoKt41CeZqOu3Oksrm27QUIinQG9Rq0=w2400",
NisExpress,
"https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400", "https://lh6.googleusercontent.com/8TrErMJ6QyxdwhmM57Oiy-41Db7thyvaHmGfb4teaFiYKWFVDd3reL1Ok1T88nAgvaE=w2400",
"https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400", "https://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400",
] ]
document.title = 'About Us'; document.title = 'About Us';
},[]); },[]);


// const api_url = process.env.REACT_APP_API_URL;
// const [cntAbout, setCntAbout] = useState('');
// const [isLoaded, setIsLoaded] = useState('');
// useEffect(async () => {
// var vid = document.getElementById('animation');
// vid.playbackRate = 2;
// axios
// .get(
// `${api_url}/api/aboutpage?populate[0]=heading.image&populate[1]=after_heading.section.image&populate[3]=highlight&populate[4]=info.image&populate[5]=OurMission.image&populate[6]=OurVision.image&populate[7]=Value.image&populate[8]=Values&populate[9]=partners.image&populate[10]=industries.industry.image&populate[11]=industries.backup_global_image`,
// )
// .then(res => {
// //console.log(res.data.data.attributes);
// setCntAbout(res.data.data.attributes);
// setIsLoaded(true);
// })
// .catch(err => {
// console.log(err);
// setIsLoaded(false);
// });
// }, []);

// if (!isLoaded) {
// 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>
// <source src={Animation_Diligent} type="video/webm" />
// Loading...
// </video>
// </div>
// );
// }

return ( return (
<PageLayout> <PageLayout>
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
{/* Heading Section */}
<section
<div className="bg-white dark:bg-dg-primary-1700 w-full pt-32">
{/* Heading Section */}
<section
id="heading" id="heading"
className="flex flex-col items-center justify-center max-w-custom m-auto" className="flex flex-col items-center justify-center max-w-custom m-auto"
> >
<div className="mb-8 flex flex-col md:flex-row justify-start items-start w-full px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<h6 className="subheading">
{_data.heading.subheading}
</h6>
<h1 className="heading text-dg-secondary mt-2">
{_data.heading.heading}
</h1>
<p className="paragraph mt-4">
{_data.heading.paragraph}
</p>
</div>
<img
<div className="mb-8 flex flex-col md:flex-row justify-start items-start w-full px-8 xl:px-0">
<div className="w-full md:w-1/2 md:pr-16">
<h6 className="subheading">
{_data.heading.subheading}
</h6>
<h1 className="heading text-dg-secondary mt-2">
{_data.heading.heading}
</h1>
<p className="paragraph mt-4">
{_data.heading.paragraph}
</p>
</div>
<img
src={_data.heading.imgUrl} src={_data.heading.imgUrl}
alt="Our Team's image" alt="Our Team's image"
className="w-full md:w-1/2 text-center" className="w-full md:w-1/2 text-center"
/> />
</div>
</section>
</div>
</section>


{/* The After Heading pt.1 Section */}
<section
{/* The After Heading pt.1 Section */}
<section
id="after_heading" id="after_heading"
className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2" className="bg-white dark:bg-dg-primary-1700 flex items-center justify-center px-2"
> >
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center max-w-custom m-auto w-full px-8 xl:px-0">
<img
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center max-w-custom m-auto w-full px-8 xl:px-0">
<img
src={_data.segment1.imgUrl} src={_data.segment1.imgUrl}
alt="Our Team's image" alt="Our Team's image"
className="w-full md:w-1/2 text-center mt-8 md:mt-0" className="w-full md:w-1/2 text-center mt-8 md:mt-0"
/> />
<div className="w-full md:w-1/2 md:pl-16">
<p className="paragraph mt-4">
{_data.segment1.paragraph}
</p>
<div className="w-full md:w-1/2 md:pl-16">
<p className="paragraph mt-4">
{_data.segment1.paragraph}
</p>
</div>
</div> </div>
</div>
</section>
</section>


{/* The After Heading pt.2 Section */}
<section id="after_heading" className="flex flex-col items-center justify-center">
<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">
<p className="paragraph mt-4">
{_data.segment2.paragraph}
</p>
</div>
<img
{/* The After Heading pt.2 Section */}
<section id="after_heading" className="flex flex-col items-center justify-center">
<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">
<p className="paragraph mt-4">
{_data.segment2.paragraph}
</p>
</div>
<img
src={_data.segment2.imgUrl} src={_data.segment2.imgUrl}
alt="Office's image" alt="Office's image"
className="w-full md:w-1/2 text-center" className="w-full md:w-1/2 text-center"
/> />
</div>
</section>
</div>
</section>


{/* Highlighted Text Section */}
<section id="highlight" className="flex flex-col items-center justify-center mt-16">
<HighlighedText text={_data.subtitle} />
</section>
{/* Highlighted Text Section */}
<section id="highlight" className="flex flex-col items-center justify-center mt-16">
<HighlighedText text={_data.subtitle} />
</section>


{/* Info Section */}
<section id="info" className="flex flex-col items-center justify-center mt-16">
<div className="flex flex-col items-center justify-center w-full">
<img
{/* Info Section */}
<section id="info" className="flex flex-col items-center justify-center mt-16">
<div className="flex flex-col items-center justify-center w-full">
<img
src={_data.subtitleImgUrl} src={_data.subtitleImgUrl}
alt="Info image" alt="Info image"
className="max-w-[660px] w-full" className="max-w-[660px] w-full"
/> />
<p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
{_data.italicParagraph}
</p>
</div>
</section>
<p className="text-sm font-medium italic text-gray-500 dark:text-white w-2/3 lg:w-1/3 mt-4">
{_data.italicParagraph}
</p>
</div>
</section>


{/* Our Mission & Our Vision Section */}
<section
{/* Our Mission & Our Vision Section */}
<section
id="mission_vision" id="mission_vision"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16" className="bg-baby-blue dark:bg-dg-primary-1600 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">
<h1 className="heading text-dg-secondary">{_data.segment3.mission.title}</h1>
{_data.segment3.mission.paragraphs.map((item,index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
<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">
<h1 className="heading text-dg-secondary">{_data.segment3.vision.title}</h1>
{_data.segment3.vision.paragraphs.map((item,index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
) )
)} )}
</div>
<img
</div>
<img
src={_data.segment3.mission.imgUrl} src={_data.segment3.mission.imgUrl}
alt="Our mission image" alt="Our mission image"
className="text-center w-full md:w-1/2" className="text-center w-full md:w-1/2"
/> />
</div>
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<img
</div>
<div className="my-8 flex flex-col-reverse md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
<img
src={_data.segment3.vision.imgUrl} src={_data.segment3.vision.imgUrl}
alt="Our vision image" alt="Our vision image"
className="text-center w-full md:w-1/2 mt-8 md:mt-0" className="text-center w-full md:w-1/2 mt-8 md:mt-0"
/> />
<div className="w-full md:w-1/2 md:pl-16">
<h1 className="heading text-dg-secondary">{_data.segment3.vision.title}</h1>
{_data.segment3.vision.paragraphs.map((item,index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
<div className="w-full md:w-1/2 md:pl-16">
<h1 className="heading text-dg-secondary">{_data.segment3.mission.title}</h1>
{_data.segment3.mission.paragraphs.map((item,index) => (
<p key={index} className="paragraph mt-4">
{item.paragraph}
</p>
) )
)} )}
</div>
</div> </div>
</div>
</section>
</section>


{/* Values Section */}
<section
{/* Values Section */}
<section
id="values" id="values"
className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16" className="bg-white dark:bg-dg-primary-1700 flex flex-row items-center justify-center mt-16"
> >
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
<h1 className="heading text-dg-secondary">{_data.values.heading}</h1>
<div className='absolute justify-center md:flex hidden self-center'>
<div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
<h1 className="heading text-dg-secondary">{_data.values.heading}</h1>
<div className="absolute justify-center md:flex hidden self-center">
<img src={valuesBG}/> <img src={valuesBG}/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
{_data.values.cards.map((item,index) => (
<CardValues
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
{_data.values.cards.map((item,index) => (
<CardValues
key={index} key={index}
image={item.iconUrl} image={item.iconUrl}
heading={item.title} heading={item.title}
paragraph={item.paragraph} paragraph={item.paragraph}
/> />
))} ))}
</div>
</div> </div>
</div>
</section>
</section>


{/* Partners Section */}
<section
{/* Partners Section */}
<section
id="partners" id="partners"
className="bg-baby-blue dark:bg-dg-primary-1600 flex flex-col items-center justify-center mt-16" 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">
<h1 className="text-center heading text-dg-secondary">
{_data.partners.title}
</h1>
<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.icons.map((item,index) => (
<img
<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">
<h1 className="text-center heading text-dg-secondary">
{_data.partners.title}
</h1>
<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.icons.map((item,index) => (
<img
key={index} key={index}
src={item} src={item}
alt="Partner's image" alt="Partner's image"
className="w-16 md:w-20 lg:w-24" className="w-16 md:w-20 lg:w-24"
/> />
))} ))}
</div>
</div> </div>
</div>
</section>
</section>


{/* Industries Section */}
<section
{/* Industries Section */}
<section
id="industries" id="industries"
className="bg-white dark:bg-dg-primary-1700 flex flex-col items-center justify-center mt-16" 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">
<h1 className="heading text-dg-secondary">{_data.industries.title}</h1>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{_data.industries.industries.map((industry,index) => (
<div key={index}>
<h3 className="h3-heading">
{industry.title}
</h3>
<p className="paragraph mt-2">
{industry.paragraph}
</p>
<img
<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">
<h1 className="heading text-dg-secondary">{_data.industries.title}</h1>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-32 w-full mt-8">
{_data.industries.industries.map((industry,index) => (
<div key={index}>
<h3 className="h3-heading">
{industry.title}
</h3>
<p className="paragraph mt-2">
{industry.paragraph}
</p>
<img
src={industry.imgUrl} src={industry.imgUrl}
alt="Industries images" alt="Industries images"
className="m-auto" className="m-auto"
/> />
</div>
</div>
))} ))}
</div>
</div>
</div>
</section>
</div>
</section>


<Wrapper bg padding={' py-90p'}>
<PageTitle heading={_data.timeline.title} subheading={_data.timeline.subtitle} left />
<Wrapper bg padding={' py-90p'}>
<PageTitle heading={_data.timeline.title} subheading={_data.timeline.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/>
</div>
<TimelineCardsWrapper2>
{_data.timeline.cards.map((item, index) => (
<TimelineCard
<TimelineCardsWrapper2>
{_data.timeline.cards.map((item, index) => (
<TimelineCard
key={index} key={index}
id={index} id={index}
title={item.title} title={item.title}
paragraph={item.paragraph} paragraph={item.paragraph}
/> />
))} ))}
</TimelineCardsWrapper2>
</div>
</TimelineCardsWrapper2>
</div>
</div>
</div>
</Wrapper>
</Wrapper>


</div>
</div>
</PageLayout> </PageLayout>
); );
} }

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить