From c977df0f92d3f540c587e47e361a299afb96aadb Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 10:59:17 +0800
Subject: [PATCH 01/11] chore: fixed designers suggestions for hero content

---
 src/features/pages/home/hero/index.tsx        | 22 +++++++----------
 .../pages/home/hero/styles.module.scss        | 24 +++++++++++++++----
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index 9ca8a94750f..d635bd32695 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -7,6 +7,7 @@ import {
     hero_content_btn,
     hero_content_award_img,
     hero_content_gradient,
+    hero_img,
 } from './styles.module.scss'
 import { Localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
@@ -40,12 +41,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
             )}
 
             <FluidContainer className="h-full flex flex-col justify-end">
-                <div
-                    className={clsx(
-                        'flex flex-col items-center md:items-start md:w-5/12 md:mt-auto lg:w-1/2',
-                        hero_content,
-                    )}
-                >
+                <div className={clsx('flex flex-col', hero_content)}>
                     <Heading.H1 className="text-solid-slate-50 text-500 lg:text-heading-h1">
                         <Localize translate_text="_t_Trading for anyone. Anywhere. Anytime._t_" />
                     </Heading.H1>
@@ -61,12 +57,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                         <Localize translate_text="_t_Open demo account_t_" />
                     </Button>
                 </div>
-                <div
-                    className={clsx(
-                        'flex mt-general-2xl md:mt-auto pb-general-xl',
-                        hero_content_award_img,
-                    )}
-                >
+                <div className={clsx('flex mt-general-2xl pb-general-xl', hero_content_award_img)}>
                     <StaticImage
                         src="../../../../images/migration/home/award-1.png"
                         alt="award"
@@ -90,7 +81,12 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                     />
                 </div>
             </FluidContainer>
