From 9eee55cbbf14a4a82e2cde9b190552bf79321898 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 14 Dec 2023 13:32:50 +0100
Subject: [PATCH] Style start pages

---
 .../src/components/start/StartPageFooter.vue  | 16 ++++
 client/src/pages/UKStartPage.vue              | 15 ---
 client/src/pages/VVStartPage.vue              | 30 ------
 .../src/pages/{ => start}/GuestStartPage.vue  | 14 ++-
 client/src/pages/start/UKStartPage.vue        | 82 ++++++++++++++++
 client/src/pages/start/VVStartPage.vue        | 96 +++++++++++++++++++
 client/src/router/index.ts                    |  7 +-
 client/tailwind.css                           | 21 ++++
 8 files changed, 228 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/start/StartPageFooter.vue
 delete mode 100644 client/src/pages/UKStartPage.vue
 delete mode 100644 client/src/pages/VVStartPage.vue
 rename client/src/pages/{ => start}/GuestStartPage.vue (82%)
 create mode 100644 client/src/pages/start/UKStartPage.vue
 create mode 100644 client/src/pages/start/VVStartPage.vue

diff --git a/client/src/components/start/StartPageFooter.vue b/client/src/components/start/StartPageFooter.vue
new file mode 100644
index 00000000..733c18a4
--- /dev/null
+++ b/client/src/components/start/StartPageFooter.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="border-t border-b-gray-300 bg-none sm:bg-[url('/static/icons/vbv_questionmark.svg')] sm:bg-[length:400px_auto] sm:bg-right sm:bg-no-repeat"
+  >
+    <div class="container-large flex flex-row pb-4 lg:pb-10">
+      <div class="my-32">
+        <h2 class="mb-3">{{ $t("Hast du Fragen?") }}</h2>
+        <p class="non-italic">
+          <slot></slot>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/pages/UKStartPage.vue b/client/src/pages/UKStartPage.vue
deleted file mode 100644
index 297075d6..00000000
--- a/client/src/pages/UKStartPage.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main class="bg-gray-200 lg:px-12 lg:py-12">
-    <div class="container-medium">
-      <h2 class="mb-8 text-blue-900">{{ $t("a.Überbetriebliche Kurse") }}</h2>
-      <router-link
-        class="btn-primary"
-        :to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
-      >
-        {{ $t("a.Jetzt mit Lehrgang starten") }}
-      </router-link>
-    </div>
-  </main>
-</template>
diff --git a/client/src/pages/VVStartPage.vue b/client/src/pages/VVStartPage.vue
deleted file mode 100644
index e8fb3d1c..00000000
--- a/client/src/pages/VVStartPage.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <main class="bg-gray-200 lg:px-12 lg:py-12">
-    <div class="container-medium">
-      <router-link
-        class="btn-primary"
-        :to="{ name: 'accountCreate', params: { courseType: 'vv-de' } }"
-      >
-        VV in Deutsch
-      </router-link>
-    </div>
-    <div class="container-medium">
-      <router-link
-        class="btn-primary"
-        :to="{ name: 'accountCreate', params: { courseType: 'vv-fr' } }"
-      >
-        VV in Französisch
-      </router-link>
-    </div>
-    <div class="container-medium">
-      <router-link
-        class="btn-primary"
-        :to="{ name: 'accountCreate', params: { courseType: 'vv-it' } }"
-      >
-        VV in Italienisch
-      </router-link>
-    </div>
-  </main>
-</template>
diff --git a/client/src/pages/GuestStartPage.vue b/client/src/pages/start/GuestStartPage.vue
similarity index 82%
rename from client/src/pages/GuestStartPage.vue
rename to client/src/pages/start/GuestStartPage.vue
index d4c367e0..73b4c874 100644
--- a/client/src/pages/GuestStartPage.vue
+++ b/client/src/pages/start/GuestStartPage.vue
@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useTranslation } from "i18next-vue";
+
+const { t } = useTranslation();
+</script>
 
 <template>
   <div class="bg-gray-200">
@@ -15,8 +19,8 @@
           <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"
+              src="../../assets/images/mood_vv.jpg"
+              :alt="t('a.Versicherungsvermittler/-in')"
             />
             <div class="space-y-2">
               <h4 class="text-lg font-bold">
@@ -42,8 +46,8 @@
             </div>
             <img
               class="hidden h-72 md:block"
