diff --git a/src/images/common/who-we-are/uf-awards.png b/src/images/common/who-we-are/uf-awards.png new file mode 100644 index 00000000000..b5145ed726e Binary files /dev/null and b/src/images/common/who-we-are/uf-awards.png differ diff --git a/src/pages/who-we-are/_EmployerAwards.tsx b/src/pages/who-we-are/_EmployerAwards.tsx new file mode 100644 index 00000000000..139a09c3642 --- /dev/null +++ b/src/pages/who-we-are/_EmployerAwards.tsx @@ -0,0 +1,114 @@ +import React from 'react' +import { StaticImage } from 'gatsby-plugin-image' +import { employer_awards_wrapper, image_wrapper } from './who-we-are.module.scss' +import { employer_award_content } from './_data' +import Typography from 'features/components/atoms/typography' +import { Localize } from 'components/localization' +import Flex from 'features/components/atoms/flex-box' +import LinkButton from 'features/components/atoms/link-button' +import useRegion from 'components/hooks/use-region' + +const EmployerAwards = () => { + const { is_row, is_region_loading } = useRegion() + return ( + + {is_row && !is_region_loading && ( + + + + + + + + + + + + + + + + + + + )} + + + + + + {employer_award_content.map((data) => { + return ( + + + + + + + + {data?.sub_text ? ( + + + + ) : null} + + ) + })} + + + ) +} + +export default EmployerAwards diff --git a/src/pages/who-we-are/_data.tsx b/src/pages/who-we-are/_data.tsx new file mode 100644 index 00000000000..29df6c0af88 --- /dev/null +++ b/src/pages/who-we-are/_data.tsx @@ -0,0 +1,47 @@ +import React from 'react' +import { EmployerAwardsType } from './_types' +import Link from 'features/components/atoms/link' + +export const employer_award_content: EmployerAwardsType[] = [ + { + id: 0, + title: '_t_Investors in People_t_', + text_with_link: { + text: '_t_We were awarded Gold accreditation by <0>Investors in People0> (IIP) for our commitment to building trust within Deriv, motivating employee growth, and adapting to change. We are honoured to be recognised for our leadership approach, people practices, career advancement opportunities, and culture of trust._t_', + components: [ + , + ], + }, + }, + { + id: 1, + title: '_t_Great Place to Work®_t_', + text_with_link: { + text: "_t_Deriv's offices in Dubai, Paraguay, Cyprus, France, Malta, Rwanda, and UK have received the <0>Great Place to Work®0> (GPTW) 2023 certification for fair treatment of employees regardless of gender or race, ethical business practices, and supportive work culture._t_", + + components: [ + , + ], + }, + sub_text: + '_t_ In the year 2022, 20 Deriv offices worldwide, including Cyberjaya, Dubai, Asunción, Birkirkara, Limassol, Kigali, Ipoh, Malaka, and Labuan, were recognised by GPTW._t_', + }, +] diff --git a/src/pages/who-we-are/_lazy-load.ts b/src/pages/who-we-are/_lazy-load.ts index a8c92305a69..56045a76ecf 100644 --- a/src/pages/who-we-are/_lazy-load.ts +++ b/src/pages/who-we-are/_lazy-load.ts @@ -6,3 +6,4 @@ export const OurLeadership = Loadable(() => import('./_OurLeadership')) export const AboutUsBanner = Loadable(() => import('./_AboutUsBanner')) export const DerivNumbers = Loadable(() => import('./_DerivNumbers')) export const OurOffices = Loadable(() => import('./_OurOffices')) +export const EmployerAwards = Loadable(() => import('./_EmployerAwards')) diff --git a/src/pages/who-we-are/_types.ts b/src/pages/who-we-are/_types.ts index 114eee2f2ff..b20dab724f8 100644 --- a/src/pages/who-we-are/_types.ts +++ b/src/pages/who-we-are/_types.ts @@ -1,3 +1,16 @@ +import { ReactElement } from 'react' +import { TString } from 'types/generics' + +export type EmployerAwardsType = { + id: number + title: TString + text_with_link: { + text: TString + components?: ReactElement[] + } + sub_text?: TString +} + type StrapiImage = { localFile: { publicURL: string diff --git a/src/pages/who-we-are/index.tsx b/src/pages/who-we-are/index.tsx index 57573b17319..4e862406a30 100644 --- a/src/pages/who-we-are/index.tsx +++ b/src/pages/who-we-are/index.tsx @@ -12,6 +12,7 @@ import { AboutUsBanner, DerivNumbers, OurOffices, + EmployerAwards, } from './_lazy-load' import { TGatsbyHead } from 'features/types' import device from 'themes/device' @@ -62,6 +63,7 @@ const AboutUs = ({ data }: TWhoWeAre) => { + ) diff --git a/src/pages/who-we-are/who-we-are.module.scss b/src/pages/who-we-are/who-we-are.module.scss new file mode 100644 index 00000000000..2ef808af0b5 --- /dev/null +++ b/src/pages/who-we-are/who-we-are.module.scss @@ -0,0 +1,14 @@ +@use 'features/styles/theme/theme-mixins' as *; +@import 'features/styles/theme/variables'; + +.employer_awards_wrapper { + padding-inline: 2rem; + + @include breakpoints(tablet) { + padding-inline: 20rem; + } +} +.image_wrapper { + max-inline-size: 32rem; + max-block-size: 11.4rem; +}