-            <div className="absolute inset-50 flex items-end -right-3600 -z-10 md:left-auto lg:right-general-5xl">
+            <div
+                className={clsx(
+                    'absolute inset-50 flex items-end -right-3600 -z-10 lg:right-general-5xl',
+                    hero_img,
+                )}
+            >
                 {is_eu ? (
                     <StaticImage
                         src="../../../../images/migration/home/home_hero_new_eu.png"
diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index 479f4f4528f..b19ff5beddf 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -3,27 +3,41 @@
 
 .hero_content{
     text-align: center;
-    @media only screen and (min-width: 768px){
-        text-align: left
+    align-items: center;
+    @media only screen and (min-width: 601px){
+        text-align: left;
+        width: 53%;
+        margin-top: auto;
+        align-items: flex-start;
+    }
+    @media only screen and (min-width: 1024px){
+        width: 50%;
     }
 }
 .hero_content_btn {
     margin-inline: auto;
-    @media only screen and (min-width: 768px){
+    @media only screen and (min-width: 601px){
         margin-inline: 0;
     }
 }
+.hero_img{
+    @media only screen and (min-width: 601px){
+        margin-inline-start: auto;
+        left: auto;
+    }
+}
 .hero_content_award_img {
     margin-inline: auto;
     gap: 10px;
-    @media only screen and (min-width: 768px){
+    @media only screen and (min-width: 601px){
         margin-inline: 0;
         gap: 24px;
+        margin-top: auto;
     }
 }
 .hero_content_gradient{
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) -8.48%, rgba(0, 0, 0, 0.60) -8.46%, rgba(0, 0, 0, 0.00) 8.92%, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.70) 65.27%, rgba(0, 0, 0, 0.80) 102.14%);
-    @media only screen and (min-width: 768px){
+    @media only screen and (min-width: 601px){
         background: linear-gradient(85deg, rgba(0, 0, 0, 0.80) 7.03%, rgba(0, 0, 0, 0.00) 108.11%);
     }
     @media only screen and (min-width: 1024px){

From 9be9f7fdfe55e67a1dc0eeb62cfdf6c1ffd12514 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 11:03:02 +0800
Subject: [PATCH 02/11] chore: fixed hero height for tablet and desktop

---
 src/features/pages/home/hero/index.tsx | 46 +++++++++++++-------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index d635bd32695..9d2be1809c6 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -21,7 +21,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
     const { is_eu } = useRegion()
 
     return (
-        <Section className="h-[700px] md:h-[880px] relative isolate overflow-hidden">
+        <Section className="h-[700px] md:h-[calc(100vh-135px)] relative isolate overflow-hidden">
             {is_eu ? (
                 <StaticImage
                     src="../../../../images/migration/home/home_hero_bg_eu.png"
@@ -80,29 +80,29 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                         placeholder="none"
                     />
                 </div>
+                <div
+                    className={clsx(
+                        'absolute inset-50 flex items-end -right-3600 -z-10 lg:right-general-5xl',
+                        hero_img,
+                    )}
+                >
+                    {is_eu ? (
+                        <StaticImage
+                            src="../../../../images/migration/home/home_hero_new_eu.png"
+                            alt="hero image"
+                            className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
+                            placeholder="none"
+                        />
+                    ) : (
+                        <StaticImage
+                            src="../../../../images/migration/home/home_hero_new.png"
+                            alt="hero image"
+                            className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
+                            placeholder="none"
+                        />
+                    )}
+                </div>
             </FluidContainer>
-            <div
-                className={clsx(
-                    'absolute inset-50 flex items-end -right-3600 -z-10 lg:right-general-5xl',
-                    hero_img,
-                )}
-            >
-                {is_eu ? (
-                    <StaticImage
-                        src="../../../../images/migration/home/home_hero_new_eu.png"
-                        alt="hero image"
-                        className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
-                        placeholder="none"
-                    />
-                ) : (
-                    <StaticImage
-                        src="../../../../images/migration/home/home_hero_new.png"
-                        alt="hero image"
-                        className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
-                        placeholder="none"
-                    />
-                )}
-            </div>
             <div className={clsx('absolute -z-10 inset-50', hero_content_gradient)}></div>
         </Section>
     )

From 4eaf98aef3a7c4dc690763423aaba3daaa262eaf Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 11:04:20 +0800
Subject: [PATCH 03/11] chore: fixed hero height for tablet and desktop

---
 src/features/pages/home/hero/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index 9d2be1809c6..efe9e96d70b 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -21,7 +21,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
     const { is_eu } = useRegion()
 
     return (
-        <Section className="h-[700px] md:h-[calc(100vh-135px)] relative isolate overflow-hidden">
+        <Section className="h-[700px] md:h-[calc(100vh-136px)] relative isolate overflow-hidden">
             {is_eu ? (
                 <StaticImage
                     src="../../../../images/migration/home/home_hero_bg_eu.png"

From fde222e8f3d708ff8bfad5866d81138888ad4328 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 11:13:59 +0800
Subject: [PATCH 04/11] chore: fixed hero image height

---
 src/features/pages/home/hero/index.tsx          | 13 ++++---------
 src/features/pages/home/hero/styles.module.scss |  5 +++++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index efe9e96d70b..4e54e3b89fd 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -40,7 +40,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                 />
             )}
 
-            <FluidContainer className="h-full flex flex-col justify-end">
+            <FluidContainer className="h-full flex flex-col justify-end relative">
                 <div className={clsx('flex flex-col', hero_content)}>
                     <Heading.H1 className="text-solid-slate-50 text-500 lg:text-heading-h1">
                         <Localize translate_text="_t_Trading for anyone. Anywhere. Anytime._t_" />
@@ -80,24 +80,19 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                         placeholder="none"
                     />
                 </div>
-                <div
-                    className={clsx(
-                        'absolute inset-50 flex items-end -right-3600 -z-10 lg:right-general-5xl',
-                        hero_img,
-                    )}
-                >
+                <div className={clsx('absolute inset-50 flex items-end -z-10', hero_img)}>
                     {is_eu ? (
                         <StaticImage
                             src="../../../../images/migration/home/home_hero_new_eu.png"
                             alt="hero image"
-                            className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
+                            // className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
                             placeholder="none"
                         />
                     ) : (
                         <StaticImage
                             src="../../../../images/migration/home/home_hero_new.png"
                             alt="hero image"
-                            className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
+                            // className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
                             placeholder="none"
                         />
                     )}
diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index b19ff5beddf..47910621896 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -21,10 +21,15 @@
     }
 }
 .hero_img{
+    right: -72px;
     @media only screen and (min-width: 601px){
         margin-inline-start: auto;
         left: auto;
     }
+    @media only screen and (min-width: 1024px){
+        width: 60vh;
+        right: -48px;
+    }
 }
 .hero_content_award_img {
     margin-inline: auto;

From d32398f9dcbef5c94ef6d204cc65eaf82107cf38 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 14:34:32 +0800
Subject: [PATCH 05/11] chore: fixed hero image height for mobile

---
 src/features/pages/home/hero/styles.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index 47910621896..b3fcd8bd578 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -22,6 +22,7 @@
 }
 .hero_img{
     right: -72px;
+    width: 55vh;
     @media only screen and (min-width: 601px){
         margin-inline-start: auto;
         left: auto;

From fd4aa47a5470b7c479a83d808539de2c42732cf0 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 14:56:07 +0800
Subject: [PATCH 06/11] chore: updated header button text

---
 src/features/pages/home/navigation/nav.buttons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/pages/home/navigation/nav.buttons.tsx b/src/features/pages/home/navigation/nav.buttons.tsx
index a5f7d815431..cb4b7ab6897 100644
--- a/src/features/pages/home/navigation/nav.buttons.tsx
+++ b/src/features/pages/home/navigation/nav.buttons.tsx
@@ -36,7 +36,7 @@ export const MainNavigationButtons = () => {
                         <Localize translate_text="_t_Log in_t_" />
                     </Button>
                     <Button size="lg" className="hidden lg:block">
-                        <Localize translate_text="_t_Create free demo account_t_" />
+                        <Localize translate_text="_t_Open demo account_t_" />
                     </Button>
                 </>
             )}

From 3a2d21d6561da11f66f9404ee3bc6cf33b928dc3 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 16:46:20 +0800
Subject: [PATCH 07/11] chore: updated years data

---
 src/features/pages/home/years/data.tsx  | 55 +++++++++++++++++++++
 src/features/pages/home/years/index.tsx | 63 ++++---------------------
 2 files changed, 64 insertions(+), 54 deletions(-)
 create mode 100644 src/features/pages/home/years/data.tsx

diff --git a/src/features/pages/home/years/data.tsx b/src/features/pages/home/years/data.tsx
new file mode 100644
index 00000000000..428ca653f26
--- /dev/null
+++ b/src/features/pages/home/years/data.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { CardContent } from '@deriv-com/components'
+import {
+    LightDependableIcon,
+    LightSafeAndSecureIcon,
+    LightRegulatedIcon,
+    LightTwentyFourSevenSupportIcon,
+    // eslint-disable-next-line import/no-unresolved
+} from '@deriv/quill-icons/Illustration'
+import { localize } from 'components/localization'
+
+export const cards: CardContent[] = [
+    {
+        id: 1,
+        header: localize('_t_Dependable_t_'),
+        description: localize(
+            '_t_Cutting-edge technology with 99.97% uptime for uninterrupted trading._t_',
+        ),
+        size: 'sm',
+        color: 'gray',
+        align: 'center',
+        icon: <LightDependableIcon width={120} height={145} />,
+    },
+    {
+        id: 2,
+        header: localize('_t_Safe & Secure_t_'),
+        description: localize(
+            '_t_Your personal data is private, and your funds are safely segregated._t_',
+        ),
+        size: 'sm',
+        color: 'light',
+        align: 'center',
+        icon: <LightSafeAndSecureIcon width={120} height={145} />,
+    },
+    {
+        id: 3,
+        header: localize('_t_Regulated_t_'),
+        description: localize(
+            '_t_We’re regulated and licensed by global financial authorities._t_',
+        ),
+        size: 'sm',
+        color: 'light',
+        align: 'center',
+        icon: <LightRegulatedIcon width={120} height={145} />,
+    },
+    {
+        id: 4,
+        header: localize('_t_24/7 support_t_'),
+        description: localize('_t_Our professional multilingual team is here for you anytime._t_'),
+        size: 'sm',
+        color: 'light',
+        align: 'center',
+        icon: <LightTwentyFourSevenSupportIcon width={120} height={145} />,
+    },
+]
diff --git a/src/features/pages/home/years/index.tsx b/src/features/pages/home/years/index.tsx
index 44732e12812..30a19cf1d78 100644
--- a/src/features/pages/home/years/index.tsx
+++ b/src/features/pages/home/years/index.tsx
@@ -1,63 +1,18 @@
 import React from 'react'
 import { Features } from '@deriv-com/blocks'
-import { CardContent } from '@deriv-com/components'
-import {
-    LightDependableIcon,
-    LightSafeAndSecureIcon,
-    LightRegulatedIcon,
-    LightTwentyFourSevenSupportIcon,
-    // eslint-disable-next-line import/no-unresolved
-} from '@deriv/quill-icons/Illustration'
+import { cards } from './data'
 import { localize } from 'components/localization'
 
-const cards: CardContent[] = [
-    {
-        id: 1,
-        header: localize('_t_Dependable_t_'),
-        description: localize(
-            '_t_Cutting-edge technology with 99.97% uptime for uninterrupted trading._t_',
-        ),
-        size: 'sm',
-        color: 'light',
-        align: 'center',
-        icon: <LightDependableIcon width={120} height={145} />,
-    },
-    {
-        id: 2,
-        header: localize('_t_Safe & Secure_t_'),
-        description: localize(
-            '_t_Your personal data is private, and your funds are safely segregated._t_',
-        ),
-        size: 'sm',
-        color: 'light',
-        align: 'center',
-        icon: <LightSafeAndSecureIcon width={120} height={145} />,
-    },
-    {
-        id: 3,
-        header: localize('_t_Regulated_t_'),
-        description: localize(
-            '_t_We’re regulated and licensed by global financial authorities._t_',
-        ),
-        size: 'sm',
-        color: 'light',
-        align: 'center',
-        icon: <LightRegulatedIcon width={120} height={145} />,
-    },
-    {
-        id: 4,
-        header: localize('_t_24/7 support_t_'),
-        description: localize('_t_Our professional multilingual team is here for you anytime._t_'),
-        size: 'sm',
-        color: 'light',
-        align: 'center',
-        icon: <LightTwentyFourSevenSupportIcon width={120} height={145} />,
-    },
-]
-
 const TwentyYearsStrong = () => {
     return (
-        <Features.Card title={localize("_t_We're 24+ years strong_t_")} cards={cards} cols="four" />
+        <Features.ContentSlider
+            title={localize("_t_We're 24+ years strong_t_")}
+            cardSliderProps={{
+                slideClasses: 'max-w-[296px]',
+                variant: 'ContentBottom',
+                cards: cards,
+            }}
+        />
     )
 }
 

From bf950bbf2b6106cc28e31c0d6bd44f92df8ef813 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 16:46:58 +0800
Subject: [PATCH 08/11] chore: updated years data

---
 src/features/pages/home/years/data.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/pages/home/years/data.tsx b/src/features/pages/home/years/data.tsx
index 428ca653f26..06c1461f1af 100644
--- a/src/features/pages/home/years/data.tsx
+++ b/src/features/pages/home/years/data.tsx
@@ -17,7 +17,7 @@ export const cards: CardContent[] = [
             '_t_Cutting-edge technology with 99.97% uptime for uninterrupted trading._t_',
         ),
         size: 'sm',
-        color: 'gray',
+        color: 'light',
         align: 'center',
         icon: <LightDependableIcon width={120} height={145} />,
     },

From 54060319e56758024cae0c787864ef3e888a5adc Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 17:46:37 +0800
Subject: [PATCH 09/11] chore: updated gap between hero content and award image

---
 src/features/pages/home/hero/index.tsx        | 11 ++++++--
 .../pages/home/hero/styles.module.scss        | 28 +++++++++++++++++--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index 4e54e3b89fd..985935ebbd1 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -3,11 +3,13 @@ import { Button, FluidContainer, Heading, Section, Text } from '@deriv/quill-des
 import clsx from 'clsx'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
+    hero_container,
     hero_content,
     hero_content_btn,
     hero_content_award_img,
     hero_content_gradient,
     hero_img,
+    hero_content_text,
 } from './styles.module.scss'
 import { Localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
@@ -21,7 +23,7 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
     const { is_eu } = useRegion()
 
     return (
-        <Section className="h-[700px] md:h-[calc(100vh-136px)] relative isolate overflow-hidden">
+        <Section className="h-[calc(100vh-136px)] min-h-[587px] relative isolate overflow-hidden">
             {is_eu ? (
                 <StaticImage
                     src="../../../../images/migration/home/home_hero_bg_eu.png"
@@ -40,12 +42,15 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                 />
             )}
 
-            <FluidContainer className="h-full flex flex-col justify-end relative">
+            <FluidContainer className={clsx('h-full flex flex-col relative', hero_container)}>
                 <div className={clsx('flex flex-col', hero_content)}>
                     <Heading.H1 className="text-solid-slate-50 text-500 lg:text-heading-h1">
                         <Localize translate_text="_t_Trading for anyone. Anywhere. Anytime._t_" />
                     </Heading.H1>
-                    <Text size="md" className="text-solid-slate-50 mt-general-md">
+                    <Text
+                        size="md"
+                        className={clsx('text-solid-slate-50 mt-general-md', hero_content_text)}
+                    >
                         <Localize translate_text="_t_Trade CFDs and Options on 1500+ instruments, all in one place with 24/7 trading and 24/7 worldwide support._t_" />
                     </Text>
                     <Button
diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index b3fcd8bd578..a721e4d0292 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -1,18 +1,26 @@
 @use 'features/styles/theme/theme-mixins' as *;
 @import 'features/styles/theme/variables';
 
+.hero_container {
+    justify-content: flex-end;
+    @media only screen and (min-width: 601px){
+        justify-content: center;
+    }
+}
 .hero_content{
     text-align: center;
     align-items: center;
     @media only screen and (min-width: 601px){
         text-align: left;
         width: 53%;
-        margin-top: auto;
         align-items: flex-start;
     }
     @media only screen and (min-width: 1024px){
         width: 50%;
     }
+    @media only screen and (min-width: 1920px){
+        margin-top: 0;
+    }
 }
 .hero_content_btn {
     margin-inline: auto;
@@ -22,10 +30,11 @@
 }
 .hero_img{
     right: -72px;
-    width: 55vh;
+    width: 60vh;
     @media only screen and (min-width: 601px){
         margin-inline-start: auto;
         left: auto;
+        right: -172px;
     }
     @media only screen and (min-width: 1024px){
         width: 60vh;
@@ -36,9 +45,22 @@
     margin-inline: auto;
     gap: 10px;
     @media only screen and (min-width: 601px){
+        position: absolute;
         margin-inline: 0;
         gap: 24px;
-        margin-top: auto;
+        left: 24px;
+        top: clamp(72%, calc(50vh + 172px), 80%);
+    }
+    @media only screen and (min-width: 1024px){
+        left: 0;
+    }
+}
+.hero_content_text{
+    @media only screen and (min-width: 601px){
+        max-width: 325px;
+    }
+    @media only screen and (min-width: 1024px){
+        max-width: 100%;
     }
 }
 .hero_content_gradient{

From 821c0a3ee44ae3651f24a741e54744a6c602c41a Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 8 Dec 2023 18:04:05 +0800
Subject: [PATCH 10/11] chore: updated gap between hero content and award image

---
 src/features/pages/home/hero/styles.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/pages/home/hero/styles.module.scss b/src/features/pages/home/hero/styles.module.scss
index a721e4d0292..4458d5d68a0 100644
--- a/src/features/pages/home/hero/styles.module.scss
+++ b/src/features/pages/home/hero/styles.module.scss
@@ -49,7 +49,7 @@
         margin-inline: 0;
         gap: 24px;
         left: 24px;
-        top: clamp(72%, calc(50vh + 172px), 80%);
+        top: clamp(72%,50vh + 210px,80%);
     }
     @media only screen and (min-width: 1024px){
         left: 0;

From 6c352b5fe90dda98f4ef50856f636e3618985c00 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Mon, 11 Dec 2023 11:00:46 +0800
Subject: [PATCH 11/11] chore: updated award images alt text

---
 src/features/pages/home/hero/index.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/features/pages/home/hero/index.tsx b/src/features/pages/home/hero/index.tsx
index 985935ebbd1..c7148f77653 100644
--- a/src/features/pages/home/hero/index.tsx
+++ b/src/features/pages/home/hero/index.tsx
@@ -11,7 +11,7 @@ import {
     hero_img,
     hero_content_text,
 } from './styles.module.scss'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
 
 export interface HomeHeroProps {
@@ -65,21 +65,21 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                 <div className={clsx('flex mt-general-2xl pb-general-xl', hero_content_award_img)}>
                     <StaticImage
                         src="../../../../images/migration/home/award-1.png"
-                        alt="award"
+                        alt={localize('_t_Best forex spreads APAC 2023 by UF Awards_t_')}
                         width={132}
                         height={68}
                         placeholder="none"
                     />
                     <StaticImage
                         src="../../../../images/migration/home/award-2.png"
-                        alt="award"
+                        alt={localize('_t_Broker of the year 2023 by FinanceFeeds_t_')}
                         width={132}
                         height={68}
                         placeholder="none"
                     />
                     <StaticImage
                         src="../../../../images/migration/home/award-3.png"
-                        alt="award"
+                        alt={localize('_t_Most trusted broker APAC 2023 by UF Awards_t_')}
                         width={132}
                         height={68}
                         placeholder="none"
@@ -90,14 +90,12 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                         <StaticImage
                             src="../../../../images/migration/home/home_hero_new_eu.png"
                             alt="hero image"
-                            // className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
                             placeholder="none"
                         />
                     ) : (
                         <StaticImage
                             src="../../../../images/migration/home/home_hero_new.png"
                             alt="hero image"
-                            // className="w-[439px] h-[610px] md:w-[566px] md:h-[768px]"
                             placeholder="none"
                         />
                     )}