binary-com · mustofa-binary · Dec 21, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020
@@ -2,6 +2,7 @@ const address_cyberjaya = [
     'iTech Tower, Jalan Impact, Cyber 6,',
     '63000 Cyberjaya, Selangor, Malaysia',
 ]
+
 const address_dubai = ['Office 1902, Jumeirah Business', 'Center 1, JLT Cluster G']
 
 const address_asuncion = ['Edificio Australia, Oficina 1,', 'Herib Campos Cervera 886,', 'Asunción']
@@ -11,7 +12,9 @@ const address_labuan = [
     'Jalan Tun Mustapha, Labuan 87000,',
     'Sabah',
 ]
+
 const address_malta = ['Level 3, W Business Centre,', 'Triq Dun Karm Birkirkara,', 'BKR9033 Malta']
+
 const address_ipoh = ['E-5-6, Soho Ipoh 2,', 'Jalan Sultan Idris Shah,', 'Ipoh 30000, Perak']
 
 const address_melaka = ['67-1 & 69-1, Jalan KLJ 6, Taman Kota', 'Laksamana Jaya, Melaka 75200']
@@ -20,6 +23,8 @@ const address_cyprus = ['Level 5, 42 Agias Filaxeos', 'Limassol 3025']
 
 const address_rwanda = ['Level 2 East Wing, Kigali Heights, KG7', 'Avenue, Kigali']
 
