- {carousel_images.map((carouselItem, index) => (
-
+ {sliders_array?.map((carousel_item) => (
+
-
diff --git a/src/pages/who-we-are/components/_hero.tsx b/src/pages/who-we-are/components/_hero.tsx
index ff82e6d41b8..babc05a7a36 100644
--- a/src/pages/who-we-are/components/_hero.tsx
+++ b/src/pages/who-we-are/components/_hero.tsx
@@ -1,35 +1,19 @@
import React from 'react'
import styled from 'styled-components'
-import { graphql, useStaticQuery } from 'gatsby'
-import { Flex, Desktop, Mobile } from 'components/containers'
-import { QueryImage } from 'components/elements'
+import { THero } from '../_types'
+import useBreakpoints from 'components/hooks/use-breakpoints'
+import { Localize } from 'components/localization'
+import { Desktop, Flex, Mobile } from 'components/containers'
import device from 'themes/device'
-import { Localize, localize } from 'components/localization'
-import desktop_bg from 'images/common/about/about_us_bg_desktop.png'
-import mobile_bg from 'images/common/about/about_us_bg_mobile.png'
-
-const query = graphql`
- query {
- about_us_logo: file(relativePath: { eq: "about/about_us_logo.png" }) {
- ...fadeIn
- }
- }
-`
type ParentWrapperProps = {
- bg_image_desktop: string
- bg_image_mobile: string
+ bg_image: string
}
-
const ParentWrapper = styled(Flex)`
width: 100%;
- background-image: url(${(props) => props.bg_image_desktop});
+ background-image: url(${({ bg_image }) => bg_image});
background-position: center;
background-size: cover;
-
- @media ${device.tabletL} {
- background-image: url(${(props) => props.bg_image_mobile});
- }
`
const ContentWrapper = styled(Flex)`
height: auto;
@@ -39,7 +23,6 @@ const ContentWrapper = styled(Flex)`
margin: 180px 0 145px;
}
`
-
const MobileHeader = styled.h1`
color: var(--color-white);
text-align: center;
@@ -58,7 +41,6 @@ const MobileHeader = styled.h1`
line-height: 1.25;
}
`
-
const DesktopHeader = styled.h1`
color: white;
font-weight: bold;
@@ -73,48 +55,57 @@ const DesktopHeader = styled.h1`
font-size: 140px;
}
`
-
const StyledFlex = styled(Flex)`
min-height: 400px;
position: relative;
`
-
-const StyledQueryImage = styled(QueryImage)`
+const StyledImage = styled.img`
max-width: 591px;
z-index: 2;
position: absolute;
`
-const StyledMobileQueryImage = styled(QueryImage)`
+const StyledMobileImage = styled.img`
max-width: 445px;
+
+ @media (max-width: 480px) {
+ max-width: 328px;
+ }
+ @media (max-width: 360px) {
+ max-width: 300px;
+ }
`
-const Hero = () => {
- const data = useStaticQuery(query)
- const title =
+
-
- {title}
+
+
- {title}
+
+
diff --git a/src/pages/who-we-are/components/map-pin.tsx b/src/pages/who-we-are/components/_map-pin.tsx
similarity index 79%
rename from src/pages/who-we-are/components/map-pin.tsx
rename to src/pages/who-we-are/components/_map-pin.tsx
index b52f836be4a..018679de976 100644
--- a/src/pages/who-we-are/components/map-pin.tsx
+++ b/src/pages/who-we-are/components/_map-pin.tsx
@@ -1,6 +1,5 @@
import React, { useState } from 'react'
import styled from 'styled-components'
-import { MapPinType } from '../_data'
import { Localize, LocalizedLink } from 'components/localization'
import { Header } from 'components/elements'
import { ReactComponent as Pin } from 'images/svg/who-we-are/pin.svg'
@@ -14,8 +13,8 @@ type PinWrapperProps = {
const PinWrapper = styled.div`
position: absolute;
- top: ${(props) => props.top};
- left: ${(props) => props.left};
+ top: ${({ top }) => top};
+ left: ${({ left }) => left};
-webkit-tap-highlight-color: transparent;
/* stylelint-disable */
-webkit-appearance: none;
@@ -56,7 +55,15 @@ const PinContent = styled(LocalizedLink)<{ anchor?: boolean }>`
}
`
-const MapPin = ({ top, left, title, link }: MapPinType) => {
+// country_city and link_url should be optional due we can't pass left and top properties to strapi
+export type MapPinType = {
+ left: string
+ top: string
+ country_city?: string
+ link_url?: string
+}
+
+const MapPin = ({ top, left, country_city, link_url }: MapPinType) => {
const [is_pin_show, setPinShow] = useState(false)
const onMouseEnter = () => setPinShow(true)
@@ -68,13 +75,13 @@ const MapPin = ({ top, left, title, link }: MapPinType) => {
onMouseLeave={onMouseLeave}
top={top}
left={left}
- to={link}
+ to={link_url}
>
+
-
)}
@@ -82,4 +89,4 @@ const MapPin = ({ top, left, title, link }: MapPinType) => {
)
}
-export default MapPin
+export default MapPin
\ No newline at end of file
diff --git a/src/pages/who-we-are/components/modal.tsx b/src/pages/who-we-are/components/_modal.tsx
similarity index 60%
rename from src/pages/who-we-are/components/modal.tsx
rename to src/pages/who-we-are/components/_modal.tsx
index 0197ed238dc..44c9e5f1958 100644
--- a/src/pages/who-we-are/components/modal.tsx
+++ b/src/pages/who-we-are/components/_modal.tsx
@@ -1,17 +1,16 @@
import React from 'react'
import styled from 'styled-components'
-import { ModalFlex } from './leaders'
+import { Flex } from 'components/containers'
import { Localize, LocalizedLink } from 'components/localization'
import { Header } from 'components/elements'
import Linkedin from 'images/svg/who-we-are/linkedin.svg'
-import { TString } from 'types/generics'
+import device from 'themes/device'
type ModalPropsType = {
name: string
- position: TString
+ role: string
link?: string
}
-
type StyledLogoType = {
link: string
}
@@ -22,18 +21,39 @@ const StyledLogo = styled.img`
filter: grayscale(100%);
&:hover {
- filter: ${(props) => (props.link ? 'unset' : 'grayscale(100%)')};
+ filter: ${({ link }) => (link ? 'unset' : 'grayscale(100%)')};
+ }
+`
+export const ModalFlex = styled(Flex)`
+ position: absolute;
+ top: 130px;
+ background-color: white;
+ padding: 8px 16px 6px;
+ z-index: 1;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.35) 0 4px 15px;
+ white-space: pre;
+ width: fit-content;
+
+ @media ${device.tablet} {
+ top: 124px;
+ }
+ @media ${device.tabletS} {
+ top: 108px;
+ }
+ @media ${device.mobileL} {
+ top: 93px;
}
`
-const Modal = ({ name, position, link }: ModalPropsType) => {
+const Modal = ({ name, role, link }: ModalPropsType) => {
return (
{name}
- {position &&
{link && (
@@ -44,4 +64,4 @@ const Modal = ({ name, position, link }: ModalPropsType) => {
)
}
-export default Modal
+export default Modal
\ No newline at end of file
diff --git a/src/pages/who-we-are/components/leaders.tsx b/src/pages/who-we-are/components/leaders.tsx
deleted file mode 100644
index e8e4d046c92..00000000000
--- a/src/pages/who-we-are/components/leaders.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { MouseEventHandler, useState } from 'react'
-import styled from 'styled-components'
-import { graphql, useStaticQuery } from 'gatsby'
-import type { ImageDataLike } from 'gatsby-plugin-image'
-import Modal from './modal'
-import { Flex } from 'components/containers'
-import { QueryImage, ImageWrapper } from 'components/elements'
-import device from 'themes/device'
-import { useBrowserResize } from 'components/hooks/use-browser-resize'
-import { TString } from 'types/generics'
-import { localize } from 'components/localization'
-
-type MouseEvent = MouseEventHandler &
- ((event: MouseEventHandler) => void)
-
-type LeaderType = {
- name: string
- position: TString
- link: string
- image: ImageDataLike
-}
-
-const query = graphql`
- query {
- derek: file(relativePath: { eq: "who-we-are/derek.jpg" }) {
- ...fadeIn
- }
- edwin: file(relativePath: { eq: "who-we-are/edwin.jpg" }) {
- ...fadeIn
- }
- gary: file(relativePath: { eq: "who-we-are/gary.jpg" }) {
- ...fadeIn
- }
- jennice: file(relativePath: { eq: "who-we-are/jennice.jpg" }) {
- ...fadeIn
- }
- jeya: file(relativePath: { eq: "who-we-are/jeya.jpg" }) {
- ...fadeIn
- }
- jy: file(relativePath: { eq: "who-we-are/jy.jpg" }) {
- ...fadeIn
- }
- joanna: file(relativePath: { eq: "who-we-are/joanna.jpg" }) {
- ...fadeIn
- }
- kaveh: file(relativePath: { eq: "who-we-are/kaveh.jpg" }) {
- ...fadeIn
- }
- louise: file(relativePath: { eq: "who-we-are/louise.jpg" }) {
- ...fadeIn
- }
- rakshit: file(relativePath: { eq: "who-we-are/rakshit.jpg" }) {
- ...fadeIn
- }
- raunak: file(relativePath: { eq: "who-we-are/raunak.jpg" }) {
- ...fadeIn
- }
- seema: file(relativePath: { eq: "who-we-are/seema.jpg" }) {
- ...fadeIn
- }
- shyamala: file(relativePath: { eq: "who-we-are/shyamala.jpg" }) {
- ...fadeIn
- }
- tom: file(relativePath: { eq: "who-we-are/tom.jpg" }) {
- ...fadeIn
- }
- waqas: file(relativePath: { eq: "who-we-are/waqas.jpg" }) {
- ...fadeIn
- }
- }
-`
-
-export const ModalFlex = styled(Flex)`
- position: absolute;
- top: 130px;
- background-color: white;
- padding: 8px 16px 6px;
- z-index: 1;
- border-radius: 5px;
- box-shadow: rgba(0, 0, 0, 0.35) 0 4px 15px;
- white-space: pre;
- width: fit-content;
- @media ${device.tablet} {
- top: 124px;
- }
- @media ${device.tabletS} {
- top: 108px;
- }
- @media ${device.mobileL} {
- top: 93px;
- }
-`
-
-const StyledImageWrapper = styled(ImageWrapper)`
- display: flex;
- flex-direction: column;
- align-items: center;
- position: relative;
- padding-bottom: 20px;
- @media ${device.tabletS} {
- width: 104px;
- height: 114px;
- }
-
- @media ${device.tabletL} {
- &:nth-child(3n-2) {
- ${ModalFlex} {
- left: 0;
- }
- }
- &:nth-child(3n) {
- ${ModalFlex} {
- align-self: right;
- right: 0;
- }
- }
- }
- @media ${device.tabletS} {
- padding-bottom: 10px;
- }
- @media ${device.mobileL} {
- width: 88px;
- height: 98px;
- }
-`
-
-const LeaderCard = ({ image, name, position, link }: LeaderType) => {
- const [is_popup_shown, setIsPopupShown] = useState(false)
- const [is_mobile] = useBrowserResize()
-
- const showModal: MouseEvent = () => setIsPopupShown(true)
- const dontShowModal: MouseEvent = () => setIsPopupShown(false)
-
- return (
-
-
- )
-}
-
-const Leaders = () => {
- const leaders_data = useStaticQuery(query)
- const leaders: LeaderType[] = [
- {
- name: 'Jean-Yves Sireau',
- position: '_t_Chief Executive Officer_t_',
- link: 'https://www.linkedin.com/in/jeanyvessireau/',
- image: leaders_data.jy,
- },
- {
- name: 'Rakshit Choudhary ',
- position: '_t_Chief Operating Officer_t_',
- link: 'https://www.linkedin.com/in/rakshit-choudhary-9a67b61b0/',
- image: leaders_data.rakshit,
- },
- {
- name: 'Tom Molesworth',
- position: '_t_Chief Information Officer_t_',
- link: '',
- image: leaders_data.tom,
- },
- {
- name: 'Joanna Frendo',
- position: '_t_Chief Risk & Compliance Officer_t_',
- link: 'https://www.linkedin.com/in/joanna-frendo-4449975/',
- image: leaders_data.joanna,
- },
- {
- name: 'Louise Wolf',
- position: '_t_Chief Financial Officer_t_',
- link: 'https://www.linkedin.com/in/louise-wolf-7b98b460/',
- image: leaders_data.louise,
- },
- {
- name: 'Shyamala Siva',
- position: '_t_Chief Administrative Officer_t_',
- link: 'https://www.linkedin.com/in/shyamala-siva-90043b208/',
- image: leaders_data.shyamala,
- },
- {
- name: 'Seema Hallon',
- position: '_t_Head of People Management_t_',
- link: 'https://www.linkedin.com/in/seema-hallon-6919073/',
- image: leaders_data.seema,
- },
- {
- name: 'Derek Swift',
- position: '_t_Head of Marketing & Global Partnerships_t_',
- link: 'https://www.linkedin.com/in/derek-swift-5787208/',
- image: leaders_data.derek,
- },
- {
- name: 'Waqas Awan',
- position: '_t_Vice President of Product_t_',
- link: 'https://www.linkedin.com/in/waqasawan/',
- image: leaders_data.waqas,
- },
- {
- name: 'Raunak Kathuria',
- position: '_t_Vice President of Engineering_t_',
- link: 'https://www.linkedin.com/in/raunakkathuria/',
- image: leaders_data.raunak,
- },
- {
- name: 'Edwin Raspe',
- position: '_t_Vice President of IT Operations_t_',
- link: 'https://my.linkedin.com/in/edwin-raspe-210a722/',
- image: leaders_data.edwin,
- },
- {
- name: 'Kaveh Mousavi Zamani',
- position: '_t_Vice President of Engineering_t_',
- link: 'https://de.linkedin.com/in/kavehmz/',
- image: leaders_data.kaveh,
- },
- {
- name: 'Jeyavarthini Vairakanan',
- position: '_t_Vice President of Customer Support_t_',
- link: 'https://www.linkedin.com/in/jeyavarthini-vairakanan-812b7a121/',
- image: leaders_data.jeya,
- },
- {
- name: 'Gary Ross Vytialingam',
- position: '_t_Chief Audit Executive_t_',
- link: 'https://www.linkedin.com/in/gary-ross-vytialingam-37a729106/',
- image: leaders_data.gary,
- },
- {
- name: 'Jennice Lourdsamy',
- position: '_t_Head of Accounts_t_',
- link: 'https://www.linkedin.com/in/jennice-lourdsamy-352b897/',
- image: leaders_data.jennice,
- },
- ]
-
- return (
- <>
- {leaders.map((leader: LeaderType) => (
-
-
)
}
-export default WithIntl()(AboutUs)
+export const query = graphql`
+ query {
+ strapiWhoWeArePage {
+ hero {
+ header
+ sub_header
+ first_paragraph
+ second_paragraph
+ third_paragraph
+ hero_image {
+ localFile {
+ publicURL
+ }
+ }
+ bg_desktop {
+ localFile {
+ publicURL
+ }
+ }
+ bg_mobile {
+ localFile {
+ publicURL
+ }
+ }
+ }
+ our_values {
+ header
+ values {
+ header
+ sub_header
+ image {
+ localFile {
+ publicURL
+ }
+ }
+ }
+ }
+ our_principles {
+ header
+ principles {
+ header
+ sub_header
+ }
+ button {
+ link_name
+ link_url
+ }
+ }
+ our_leadership {
+ header
+ leaders {
+ name
+ role
+ link_url
+ photo {
+ url
+ localFile {
+ publicURL
+ }
+ }
+ }
+ }
+ deriv_in_numbers {
+ header
+ sub_header
+ numbers {
+ description
+ number
+ }
+ }
+ our_locations {
+ header
+ numbers {
+ description
+ number
+ }
+ locations {
+ country_city
+ link_url
+ }
+ earth {
+ localFile {
+ publicURL
+ }
+ }
+ earth_mobile {
+ localFile {
+ publicURL
+ }
+ }
+ }
+ banner {
+ header
+ sub_header
+ link_name
+ link_url
+ bg_desktop {
+ localFile {
+ publicURL
+ }
+ }
+ bg_desktop_rtl {
+ localFile {
+ url
+ publicURL
+ }
+ }
+ bg_mobile {
+ localFile {
+ url
+ publicURL
+ }
+ }
+ bg_mobile_rtl {
+ localFile {
+ url
+ publicURL
+ }
+ }
+ }
+ slider_medias {
+ slider_1 {
+ localFile {
+ publicURL
+ }
+ }
+ slider_2 {
+ localFile {
+ publicURL
+ }
+ }
+ slider_3 {
+ localFile {
+ publicURL
+ }
+ }
+ slider_4 {
+ localFile {
+ publicURL
+ }
+ }
+ slider_5 {
+ localFile {
+ publicURL
+ }
+ }
+ slider_6 {
+ localFile {
+ publicURL
+ }
+ }
+ }
+ }
+ }
+`
-export const Head = ({ pageContext }: TGatsbyHead) => (
-