-              src="../assets/images/mood_uk.jpg"
-              alt="Versicherungsvermittler"
+              src="../../assets/images/mood_uk.jpg"
+              :alt="t('start.ukTitle')"
             />
           </li>
         </ul>
diff --git a/client/src/pages/start/UKStartPage.vue b/client/src/pages/start/UKStartPage.vue
new file mode 100644
index 00000000..79c65ea9
--- /dev/null
+++ b/client/src/pages/start/UKStartPage.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import StartPageFooter from "@/components/start/StartPageFooter.vue";
+import { useTranslation } from "i18next-vue";
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <div>
+    <div class="mb-10 bg-gray-200 pb-4 lg:pb-10">
+      <div class="container-large">
+        <nav class="py-4">
+          <router-link
+            class="btn-text inline-flex items-center pl-0"
+            :to="{ name: 'start' }"
+          >
+            <it-icon-arrow-left />
+            <span>{{ $t("general.back") }}</span>
+          </router-link>
+        </nav>
+        <h1 class="mb-4 lg:mb-8" data-cy="hf-title">
+          {{ $t("a.Überbetriebliche Kurse") }}
+        </h1>
+        <p>{{ $t("start.ukDescription") }}</p>
+      </div>
+    </div>
+    <main class="container-large pb-4 lg:pb-10">
+      <div class="flex flex-row gap-10">
+        <img
+          class="hidden object-cover md:block md:h-[350px] md:w-[350px] lg:h-[500px] lg:w-[500px]"
+          src="../../assets/images/mood_uk.jpg"
+          :alt="t('start.ukTitle')"
+        />
+        <div>
+          <div class="mx-auto mb-8 mt-0 p-0 lg:mt-8 lg:p-4">
+            <h2 class="mb-4 text-2xl font-semibold">
+              So startest du mit diesem Lehrgang:
+            </h2>
+            <ol class="circle-numbered-list">
+              <li>
+                <span class="font-bold">{{ $t("a.Konto erstellen") }}:</span>
+                {{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
+              </li>
+              <li class="relative pl-8">
+                <span class="font-bold">{{ $t("a.Profil ergänzen") }}:</span>
+                {{
+                  $t("Füge dein Profilbild hinzu und ergänze die fehlenden Angaben.")
+                }}
+              </li>
+              <li class="relative pl-8">
+                <span class="font-bold">{{ $t("a.An Durchführung teilnehmen") }}:</span>
+                {{
+                  $t("Sobald du einer Durchführung zugewiesen bist, ist alles bereit.")
+                }}
+              </li>
+            </ol>
+            <div class="mt-4 flex space-x-2">
+              <p>{{ $t("Sprache wählen und Lehrgang starten") }}:</p>
+              <div>
+                <router-link
+                  class="btn-primary"
+                  :to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
+                >
+                  {{ $t("a.Jetzt mit Lehrgang starten") }}
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <StartPageFooter>
+      {{ $t("uk.contact.title") }}
+      <br />
+      {{ $t("uk.contact.team") }}
+      <br />
+      {{ $t("uk.contact.address") }}
+      <br />
+      <a class="link" href="mailto:uek-support@vbv-afa.ch">uek-support@vbv-afa.ch</a>
+    </StartPageFooter>
+  </div>
+</template>
diff --git a/client/src/pages/start/VVStartPage.vue b/client/src/pages/start/VVStartPage.vue
new file mode 100644
index 00000000..3d7ba6fc
--- /dev/null
+++ b/client/src/pages/start/VVStartPage.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { useTranslation } from "i18next-vue";
+import StartPageFooter from "@/components/start/StartPageFooter.vue";
+
+const { t } = useTranslation();
+</script>
+
+<template>
+  <div>
+    <div class="mb-10 bg-gray-200 pb-4 lg:pb-10">
+      <div class="container-large">
+        <nav class="py-4">
+          <router-link
+            class="btn-text inline-flex items-center pl-0"
+            :to="{ name: 'start' }"
+          >
+            <it-icon-arrow-left />
+            <span>{{ $t("general.back") }}</span>
+          </router-link>
+        </nav>
+        <h1 class="mb-4 lg:mb-8" data-cy="hf-title">
+          {{ $t("a.Versicherungsvermittler/-in") }}
+        </h1>
+        <p>{{ $t("start.vvDescription") }}</p>
+      </div>
+    </div>
+    <main class="container-large pb-4 lg:pb-10">
+      <div class="flex flex-row gap-10">
+        <img
+          class="hidden object-cover md:block md:h-[350px] md:w-[350px] lg:h-[500px] lg:w-[500px]"
+          src="../../assets/images/mood_vv.jpg"
+          :alt="t('a.Versicherungsvermittler/-in')"
+        />
+        <div>
+          <div class="mx-auto mb-8 mt-0 p-0 lg:mt-8 lg:p-4">
+            <h2 class="mb-4 text-2xl font-semibold">
+              So startest du mit diesem Lehrgang:
+            </h2>
+            <ol class="circle-numbered-list">
+              <li>
+                <span class="font-bold">{{ $t("a.Konto erstellen") }}:</span>
+                {{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
+              </li>
+              <li class="relative pl-8">
+                <span class="font-bold">{{ $t("a.Profil ergänzen") }}:</span>
+                {{
+                  $t("Füge dein Profilbild hinzu und ergänze die fehlenden Angaben.")
+                }}
+              </li>
+              <li class="relative pl-8">
+                <span class="font-bold">{{ $t("a.Lehrgang kaufen") }}:</span>
+                {{
+                  $t(
+                    "Der Preis für den Lehrgang «Versicherungsvermittler-/in VBV» beträgt CHF 300 exkl. MWSt.. Mit dem Kauf erhältst du Zugang zum Lernpfad und den Lernmedien."
+                  )
+                }}
+              </li>
+            </ol>
+            <div class="mt-4">
+              <p class="mb-2">{{ $t("Sprache wählen und Lehrgang starten") }}:</p>
+              <div class="flex flex-col gap-4 md:flex-row">
+                <router-link
+                  class="btn-primary"
+                  :to="{ name: 'accountCreate', params: { courseType: 'vv-de' } }"
+                >
+                  {{ $t("a.Deutsch") }}
+                </router-link>
+                <router-link
+                  class="btn-primary"
+                  :to="{ name: 'accountCreate', params: { courseType: 'vv-fr' } }"
+                >
+                  {{ $t("a.Franzosisch") }}
+                </router-link>
+                <router-link
+                  class="btn-primary"
+                  :to="{ name: 'accountCreate', params: { courseType: 'vv-it' } }"
+                >
+                  {{ $t("a.Italienisch") }}
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <StartPageFooter>
+      {{ $t("uk.contact.title") }}
+      <br />
+      {{ $t("vv.contact.team") }}
+      <br />
+      {{ $t("uk.contact.address") }}
+      <br />
+      <a class="link" href="mailto:vermittler@vbv-afa.ch">vermittler@vbv-afa.ch</a>
+    </StartPageFooter>
+  </div>
+</template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index ea8d4462..1d0d0ec7 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,8 +1,8 @@
-import GuestStartPage from "@/pages/GuestStartPage.vue";
 import LoginPage from "@/pages/LoginPage.vue";
-import UKStartPage from "@/pages/UKStartPage.vue";
-import VVStartPage from "@/pages/VVStartPage.vue";
 import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
+import GuestStartPage from "@/pages/start/GuestStartPage.vue";
+import UKStartPage from "@/pages/start/UKStartPage.vue";
+import VVStartPage from "@/pages/start/VVStartPage.vue";
 import {
   handleCourseSessionAsQueryParam,
   handleCurrentCourseSession,
@@ -25,6 +25,7 @@ const router = createRouter({
   routes: [
     {
       path: "/start",
+      name: "start",
       component: GuestStartPage,
       meta: {
         public: true,
diff --git a/client/tailwind.css b/client/tailwind.css
index f7e61624..1c7a9ee7 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -158,6 +158,27 @@ textarea {
   .btn-large-icon {
     @apply flex items-center px-6 py-3 text-xl font-bold;
   }
+
+  .circle-numbered-list {
+    @apply my-8 list-outside list-decimal list-none pl-0;
+    counter-reset: list-counter;
+  }
+
+  .circle-numbered-list li {
+    @apply relative mb-8 pl-10;
+    counter-increment: list-counter;
+  }
+
+  .circle-numbered-list li:last-of-type {
+    @apply mb-0;
+  }
+
+  .circle-numbered-list li::before {
+    content: counter(list-counter);
+    @apply absolute left-0 flex h-6 w-6 items-center justify-center rounded-full border border-gray-500 text-sm;
+    top: 1rem;
+    transform: translateY(-50%);
+  }
 }
 
 @layer utilities {