fix: Hero layout shift

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 
 ### Fixed
+- Potential layout shift on Hero section fixed (#472)
 - Fix layout section spacings style (#469)
 
 ### Security

src/components/sections/Hero/Hero.tsx

@@ -1,11 +1,11 @@
+import { ButtonLink } from 'src/components/ui/Button'
 import UIHero, {
   HeroContent,
   HeroImage,
   HeroLink,
 } from 'src/components/ui/Hero'
-import Image from 'src/components/ui/Image/Image'
-import { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
+import Image from 'src/components/ui/Image/Image'
 
 import Section from '../Section'
 
@@ -35,6 +35,17 @@ const Hero = ({
   return (
     <Section>
       <UIHero data-hero-variant={variant}>
+        <HeroImage>
+          <Image
+            preload
+            loading="eager"
+            src={imageSrc}
+            alt={imageAlt}
+            width={360}
+            height={240}
+            sizes="(max-width: 768px) 70vw, 50vw"
+          />
+        </HeroImage>
         <HeroContent aria-labelledby="hero-heading">
           <div data-hero-wrapper className="layout__content">
             <div data-hero-info>
@@ -52,17 +63,6 @@ const Hero = ({
             {!!icon && <div data-hero-icon>{icon}</div>}
           </div>
         </HeroContent>
-        <HeroImage>
-          <Image
-            preload
-            loading="eager"
-            src={imageSrc}
-            alt={imageAlt}
-            width={360}
-            height={240}
-            sizes="(max-width: 768px) 70vw, 50vw"
-          />
-        </HeroImage>
       </UIHero>
     </Section>
   )

src/components/ui/Hero/hero.scss

@@ -2,13 +2,13 @@
 
 [data-store-hero] {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   width: 100%;
   background-color: var(--fs-color-primary-bkg);
 
   @include media(">=tablet") {
     position: relative;
-    flex-direction: row;
+    flex-direction: row-reverse;
     justify-content: flex-end;
   }
 }