Merge pull request #11 from spothound/homepage-fix

Improve homepage

src/pages/homepage.vue

@@ -17,42 +17,39 @@ function setEloRange(min: number, max: number) {
 </script>
 
 <template>
-<v-container>
-  <v-row class="text-center">
-    <v-col cols="12">
-      <img src="@/assets/logo.png" alt="App logo" class="logo">
-    </v-col>
-  </v-row>
-  <v-row class="text-center">
-    <v-col cols="12">
-      <h1>The Pawn's Journey</h1>
-    </v-col>
-  </v-row>
-  <v-row class="text-center">
-    <v-col cols="12">
-      <p>This app is designed to help you train easy chess tactics in your browser. It uses <strong>puzzles from Lichess public database</strong>.</p>
-      <p>You can pick a level (elo range) and the app will let you play different puzzles for that level.</p>
-      <p>So far, all the logic/code of the app runs in your browser (not in a server, nor with a database), this means it won't store any data about your results (except locally in your browser storage data to know which ones you have solved). If you play on different devices you may get some puzzles that you have already played but since the purpose of this is practice, who cares.</p>
-      <p>If you like this project and want to support it, consider <a href="https://github.com/spothound/ThePawnsJourney" target="_blank">visiting the project in GitHub</a> and opening an issue/ticket, propose changes, etc; or send me an email to navarromoralesdev@gmail.com</p>
-      <v-btn href="https://www.buymeacoffee.com/fnavarro" target="_blank"><v-icon left>mdi-coffee</v-icon>Buy me a coffee</v-btn> if you find this website useful for your practice and want to thank me!
-    </v-col>
-  </v-row>
-  <v-row class="text-center">
-    <v-col cols="12">
-      <div class="text-h4">PICK AN ELO LEVEL</div>
-    </v-col>
-  </v-row>
-  <v-row class="text-center">
-    <v-col cols="12" sm="6" md="4" lg="3" xl="2" class="mx-auto mb-3" v-for="level in levels" :key="level">
-      <v-btn variant="outlined" @click="router.push(`/training_${level}`)">{{ level.replace('_','-') }}</v-btn>
-    </v-col>
-  </v-row>
-</v-container>
+  <v-container>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-card class="pa-2" outlined>
+          <v-img src="@/assets/logo.png" alt="App logo" class="logo" contain></v-img>
+          <v-card-title class="headline">Welcome to The Pawn's Journey</v-card-title>
+          <v-card-text>This app is designed to help you improve your chess tactics. It uses puzzles from the Lichess public database.</v-card-text>
+          <v-card-text>Select a level (elo range) and the app will provide puzzles suitable for that level.</v-card-text>
+          <v-card-text>All the app's logic runs in your browser, not on a server or with a database. This means it won't store any data about your results (except locally in your browser storage data to track which puzzles you've solved). If you play on different devices, you may see some puzzles you've already solved, but since the purpose of this app is practice, repetition is beneficial.</v-card-text>
+          <v-card-text>If you like this project and want to support it, consider <a href="https://github.com/spothound/ThePawnsJourney" target="_blank">visiting the project on GitHub</a> and opening an issue, proposing changes, etc. Alternatively, you can email me at navarromoralesdev@gmail.com</v-card-text>
+          <v-card-text>If you find this website useful and want to show your appreciation: </v-card-text><v-btn href="https://www.buymeacoffee.com/fnavarro" target="_blank" color="primary" dark><v-icon left>mdi-coffee</v-icon>Buy me a coffee</v-btn>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row class="text-center">
+      <v-col cols="12">
+        <v-card class="pa-2" outlined>
+          <v-card-title class="headline">Choose Your Elo Level</v-card-title>
+          <v-row>
+            <v-col cols="12" class="mx-auto mb-3" v-for="level in levels" :key="level">
+              <v-btn variant="outlined" @click="router.push(`/training_${level}`)" color="primary" dark>{{ level.replace('_','-') }}</v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <style scoped>
 .logo {
   width: 200px;
   height: 200px;
+  margin: auto;
 }
 </style>