add games page layout #156

components/GameThumbnail/GameThumbnail.module.scss

@@ -1,39 +1,90 @@
 .container {
-  // background-color: aqua;
+  width: 100%;
+  height: 184px;
   position: relative;
+  background-color: #ffffff;
+  border: 1px solid #E8E8E8;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1.6rem;
+  &:not(:last-child) {
+    margin-bottom: 1.2rem;
+  }
 
-  margin: 40px;
+  .row {
+    display: flex;
+    width: 100%;
+  }
 
-  @media (max-width: 576px) {
-    //display: flex;
-    margin: 20px 0 70px;
-    width: 290px;
-    height: 290px;
+  .cardInfo {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
   }
 
   .image {
     position: relative;
     width: 181px;
     height: 181px;
+    margin-right: 1rem;
 
-    // margin: 0 0 20px;
-    padding: 78px 59px 77px 58px;
+    // padding: 78px 59px 77px 58px;
     border-radius: 10px;
     overflow: hidden;
-    // background-color: var(--gray-lightest);
 
-    @media (max-width: 576px) {
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      //height: auto;
+    @media (max-width: 768px) {
+      width: 64px;
+      height: 64px;
     }
   }
 
   .name {
-    font-size: 26px;
-    font-weight: bold;
-    padding: 20px 0;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+  color: #2E303D;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 6px;
+    margin-top: auto;
 
+    button {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 14px 4px 14px;
+
+
+      background: linear-gradient(225.67deg, #8DC8E9 3.57%, #8C5AE3 115.97%);
+      border-radius: 60px;
+      font-family: 'Inter';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 1.5rem;
+      color: #FFFFFF;
+
+      .users {
+        margin-left: 9px;
+        background-image: url(../../public/images/users.png);
+        background-repeat: no-repeat;
+        margin-top: -1px;
+        width: 17px;
+        height: 11px;
+      }
+
+      .play {
+        margin-left: 9px;
+        background-image: url(../../public/images/play.png);
+        background-repeat: no-repeat;
+        width: 10px;
+        height: 10px;
+      }
+    }
   }
 }

components/GameThumbnail/GameThumbnail.tsx

@@ -2,17 +2,28 @@ import { GameThumbnailPropsI } from './GameThumbnailProps';
 import Image from 'next/image';
 import styles from './GameThumbnail.module.scss';
 import Link from 'next/link';
-export const GameThumbnail: React.FC<GameThumbnailPropsI> = ({ name, image, url }) => {
+export const GameThumbnail: React.FC<GameThumbnailPropsI> = ({ name, image, url, description }) => {
   return (
     <div className={styles.container}>
-      <Link href={url}>
-        <a>
-          <div className={styles.name}>{name}</div>
-          <div className={styles.image}>
+      <div className={styles.row}>
+        <div className={styles.image}>
             <Image src={image} layout="fill" />
-          </div>
+        </div>
+        <div className={styles.cardInfo}>
+        <div className={styles.name}>{name}</div>
+        <div className={styles.description}>{description}</div>
+        </div>
+      </div>
+      {/* <Link href={url}>
+        <a>
+          
+          
         </a>
-      </Link>
+      </Link> */}
+      <div className={styles.buttons}>
+        <button>Join <div className={styles.users}></div></button>
+        <button>Start new game <div className={styles.play}></div></button>
+      </div>
     </div>
   );
 };

components/GameThumbnail/GameThumbnailProps.ts

@@ -3,4 +3,5 @@ export interface GameThumbnailPropsI {
   name: string;
   image: string;
   url: string;
+  description: string;
 }

data/games.json

@@ -1,4 +1,4 @@
 [
-  { "name": "checkers", "image": "/images/checkers.png", "url": "checkers" },
-  { "name": "ticTacToe", "image": "/images/tictaktoe.png", "url": "tic-tac-toe" }
+  { "name": "checkers", "image": "/images/checkers.png", "url": "checkers", "description":  "Classic board game for a visual demonstration of the protocol"},
+  { "name": "ticTacToe", "image": "/images/tictaktoe.png", "url": "tic-tac-toe", "description": "Fast game for fast demonstration of protocol"}
 ]

i18n/locales/en.ts

@@ -24,8 +24,8 @@ const en = {
       },
     },
     gameTypePage: {
-      title: 'Choose a game demo',
-      description: 'Experience the protocol yourself. It just works. ✨',
+      title: 'Try it yourself!',
+      description: 'Experience the protocol. It just works. ✨',
       games: {
         ticTacToe: 'Tic-Tac-Toe',
         checkers: 'Checkers',

pages/games/games.module.scss

@@ -1,42 +1,28 @@
 .container {
-  padding: 100px;
-  text-align: center;
-
-  @media (max-width: 576px) {
-    padding: 40px 10px;
-  }
+  padding: 50px 10px;
 
   .title {
-    font-size: 42px;
-    font-weight: bold;
-
-    @media (max-width: 576px) {
-      font-size: 33px;
-    }
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    color: #2E303D;
   }
   .description {
-    font-size: 26px;
-    font-weight: normal;
-    padding-left: 10px;
-    padding-top: 20px;
-
-    @media (max-width: 576px) {
-      font-size: 22px;
-      padding-left: 0 ;
-      padding-top: 10px;
-    }
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 130%;
+    color: #9C9EAB;
+    margin-bottom: 10px;
   }
 
   .gamelist {
     display: flex;
     justify-content: center;
-
-    padding: 20px;
-
-    @media (max-width: 576px) {
-      padding: 0 20px 20px;
-      align-items: center;
-      flex-direction: column;
-    }
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 10px;
   }
 }

pages/games/index.tsx

@@ -28,10 +28,12 @@ const GamesPage: NextPage<IGamesPageProps> = ({ games }) => {
                 {...game}
                 name={t(`gameTypePage.games.${game.name}`)}
                 url={address ? `/games/${game.url}?select=true` : `/connect?game=${game.url}`}
+                description='1'
               />
             );
           })}
       </div>
+      <div className={styles.description}>To start or join the game, you will need to make a transaction</div>
     </div>
   );
 };