binary-com · habib-deriv · Dec 13, 2021 · Dec 10, 2021 · Dec 10, 2021 · Dec 13, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/images/svg/about-us/hands.svg b/src/images/svg/about-us/hands.svg
diff --git a/src/images/svg/about-us/people.svg b/src/images/svg/about-us/people.svg
diff --git a/src/images/svg/about-us/shield.svg b/src/images/svg/about-us/shield.svg
diff --git a/src/images/svg/about-us/star.svg b/src/images/svg/about-us/star.svg
diff --git a/src/pages/about-us/_OurValues.js b/src/pages/about-us/_OurValues.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import styled from 'styled-components'
+import our_values_data from './_our_values_data'
+import { localize } from 'components/localization'
+import { SectionContainer , Box } from 'components/containers'
+import { Header, Text } from 'components/elements'
+import device from 'themes/device'
+
+const OurValuesSection = styled(SectionContainer)`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: 80px 16px 56px;
+    background-color: var(--color-grey-30);
+
+    h2 {
+        width: 338px;
+        margin: 0 70px 0 0;
+        padding: 0;
+        @media ${device.laptop} {
+            font-size: 48px;
+        }
+    }
+
+    @media (max-width: 1255px) {
+        align-items: center;
+        flex-direction: column;
+
+        h2 {
+            margin: 0 0 40px 0;
+            width: unset;
+            text-align: center;
+            max-width: 602px;
+        }
+    }
+
+    @media ${device.tablet} {
+        padding: 40px 16px 16px;
+    }
+`
+
+const StyledBox = styled(Box)`
+    width: 820px;
+    display: flex;
+    flex-wrap: wrap;
+    @media (max-width: 930px) {
+        flex-direction: column;
+        align-items: center;
+        width: unset;
+    }
+`
+
+const Card = styled(Box)`
+    max-width: 384px;
+    height: 272px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    padding: 32px 44px 32px 32px;
+    background-color: var(--color-white);
+    margin: 0 24px 24px 0;
+    margin-top: ${(props) => (props.index === 1 ? '80px' : props.index === 2 ? '-80px' : 0)};
+
+    ${Header} {
+        padding: 24px 0 8px;
+    }
+    @media (max-width: 930px) {
+        margin: 0 0 19px;
+        height: unset;
+    }
+
+    border-radius: 8px;
+`
+
+const OurValues = () => {
+    return (
+        <OurValuesSection>
+            <Header as="h2" size="48px" align="left" type="page-title">
+                {localize('Our values are the fabric of our culture')}
+            </Header>
+            <StyledBox>
+                {our_values_data.map((card, index) => (
+                    <Card key={card.title} index={index}>
+                        <img src={card.icon} alt="" />
+                        <Header as="h4" size="32px" align="left">
+                            {card.title}
+                        </Header>
+                        <Text size="16px">{card.text} </Text>
+                    </Card>
+                ))}
+            </StyledBox>
+        </OurValuesSection>
+    )
+}
+
+export default OurValues
diff --git a/src/pages/about-us/_our_values_data.js b/src/pages/about-us/_our_values_data.js
@@ -0,0 +1,36 @@
+import { localize } from 'components/localization'
+import Shield from 'images/svg/about-us/shield.svg'
+import Star from 'images/svg/about-us/star.svg'
+import People from 'images/svg/about-us/people.svg'
+import Hands from 'images/svg/about-us/hands.svg'
+
+export default [
+    {
+        title: localize('Integrity'),
+        text: localize(
+            'We serve our customers with fairness and transparency. We settle all contracts by the book and speak plainly and truthfully.',
+        ),
+        icon: Shield,
+    },
+    {
+        title: localize('Customer focus'),
+        text: localize(
+            'We put the customer first and strive to build products that deliver the best customer experience.',
+        ),
+        icon: People,
+    },
+    {
+        title: localize('Competence'),
+        text: localize(
+            'We value smart colleagues with an aptitude to learn, use good judgement, grow and succeed.',
+        ),
+        icon: Star,
+    },
+    {
+        title: localize('Teamwork'),
+        text: localize(
+            'We value team players that collaborate freely across departments with humility and ambition.',
+        ),
+        icon: Hands,
+    },
+]
diff --git a/src/pages/about-us/index.js b/src/pages/about-us/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import OurValues from './_OurValues'
 import { localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
 import { SEO, SectionContainer } from 'components/containers'
@@ -27,7 +28,6 @@ const FirstSectionContainer = styled(SectionContainer)`
 const StyledFirstSectionText = styled(Text)`
     max-width: 792px;
     padding: 0 0 24px 0;
-    background-color: white;
     line-height: 36px;
     font-weight: 400;
     @media ${device.tablet} {
@@ -45,6 +45,16 @@ const StartSeparator = styled.div`
     }
 `
 
+const EndSeparator = styled.div`
+    width: 0;
+    height: 0;
+    border-left: 100vw solid var(--color-grey-30);
+    border-bottom: 120px solid transparent;
+    @media ${device.tablet} {
+        border-bottom: 40px solid transparent;
+    }
+`
+
 const first_section_texts = [
     localize(
         'Deriv is one of the world’s largest online brokers. We offer CFDs and other derivatives on forex, indices, cryptocurrencies, commodities and synthetics to millions of registered users across the globe.',
@@ -77,7 +87,9 @@ const AboutUs = () => {
                     {localize('Make trading accessible to anyone, anywhere')}
                 </Header>
             </FirstSectionContainer>
-            <StartSeparator></StartSeparator>
+            <StartSeparator />
+            <OurValues />
+            <EndSeparator />
         </Layout>
     )
 }