fix(#188): added tinisia landing page, redirect to diwan.insports.tv
Gitea
parent
60fc37c6a7
commit
3b002b6abc
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
@ -0,0 +1,78 @@ |
||||
import React from 'react' |
||||
|
||||
import format from 'date-fns/format' |
||||
|
||||
import { isMobileDevice } from 'config' |
||||
import { joinMatchLexics } from 'config/lexics/joinMatch' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { useLexicsConfig } from 'features/LexicsStore' |
||||
|
||||
import { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { |
||||
Wrapper, |
||||
TunisiaLogo, |
||||
HeaderWrapper, |
||||
Footer, |
||||
BlockWrapper, |
||||
MatchInfo, |
||||
LigueImgWrapper, |
||||
Season, |
||||
MainInfoTitle, |
||||
MainInfoButton, |
||||
MainInfoContainer, |
||||
MainInfoText, |
||||
FooterRights, |
||||
ClubsLogo, |
||||
InsportsLogo, |
||||
ScGradient, |
||||
LigueImg, |
||||
} from './styled' |
||||
|
||||
export const DiwanInsportsTv = () => { |
||||
useLexicsConfig(joinMatchLexics) |
||||
const { login } = useAuthStore() |
||||
|
||||
const currentYear = format(new Date(), 'Y') |
||||
|
||||
return ( |
||||
<Wrapper> |
||||
<HeaderWrapper> |
||||
<InsportsLogo /> |
||||
{isMobileDevice && <TunisiaLogo />} |
||||
</HeaderWrapper> |
||||
<MainInfoContainer> |
||||
<BlockWrapper> |
||||
<LigueImgWrapper> |
||||
<ScGradient /> |
||||
<LigueImg /> |
||||
</LigueImgWrapper> |
||||
<MatchInfo> |
||||
<Season> |
||||
<T9n t='diwan_season' /> |
||||
</Season> |
||||
<MainInfoTitle> |
||||
<T9n t='diwan_title' /> |
||||
</MainInfoTitle> |
||||
<MainInfoText> |
||||
<T9n t='diwan_desc' /> |
||||
</MainInfoText> |
||||
<MainInfoButton onClick={login}> |
||||
<T9n t='diwan_join' /> |
||||
</MainInfoButton> |
||||
{!isMobileDevice && ( |
||||
<React.Fragment> |
||||
<TunisiaLogo /> |
||||
<ClubsLogo /> |
||||
</React.Fragment> |
||||
)} |
||||
</MatchInfo> |
||||
</BlockWrapper> |
||||
</MainInfoContainer> |
||||
<Footer> |
||||
<FooterRights>©inSports.tv {currentYear}</FooterRights> |
||||
</Footer> |
||||
</Wrapper> |
||||
) |
||||
} |
||||
@ -0,0 +1,302 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { devices } from 'config' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { ButtonSolid } from 'features/Common' |
||||
|
||||
export const Wrapper = styled.div` |
||||
width: 100vw; |
||||
height: 100vh; |
||||
color: white; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
${isMobileDevice |
||||
? css` |
||||
height: 100%; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const HeaderWrapper = styled.div` |
||||
padding: 20px 0; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
background: rgba(19, 21, 27, 0.7); |
||||
backdrop-filter: blur(20px); |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
background: #000000; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const TunisiaLogo = styled.div` |
||||
background-image: url(/images/tunis-logo.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 229px; |
||||
height: 49px; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 66px; |
||||
height: 14px; |
||||
margin-bottom: 0; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const InsportsLogo = styled.div` |
||||
background-image: url(/images/insports-logo.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 80px; |
||||
height: 25px; |
||||
margin-right: 25px; |
||||
position: relative; |
||||
|
||||
|
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 57px; |
||||
height: 18px; |
||||
|
||||
::after { |
||||
content: ''; |
||||
position: absolute; |
||||
width: 0.5px; |
||||
height: 25px; |
||||
background: #FFFFFF; |
||||
right: -13px; |
||||
top: -3px; |
||||
opacity: 0.6; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ClubsLogo = styled.div` |
||||
background-image: url(/images/tunis_clubs.svg); |
||||
background-size: contain; |
||||
background-repeat: no-repeat; |
||||
width: 408px; |
||||
height: 86px; |
||||
` |
||||
|
||||
export const MainInfoContainer = styled.div` |
||||
${isMobileDevice |
||||
? css` |
||||
margin-top: 50px; |
||||
height: 100%; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const BlockWrapper = styled.div` |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
position: relative; |
||||
|
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
@media ${devices.mobile} { |
||||
padding-left: 5.4rem; |
||||
} |
||||
${isMobileDevice |
||||
? css` |
||||
flex-direction: column; |
||||
padding: 5.4rem; |
||||
@media screen and (orientation: landscape){ |
||||
padding-top: 20px; |
||||
height: auto; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const ScGradient = styled.div` |
||||
content: ''; |
||||
position: absolute; |
||||
width: 620px; |
||||
height: 310px; |
||||
border-radius: 50%; |
||||
background: rgba(29, 185, 171, 0.4); |
||||
opacity: 0.7; |
||||
filter: blur(104.135px); |
||||
top: 30%; |
||||
left: 25px; |
||||
z-index: 1; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
filter: blur(50.135px); |
||||
border-radius: 40%; |
||||
width: 349px; |
||||
height: 210px; |
||||
left: -35px; |
||||
top: -71px; |
||||
` |
||||
: ''}; |
||||
|
||||
` |
||||
|
||||
export const LigueImg = styled.div` |
||||
background-image: url(/images/landing_${() => ( |
||||
isMobileDevice |
||||
? 'mobile_ligue_1.png' |
||||
: 'ligue_1.png' |
||||
)}); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-size: contain; |
||||
width: 670px; |
||||
height: 156px; |
||||
z-index: 2; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 288px; |
||||
height: 66px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const LigueImgWrapper = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
height: 80%; |
||||
margin-right: 5%; |
||||
position: relative; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
margin-right: 0; |
||||
margin-bottom: 83px; |
||||
@media screen and (orientation: landscape){ |
||||
display: block; |
||||
height: 100%; |
||||
width: 70%; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MatchInfo = styled.div` |
||||
margin-bottom: 60px; |
||||
max-width: 670px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
height: 100%; |
||||
@media screen and (orientation: landscape){ |
||||
padding-top: 0; |
||||
} |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const Season = styled.div` |
||||
text-transform: uppercase; |
||||
background-color: rgba(0,0,0,0.4); |
||||
padding: 8px 25px; |
||||
color: #B9B9B9; |
||||
border-radius: 5px; |
||||
font-size: 13px; |
||||
font-weight: 600; |
||||
display: inline-flex; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
margin-bottom: 15px; |
||||
padding: 0.7em 2.5rem; |
||||
font-size: 10px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoTitle = styled.div` |
||||
font-weight: 600; |
||||
font-size: 2rem; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 24px; |
||||
margin-bottom: 25px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoButton = styled(ButtonSolid)` |
||||
width: auto; |
||||
height: 70px; |
||||
font-size: 24px; |
||||
font-weight: 600; |
||||
border-radius: 5px; |
||||
margin-bottom: 50px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 100%; |
||||
font-size: 17px; |
||||
margin-bottom: 30px; |
||||
height: 40px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const MainInfoText = styled.div` |
||||
margin: 40px 0; |
||||
font-size: 17px; |
||||
line-height: 150%; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
margin: 0 0 25px; |
||||
letter-spacing: 0.1px; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const Footer = styled.div` |
||||
font-size: 14px; |
||||
background-color: black; |
||||
padding: 16px 0; |
||||
padding-left: 20%; |
||||
width: 100%; |
||||
@media ${devices.laptop} { |
||||
padding-left: 5%; |
||||
} |
||||
@media ${devices.mobile} { |
||||
padding-left: 35px; |
||||
} |
||||
${isMobileDevice |
||||
? css` |
||||
display: none; |
||||
` |
||||
: ''}; |
||||
` |
||||
|
||||
export const FooterRights = styled.div` |
||||
opacity: .5; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
` |
||||
: ''}; |
||||
` |
||||
Loading…
Reference in new issue