From 3137e25aaf3683899b3f223b8ae3a5645b3ebbd3 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 13 Dec 2023 16:57:19 +0100
Subject: [PATCH] Style guest page

---
 client/src/pages/GuestStartPage.vue | 78 +++++++++++++++--------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/client/src/pages/GuestStartPage.vue b/client/src/pages/GuestStartPage.vue
index 3dddd436..d4c367e0 100644
--- a/client/src/pages/GuestStartPage.vue
+++ b/client/src/pages/GuestStartPage.vue
@@ -1,50 +1,52 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div>
+  <div class="bg-gray-200">
     <section class="bg-blue-900 text-white">
       <div class="container-medium px-4 pb-16 pt-10 lg:px-8">
-        <h2>Die Lernumgebung für die Versicherungsbranche</h2>
+        <h2>{{ $t("start.myvbvDescription") }}</h2>
       </div>
     </section>
-    <main class="bg-gray-200 lg:px-12 lg:py-12">
+    <main class="lg:px-12 lg:py-12">
       <div class="container-medium">
-        <h3 class="mb-8 text-blue-900">Wähle jetzt deinen Lehrgang aus:</h3>
+        <h3 class="mb-8 text-blue-900">{{ $t("start.chooseCourse") }}</h3>
 
-        <div class="mb-16 flex items-center gap-x-8">
-          <img
-            class="h-72"
-            src="../assets/images/mood_vv.jpg"
-            alt="Versicherungsvermittler"
-          />
-          <div class="space-y-2">
-            <h4 class="text-lg font-bold">Versicherungsvermittler/-in</h4>
-            <p>
-              Der Lehrgang und die Prüfung zum Erwerb des Verbandszertifikats als
-              Versicherungs-vermittler/-in.
-            </p>
-            <router-link class="btn-primary" :to="{ name: 'vvStart' }">
-              Mehr erfahren
-            </router-link>
-          </div>
-        </div>
-        <div class="flex items-center gap-x-8">
-          <div class="space-y-2">
-            <h4 class="text-lg font-bold">Überbetriebliche Kurse</h4>
-            <p>
-              Die überbetrieblichen Kurse der kaufmännischen Ausbildungs- und
-              Prüfungsbranche «Privatversicherung».
-            </p>
-            <router-link class="btn-primary" :to="{ name: 'ukStart' }">
-              Mehr erfahren
-            </router-link>
-          </div>
-          <img
-            class="h-72"
-            src="../assets/images/mood_uk.jpg"
-            alt="Versicherungsvermittler"
-          />
-        </div>
+        <ul>
+          <li class="mb-16 flex items-center gap-x-8">
+            <img
+              class="hidden h-72 md:block"
+              src="../assets/images/mood_vv.jpg"
+              alt="Versicherungsvermittler"
+            />
+            <div class="space-y-2">
+              <h4 class="text-lg font-bold">
+                {{ $t("a.Versicherungsvermittler/-in") }}
+              </h4>
+              <p>
+                {{ $t("start.vvDescription") }}
+              </p>
+              <router-link class="btn-primary" :to="{ name: 'vvStart' }">
+                {{ $t("a.Mehr erfahren") }}
+              </router-link>
+            </div>
+          </li>
+          <li class="flex items-center gap-x-8">
+            <div class="space-y-2">
+              <h4 class="text-lg font-bold">{{ $t("start.ukTitle") }}</h4>
+              <p>
+                {{ $t("start.ukDescription") }}
+              </p>
+              <router-link class="btn-primary" :to="{ name: 'ukStart' }">
+                {{ $t("a.Mehr erfahren") }}
+              </router-link>
+            </div>
+            <img
+              class="hidden h-72 md:block"
+              src="../assets/images/mood_uk.jpg"
+              alt="Versicherungsvermittler"
+            />
+          </li>
+        </ul>
       </div>
     </main>
   </div>