diff --git a/src/components/elements/query-image.tsx b/src/components/elements/query-image.tsx index 694c6010e55..ed7af0604bc 100644 --- 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 + 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 new file mode 100644 index 00000000000..517909f6c25 Binary files /dev/null and b/src/images/common/about-us/derek.jpg differ diff --git a/src/images/common/about-us/gary.jpg b/src/images/common/about-us/gary.jpg new file mode 100644 index 00000000000..a62457c3af4 Binary files /dev/null and b/src/images/common/about-us/gary.jpg differ diff --git a/src/images/common/about-us/jennice.jpg b/src/images/common/about-us/jennice.jpg new file mode 100644 index 00000000000..3d665948c84 Binary files /dev/null and b/src/images/common/about-us/jennice.jpg differ diff --git a/src/images/common/about-us/jeya.jpg b/src/images/common/about-us/jeya.jpg new file mode 100644 index 00000000000..d2c7c0d8da5 Binary files /dev/null and b/src/images/common/about-us/jeya.jpg differ diff --git a/src/images/common/about-us/joanna.jpg b/src/images/common/about-us/joanna.jpg new file mode 100644 index 00000000000..4ab6e77eb99 Binary files /dev/null and b/src/images/common/about-us/joanna.jpg differ diff --git a/src/images/common/about-us/jy.jpg b/src/images/common/about-us/jy.jpg new file mode 100644 index 00000000000..3d31639255b Binary files /dev/null and b/src/images/common/about-us/jy.jpg differ diff --git a/src/images/common/about-us/louise.jpg b/src/images/common/about-us/louise.jpg new file mode 100644 index 00000000000..23569010faa Binary files /dev/null and b/src/images/common/about-us/louise.jpg differ diff --git a/src/images/common/about-us/person.jpg b/src/images/common/about-us/person.jpg new file mode 100644 index 00000000000..c17fd125984 Binary files /dev/null and b/src/images/common/about-us/person.jpg differ diff --git a/src/images/common/about-us/rakshit.jpg b/src/images/common/about-us/rakshit.jpg new file mode 100644 index 00000000000..3b0f0c43d3f Binary files /dev/null and b/src/images/common/about-us/rakshit.jpg differ diff --git a/src/images/common/about-us/raunak.jpg b/src/images/common/about-us/raunak.jpg new file mode 100644 index 00000000000..2967360bc08 Binary files /dev/null and b/src/images/common/about-us/raunak.jpg differ diff --git a/src/images/common/about-us/seema.jpg b/src/images/common/about-us/seema.jpg new file mode 100644 index 00000000000..5a87d45bafd Binary files /dev/null and b/src/images/common/about-us/seema.jpg differ diff --git a/src/images/common/about-us/shyamala.jpg b/src/images/common/about-us/shyamala.jpg new file mode 100644 index 00000000000..42529ffdf97 Binary files /dev/null and b/src/images/common/about-us/shyamala.jpg differ diff --git a/src/images/common/about-us/tom.jpg b/src/images/common/about-us/tom.jpg new file mode 100644 index 00000000000..dce11442601 Binary files /dev/null and b/src/images/common/about-us/tom.jpg differ diff --git a/src/images/common/about-us/waqas.jpg b/src/images/common/about-us/waqas.jpg new file mode 100644 index 00000000000..cd0af7c8400 Binary files /dev/null and b/src/images/common/about-us/waqas.jpg differ diff --git a/src/pages/about-us/_MakeTrading.tsx b/src/pages/about-us/_MakeTrading.tsx index b82317da42e..8e21b7bc5b4 100644 --- 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 new file mode 100644 index 00000000000..e1620b3f83c --- /dev/null +++ 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 ( + + + {localize('Our leadership')} + + + {leaders.map((im: ImageDataLike, index: number) => ( + + + + ))} + + + ) +} + +export default OurLeadership diff --git a/src/pages/about-us/_OurPrinciples.tsx b/src/pages/about-us/_OurPrinciples.tsx index 5397e51eee9..ab227d18e1e 100644 --- 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 index e003bbfa7fa..80755e2f9d0 100644 --- 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 index 5feec52d319..0629d5b30ea 100644 --- 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 => { + ) }