binary-com · habib-deriv · Jan 11, 2022 · Jan 6, 2022 · Jan 6, 2022 · Jan 6, 2022
diff --git a/src/images/common/careers/guernsey_grid_3.jpg b/src/images/common/careers/guernsey_grid_3.jpg
diff --git a/src/images/common/careers/living_in_guernsey.jpg b/src/images/common/careers/living_in_guernsey.jpg
diff --git a/src/images/common/careers/living_in_paris.jpg b/src/images/common/careers/living_in_paris.jpg
diff --git a/src/images/common/careers/london_grid_3.jpg b/src/images/common/careers/london_grid_3.jpg
diff --git a/src/images/common/careers/paris_grid_3.jpg b/src/images/common/careers/paris_grid_3.jpg
diff --git a/src/images/common/careers/paris_grid_4.jpg b/src/images/common/careers/paris_grid_4.jpg
diff --git 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
@@ -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
@@ -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 (
+        <StyledBackground data={img_data} alt={display_name}>
+            <StyledContainer>
+                <StyledHeader as="h1">{display_name}</StyledHeader>
+                <StyledLinkButton
+                    has_no_end_slash
+                    secondary="true"
+                    to={zoho_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    external
+                >
+                    View open positions in {display_name}
+                </StyledLinkButton>
+            </StyledContainer>
+        </StyledBackground>
+    )
+}
+
+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 (
+        <>
+            <Hero display_name={display_name} img_data={images[location.name]} />
+            <FirstSection>
+                <SecondStyledHeader
+                    type="unset"
+                    align="center"
+                    as="h2"
+                    size="var(--text-size-header-5)"
+                >
+                    Deriv in {display_name}
+                </SecondStyledHeader>
+                <Flex tablet_direction="column">
+                    <Text>{location.first_p}</Text>
+                    <StyledImageWrapper>
+                        <QueryImage
+                            data={images[location.first_img]}
+                            alt={location.first_img_alt}
+                            width="100%"
+                            height="100%"
+                        />
+                    </StyledImageWrapper>
+                </Flex>
+            </FirstSection>
+            <WorkSection>
+                <WorkingCard>
+                    <WorkingFlex jc="cover">
+                        <WorkingQueryImage
+                            data={images[location.grid_images[2]]}
+                            alt={location.display_name + 'map'}
+                            width="100%"
+                            height="100%"
+                        />
+                        <WorkingInformation p="3.2rem 6rem" direction="column">
+                            <StyledDiv>
+                                <Header as="h3" type="subtitle-1">
+                                    {`Working at Deriv ${map_office_name}`}
+                                </Header>
+                                <CardText>{location.map_text}</CardText>
+                            </StyledDiv>
+                        </WorkingInformation>
+                    </WorkingFlex>
+                </WorkingCard>
+            </WorkSection>
+        </>
+    )
+}