+const address_belarus = ['Minsk, Belarus']
+
 export {
     address_cyberjaya,
     address_dubai,
@@ -30,4 +35,5 @@ export {
     address_melaka,
     address_cyprus,
     address_rwanda,
+    address_belarus,
 }
@@ -8,6 +8,7 @@ import {
     address_melaka,
     address_cyprus,
     address_rwanda,
+    address_belarus,
 } from './_contact-details'
 
 export const cyberjaya = {
@@ -182,6 +183,26 @@ export const rwanda = {
     has_iframe: false,
 }
 
+export const minsk = {
+    name: 'minsk',
+    link: '/careers/locations/minsk',
+    display_name: 'Minsk',
+    country: 'Belarus',
+    thumbnail: 'thumbnail_minsk',
+    header_p:
+        'Minsk, the capital of Belarus, is a modern European city located in the centre of the country by the Svislach river. The country has two official languages: Belarussian and Russian, but the younger population is fluent in English too. Today, Minsk is known for its rich historical Soviet architecture, theatres, museums, and art galleries.',
+    first_p:
+        'Minsk is one of the cleanest cities in Belarus with its gleaming streets and well-maintained public facilities. From cafés to film screenings, to underground music shows, there’s a lot going on in Minsk to keep you entertained. The nightlife in Minsk is vibrant with trendy bars and restaurants, with the downtown buildings illuminated by coloured lights that completely transform the city’s architecture.',
+    first_img: 'living_in_minsk',
+    grid_images: ['minsk_grid_1', 'minsk_grid_2', 'minsk_grid_3', 'minsk_grid_4'],
+    map: 'ChIJwc77Waml3BkRKuYdzjsIu7c',
+    map_text: `We’re located in Minsk, the largest city of Belarus. Minsk has an international airport and efficient public transportation that connects to other major cities in Belarus. The temperate continental climate with fascinating parks and gardens, delicious local cuisine, and intriguing cultures, make Minsk a great location to work.`,
+    address: address_belarus,
+    map_img: 'minsk_map',
+    google_map_link: 'https://goo.gl/maps/T3Xm8VEUp4XaXybZ6',
+    has_iframe: false,
+}
+
 export const locations = {
     cyberjaya: `${cyberjaya.display_name}, ${cyberjaya.country}`,
     malta: `${malta.display_name}`,
@@ -192,4 +213,5 @@ export const locations = {
     ipoh: `${ipoh.display_name}, ${ipoh.country}`,
     cyprus: `${cyprus.display_name}, ${cyprus.country}`,
     rwanda: `${rwanda.display_name}, ${rwanda.country}`,
+    belarus: `${minsk.display_name}, ${minsk.country}`,
 }
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import Container from '../_layout-components/_container'
+import CareerContainer from '../_layout-components/_container'
 import device from 'themes/device'
 import { SectionContainer, Flex } from 'components/containers'
 import { Text, LinkText, Header, BackgroundImage, QueryImage } from 'components/elements'
@@ -15,7 +15,17 @@ const Pin = styled.img`
     height: 24px;
     margin-right: 13px;
 `
-const StyledContainer = styled(Container)`
+
+const StyledBackground = styled(BackgroundImage)`
+    width: 100%;
+    height: 80rem;
+    object-fit: contain;
+    @media ${device.tabletL} {
+        height: 65.3rem;
+    }
+`
+
+const StyledContainer = styled(CareerContainer)`
     flex-direction: column;
     align-items: flex-start;
     height: 100%;
@@ -26,28 +36,21 @@ const StyledContainer = styled(Container)`
 `
 
 const StyledHeader = styled(Header)`
-    font-size: var(--text-size-xl);
-    margin-bottom: 2.4rem;
+    font-size: var(--text-size-xxl);
+    margin-bottom: 1.6rem;
     color: var(--color-white);
 `
 
 const Subheadline = styled(Text)`
-    font-size: var(--text-size-sm);
+    font-size: var(--text-size-m);
     color: var(--color-white);
-    max-width: 58.8rem;
-    margin-bottom: 8rem;
+    max-width: 69rem;
+    margin-bottom: 3.2rem;
 `
 
 const Hero = ({ display_name, img_data, description }) => {
     return (
-        <BackgroundImage
-            data={img_data}
-            style={{
-                height: '80rem',
-                width: '100%',
-            }}
-            alt={display_name}
-        >
+        <StyledBackground data={img_data} alt={display_name}>
             <StyledContainer>
                 <StyledHeader as="h1">{display_name}</StyledHeader>
                 <Subheadline>{description}</Subheadline>
@@ -59,10 +62,10 @@ const Hero = ({ display_name, img_data, description }) => {
                     rel="noopener noreferrer"
                     external
                 >
-                    {`View open positions in ${display_name}`}
+                    View open positions in {display_name}
                 </LinkButton>
             </StyledContainer>
-        </BackgroundImage>
+        </StyledBackground>
     )
 }
 
@@ -98,7 +101,7 @@ const Fourth = styled.div`
 
 const FirstSection = styled(SectionContainer)`
     ${Header} {
-        margin-bottom: 8rem;
+        margin-bottom: 4rem;
     }
     ${Text} {
         max-width: 41.5rem;
@@ -149,30 +152,25 @@ export const LocationLayout = ({ location, images }) => {
                 description={location.header_p}
                 img_data={images[location.name]}
             />
-            <Container direction="column">
-                <FirstSection padding="12rem 0">
-                    <Header align="center" as="h2" size={'var(--text-size-header-1)'}>
-                        {`Living in ${display_name}`}
+            <CareerContainer>
+                <FirstSection>
+                    <Header align="center" as="h2" size="var(--text-size-header-5)">
+                        Living in {display_name}
                     </Header>
                     <Flex tablet_direction="column">
                         <Text size="var(--text-size-sm)">{location.first_p}</Text>
                         <ImageWrapper>
                             <QueryImage
                                 data={images[location.first_img]}
-                                alt={`Living in ${display_name}`}
+                                alt={display_name}
                                 width="100%"
                             />
                         </ImageWrapper>
                     </Flex>
                 </FirstSection>
-            </Container>
-            <SectionContainer padding={location.has_iframe ? '0rem' : '0 0 12rem'}>
-                <Header
-                    align="center"
-                    as="h2"
-                    size={'var(--text-size-header-1)'}
-                    style={{ marginBottom: '6.4rem' }}
-                >
+            </CareerContainer>
+            <SectionContainer padding="0">
+                <Header align="center" as="h2" size="var(--text-size-header-5)" mb="4rem">
                     Our office
                 </Header>
                 <Flex jc="unset">
@@ -212,7 +210,7 @@ export const LocationLayout = ({ location, images }) => {
                     </Flex>
                 </Flex>
             </SectionContainer>
-            <SectionContainer padding="12rem 0">
+            <SectionContainer>
                 <LocationCard>
                     <Flex min_height="42.2rem" jc="unset" tablet_direction="column">
                         <ImageWrapper>
@@ -238,7 +236,7 @@ export const LocationLayout = ({ location, images }) => {
                         </ImageWrapper>
                         <Flex p="3.2rem 6rem" direction="column" max_width="44.4rem">
                             <div style={{ maxWidth: '32.4rem' }}>
-                                <Header as="h3" size={'24px'}>
+                                <Header as="h3" size="24px">
                                     Location
                                 </Header>
                                 <CardText>{location.map_text}</CardText>

@@ -13,6 +13,7 @@ import {
     melaka,
     cyprus,
     rwanda,
+    minsk,
 } from '../_model/_locations/_locations'
 import { SEO, SectionContainer, Container, Flex, CssGrid } from 'components/containers'
 import Layout from 'components/layout/layout'
@@ -24,6 +25,7 @@ import UAEFlagIcon from 'images/svg/flag_uae.svg'
 import MaltaFlagIcon from 'images/svg/flag_malta.svg'
 import CyprusFlagIcon from 'images/svg/flag_cyprus.svg'
 import RwandaFlagIcon from 'images/svg/flag_rwanda.svg'
+import BelarusFlagIcon from 'images/svg/flag_belarus.svg'
 import { ReactComponent as Chevron } from 'images/svg/carousel-chevron.svg'
 
 const ChevronRight = styled(Chevron)`
@@ -140,6 +142,9 @@ const query = graphql`
         thumbnail_rwanda: file(relativePath: { eq: "careers/thumbnail_rwanda.jpg" }) {
             ...fadeIn
         }
+        thumbnail_minsk: file(relativePath: { eq: "careers/thumbnail_minsk.jpg" }) {
+            ...fadeIn
+        }
     }
 `
 
@@ -232,6 +237,13 @@ const Locations = () => {
                             city_name={'Kigali'}
                             link={rwanda.link}
                         />
+                        <CountryCard
+                            Icon={BelarusFlagIcon}
+                            img_data={images[minsk.thumbnail]}
+                            country_name={minsk.country}
+                            city_name={'Minsk'}
+                            link={minsk.link}
+                        />
                     </CssGrid>
                 </SectionContainer>
             </Container>

@@ -0,0 +1,51 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import { minsk } from '../../_model/_locations/_locations'
+import { LocationLayout } from '../_location-layout'
+import { SEO } from 'components/containers'
+import Layout from 'components/layout/layout'
+import { localize, WithIntl } from 'components/localization'
+
+const query = graphql`
+    query {
+        minsk: file(relativePath: { eq: "careers/minsk.jpg" }) {
+            ...backGroundBlur
+        }
+        living_in_minsk: file(relativePath: { eq: "careers/living_in_minsk.jpg" }) {
+            ...fadeIn
+        }
+        minsk_grid_1: file(relativePath: { eq: "careers/minsk_grid_1.jpg" }) {
+            ...fadeIn
+        }
+        minsk_grid_2: file(relativePath: { eq: "careers/minsk_grid_2.jpg" }) {
+            ...fadeIn
+        }
+        minsk_grid_3: file(relativePath: { eq: "careers/minsk_grid_3.jpg" }) {
+            ...fadeIn
+        }
+        minsk_grid_4: file(relativePath: { eq: "careers/minsk_grid_4.jpg" }) {
+            ...fadeIn
+        }
+        minsk_map: file(relativePath: { eq: "maps/map-minsk-career.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const Minsk = () => {
+    const images = useStaticQuery(query)
+
+    return (
+        <Layout type="careers">
+            <SEO
+                title={localize('Minsk | Our office – Belarus | Deriv')}
+                description={localize(
+                    'Find your role with us by browsing Deriv job opportunities in Minsk, Belarus.',
+                )}
+            />
+            <LocationLayout location={minsk} images={images} />
+        </Layout>
+    )
+}
+
+export default WithIntl()(Minsk)