From 898f76387f3cb6111a11ee59b18896358d24ad43 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Mon, 17 Mar 2025 15:38:16 +0100
Subject: [PATCH] feat: deftige homepagina

---
 frontend/src/views/HomePage.vue | 176 +++++++++++++++++++++++++++++---
 1 file changed, 159 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index e9d53770..d9b9c967 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -1,28 +1,170 @@
 <script setup lang="ts">
-    import auth from "@/services/auth/auth-service.ts";
-    import apiClient from "@/services/api-client.ts";
     import { ref } from "vue";
+    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
+    import { useI18n } from "vue-i18n";
 
-    const testResponse = ref(null);
+    const { t, locale } = useI18n();
 
-    async function testAuthenticated() {
-        testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly");
-    }
+    const languages = ref([
+        { name: "English", code: "en" },
+        { name: "Nederlands", code: "nl" },
+        { name: "Deutsch", code: "de" },
+        { name: "français", code: "fr" },
+    ]);
+
+    // Logic to change the language of the website to the selected language
+    const changeLanguage = (langCode: string) => {
+        locale.value = langCode;
+        localStorage.setItem("user-lang", langCode);
+    };
 </script>
 
 <template>
     <main>
-        <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
-        <b>Welcome to the dwengo homepage</b>
-        <div v-if="auth.isLoggedIn.value">
-            <p>Hello {{ auth.authState.user?.profile.name }}!</p>
-            <p>
-                Your access token for the backend is: <code>{{ auth.authState.user?.access_token }}</code>
-            </p>
+        <div class="layout">
+            <div class="container_left">
+                <img :src="dwengoLogo" />
+                <h> {{ t("homeTitle") }}</h>
+                <p class="info">
+                    {{ t("homeIntroduction") }}
+                </p>
+                <v-btn
+                    size="large"
+                    density="comfortable"
+                    style="font-weight: bolder; color: white"
+                    color="#88BD28"
+                    to="/login"
+                >
+                    {{ t("login") }}
+                    <v-icon
+                        end
+                        size="x-large"
+                    >
+                        mdi-menu-right
+                    </v-icon>
+                </v-btn>
+            </div>
+            <div class="container_middle">
+                <div class="img_small">
+                    <v-img
+                        height="125"
+                        width="125"
+                        src="/assets/home/innovative.png"
+                    ></v-img>
+                    <h class="big">{{ t("innovative") }}</h>
+                </div>
+                <div class="img_small">
+                    <v-img
+                        height="125"
+                        width="125"
+                        src="/assets/home/research_based.png"
+                    ></v-img>
+                    <h class="big">{{ t("researchBased") }}</h>
+                </div>
+                <div class="img_small">
+                    <v-img
+                        height="125"
+                        width="125"
+                        src="/assets/home/inclusive.png"
+                    ></v-img>
+                    <h class="big">{{ t("sociallyRelevant") }}</h>
+                </div>
+                <div class="img_small">
+                    <v-img
+                        height="125"
+                        width="125"
+                        src="/assets/home/socially_relevant.png"
+                    ></v-img>
+                    <h class="big">{{ t("inclusive") }}</h>
+                </div>
+            </div>
+            <div class="container_right">
+                <v-menu open-on-hover>
+                    <template v-slot:activator="{ props }">
+                        <v-btn
+                            v-bind="props"
+                            icon
+                            variant="text"
+                        >
+                            {{ t("translate") }}
+                            <v-icon
+                                end
+                                icon="mdi-translate"
+                                size="small"
+                                color="#0e6942"
+                            ></v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list>
+                        <v-list-item
+                            v-for="(language, index) in languages"
+                            :key="index"
+                            @click="changeLanguage(language.code)"
+                        >
+                            <v-list-item-title>{{ language.name }}</v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </div>
         </div>
-
-        <v-btn @click="testAuthenticated">Send test request</v-btn>
-        <p v-if="testResponse">Response from the test request: {{ testResponse }}</p>
     </main>
 </template>
-<style scoped></style>
+<style scoped>
+    .layout {
+        display: flex;
+        width: 100vw;
+        height: 100vh;
+        position: relative;
+    }
+
+    .container_left {
+        width: 600px;
+        background-color: #f6faf2;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .container_middle {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .container_right {
+        position: absolute;
+        top: 2%;
+        right: 100px;
+    }
+
+    .img_small {
+        display: flex;
+        align-items: center;
+        margin: 20px;
+    }
+
+    img {
+        width: 300px;
+        margin-bottom: 10px;
+    }
+
+    h {
+        font-size: large;
+        font-weight: bold;
+        padding: 10px;
+    }
+
+    .big {
+        font-size: x-large;
+    }
+
+    .info {
+        text-align: center;
+        padding-bottom: 30px;
+    }
+</style>