Translate invite code and start help page

app/pages/help.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
+const { t } = useI18n();
+const titleStore = useTitleStore();
+useHead({
+  title: t('layouts.title', {
+    title: t('page.help.title')
+  })
+});
+titleStore.title = t('page.help.head');
+
+// TODO: add help texts
+</script>
+
+<template>
+  <div>
+    <h1 class="text-3xl">
+      {{ t('page.help.title') }}
+    </h1>
+    <p>
+      {{ t('page.help.subtitle') }}
+    </p>
+    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <VaCard>
+        <VaCardTitle>PicHunt</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>tolle seite für fotosafaris</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Hunts</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>haben meistens zeitrahmen</p>
+          <p>abgaben danach können evtl nicht bewertet werden</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Teams</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>anmeldung pro user erforderlich!</p>
+          <p>dann einladecode an user teilen und beitreten</p>
+          <p>im team gemeinsam antworten abgeben</p>
+          <p>bei problemen admins ansprechen</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Quests</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>aufgabe, die mit foto zu lösen ist</p>
+          <p>manchmal ist auch antwortstext erforderlich</p>
+          <p>
+            manchmal gibts extra punkte, dann steht erklärt nach welchen
+            kriterien die vergeben werden
+          </p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard stripe stripe-color="primary">
+        <VaCardTitle>Answers</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>zusammen an antwort feilen "zwischenspeichern"</p>
+          <p>wird erst bewertet wenn finalisiert, dann nicht mehr änderbar</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard color="info">
+        <VaCardTitle>Reviews</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>
+            admin team bewertet über den zeitraum alle finalisierten antworten
+          </p>
+          <p>vergibt punkte und prüft auf richtige antworten</p>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard>
+        <VaCardTitle>Showcase</VaCardTitle>
+        <VaCardContent class="flex flex-col gap-2">
+          <p>
+            nach Hunt gibt es showcase der besten antworten und siegerehrung
+          </p>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </div>
+</template>