diff --git a/src/images/common/careers/guernsey_grid_3.jpg b/src/images/common/careers/guernsey_grid_3.jpg index 4bfd36e3255..93659251291 100644 Binary files a/src/images/common/careers/guernsey_grid_3.jpg and b/src/images/common/careers/guernsey_grid_3.jpg differ diff --git a/src/images/common/careers/living_in_guernsey.jpg b/src/images/common/careers/living_in_guernsey.jpg index e279dbfafd3..6a1c786ef30 100644 Binary files a/src/images/common/careers/living_in_guernsey.jpg and b/src/images/common/careers/living_in_guernsey.jpg differ diff --git a/src/images/common/careers/living_in_paris.jpg b/src/images/common/careers/living_in_paris.jpg index 5651e0dba37..6e5e785a00b 100644 Binary files a/src/images/common/careers/living_in_paris.jpg and b/src/images/common/careers/living_in_paris.jpg differ diff --git a/src/images/common/careers/london_grid_3.jpg b/src/images/common/careers/london_grid_3.jpg index acbee6781f3..953fb71a1a9 100644 Binary files a/src/images/common/careers/london_grid_3.jpg and b/src/images/common/careers/london_grid_3.jpg differ diff --git a/src/images/common/careers/paris_grid_3.jpg b/src/images/common/careers/paris_grid_3.jpg index 641a109b10c..848bf3c29c2 100644 Binary files a/src/images/common/careers/paris_grid_3.jpg and b/src/images/common/careers/paris_grid_3.jpg differ diff --git a/src/images/common/careers/paris_grid_4.jpg b/src/images/common/careers/paris_grid_4.jpg index fe3da868e14..641a109b10c 100644 Binary files a/src/images/common/careers/paris_grid_4.jpg and b/src/images/common/careers/paris_grid_4.jpg differ diff --git a/src/pages/careers/_model/_locations/_locations.ts b/src/pages/careers/_model/_locations/_locations.ts index cb5fd5252a8..ade795a3c4a 100644 --- a/src/pages/careers/_model/_locations/_locations.ts +++ b/src/pages/careers/_model/_locations/_locations.ts @@ -13,6 +13,7 @@ import { address_uk, address_guernsey, } from './_contact-details' +import { locationsTypes } from './_locations.types' import MalaysiaFlagIcon from 'images/svg/careers/flag_malaysia.svg' import ParaguayFlagIcon from 'images/svg/careers/flag_paraguay.svg' import UAEFlagIcon from 'images/svg/careers/flag_uae.svg' @@ -23,7 +24,6 @@ import BelarusFlagIcon from 'images/svg/careers/flag_belarus.svg' import FranceFlagIcon from 'images/svg/careers/flag_france.svg' import UKFlagIcon from 'images/svg/careers/flag_uk.svg' import ChannelIslandsFlagIcon from 'images/svg/careers/flag._channel_islands.svg' -import { locationsTypes } from './_locations.types' export const cyberjaya = { name: 'cyberjaya', @@ -312,12 +312,12 @@ export const paris = { flagIcon: FranceFlagIcon, thumbnail: 'thumbnail_paris', first_p: - "Deriv (France) SAS is a wholly-owned subsidiary of the Deriv Group dedicated to research and development. It brings together a diverse range of expertise, from blockchain professionals to mathematicians and quantitative analysts. The goal of this team is to develop Deriv's future-proof products and services.", + "Deriv (France) SAS is a wholly-owned subsidiary of the Deriv Group dedicated to research and development. It is going to bring together a diverse range of expertise, from blockchain professionals to mathematicians and quantitative analysts. The goal of this team is to develop Deriv's future-proof products and services.", first_img: 'living_in_paris', grid_images: ['paris_grid_1', 'paris_grid_2', 'paris_grid_3', 'paris_grid_4'], map: 'cnWCUN529qw38Yce6', map_text: - 'There are always exciting projects to work on at Deriv (France). The bright team working at our R&D branch is the think tank that helps create our next generation of online trading products. If you’re driven with the same passion and are looking for new challenges to embrace, join our team in Paris.', + 'Deriv (France) is going to be the heart of our research and development. We’re going to create an elite think tank in this centre that will help create our next generation of online trading products. If you’re looking for new fintech challenges to embrace, join our team in Paris.', address: address_france, map_img: 'paris_map', google_map_link: 'https://goo.gl/maps/cnWCUN529qw38Yce6', @@ -333,12 +333,12 @@ export const london = { flagIcon: UKFlagIcon, thumbnail: 'thumbnail_london', first_p: - 'Deriv (UK) is a core Senior Managers and Certification Regime (SMCR) firm. Experts in law, finance, and risk management work together in our London office as a senior team of strategists. This office has three crucial functions: ensuring regulatory and statutory compliance in all areas of company operations within the UK jurisdiction, making financial plans to support company growth, and mitigating risks.', + 'We’re looking for experts in law, finance, and risk management to build our London team of senior strategists. Deriv (UK) will have three crucial functions: ensuring regulatory and statutory compliance in all areas of company operations within the UK jurisdiction, making financial plans to support company growth, and mitigating risks.', first_img: 'living_in_london', grid_images: ['london_grid_1', 'london_grid_2', 'london_grid_3', 'london_grid_4'], map: 'DJaQaFd9jqGiPB7e9', map_text: - 'Working at Deriv (UK) means collaborating with talented professionals on exciting challenges. We value an analytical mindset, a can-do approach, and leadership skills. This is a chance to participate in devising road plans and shaping policies for a global company. A career in the fintech industry never gets boring. Join our London office if you are ready for a mighty adventure.', + 'Working at Deriv (UK) will give you the chance to collaborate with talented professionals on exciting challenges. We value an analytical mindset, a can-do approach, and leadership skills. This is a chance to participate in devising road plans and shaping policies for a global company. A career in the fintech industry never gets boring. Join our London team if you are ready for a mighty adventure.', address: address_uk, map_img: 'london_map', google_map_link: 'https://goo.gl/maps/DJaQaFd9jqGiPB7e9', @@ -354,23 +354,23 @@ export const guernsey = { flagIcon: ChannelIslandsFlagIcon, thumbnail: 'thumbnail_guernsey', first_p: - 'Our office at Guernsey shall focus on compliance. We’re to form a team of experts in legislative and regulatory requirements to provide Deriv offices worldwide with Compliance oversight. With their knowledge in corporate law, anti-money laundering, and other related legislations, they will anticipate and mitigate regulatory risks.', + 'Our focus at Guernsey shall be on compliance. We’re to form a team of experts in legislative and regulatory requirements to provide Deriv offices worldwide with compliance oversight. With their knowledge in corporate law, anti-money laundering, and other related legislations, the Guernsey team will anticipate and mitigate regulatory risks.', first_img: 'living_in_guernsey', first_img_alt: 'living_in_guernsey alt img', grid_images: ['guernsey_grid_1', 'guernsey_grid_2', 'guernsey_grid_3', 'guernsey_grid_4'], grid_img_alt: ['guernsey grid 1', 'guernsey grid 2', 'guernsey grid 3', 'guernsey grid 4'], map: 'M8p55z3Wu4EKhQ3A7', map_text: - 'Deriv (Guernsey) can be an ideal work environment for those who have strong attention to detail, motivation, and interest in law. Joining us at this office gives you the opportunity to analyse regulatory policies, predict changes in fintech regulations, and formulate plans to ensure the efficiency of Deriv Group’s compliance strategies.', + 'Deriv (Guernsey) can be an ideal work environment for those who have strong attention to detail, motivation, and interest in law. Joining us at Guernsey gives you the opportunity to analyse regulatory policies, predict changes in fintech regulations, and formulate plans to ensure the efficiency of Deriv Group’s compliance strategies.', address: address_guernsey, map_img: 'guernsey_map', google_map_link: 'https://goo.gl/maps/M8p55z3Wu4EKhQ3A7', has_iframe: false, } export const all_offices: locationsTypes[] = [ - // london, + london, dubai, - // paris, + paris, malta, cyprus, guernsey, @@ -394,7 +394,7 @@ export const locations = { cyprus: `${cyprus.display_name}, ${cyprus.country}`, rwanda: `${rwanda.display_name}, ${rwanda.country}`, belarus: `${minsk.display_name}, ${minsk.country}`, - // france: `${paris.display_name}, ${paris.country}`, - // uk: `${london.display_name}, ${london.country}`, + france: `${paris.display_name}, ${paris.country}`, + uk: `${london.display_name}, ${london.country}`, guernsey: `${guernsey.display_name}, ${guernsey.country}`, } diff --git a/src/pages/careers/_model/_locations/_locations.types.ts b/src/pages/careers/_model/_locations/_locations.types.ts index 2fd42756023..5a63e6dd31b 100644 --- a/src/pages/careers/_model/_locations/_locations.types.ts +++ b/src/pages/careers/_model/_locations/_locations.types.ts @@ -2,16 +2,16 @@ export type locationsTypes = { name: string link: string display_name: string - img_alt: string + img_alt?: string map_office_name: string country: string flagIcon: string thumbnail: string first_p: string first_img: string - first_img_alt: string + first_img_alt?: string grid_images: string[] - grid_img_alt: string[] + grid_img_alt?: string[] map: string map_img?: string map_text: string diff --git a/src/pages/careers/locations/_location-layout-new-offices.tsx b/src/pages/careers/locations/_location-layout-new-offices.tsx new file mode 100644 index 00000000000..7f33c7b9d24 --- /dev/null +++ b/src/pages/careers/locations/_location-layout-new-offices.tsx @@ -0,0 +1,280 @@ +import React from 'react' +import styled from 'styled-components' +import CareerContainer from '../_layout-components/CareerContainer' +import { locationsTypes } from '../_model/_locations/_locations.types' +import device from 'themes/device' +import { SectionContainer, Flex } from 'components/containers' +import { Text, Header, BackgroundImage, QueryImage } from 'components/elements' +import { LinkButton } from 'components/form' +import { zoho_url } from 'common/constants' + +const StyledBackground = styled(BackgroundImage)` + width: 100%; + height: 660px; + object-fit: contain; + @media ${device.laptop} { + height: 521px; + } +` + +const StyledContainer = styled(CareerContainer)` + flex-direction: column; + height: 100%; +` + +const StyledHeader = styled(Header)` + font-size: 64px; + margin-bottom: 16px; + color: var(--color-white); + text-align: center; + line-height: 80px; +` +const SecondStyledHeader = styled(Header)` + @media ${device.tablet} { + margin-bottom: 40px; + } + + margin-bottom: 0 24px; +` +const StyledLinkButton = styled(LinkButton)` + font-size: 20px; + line-height: 30px; + @media ${device.tablet} { + font-size: 18px; + max-width: 317px; + } + @media (max-width: 340px) { + font-size: 15px; + } +` +type HeroProps = { + display_name: string + img_data: string +} + +const Hero = ({ display_name, img_data }: HeroProps) => { + return ( + + + {display_name} + + View open positions in {display_name} + + + + ) +} + +const FirstSection = styled(SectionContainer)` + max-width: 996px; + width: 100%; + margin: 0 auto; + + @media ${device.laptop} { + width: 91%; + margin: 0 4.5%; + padding: 40px 0; + } + + ${Header} { + margin-bottom: 40px; + @media ${device.tablet} { + margin-bottom: 0; + } + @media (max-width: 350px) { + font-size: 26px; + } + } + ${Flex} { + max-width: 996px; + padding: 0; + margin: 0; + @media ${device.tablet} { + align-items: center; + } + } + ${Text} { + max-width: 384px; + margin-right: 24px; + font-size: 20px; + + @media ${device.tablet} { + max-width: 100%; + margin: 8px 0 20px; + padding: 0; + text-align: center; + font-size: 16px; + } + @media ${device.mobileL} { + text-align: left; + } + } +` + +const WorkSection = styled(SectionContainer)` + max-width: 996px; + width: 100%; + margin: 0 auto; + padding: 0 0 80px; + + @media ${device.laptop} { + max-height: unset; + width: 91%; + margin: 0 4.5%; + padding: 0 0 40px; + } +` + +const StyledImageWrapper = styled.div` + max-width: 888px; + width: 59%; + + @media ${device.tablet} { + width: 100%; + height: 100%; + max-width: 100%; + object-fit: cover; + padding: 0; + margin: 0; + } +` + +const WorkingCard = styled.article` + overflow: hidden; + max-width: 996px; + margin: 0 auto; + border-radius: 4px; + box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.05), 0 0 20px 0 rgba(0, 0, 0, 0.05); + + @media ${device.laptop} { + margin: 0 auto; + } +` + +const CardText = styled(Text)` + margin-top: 8px; + display: block; + + @media ${device.mobileL} { + margin-top: 24px; + font-size: 14px; + margin-bottom: 24px; + } +` + +const WorkingFlex = styled(Flex)` + margin: 0; + padding: 0; + + @media ${device.tablet} { + max-height: unset; + height: 100%; + align-items: center; + flex-direction: column-reverse; + } +` + +const WorkingInformation = styled(Flex)` + max-width: 44.4rem; + padding: 40px; + display: block; + @media ${device.laptop} { + max-width: 100%; + padding: 24px 16px; + } +` + +const StyledDiv = styled.div` + max-width: 400px; + + @media ${device.laptop} { + max-width: 100%; + } + @media ${device.tablet} { + max-width: 100%; + height: unset; + } +` +const WorkingQueryImage = styled(QueryImage)` + object-fit: cover; + max-width: 552px; + max-height: 360px; + + @media ${device.desktopS} { + max-height: unset; + } + @media ${device.tabletL} { + max-width: 60%; + height: unset; + max-height: unset; + } + @media ${device.tablet} { + max-width: 100%; + height: unset; + max-height: unset; + } +` + +type LocationLayoutProps = { + location: locationsTypes + images: locationsTypes +} + +export const NewLocationLayout = ({ location, images }: LocationLayoutProps) => { + const { display_name, map_office_name } = location + if (!display_name) return null + + return ( + <> + + + + Deriv in {display_name} + + + {location.first_p} + + + + + + + + + + + +
+ {`Working at Deriv ${map_office_name}`} +
+ {location.map_text} + + + + + + + ) +} diff --git a/src/pages/careers/locations/guernsey/index.tsx b/src/pages/careers/locations/guernsey/index.tsx index 5996c3941ab..5443d6e45f9 100644 --- a/src/pages/careers/locations/guernsey/index.tsx +++ b/src/pages/careers/locations/guernsey/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import { guernsey } from '../../_model/_locations/_locations' -import { LocationLayout } from '../_location-layout' +import { NewLocationLayout } from '../_location-layout-new-offices' import { SEO } from 'components/containers' import Layout from 'components/layout/layout' import { localize, WithIntl } from 'components/localization' @@ -43,7 +43,7 @@ const Guernsey = () => { 'Find your role with us by browsing Deriv job opportunities in Guernsey, Channel Islands.', )} /> - + ) } diff --git a/src/pages/careers/locations/london/_index.tsx b/src/pages/careers/locations/london/index.tsx similarity index 91% rename from src/pages/careers/locations/london/_index.tsx rename to src/pages/careers/locations/london/index.tsx index 37f1eb0134b..cbf13b21f82 100644 --- a/src/pages/careers/locations/london/_index.tsx +++ b/src/pages/careers/locations/london/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import { london } from '../../_model/_locations/_locations' -import { LocationLayout } from '../_location-layout' +import { NewLocationLayout } from '../_location-layout-new-offices' import { SEO } from 'components/containers' import Layout from 'components/layout/layout' import { localize, WithIntl } from 'components/localization' @@ -43,7 +43,7 @@ const London = () => { 'Find your role with us by browsing Deriv job opportunities in London, UK.', )} /> - + ) } diff --git a/src/pages/careers/locations/paris/_index.tsx b/src/pages/careers/locations/paris/index.tsx similarity index 91% rename from src/pages/careers/locations/paris/_index.tsx rename to src/pages/careers/locations/paris/index.tsx index 9b56311ae63..31be11ca33d 100644 --- a/src/pages/careers/locations/paris/_index.tsx +++ b/src/pages/careers/locations/paris/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { graphql, useStaticQuery } from 'gatsby' import { paris } from '../../_model/_locations/_locations' -import { LocationLayout } from '../_location-layout' +import { NewLocationLayout } from '../_location-layout-new-offices' import { SEO } from 'components/containers' import Layout from 'components/layout/layout' import { localize, WithIntl } from 'components/localization' @@ -43,7 +43,7 @@ const Paris = () => { 'Find your role with us by browsing Deriv job opportunities in Paris, France.', )} /> - + ) } diff --git a/src/pages/who-we-are/_OurOffices.tsx b/src/pages/who-we-are/_OurOffices.tsx index 6ee7976a50c..69e9f38bce8 100644 --- a/src/pages/who-we-are/_OurOffices.tsx +++ b/src/pages/who-we-are/_OurOffices.tsx @@ -222,9 +222,18 @@ const OurOffices = () => { title={localize('Labuan')} link="/careers/locations/labuan" /> - {/* Uncomment after new offices will be shown and add links! */} - {/* - */} + + { title={localize('Labuan')} link="/careers/locations/labuan" /> - {/* Uncomment after new offices will be shown and add links! */} - {/* - */} + +