From 3b86b04de270d7a08a948e443cf3dc5a5b43376c Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Thu, 1 Feb 2024 11:39:49 +0100
Subject: [PATCH] feat: add link to explaination video

---
 client/src/pages/index.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 2606be7..a6382f7 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-index__page">
     <TitleBox />
     <div class="page-index__action-box">
       <div class="page-index__space" />
@@ -12,6 +12,18 @@
       </div>
       <div class="page-index__space" />
     </div>
+    <div class="page-index__video">
+      <a 
+        href="https://www.sirlab.de/knowyt/know-your-teammates.mp4"
+        target="_blank" rel="noopener"
+      >
+      <Button :border="false">
+        <div class="page-index__video-text">{{ $t('video1') }}</div>
+        <div class="page-index__video-description">{{ $t('video2') }}</div>
+      </Button>
+      
+      </a>
+    </div>
     <CopyrightNotice />
     <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
   </div>
@@ -25,6 +37,8 @@ import CopyrightNotice from '../components/CopyrightNotice.vue';
 
 const { $t } = useI18n({
   'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
+  'video1': { en: 'watch video', de: 'Video ansehen' },
+  'video2': { en: '(3:30mins)', de: '(3:30min, english)' },
 })
 
 await useAuth().authenticateAndLoadUserInfo([''])
@@ -45,6 +59,11 @@ body {
 }
 
 .page-index {
+  &__page {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__action-box {
     display: flex;
     width: 100%;
@@ -84,5 +103,14 @@ body {
   &__space {
     flex-grow: 1;
   }
+
+  &__video {
+    margin: 48px 0;
+    align-self: center;
+
+    &-description {
+      font-size: 16px;
+    }
+  }
 }
 </style>
\ No newline at end of file