Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Nikolai.berestevich/fix/whoweare bugs #2492

Merged
merged 8 commits into from
Jan 11, 2022
Merged

Nikolai.berestevich/fix/whoweare bugs #2492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3321d0a
nikolai.berestevich/fix/who-we-are-leaders
Jan 10, 2022
76e63a6
nikolai.berestevich/fix/who-we-are-banner
Jan 10, 2022
1e8a6dc
nikolai.berestevich/fix/who-we-are-banner
Jan 11, 2022
8a551fa
nikolai.berestevich/fix/who-we-are-correction
Jan 11, 2022
76e617e
nikolai.berestevich/fix/who-we-are-desctop- img
Jan 11, 2022
9260552
nikolai.berestevich/fix/who-we-are-desctop- img
Jan 11, 2022
0f5ff69
nikolai.berestevich/fix/who-we-are-desctop- img
Jan 11, 2022
f8ae69e
nikolai.berestevich/fix/who-we-are
Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/images/common/about/about_us_logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/images/common/about/about_us_logo_desktop.png
View file
Open in desktop
Binary file not shown.
60 changes: 48 additions & 12 deletions src/pages/who-we-are/_AboutUsBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@ import Bg from 'images/common/who-we-are/about-us-banner.jpg'
import { localize } from 'components/localization'
import { SectionContainer, Flex } from 'components/containers'
import device from 'themes/device'
import { Header, Text } from 'components/elements'
import { Header } from 'components/elements'
import { zoho_url } from 'common/constants'
import { LinkButton } from 'components/form'

const StyledSectionContainer = styled(SectionContainer)`
display: flex;
flex-direction: column;
align-items: center;
padding: 0 40px;
padding: 0 40px 120px;
flex-wrap: nowrap;
@media ${device.tablet} {
padding: 0 40px;
padding: 0 40px 40px;
}
@media ${device.mobileL} {
padding: 0 16px;
padding: 0 16px 40px;
}
`

Expand Down Expand Up @@ -52,32 +52,68 @@ const PictureFlex = styled(Flex)`
margin: 40px 0 0 29px;
width: 250px;
}
@media (max-width: 359px) {
margin: 10px 10px 0 29px;
}
`

const StyledHeader = styled(Header)`
line-height: 40px;
@media ${device.laptop} {
line-height: 34px;
}
@media ${device.tabletL} {
font-size: 30px;
}
@media ${device.tablet} {
font-size: 28px;
}
`
const Styledtext = styled(Text)`

const StyledHeader2 = styled(Header)`
color: var(--color-white);
margin-bottom: 24px;
margin: 18px 0 24px;
@media ${device.tablet} {
margin: 6px 0 10px;
font-size: 11px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0em;
}
`

const StyledLinkButton = styled(LinkButton)`
@media ${device.tablet} {
padding: 8px 16px;
}
`

const AboutUsBanner = () => {
return (
<StyledSectionContainer>
<StyledFlex direction="column" height="288px" width="1200px">
<PictureFlex jc="start" ai="start" direction="column">
<Header as="h3" width="100%" type="heading-3" color="white" mb="18px">
<StyledHeader as="h3" width="100%" type="unset" size="32px" color="white">
{localize('We have a huge mission, an incredible team, and rapid growth.')}
</Header>
<Styledtext width="100%" type="subtitle-1" as="p">
</StyledHeader>
<StyledHeader2
width="100%"
type="sub-paragraph"
as="p"
size="16px"
weight="400px"
>
{localize('Join and grow with us.')}
</Styledtext>
<LinkButton
</StyledHeader2>
<StyledLinkButton
secondary="true"
to={zoho_url}
external="true"
target="_blank"
rel="noopener noreferrer"
>
{localize('See our open positions')}
</LinkButton>
</StyledLinkButton>
</PictureFlex>
</StyledFlex>
</StyledSectionContainer>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/who-we-are/_DerivNumbers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ const StyledSection = styled(SectionContainer)`
flex-direction: column;
justify-content: center;
align-items: center;
padding: 200px 16px 120px;
padding: 180px 16px 200px;
background-color: var(--color-white);

