chore: fixed designers suggestions for hero content

src/features/pages/home/hero/index.tsx

@@ -3,12 +3,15 @@ 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 { Localize, localize } from 'components/localization'
 import useRegion from 'components/hooks/use-region'
 
 export interface HomeHeroProps {
@@ -20,7 +23,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-[calc(100vh-136px)] min-h-[587px] relative isolate overflow-hidden">
             {is_eu ? (
                 <StaticImage
                     src="../../../../images/migration/home/home_hero_bg_eu.png"
@@ -39,17 +42,15 @@ 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,
-                    )}
-                >
+            <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
@@ -61,52 +62,45 @@ 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"
+                        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"
                     />
                 </div>
+                <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"
+                            placeholder="none"
+                        />
+                    ) : (
+                        <StaticImage
+                            src="../../../../images/migration/home/home_hero_new.png"
+                            alt="hero image"
+                            placeholder="none"
+                        />
+                    )}
+                </div>
             </FluidContainer>
-            <div className="absolute inset-50 flex items-end -right-3600 -z-10 md:left-auto lg:right-general-5xl">
-                {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>
     )

src/features/pages/home/hero/styles.module.scss

@@ -1,29 +1,71 @@
 @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;
-    @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%;
+        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;
-    @media only screen and (min-width: 768px){
+    @media only screen and (min-width: 601px){
         margin-inline: 0;
     }
 }
+.hero_img{
+    right: -72px;
+    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;
+        right: -48px;
+    }
+}
 .hero_content_award_img {
     margin-inline: auto;
     gap: 10px;
-    @media only screen and (min-width: 768px){
+    @media only screen and (min-width: 601px){
+        position: absolute;
         margin-inline: 0;
         gap: 24px;
+        left: 24px;
+        top: clamp(72%,50vh + 210px,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{
     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){

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>
                 </>
             )}

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: '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} />,
+    },
+]

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,
+            }}
+        />
     )
 }