add a description in the app main page

bouncy_frontend/src/lib/i18n/de-CH.json

@@ -4,11 +4,15 @@
     },
     "home": {
         "title": "Bouncy Feet!",
+        "description0": "Willkommen in der Tanzapp Bouncy Feet. Die App unterstützt dich dabei, Shuffle Schritte zu vertiefen.",
+        "description1": "Platziere dein Telefon so, dass die Kamera deinen ganzen Körper beim Tanzen sieht. Dann tanzt du Freestyle und die App versucht die Schritte zu erkennen.",
+        "description2": "Diese Version von Bouncy Feet ist ein Prototyp. Die Inhalte sind sehr begrenzt und noch nicht wirklich ausgereift. Falls du Probleme mit der App hast, öffne bitte ein Issue auf GitHub.",
+        "go-button": "Los gehts",
         "nav": "Home",
         "steps": "Schritte"
     },
     "leaderboard": {
-        "user-header": "Tänzer",
+        "user-header": "Tänzer/in",
         "steps-header": "Schritte"
     },
     "learn": {

bouncy_frontend/src/lib/i18n/en-GB.json

@@ -4,6 +4,10 @@
     },
     "home": {
         "title": "Bouncy Feet!",
+        "description0": "Welcome to the dance app Bouncy Feet. The app supports you in your shuffle dance journey.",
+        "description1": "Place your phone so that the camera can see your whole body while you dance. Then record your dance session, and the app will try to detect the steps.",
+        "description2": "This is an early, pre-alpha version of Bouncy Feet. The content is very limited and unpolished. If you run into issues with the app, please open an issue on GitHub.",
+        "go-button": "Let's Go",
         "nav": "Home",
         "steps": "Steps"
     },

bouncy_frontend/src/routes/+page.svelte

@@ -1,6 +1,37 @@
 <script>
   import { t } from '$lib/i18n.js';
+  import { base } from '$app/paths';
 </script>
 
 <h1>{$t('home.title')}</h1>
 
+<p>{$t('home.description0')}</p>
+<p>{$t('home.description1')}</p>
+<p>
+  {$t('home.description2')}
+  <a href="https://github.com/jakmeier/bouncy-feet/issues">
+    GitHub Issue Tracker
+  </a>
+</p>
+
+<div style="text-align: center;">
+  <a href="{base}/record">
+    <button>
+      <span class="material-symbols-outlined"> directions_walk </span>
+      <p>{$t('home.go-button')}</p>
+    </button>
+  </a>
+</div>
+
+<style>
+  button {
+    width: min(50vw, 250px);
+    height: min(50vw, 200px);
+  }
+  button span {
+    font-size: min(20vw, 100px);
+  }
+  button p {
+    font-size: 20px;
+  }
+</style>