upd text (#3)

gear-foundation · Aug 30, 2023 · 3897ade · 3897ade
1 parent b193f52
commit 3897ade
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 53 deletions.
diff --git a/frontend/src/features/Main/components/Layout/Layout.module.scss b/frontend/src/features/Main/components/Layout/Layout.module.scss
@@ -2,66 +2,70 @@
 @use '~styles/mixins' as *;
 
 .content {
-    display: flex;
-    align-items: center;
-    // padding: 0 440px;
-    width: 940px;
-    margin: auto;
-    background: theme-var($background-primary);
+  display: flex;
+  align-items: center;
+  // padding: 0 440px;
+  width: 940px;
+  margin: auto;
+  background: theme-var($background-primary);
 
-    @include xl {
-        padding: 0 100px;
-      }
+  @include xl {
+    padding: 0 100px;
+  }
 
-    @include lg {
-        padding: 0 20px;
-      }
+  @include lg {
+    padding: 0 20px;
+  }
 
-      @include md {
-        flex-direction: column;
-        align-items: center;
-        padding: 50px 0;
-      }
+  @include md {
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 0;
+  }
 
-    @include wings;
+  @include wings;
 }
 
 .left {
-    padding: 80px 0 100px;
-    flex-basis: 50%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 24px;
+  padding: 80px 0 100px;
+  flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+
+  .main-title {
+    font-size: 40px;
+    font-weight: 500;
 
-    .main-title {
-        font-size: 40px;
-        font-weight: 500;
-
-        &-with-gradient {
-            background: linear-gradient(90deg, #2B2B2B 33.39%, #00FFC4 77.42%);
-            -webkit-background-clip: text;
-            background-clip: text; 
-            -webkit-text-fill-color: transparent;
-        }
+    &-with-gradient {
+      background: linear-gradient(90deg, #2b2b2b 33.39%, #00ffc4 77.42%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
-
-    .main-description {
-        max-width: 370px;
-        font-size: 18px;
-        font-weight: 400;
+  }
+
+  .main-description {
+    max-width: 370px;
+    font-size: 18px;
+    font-weight: 400;
+
+    > * + * {
+      margin-top: 14px;
     }
+  }
 }
 
 .right {
-    position: relative;
-    flex-basis: 50%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  position: relative;
+  flex-basis: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
-    .cars-pic {
-        max-width: 100%;
-        max-height: 100%;
-    }
-}
+  .cars-pic {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
diff --git a/frontend/src/features/Main/components/Layout/Layout.tsx b/frontend/src/features/Main/components/Layout/Layout.tsx
@@ -20,10 +20,15 @@ function Layout() {
     <div className={cx(styles.content)}>
       <div className={cx(styles.left)}>
         <h1 className={cx(styles['main-title'], styles['main-title-with-gradient'])}>Racing Car Game</h1>
-        <p className={cx(styles['main-description'])}>
-          A racing car game in which you compete not against a human, but against a smart contract. You will be given
-          the choice to either accelerate or shoot at the nearest car.
-        </p>
+        <div className={cx(styles['main-description'])}>
+         <p>
+           A racing car game in which you compete not against a human, but against a smart contract. You will be given
+           the choice to either accelerate or shoot at the nearest car.
+         </p>
+          <p>
+            To play the game you need to have at least 250 TVARA on your balance.
+          </p>
+        </div>
         <Button
           label={currentGame ? 'Continue Game' : 'Start the game'}
           variant="primary"