diff --git a/src/features/TournamentLanding/hooks.tsx b/src/features/TournamentLanding/hooks.tsx index 66277cb0..52d3d493 100644 --- a/src/features/TournamentLanding/hooks.tsx +++ b/src/features/TournamentLanding/hooks.tsx @@ -91,5 +91,6 @@ export const useTournamentLanding = () => { sliderItemId, teams: tournamentInfo?.teams, title, + tournamentInfo, } } diff --git a/src/features/TournamentLanding/index.tsx b/src/features/TournamentLanding/index.tsx index 5a43891c..16f57b5d 100644 --- a/src/features/TournamentLanding/index.tsx +++ b/src/features/TournamentLanding/index.tsx @@ -51,8 +51,11 @@ const TournamentLanding = () => { sliderItemId, teams, title, + tournamentInfo, } = useTournamentLanding() + if (!tournamentInfo) return null + const currentYear = format(new Date(), 'Y') return ( diff --git a/src/features/TournamentLanding/styled.tsx b/src/features/TournamentLanding/styled.tsx index 8ab808c7..d67717db 100644 --- a/src/features/TournamentLanding/styled.tsx +++ b/src/features/TournamentLanding/styled.tsx @@ -150,19 +150,6 @@ export const SliderContainer = styled.div` height: 100%; position: relative; overflow: hidden; - - ${isMobileDevice - ? css` - :before { - content: ''; - z-index: 10; - width: 100%; - height: 100%; - position: absolute; - background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%); - } - ` - : ''}; ` export const SliderImg = styled.img` @@ -174,6 +161,12 @@ export const SliderImg = styled.img` animation-iteration-count: 1; animation-timing-function: ease-out; animation-duration: 5s; + object-fit: cover; + -webkit-mask: ${( + isMobileDevice + ? 'linear-gradient(0deg, rgba(0, 0, 0, 0) 6.27%, rgba(0, 0, 0, 0.27) 15.48%, #000000 24.97%)' + : 'linear-gradient(90deg, #000000 79.51%, rgba(0, 0, 0, 0) 95.58%)' + )}; @keyframes sliderAnimation { 0% { @@ -256,7 +249,7 @@ export const DateInfo = styled(T9n)` font-size: 10px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.7); - padding: 0.7em 2.5rem;` + padding: 5px 10px;` : ''}; ` @@ -268,7 +261,7 @@ export const TournamentTitle = styled(T9n)` ${isMobileDevice ? css` font-size: 24px; - margin: 15px 0 0; + margin: 8px 0 0; ` : css` width: 50%; @@ -288,9 +281,8 @@ export const TournamentButton = styled(ButtonSolid)` ${isMobileDevice ? css` width: 100%; - border-radius: 10px; font-size: 17px; - padding: 20px 50px; + padding: 10px 0; margin-bottom: 0; ` : ''}; @@ -304,7 +296,9 @@ export const TournamentDescription = styled(T9n)` ${isMobileDevice ? css` font-size: 12px; - margin: 30px 0; + line-height: 150%; + letter-spacing: 0.1px; + margin: 25px 0 30px; ` : ''}; `