pavle.golubovic
/
website-new
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

nisexpress

SEO
Pavle Golubovic 3 년 전
부모
74c1a5782b
커밋
d2660f6655
2개의 변경된 파일과 139개의 추가작업 그리고 169개의 파일을 삭제
분할 보기 변경상태 보기
  1. BIN
      frontend/src/assets/NE_large_logo.png
  2. 139
    169
      frontend/src/pages/About.jsx

BIN
frontend/src/assets/NE_large_logo.png 파일 보기


+ 139
- 169
frontend/src/pages/About.jsx 파일 보기

@@ -12,6 +12,8 @@ import Doing from './../assets/icons/values/doing.svg';
import Culture from './../assets/icons/values/culture.svg';
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';
@@ -101,7 +103,7 @@ const _data = {
icons: [
"https://lh4.googleusercontent.com/e5Zf5H4bL-6N4R7TOJIlB7hAPzzIk41dnWlCvJDZKAWyyjbJ_kWmONzHqddi11rb_SA=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://lh4.googleusercontent.com/D05_HBhHcJf8Rpbxf7Uc4ix_J4advqIFM6Rwe-Vd9huTQCt2JKocAKqAf_AwszThr2Y=w2400",
]
@@ -165,251 +167,219 @@ export default function About() {
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 (
<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"
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}
alt="Our Team's image"
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"
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}
alt="Our Team's image"
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>
</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}
alt="Office's image"
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}
alt="Info image"
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"
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}
alt="Our mission image"
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}
alt="Our vision image"
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>
</section>
</section>

{/* Values Section */}
<section
{/* Values Section */}
<section
id="values"
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}/>
</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}
image={item.iconUrl}
heading={item.title}
paragraph={item.paragraph}
/>
))}
</div>
</div>
</div>
</section>
</section>

{/* Partners Section */}
<section
{/* Partners 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">
<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}
src={item}
alt="Partner's image"
className="w-16 md:w-20 lg:w-24"
/>
))}
</div>
</div>
</div>
</section>
</section>

{/* Industries Section */}
<section
{/* Industries Section */}
<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">
<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}
alt="Industries images"
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}
id={index}
title={item.title}
@@ -417,14 +387,14 @@ export default function About() {
paragraph={item.paragraph}
/>
))}
</TimelineCardsWrapper2>
</div>
</TimelineCardsWrapper2>
</div>
</div>
</div>
</Wrapper>
</Wrapper>

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

Write Preview
Loading…
취소
저장