@media ${device.tablet} {
padding: 40px 16px;
padding: 30px 16px 40px;
}
`

Expand Down
52 changes: 25 additions & 27 deletions src/pages/who-we-are/_OurLeadership.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@ const StyledSectionContainer = styled(SectionContainer)`
flex-direction: column;
align-items: center;
margin: 0;
@media ${device.tablet} {
padding: 0 16px 40px;
}
padding: 0 16px;
`

const StyledCssGrid = styled(CssGrid)`
Expand All @@ -78,6 +76,11 @@ const StyledCssGrid = styled(CssGrid)`
padding: 0;
grid-template-columns: ;
}
@media (max-width: 359px) {
grid-template-columns: repeat(3, 88px);
grid-column-gap: 12px;
grid-row-gap: 4px;
}
`

const StyledHeader = styled(Header)`
Expand All @@ -93,6 +96,7 @@ const ModalFlex = styled(Flex)`
position: absolute;
top: 130px;
background-color: white;
padding: 8px 16px 6px;
z-index: 1;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
Expand All @@ -105,7 +109,7 @@ const ModalFlex = styled(Flex)`
top: 108px;
}
@media ${device.mobileL} {
top: 98px;
top: 93px;
}
`
type MouseEvent = React.MouseEventHandler<HTMLDivElement> &
Expand All @@ -125,7 +129,7 @@ const StyledImageWrapper = styled(ImageWrapper)<StyledImageWrapperPropsType>`
padding-bottom: 20px;
@media ${device.tabletS} {
width: 104px;
height: 124px;
height: 114px;
}

@media ${device.tabletL} {
Expand All @@ -141,21 +145,16 @@ const StyledImageWrapper = styled(ImageWrapper)<StyledImageWrapperPropsType>`
}
}
}

@media ${device.tabletS} {
padding-bottom: 10px;
}
@media ${device.mobileL} {
width: 88px;
height: 108px;
height: 98px;
}
}
`

const ModalHeader = styled(Header)`
font-size: 14px;
@media ${device.tabletL} {
font-size: 11px;
}
`

type ModalPropsType = {
name: string
position: string
Expand All @@ -168,30 +167,29 @@ const StyledLogo = styled.img<StyledLogoType>`
width: 32px;
height: 32px;
filter: grayscale(100%);
margin-bottom: 5px;
&:hover {
filter: ${(props) => (props.link ? 'unset' : 'grayscale(100%)')};
}
`

const Modal = ({ name, position, link }: ModalPropsType) => {
return (
<ModalFlex ai="center" direction="column" width="unset" height="unset">
<ModalHeader type="unset" as="h4" padding="5px 5px 0" align="center">
<ModalFlex
ai="center"
direction="column"
width="unset"
height="unset"
padding="0px 16px 5px"
>
<Header type="unset" as="h4" padding="0" align="center" size="14px">
{name}
</ModalHeader>
<Header
as="h4"
padding="0px 10px 5px"
type="sub-paragraph"
weight="normal"
align="center"
>
</Header>
<Header as="h4" padding="0" type="sub-paragraph" weight="normal" align="center">
{position}
</Header>
{link && (
<LocalizedLink external="true" to={link} target="_blank" rel="noopener noreferrer">
<StyledLogo src={Linkedin} alt="" link={link} />
<StyledLogo width="32px" height="32px" src={Linkedin} alt="" link={link} />
</LocalizedLink>
)}
</ModalFlex>
Expand Down Expand Up @@ -342,7 +340,7 @@ const OurLeadership = () => {
tablet_row_gap="60px"
mobile_columns="repeat(3, 88px)"
mobile_column_gap="24px"
mobile_row_gap="4px"
mobile_row_gap="6px"
>
{leaders.map((leader: LeaderType, index: number) => (
<Leader leader={leader} key={index} />
Expand Down
51 changes: 35 additions & 16 deletions src/pages/who-we-are/_OurOffices.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,24 @@ const StyledSectionContainer = styled(SectionContainer)`
overflow: hidden;
flex-direction: column;
align-items: center;
margin: 0;
margin-top: 120px;

