diff --git a/public/images/landing_1.png b/public/images/landing_1.png
index 157d5bfe..35dc65ea 100644
Binary files a/public/images/landing_1.png and b/public/images/landing_1.png differ
diff --git a/public/images/landing_2.png b/public/images/landing_2.png
index 00973b97..49964a31 100644
Binary files a/public/images/landing_2.png and b/public/images/landing_2.png differ
diff --git a/public/images/landing_3.png b/public/images/landing_3.png
index 749f9939..d99e594d 100644
Binary files a/public/images/landing_3.png and b/public/images/landing_3.png differ
diff --git a/public/images/landing_7.png b/public/images/landing_7.png
new file mode 100644
index 00000000..5bebd572
Binary files /dev/null and b/public/images/landing_7.png differ
diff --git a/public/images/landing_mobile_1.png b/public/images/landing_mobile_1.png
new file mode 100644
index 00000000..5fb233b7
Binary files /dev/null and b/public/images/landing_mobile_1.png differ
diff --git a/public/images/landing_mobile_2.png b/public/images/landing_mobile_2.png
new file mode 100644
index 00000000..1adf677f
Binary files /dev/null and b/public/images/landing_mobile_2.png differ
diff --git a/public/images/landing_mobile_3.png b/public/images/landing_mobile_3.png
new file mode 100644
index 00000000..d5a52473
Binary files /dev/null and b/public/images/landing_mobile_3.png differ
diff --git a/public/images/landing_mobile_7.png b/public/images/landing_mobile_7.png
new file mode 100644
index 00000000..01f3c535
Binary files /dev/null and b/public/images/landing_mobile_7.png differ
diff --git a/src/config/lexics/joinMatch.tsx b/src/config/lexics/joinMatch.tsx
index 32143301..15d9b05c 100644
--- a/src/config/lexics/joinMatch.tsx
+++ b/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,
diff --git a/src/features/JoinMatchPage/index.tsx b/src/features/JoinMatchPage/index.tsx
index b6621d03..fcacaee9 100644
--- a/src/features/JoinMatchPage/index.tsx
+++ b/src/features/JoinMatchPage/index.tsx
@@ -24,6 +24,7 @@ import {
TeamsNameWrapper,
MainInfoTitle,
MainInfoButton,
+ MainInfoContainer,
MainInfoText,
EmptySpan,
WatchLiveCircle,
@@ -51,10 +52,11 @@ export const JoinMatchPage = () => {
-
-
-
- {matchInfo?.team1
+
+
+
+
+ {matchInfo?.team1
&& (
{matchDate}
@@ -68,32 +70,33 @@ export const JoinMatchPage = () => {
)}
)}
-
- {matchInfo?.team1 ? (
- <>
-
- —
-
- >
+
+ {matchInfo?.team1 ? (
+ <>
+
+ —
+
+ >
- ) : ()}
+ ) : ()}
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
diff --git a/src/features/JoinMatchPage/styled.tsx b/src/features/JoinMatchPage/styled.tsx
index 348cb373..e60734a9 100644
--- a/src/features/JoinMatchPage/styled.tsx
+++ b/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`
- 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`
`
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){