feat(in-90): landing page changes

src/config/lexics/joinMatch.tsx

@@ -1,5 +1,5 @@
 export const joinMatchLexics = {
-  join_instat_tv: 15420,
+  join_insports_tv: 15420,
   join_now: 15422,
   promo_text: 15421,
   rfef_button: 19766,

src/features/JoinMatchPage/index.tsx

@@ -24,6 +24,7 @@ import {
   TeamsNameWrapper,
   MainInfoTitle,
   MainInfoButton,
+  MainInfoContainer,
   MainInfoText,
   EmptySpan,
   WatchLiveCircle,
@@ -51,10 +52,11 @@ export const JoinMatchPage = () => {
       <HeaderWrapper>
         <MainLogo />
       </HeaderWrapper>
-      <BlockWrapper>
-        <SportImgWrapper sportType={sportType} />
-        <MatchInfo>
-          {matchInfo?.team1
+      <MainInfoContainer>
+        <BlockWrapper>
+          <SportImgWrapper sportType={sportType} />
+          <MatchInfo>
+            {matchInfo?.team1
               && (
                 <DateInfoWrapper>
                   <DateInfo>{matchDate}</DateInfo>
@@ -68,32 +70,33 @@ export const JoinMatchPage = () => {
                   )}
                 </DateInfoWrapper>
               )}
-          <TeamsNameWrapper>
-            {matchInfo?.team1 ? (
-              <>
-                <Name nameObj={matchInfo?.team1 || {}} />
-                <EmptySpan> — </EmptySpan>
-                <Name nameObj={matchInfo?.team2 || {}} />
-              </>
+            <TeamsNameWrapper>
+              {matchInfo?.team1 ? (
+                <>
+                  <Name nameObj={matchInfo?.team1 || {}} />
+                  <EmptySpan> — </EmptySpan>
+                  <Name nameObj={matchInfo?.team2 || {}} />
+                </>
 
-            ) : (<Name nameObj={matchInfo?.tournament || {}} />)}
+              ) : (<Name nameObj={matchInfo?.tournament || {}} />)}
 
-          </TeamsNameWrapper>
-          <MainInfoTitle>
-            <T9n t='join_instat_tv' />
-          </MainInfoTitle>
-          <SportImgMobileDevice sportType={sportType} />
-          <MainInfoText>
-            <T9n t='promo_text' />
-          </MainInfoText>
-          <MainInfoButton onClick={onJoinClick}>
-            <T9n t='join_now' />
-          </MainInfoButton>
-        </MatchInfo>
-      </BlockWrapper>
+            </TeamsNameWrapper>
+            <MainInfoTitle>
+              <T9n t='join_insports_tv' />
+            </MainInfoTitle>
+            <SportImgMobileDevice sportType={sportType} />
+            <MainInfoText>
+              <T9n t='promo_text' />
+            </MainInfoText>
+            <MainInfoButton onClick={onJoinClick}>
+              <T9n t='join_now' />
+            </MainInfoButton>
+          </MatchInfo>
+        </BlockWrapper>
+      </MainInfoContainer>
       <Footer>
         <FooterLogo />
-        <FooterRights>©InStat TV {currentYear}</FooterRights>
+        <FooterRights>©inSports.tv {currentYear}</FooterRights>
       </Footer>
     </Wrapper>
   )

src/features/JoinMatchPage/styled.tsx

@@ -35,10 +35,21 @@ export const HeaderWrapper = styled.div`
 `
 
 export const MainLogo = styled(Logo)`
-  height: 20px;
+  height: 26px;
   width: 80px;
 `
 
+export const MainInfoContainer = styled.div`
+  height: 100%;
+
+  ${isMobileDevice
+    ? css`
+      margin-top: 50px;
+      overflow: scroll;
+    `
+    : ''};
+`
+
 export const BlockWrapper = styled.div`
   height: 100%;
   display: flex;
@@ -54,7 +65,6 @@ export const BlockWrapper = styled.div`
   ${isMobileDevice
     ? css`
       padding: 5.4rem;
-      overflow: scroll;
       @media screen and (orientation: landscape){
         padding-top: 20px;
         height: auto;
@@ -64,7 +74,11 @@ export const BlockWrapper = styled.div`
 `
 
 export const SportImgWrapper = styled.div<Props>`
-  background-image: url(/images/landing_${({ sportType }) => sportType}.png);
+  background-image: url(/images/landing_${({ sportType }) => (
+    isMobileDevice
+      ? `mobile_${sportType}.png`
+      : `${sportType}.png`
+  )});
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -84,6 +98,8 @@ export const SportImgWrapper = styled.div<Props>`
 `
 
 export const MatchInfo = styled.div`
+  margin-bottom: 60px;
+
   ${isMobileDevice
     ? css`
       width: 100%;
@@ -163,7 +179,7 @@ export const MainInfoTitle = styled.div`
   font-size: 2rem;
   ${isMobileDevice
     ? css`
-      font-size: 3.8rem;
+      font-size: 32px;
       margin-bottom: 15px;
     `
     : ''};
@@ -191,7 +207,7 @@ export const MainInfoText = styled.div`
   ${isMobileDevice
     ? css`
       font-size: 2.2rem;
-      margin: 15px 0 25px;
+      margin: 0 0 25px;
     `
     : ''};
 `
@@ -244,7 +260,7 @@ export const SportImgMobileDevice = styled(SportImgWrapper)`
   ${isMobileDevice
     ? css`
       display: block;
-      height: 42%;
+      height: 60%;
       width: 100%;
       margin-right: 0;
       @media screen and (orientation: landscape){