@media ${device.tablet} {
margin-top: 40px;
padding: 0 16px 40px;
}
`

const StyledHeader = styled(Header)`
line-height: 4rem;
margin-bottom: 69px;
margin-bottom: 40px;
@media ${device.laptop} {
font-size: 28px;
margin-bottom: 40px;
}
`

const NumberSection = styled(CssGrid)`
margin-top: 40px;
max-width: 788px;

@media ${device.tablet} {
Expand Down Expand Up @@ -156,7 +157,7 @@ const OurOffices = () => {
return (
<StyledSectionContainer padding="0 16px 120px" background="var(--color-white)">
<StyledHeader as="h2" size="32px" align="center" type="page-title">
{localize('Our global offices')}
{localize('Our locations')}
</StyledHeader>

<Flex>
Expand Down Expand Up @@ -222,9 +223,18 @@ const OurOffices = () => {
title={localize('Labuan')}
link="/careers/locations/labuan"
/>
{/* Uncomment after new offices will be shown and add links! */}
{/* <MapPin left="45.8%" top="28%" title={localize('London')} link="" />
<MapPin left="47.4%" top="30.9%" title={localize('Paris')} link="" /> */}
<MapPin
left="45.8%"
top="28%"
title={localize('London')}
link="/careers/locations/london"
/>
<MapPin
left="47.4%"
top="30.9%"
title={localize('Paris')}
link="/careers/locations/paris"
/>
<MapPin
left="44.5%"
top="30.9%"
Expand Down Expand Up @@ -295,9 +305,18 @@ const OurOffices = () => {
title={localize('Labuan')}
link="/careers/locations/labuan"
/>
{/* Uncomment after new offices will be shown and add links! */}
{/* <MapPin left="44.3%" top="24%" title={localize('London')} link="" />
<MapPin left="45.9%" top="26.9%" title={localize('Paris')} link="" /> */}
<MapPin
left="44.3%"
top="24%"
title={localize('London')}
link="/careers/locations/london"
/>
<MapPin
left="45.9%"
top="26.9%"
title={localize('Paris')}
link="/careers/locations/paris"
/>
<MapPin
left="43%"
top="26.9%"
Expand All @@ -311,25 +330,25 @@ const OurOffices = () => {
<NumberSection columns="1fr 1fr 1fr 1fr" column_gap="120px" row_gap="4rem">
<StyledFlex fd="column">
<NumberHeader size="32px">{localize('750+')}</NumberHeader>
<NumberText size="20px" align="center">
<NumberText size="16px" align="center">
{localize('employees')}
</NumberText>
</StyledFlex>
<StyledFlex fd="column">
<NumberHeader size="32px">{localize('50+')}</NumberHeader>
<NumberText size="20px" align="center">
<NumberText size="16px" align="center">
{localize('nationalities')}
</NumberText>
</StyledFlex>
<StyledFlex fd="column">
<NumberHeader size="32px">{localize('11')}</NumberHeader>
<NumberText size="20px" align="center">
<NumberHeader size="32px">{localize('13')}</NumberHeader>
<NumberText size="16px" align="center">
{localize('offices')}
</NumberText>
</StyledFlex>
<StyledFlex fd="column">
<NumberHeader size="32px">{localize('8')}</NumberHeader>
<NumberText size="20px" align="center">
<NumberHeader size="32px">{localize('10')}</NumberHeader>
<NumberText size="16px" align="center">
{localize('countries')}
</NumberText>
</StyledFlex>
Expand Down
4 changes: 4 additions & 0 deletions src/pages/who-we-are/_OurPrinciples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ const StyledText = styled(Header)`
max-width: 551px;
margin: 16px 0;
font-size: 16px;
@media ${device.tablet} {
font-size: 14px;
}
`

const StyledLinkButton = styled(LinkButton)`
Expand All @@ -70,6 +73,7 @@ const ColoredBox = styled(Box)`
background-color: ${(props) => props.bgcolor};
border-radius: 8px;
font-weight: bold;
color: #333333;
font-size: 24px;
line-height: 36px;

Expand Down
1 change: 0 additions & 1 deletion src/pages/who-we-are/carousel/_Carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ const Carousel = styled.div`
position: relative;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
`

type CarouselViewportType = {
Expand Down
Loading