fix: initial changes who we are page

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 (
+        <Flex.Box
+            direction="col"
+            container="fluid"
+            padding_block="10x"
+            md={{ padding_block: '20x' }}
+        >
+            {is_row && !is_region_loading && (
+                <div>
+                    <Typography.Heading size="medium" mb="10x" textcolor="black" align="center">
+                        <Localize translate_text={'_t_UFAwards_t_'} />
+                    </Typography.Heading>
+                    <Flex.Box
+                        justify="center"
+                        direction="col"
+                        align="center"
+                        gap="10x"
+                        mt="15x"
+                        mb="40x"
+                        md={{ direction: 'row', mt: '30x', gap: '30x' }}
+                    >
+                        <div className={image_wrapper}>
+                            <StaticImage
+                                src="../../images/common/who-we-are/uf-awards.png"
+                                loading="eager"
+                                formats={['avif', 'webp', 'auto']}
+                                alt="banner"
+                            />
+                        </div>
+                        <Flex.Box gap="0x" direction="col">
+                            <Typography.Paragraph
+                                size="xlarge"
+                                mb="10x"
+                                textcolor="black"
+                                align="left"
+                                margin_block="3x"
+                            >
+                                <Localize
+                                    translate_text={'_t_Most Trusted Broker - APAC 2023_t_'}
+                                />
+                            </Typography.Paragraph>
+                            <Typography.Paragraph
+                                size="xlarge"
+                                mb="10x"
+                                textcolor="black"
+                                align="left"
+                            >
+                                <Localize
+                                    translate_text={'_t_ Best Forex Spreads - APAC 2023_t_'}
+                                />
+                            </Typography.Paragraph>
+                        </Flex.Box>
+                    </Flex.Box>
+                </div>
+            )}
+            <Typography.Heading size="medium" mb="10x" textcolor="black" align="center" mt="10x">
+                <Localize translate_text="_t_Employer awards_t_" />
+            </Typography.Heading>
+
+            <Flex.Box className={employer_awards_wrapper} direction="col">
+                {employer_award_content.map((data) => {
+                    return (
+                        <div key={data.id}>
+                            <Typography.Heading
+                                size="small"
+                                mb="10x"
+                                textcolor="black"
+                                align="center"
+                                lg={{ align: 'left' }}
+                            >
+                                <Localize translate_text={data.title} />
+                            </Typography.Heading>
+                            <Typography.Paragraph
+                                size="xlarge"
+                                mb="10x"
+                                textcolor="black"
+                                align="left"
+                            >
+                                <Localize
+                                    translate_text={data.text_with_link.text}
+                                    components={data.text_with_link.components}
+                                />
+                            </Typography.Paragraph>
+                            {data?.sub_text ? (
+                                <Typography.Paragraph
+                                    size="xlarge"
+                                    mb="10x"
+                                    textcolor="black"
+                                    align="left"
+                                >
+                                    <Localize translate_text={data.sub_text} />
+                                </Typography.Paragraph>
+                            ) : null}
+                        </div>
+                    )
+                })}
+            </Flex.Box>
+        </Flex.Box>
+    )
+}
+
+export default EmployerAwards

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 People</0> (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: [
+                <Link
+                    weight="bold"
+                    key={0}
+                    target="_blank"
+                    url={{
+                        type: 'non-company',
+                        href: 'https://www.investorsinpeople.com/',
+                    }}
+                    rel="noopener noreferrer"
+                />,
+            ],
+        },
+    },
+    {
+        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: [
+                <Link
+                    weight="bold"
+                    key={0}
+                    target="_blank"
+                    url={{
+                        type: 'non-company',
+                        href: 'https://www.greatplacetowork.com/',
+                    }}
+                    rel="noopener noreferrer"
+                />,
+            ],
+        },
+        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_',
+    },
+]

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'))

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

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) => {
             <DerivNumbers deriv_in_numbers={deriv_in_numbers} />
             <ImageMarquee slider_medias={slider_medias} />
             <OurOffices our_locations={our_locations} />
+            <EmployerAwards />
             <AboutUsBanner banner={banner} />
         </Layout>
     )

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;
+}