binary-com · habib-deriv · Dec 21, 2021 · Dec 14, 2021 · Dec 15, 2021 · Dec 15, 2021
diff --git a/src/components/elements/query-image.tsx b/src/components/elements/query-image.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { ImageDataLike, GatsbyImage, getImage } from 'gatsby-plugin-image'
 
 type QueryImageProps = {
     alt: string
     className?: string
-    data: Record<string, unknown>
+    data: ImageDataLike
     height?: string
     width?: string
     loading?: 'eager' | 'lazy'
@@ -32,7 +32,7 @@ const QueryImage = ({
     loading,
     width,
     ...props
-}: QueryImageProps): React.ReactNode => {
+}: QueryImageProps) => {
     const image = getImage(data)
     if (data) {
         return (

diff --git a/src/images/common/about-us/derek.jpg b/src/images/common/about-us/derek.jpg
diff --git a/src/images/common/about-us/gary.jpg b/src/images/common/about-us/gary.jpg
diff --git a/src/images/common/about-us/jennice.jpg b/src/images/common/about-us/jennice.jpg
diff --git a/src/images/common/about-us/jeya.jpg b/src/images/common/about-us/jeya.jpg
diff --git a/src/images/common/about-us/joanna.jpg b/src/images/common/about-us/joanna.jpg
diff --git a/src/images/common/about-us/jy.jpg b/src/images/common/about-us/jy.jpg
diff --git a/src/images/common/about-us/louise.jpg b/src/images/common/about-us/louise.jpg
diff --git a/src/images/common/about-us/person.jpg b/src/images/common/about-us/person.jpg
diff --git a/src/images/common/about-us/rakshit.jpg b/src/images/common/about-us/rakshit.jpg
diff --git a/src/images/common/about-us/raunak.jpg b/src/images/common/about-us/raunak.jpg
diff --git a/src/images/common/about-us/seema.jpg b/src/images/common/about-us/seema.jpg
diff --git a/src/images/common/about-us/shyamala.jpg b/src/images/common/about-us/shyamala.jpg
diff --git a/src/images/common/about-us/tom.jpg b/src/images/common/about-us/tom.jpg
diff --git a/src/images/common/about-us/waqas.jpg b/src/images/common/about-us/waqas.jpg
diff --git a/src/pages/about-us/_MakeTrading.tsx b/src/pages/about-us/_MakeTrading.tsx
@@ -10,7 +10,7 @@ const FirstSectionContainer = styled(SectionContainer)`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 120px 16px 80px;
+    padding: 120px 16px 24px;
     @media ${device.tablet} {
         padding: 40px 16px;
     }
@@ -25,9 +25,12 @@ const StyledHeader = styled(Header)`
 
 const StyledFirstSectionText = styled(Header)`
     max-width: 792px;
-    padding: 0 0 24px 0;
+    padding: 0 0 40px 0;
     line-height: 36px;
     font-weight: 400;
+    @media ${device.laptop} {
+        padding: 0 0 24px 0;
+    }
 `
 
 const MakeTrading = () => {

diff --git a/src/pages/about-us/_OurLeadership.tsx b/src/pages/about-us/_OurLeadership.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import styled from 'styled-components'
+import { graphql, useStaticQuery } from 'gatsby'
+import { localize } from 'components/localization'
+import { SectionContainer, CssGrid } from 'components/containers'
+import { Header, QueryImage, ImageWrapper } from 'components/elements'
+import device from 'themes/device'
+import { ImageDataLike } from 'gatsby-plugin-image'
+
+const query = graphql`
+    query {
+        jy: file(relativePath: { eq: "about-us/jy.jpg" }) {
+            ...fadeIn
+        }
+        derek: file(relativePath: { eq: "about-us/derek.jpg" }) {
+            ...fadeIn
+        }
+        gary: file(relativePath: { eq: "about-us/gary.jpg" }) {
+            ...fadeIn
+        }
+        jennice: file(relativePath: { eq: "about-us/jennice.jpg" }) {
+            ...fadeIn
+        }
+        jeya: file(relativePath: { eq: "about-us/jeya.jpg" }) {
+            ...fadeIn
+        }
+        joanna: file(relativePath: { eq: "about-us/joanna.jpg" }) {
+            ...fadeIn
+        }
+
+        louise: file(relativePath: { eq: "about-us/louise.jpg" }) {
+            ...fadeIn
+        }
+        person: file(relativePath: { eq: "about-us/person.jpg" }) {
+            ...fadeIn
+        }
+        rakshit: file(relativePath: { eq: "about-us/rakshit.jpg" }) {
+            ...fadeIn
+        }
+        raunak: file(relativePath: { eq: "about-us/raunak.jpg" }) {
+            ...fadeIn
+        }
+        seema: file(relativePath: { eq: "about-us/seema.jpg" }) {
+            ...fadeIn
+        }
+        shyamala: file(relativePath: { eq: "about-us/shyamala.jpg" }) {
+            ...fadeIn
+        }
+        tom: file(relativePath: { eq: "about-us/tom.jpg" }) {
+            ...fadeIn
+        }
+        waqas: file(relativePath: { eq: "about-us/waqas.jpg" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const StyledSectionContainer = styled(SectionContainer)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0: 
+    @media ${device.tablet} {
+        padding: 0 16px 40px;
+    }
+
+`
+
+const StyledCssGrid = styled(CssGrid)`
+    margin: 0 40px;
+    max-width: 996px;
+    @media (max-width: 1050px) {
+        max-width: 100%;
+    }
+    @media ${device.laptop} {
+        margin: 0;
+    }
+`
+
+const StyledHeader = styled(Header)`
+    @media ${device.laptop} {
+        font-size: 28px;
+    }
+`
+
+const StyledImageWrapper = styled(ImageWrapper)`
+    @media ${device.tablet} {
+        width: 104px;
+        height: 104px;
+    }
+    @media ${device.mobileL} {
+        width: 88px;
+        height: 88px;
+    }
+`
+const StyledQueryImage = styled(QueryImage)`
+    @media ${device.tablet} {
+        width: 104px;
+        height: 104px;
+    }
+    @media ${device.mobileL} {
+        width: 88px;
+        height: 88px;
+    }
+`
+
+const OurLeadership = () => {
+    const leaders_data = useStaticQuery(query)
+    const leaders = [
+        leaders_data.jy,
+        leaders_data.rakshit,
+        leaders_data.tom,
+        leaders_data.joanna,
+        leaders_data.louise,
+        leaders_data.shyamala,
+        leaders_data.derek,
+        leaders_data.seema,
+        leaders_data.waqas,
+        leaders_data.raunak,
+        leaders_data.person,
+        leaders_data.jeya,
+        leaders_data.gary,
+        leaders_data.jennice,
+    ]
+    return (
+        <StyledSectionContainer padding="0 16px 120px" background="var(--color-white)">
+            <StyledHeader as="h2" size="48px" align="center" type="page-title">
+                {localize('Our leadership')}
+            </StyledHeader>
+            <StyledCssGrid
+                columns="repeat(auto-fill, 120px)"
+                column_gap="99px"
+                row_gap="80px"
+                laptop_columns="repeat(auto-fill, 120px)"
+                tablet_columns="repeat(auto-fill, 120px)"
+                tablet_column_gap="70px"
+                tablet_row_gap="80px"
+                mobile_columns="repeat(auto-fill, 88px)"
+                mobile_column_gap="24px"
+                mobile_row_gap="24px"
+            >
+                {leaders.map((im: ImageDataLike, index: number) => (
+                    <StyledImageWrapper key={index} width="120px" height="120px">
+                        <StyledQueryImage
+                            width="100%"
+                            height="100%"
+                            data={im}
+                            alt="leader"
+                            loading="lazy"
+                        />
+                    </StyledImageWrapper>
+                ))}
+            </StyledCssGrid>
+        </StyledSectionContainer>
+    )
+}
+
+export default OurLeadership
diff --git a/src/pages/about-us/_OurPrinciples.tsx b/src/pages/about-us/_OurPrinciples.tsx
@@ -12,7 +12,7 @@ const StyledSection = styled(SectionContainer)`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 80px 16px 120px;
+    padding: 24px 16px 120px;
     background-color: var(--color-white);
 
     @media ${device.tablet} {

diff --git a/src/pages/about-us/_data.ts b/src/pages/about-us/_data.ts
@@ -6,7 +6,7 @@ import Hands from 'images/svg/about-us/hands.svg'
 
 export const first_section_texts: string[] = [
     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.',
+        '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.',
     ),
     localize(
         'From inception, our goal was to break free of the high commissions and clunky products offered by traditional brokers. And to deliver a first-class experience to digitally inclined traders, regardless of the size of their accounts.',

diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
@@ -7,6 +7,7 @@ import device from 'themes/device'
 import MakeTrading from './_MakeTrading'
 import OurValues from './_OurValues'
 import OurPrinciples from './_OurPrinciples'
+import OurLeadership from './_OurLeadership'
 
 const StartSeparator = styled.div`
     width: 0;
@@ -43,6 +44,7 @@ const AboutUs = (): React.ReactNode => {
             <OurValues />
             <EndSeparator />
             <OurPrinciples />
+            <OurLeadership />
         </Layout>
     )
 }