From 95a534b3dc0835a5e0150e0804b91969ff6e9aad Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 11 Feb 2022 14:08:46 +0800
Subject: [PATCH 1/3] fix: hero styles to dynamically fit various languages

---
 src/pages/who-we-are/components/_hero.tsx | 47 ++++++++++++-----------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/pages/who-we-are/components/_hero.tsx b/src/pages/who-we-are/components/_hero.tsx
index c49a52878e3..5f902f3b22f 100644
--- a/src/pages/who-we-are/components/_hero.tsx
+++ b/src/pages/who-we-are/components/_hero.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
 import { Flex } from 'components/containers'
-import { Header, QueryImage } from 'components/elements'
+import { QueryImage } from 'components/elements'
 import device from 'themes/device.js'
 import { localize } from 'components/localization'
 import desktop_bg from 'images/common/about/about_us_bg_desktop.png'
@@ -53,44 +53,47 @@ const MobileWrapper = styled.div`
         display: flex;
     }
 `
-const StyledHeader = styled(Header)`
-    @media ${device.tabletL} {
-        font-size: 84px;
-        line-height: 94px;
-    }
-    @media ${device.tabletS} {
-        white-space: pre;
+const MobileHeader = styled.h1`
+    color: var(--color-white);
+    text-align: center;
+    margin-top: 40px;
+    font-size: 84px;
+    line-height: 94px;
+    font-weight: bold;
+
+    @media ${device.mobileL} {
+        font-size: 64px;
+        line-height: 1.25;
     }
 `
 
-const StyledH1 = styled.h1`
-    height: 100%;
-    width: 100%;
+const DesktopHeader = styled.h1`
     color: white;
     font-weight: bold;
-    margin: 175px auto 70px;
-    display: flex;
-    justify-content: center;
+    margin: 120px auto;
     letter-spacing: 1px;
     font-size: 200px;
     z-index: 3;
     line-height: inherit;
+    text-align: center;
 
     @media (max-width: 1200px) {
-        margin: 188px auto 70px;
-        font-size: 170px;
+        font-size: 140px;
     }
 `
 
 const StyledFlex = styled(Flex)`
     min-height: 400px;
-    width: 1150px;
+    position: relative;
 `
 
 const StyledQueryImage = styled(QueryImage)`
     max-width: 591px;
     z-index: 2;
     position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 `
 const StyledMobileQueryImage = styled(QueryImage)`
     max-width: 445px;
@@ -118,19 +121,19 @@ const Hero = () => {
                             alt="example"
                             width="unset"
                         />
-                        <StyledH1>{title}</StyledH1>
+                        <Flex jc="center" p="0 32px" max_width="1440px">
+                            <DesktopHeader>{title}</DesktopHeader>
+                        </Flex>
                     </StyledFlex>
                 </DesktopWrapper>
                 <MobileWrapper>
-                    <Flex fd="column">
+                    <Flex fd="column" ai="center" p="0 16px">
                         <StyledMobileQueryImage
                             data={data['about_us_logo']}
                             alt="example"
                             width="unset"
                         />
-                        <StyledHeader as="h1" color="white" align="center" mt="40px" type="unset">
-                            {title}
-                        </StyledHeader>
+                        <MobileHeader>{title}</MobileHeader>
                     </Flex>
                 </MobileWrapper>
             </ContentWrapper>

From ddd24370651631b89bd873625c584d6de0aba94a Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 11 Feb 2022 14:09:12 +0800
Subject: [PATCH 2/3] chore: remove unused code

---
 src/pages/who-we-are/_data.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/who-we-are/_data.tsx b/src/pages/who-we-are/_data.tsx
index ca2c9155105..168662032e0 100644
--- a/src/pages/who-we-are/_data.tsx
+++ b/src/pages/who-we-are/_data.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { localize, Localize } from 'components/localization'
+import { Localize } from 'components/localization'
 import Shield from 'images/svg/who-we-are/shield.svg'
 import Star from 'images/svg/who-we-are/star.svg'
 import People from 'images/svg/who-we-are/people.svg'

From 579b966178589a2e93c8deb66df9afaff1d713ed Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 11 Feb 2022 14:29:45 +0800
Subject: [PATCH 3/3] refactor: to visibility components

---
 src/pages/who-we-are/components/_hero.tsx | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/pages/who-we-are/components/_hero.tsx b/src/pages/who-we-are/components/_hero.tsx
index 5f902f3b22f..97b0fda6ab7 100644
--- a/src/pages/who-we-are/components/_hero.tsx
+++ b/src/pages/who-we-are/components/_hero.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { graphql, useStaticQuery } from 'gatsby'
-import { Flex } from 'components/containers'
+import { Flex, Desktop, Mobile } from 'components/containers'
 import { QueryImage } from 'components/elements'
 import device from 'themes/device.js'
 import { localize } from 'components/localization'
@@ -40,19 +40,7 @@ const ContentWrapper = styled(Flex)`
         margin: 180px 0 145px;
     }
 `
-const DesktopWrapper = styled(Flex)`
-    @media ${device.tabletL} {
-        display: none;
-    }
-`
-const MobileWrapper = styled.div`
-    display: none;
-    margin: 0 31px;
 
-    @media ${device.tabletL} {
-        display: flex;
-    }
-`
 const MobileHeader = styled.h1`
     color: var(--color-white);
     text-align: center;
@@ -114,7 +102,7 @@ const Hero = () => {
     return (
         <ParentWrapper bg_image_desktop={desktop_bg} bg_image_mobile={mobile_bg}>
             <ContentWrapper jc="center">
-                <DesktopWrapper>
+                <Desktop>
                     <StyledFlex>
                         <StyledQueryImage
                             data={data['about_us_logo']}
@@ -125,8 +113,8 @@ const Hero = () => {
                             <DesktopHeader>{title}</DesktopHeader>
                         </Flex>
                     </StyledFlex>
-                </DesktopWrapper>
-                <MobileWrapper>
+                </Desktop>
+                <Mobile>
                     <Flex fd="column" ai="center" p="0 16px">
                         <StyledMobileQueryImage
                             data={data['about_us_logo']}
@@ -135,7 +123,7 @@ const Hero = () => {
                         />
                         <MobileHeader>{title}</MobileHeader>
                     </Flex>
-                </MobileWrapper>
+                </Mobile>
             </ContentWrapper>
         </ParentWrapper>
     )