feat(in-390): landing fixes

src/features/TournamentLanding/hooks.tsx

@@ -91,5 +91,6 @@ export const useTournamentLanding = () => {
     sliderItemId,
     teams: tournamentInfo?.teams,
     title,
+    tournamentInfo,
   }
 }

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 (

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<SliderImgProps>`
@@ -174,6 +161,12 @@ export const SliderImg = styled.img<SliderImgProps>`
   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)<ButtonProps>`
   ${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;
     `
     : ''};
 `