Merge branch 'translation-new-homepage' of https://github.com/binary-…

…com/deriv-com into translation-new-homepage

package.json

@@ -6,10 +6,10 @@
     "dependencies": {
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv-com/blocks": "^0.70.0",
-        "@deriv-com/components": "^0.41.0",
+        "@deriv-com/blocks": "^0.74.0",
+        "@deriv-com/components": "^0.44.0",
         "@deriv-com/hooks": "^0.10.0",
-        "@deriv-com/providers": "^0.10.0",
+        "@deriv-com/providers": "^0.11.0",
         "@deriv/analytics": "^1.4.4",
         "@deriv/deriv-api": "^1.0.13",
         "@deriv/quill-design": "^1.3.2",

src/features/pages/home/hero/award-images.tsx

@@ -3,8 +3,14 @@ import clsx from 'clsx'
 import { StaticImage } from 'gatsby-plugin-image'
 import { hero_content_award_img } from './styles.module.scss'
 import { localize } from 'components/localization'
+import useRegion from 'components/hooks/use-region'
+import { isEuDomain } from 'common/utility'
 
 const HeroAwardImages = () => {
+    const { is_eu } = useRegion()
+
+    if (isEuDomain() || is_eu) return null
+
     return (
         <div className={clsx('flex pb-general-xl', hero_content_award_img)}>
             <StaticImage

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text } from '@deriv/quill-design'
+import clsx from 'clsx'
+import { hero_content_text } from './styles.module.scss'
+import useRegion from 'components/hooks/use-region'
+import { Localize } from 'components/localization'
+import { isEuDomain } from 'common/utility'
+
+const Description = () => {
+    const { is_eu } = useRegion()
+    return isEuDomain() || is_eu ? (
+        <Text size="md" className={clsx('text-solid-slate-50 mt-general-md', hero_content_text)}>
+            <Localize translate_text="_t_Trade CFDs and Multipliers on 1500+ instruments, all in one place with 24/7 trading and 24/7 worldwide support._t_" />
+        </Text>
+    ) : (
+        <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>
+    )
+}
+
+export default Description

src/features/pages/home/hero/hero-image.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { StaticImage } from 'gatsby-plugin-image'
+import clsx from 'clsx'
+import { hero_img_eu, hero_img } from './styles.module.scss'
+import { isEuDomain } from 'common/utility'
+import useRegion from 'components/hooks/use-region'
+
+const HeroImage = () => {
+    const { is_eu } = useRegion()
+    return isEuDomain() || is_eu ? (
+        <div className={clsx('absolute inset-50 flex items-end -z-10', hero_img_eu)}>
+            <StaticImage
+                src="../../../../images/migration/home/home_hero_new_eu.png"
+                alt="hero image"
+                placeholder="none"
+                formats={['auto', 'webp']}
+                loading="eager"
+            />
+        </div>
+    ) : (
+        <div className={clsx('absolute inset-50 flex items-end -z-10', hero_img)}>
+            <StaticImage
+                src="../../../../images/migration/home/home_hero_new.png"
+                alt="hero image"
+                placeholder="none"
+                formats={['auto', 'webp']}
+                loading="eager"
+            />
+        </div>
+    )
+}
+
+export default HeroImage

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

@@ -1,30 +1,29 @@
 import React, { ReactNode } from 'react'
-import { FluidContainer, Heading, Section, Text } from '@deriv/quill-design'
+import { FluidContainer, Heading, Section } from '@deriv/quill-design'
 import clsx from 'clsx'
 import { StaticImage } from 'gatsby-plugin-image'
 import {
     hero_container,
     hero_content,
     hero_content_gradient,
-    hero_img,
-    hero_img_eu,
-    hero_content_text,
     hero_content_btn,
 } from './styles.module.scss'
 import HeroAwardImages from './award-images'
+import HeroImage from './hero-image'
 import FloatingCta from './floating-cta'
+import Description from './description'
 import { Localize } from 'components/localization'
-import useRegion from 'components/hooks/use-region'
 import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
 import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
+import { usePageLoaded } from 'components/hooks/use-page-loaded'
 
 export interface HomeHeroProps {
     children?: ReactNode
     className?: string
 }
 
 const HomeHero: React.FC<HomeHeroProps> = () => {
-    const { is_eu } = useRegion()
+    const [is_mounted] = usePageLoaded()
     const { ctaBottom, visibilityPercentage, entryRef } = useFloatingCtaContext()
 
     return (
@@ -45,58 +44,16 @@ const HomeHero: React.FC<HomeHeroProps> = () => {
                         <Heading.H1 className="text-solid-slate-50 text-[34px] lg:text-heading-h1">
                             <Localize translate_text="_t_Trading for anyone. Anywhere. Anytime._t_" />
                         </Heading.H1>
-                        {is_eu ? (
-                            <Text
-                                size="md"
-                                className={clsx(
-                                    'text-solid-slate-50 mt-general-md',
-                                    hero_content_text,
-                                )}
-                            >
-                                <Localize translate_text="_t_Trade CFDs and Multipliers on 1500+ instruments, all in one place with 24/7 trading and 24/7 worldwide support._t_" />
-                            </Text>
-                        ) : (
-                            <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>
-                        )}
+                        {is_mounted && <Description />}
                         <TradersHubCtaButton
                             className={clsx('mt-general-2xl', hero_content_btn)}
                             variant="primary"
                             colorStyle="coral"
                             ref={entryRef}
                         />
                     </div>
-                    {!is_eu && <HeroAwardImages />}
-                    {is_eu ? (
-                        <div
-                            className={clsx('absolute inset-50 flex items-end -z-10', hero_img_eu)}
-                        >
-                            <StaticImage
-                                src="../../../../images/migration/home/home_hero_new_eu.png"
-                                alt="hero image"
-                                placeholder="none"
-                                formats={['auto', 'webp']}
-                                loading="eager"
-                            />
-                        </div>
-                    ) : (
-                        <div className={clsx('absolute inset-50 flex items-end -z-10', hero_img)}>
-                            <StaticImage
-                                src="../../../../images/migration/home/home_hero_new.png"
-                                alt="hero image"
-                                placeholder="none"
-                                formats={['auto', 'webp']}
-                                loading="eager"
-                            />
-                        </div>
-                    )}
+                    {is_mounted && <HeroAwardImages />}
+                    {is_mounted && <HeroImage />}
                 </FluidContainer>
                 <div className={clsx('absolute -z-10 inset-50', hero_content_gradient)}></div>
             </Section>