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 1/8] 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>

From ea73ada5d1c20e154c3ea3b8f8476df7a22c7dae Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Mon, 17 Mar 2025 15:38:27 +0100
Subject: [PATCH 2/8] feat: homepagina beschikbaar in 4 talen

---
 frontend/src/i18n/locale/de.json | 8 +++++++-
 frontend/src/i18n/locale/en.json | 8 +++++++-
 frontend/src/i18n/locale/fr.json | 8 +++++++-
 frontend/src/i18n/locale/nl.json | 8 +++++++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index a1a699e5..b056b7db 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -1,3 +1,9 @@
 {
-    "welcome": "Willkommen"
+    "welcome": "Willkommen",
+    "homeTitle": "Unsere Stärken",
+    "homeIntroduction": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.\nWir fügen kontinuierlich neue Projekte und Methoden zu all unseren Projekten hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und wir achten immer auf Inklusivität.",
+    "innovative": "Innovativ",
+    "researchBased": "Forschungsbasiert",
+    "inclusive": "Inclusiv",
+    "sociallyRelevant": "Gesellschaftlich relevant"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index c75bfc5d..fe5ef667 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -5,5 +5,11 @@
     "assignments": "assignments",
     "classes": "classes",
     "discussions": "discussions",
-    "logout": "log out"
+    "logout": "log out",
+    "homeTitle": "Our strengths",
+    "homeIntroduction": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students. \nWe continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
+    "innovative": "Innovative",
+    "researchBased": "Research-based",
+    "inclusive": "Inclusive",
+    "sociallyRelevant": "Socially relevant"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 86fe964d..4d7e9651 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -1,3 +1,9 @@
 {
-    "welcome": "Bienvenue"
+    "welcome": "Bienvenue",
+    "homeTitle": "Nos atouts",
+    "homeIntroduction": "Nous développons des ateliers innovants et des ressources éducatives, et nous les fournissons aux étudiants du monde entier en collaboration avec les enseignants et les bénévoles.Nos séances de train-Trainer leur permettent d'amener nos ateliers pratiques aux étudiants. Nous ajoutons toujours de nouveaux projets et méthodologies à tous nos projets.Nous recherchons toujours un thème socialement pertinent pour ces projets.De plus, nous nous assurons toujours que notre matériel didactique est basé sur la recherche scientifique et nous gardons également un œil sur l'inclusivité.",
+    "innovative": "Innovatif",
+    "researchBased": "Fondé sur la recherche",
+    "inclusive": "Inclusif",
+    "sociallyRelevant": "Socialement pertinent"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 97ec9b49..fe68e474 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -5,5 +5,11 @@
     "assignments": "opdrachten",
     "classes": "klassen",
     "discussions": "discussies",
-    "logout": "log uit"
+    "logout": "log uit",
+    "homeTitle": "Verrijk je lessen met AI en robotica!",
+    "homeIntroduction": "Al onze pakketten zijn gebruiksvriendelijk, maatschappelijk relevant, wetenschappelijk onderbouwd, én inclusief. Leerkrachten over de hele wereld gingen hiermee reeds aan de slag. Jij ook? Verken de lesthema's op onze website!",
+    "innovative": "Innovatief",
+    "researchBased": "Onderzoeksgedreven",
+    "inclusive": "Inclusief",
+    "sociallyRelevant": "Maatschappelijk relevant"
 }

From 0938e749a745190e324ec9665d5498a54957c325 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Mon, 17 Mar 2025 17:02:32 +0100
Subject: [PATCH 3/8] fix: alles wordt vertaald

---
 frontend/src/i18n/locale/de.json | 4 +++-
 frontend/src/i18n/locale/en.json | 4 +++-
 frontend/src/i18n/locale/fr.json | 4 +++-
 frontend/src/i18n/locale/nl.json | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index b056b7db..bdb12331 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -5,5 +5,7 @@
     "innovative": "Innovativ",
     "researchBased": "Forschungsbasiert",
     "inclusive": "Inclusiv",
-    "sociallyRelevant": "Gesellschaftlich relevant"
+    "sociallyRelevant": "Gesellschaftlich relevant",
+    "login": "login",
+    "translate": "übersetzen"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index fe5ef667..a07a0e8b 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -11,5 +11,7 @@
     "innovative": "Innovative",
     "researchBased": "Research-based",
     "inclusive": "Inclusive",
-    "sociallyRelevant": "Socially relevant"
+    "sociallyRelevant": "Socially relevant",
+    "login": "login",
+    "translate": "translate"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 4d7e9651..4ab34eaf 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -5,5 +5,7 @@
     "innovative": "Innovatif",
     "researchBased": "Fondé sur la recherche",
     "inclusive": "Inclusif",
-    "sociallyRelevant": "Socialement pertinent"
+    "sociallyRelevant": "Socialement pertinent",
+    "login": "login",
+    "translate": "traduire"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index fe68e474..2e04b428 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -11,5 +11,7 @@
     "innovative": "Innovatief",
     "researchBased": "Onderzoeksgedreven",
     "inclusive": "Inclusief",
-    "sociallyRelevant": "Maatschappelijk relevant"
+    "sociallyRelevant": "Maatschappelijk relevant",
+    "login": "inloggen",
+    "translate": "vertalen"
 }

From 68db1b89be3894fc313b7942afe4012a0e928e27 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Mon, 17 Mar 2025 17:03:44 +0100
Subject: [PATCH 4/8] style: responsive css

---
 frontend/src/views/HomePage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index d9b9c967..fa2c2e32 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -115,6 +115,7 @@
         width: 100vw;
         height: 100vh;
         position: relative;
+        flex-wrap: wrap;
     }
 
     .container_left {

From 93cad5da9827c1ed05b9b4c3bfd21912ede38999 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Mon, 17 Mar 2025 20:09:16 +0100
Subject: [PATCH 5/8] fix: vertalingen met elkaar doen overeenkomen en
 vertaling van Joyelle toegevoegd

---
 frontend/src/i18n/locale/de.json | 11 +++++++++--
 frontend/src/i18n/locale/en.json |  3 ++-
 frontend/src/i18n/locale/fr.json | 11 +++++++++--
 frontend/src/i18n/locale/nl.json |  5 +++--
 frontend/src/views/HomePage.vue  |  3 ++-
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index bdb12331..eebe52d4 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -1,11 +1,18 @@
 {
     "welcome": "Willkommen",
+    "student": "schüler",
+    "teacher": "lehrer",
+    "assignments": "aufgaben",
+    "classes": "klasses",
+    "discussions": "diskussionen",
+    "login": "einloggen",
+    "logout": "ausloggen",
     "homeTitle": "Unsere Stärken",
-    "homeIntroduction": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.\nWir fügen kontinuierlich neue Projekte und Methoden zu all unseren Projekten hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und wir achten immer auf Inklusivität.",
+    "homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
+    "homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
     "innovative": "Innovativ",
     "researchBased": "Forschungsbasiert",
     "inclusive": "Inclusiv",
     "sociallyRelevant": "Gesellschaftlich relevant",
-    "login": "login",
     "translate": "übersetzen"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index a07a0e8b..29a25030 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -7,7 +7,8 @@
     "discussions": "discussions",
     "logout": "log out",
     "homeTitle": "Our strengths",
-    "homeIntroduction": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students. \nWe continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
+    "homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
+    "homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
     "innovative": "Innovative",
     "researchBased": "Research-based",
     "inclusive": "Inclusive",
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 4ab34eaf..401ae56c 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -1,11 +1,18 @@
 {
     "welcome": "Bienvenue",
+    "student": "élève",
+    "teacher": "enseignant",
+    "assignments": "travails",
+    "classes": "classes",
+    "discussions": "discussions",
+    "login": "se connecter",
+    "logout": "se déconnecter",
     "homeTitle": "Nos atouts",
-    "homeIntroduction": "Nous développons des ateliers innovants et des ressources éducatives, et nous les fournissons aux étudiants du monde entier en collaboration avec les enseignants et les bénévoles.Nos séances de train-Trainer leur permettent d'amener nos ateliers pratiques aux étudiants. Nous ajoutons toujours de nouveaux projets et méthodologies à tous nos projets.Nous recherchons toujours un thème socialement pertinent pour ces projets.De plus, nous nous assurons toujours que notre matériel didactique est basé sur la recherche scientifique et nous gardons également un œil sur l'inclusivité.",
+    "homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
+    "homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
     "innovative": "Innovatif",
     "researchBased": "Fondé sur la recherche",
     "inclusive": "Inclusif",
     "sociallyRelevant": "Socialement pertinent",
-    "login": "login",
     "translate": "traduire"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 2e04b428..0db2c08f 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -6,8 +6,9 @@
     "classes": "klassen",
     "discussions": "discussies",
     "logout": "log uit",
-    "homeTitle": "Verrijk je lessen met AI en robotica!",
-    "homeIntroduction": "Al onze pakketten zijn gebruiksvriendelijk, maatschappelijk relevant, wetenschappelijk onderbouwd, én inclusief. Leerkrachten over de hele wereld gingen hiermee reeds aan de slag. Jij ook? Verken de lesthema's op onze website!",
+    "homeTitle": "Onze sterke punten",
+    "homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
+    "homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",
     "innovative": "Innovatief",
     "researchBased": "Onderzoeksgedreven",
     "inclusive": "Inclusief",
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index fa2c2e32..1e150270 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -26,8 +26,9 @@
                 <img :src="dwengoLogo" />
                 <h> {{ t("homeTitle") }}</h>
                 <p class="info">
-                    {{ t("homeIntroduction") }}
+                    {{ t("homeIntroduction1") }}
                 </p>
+                <p class="info">{{ t("homeIntroduction2") }}</p>
                 <v-btn
                     size="large"
                     density="comfortable"

From 1b47439c75f13586f2d31bee6173b21ea522cabf Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 09:27:22 +0100
Subject: [PATCH 6/8] style: whitespace weg bij bekijken van de homepagina op
 een tablet

---
 frontend/src/views/HomePage.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index 1e150270..d5cdb9e6 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -23,7 +23,7 @@
     <main>
         <div class="layout">
             <div class="container_left">
-                <img :src="dwengoLogo" />
+                <img :src="dwengoLogo" style="align-self: center;"/>
                 <h> {{ t("homeTitle") }}</h>
                 <p class="info">
                     {{ t("homeIntroduction1") }}
@@ -32,7 +32,7 @@
                 <v-btn
                     size="large"
                     density="comfortable"
-                    style="font-weight: bolder; color: white"
+                    style="font-weight: bolder; color: white; align-self: center;"
                     color="#88BD28"
                     to="/login"
                 >
@@ -158,6 +158,7 @@
     h {
         font-size: large;
         font-weight: bold;
+        align-self: center;
         padding: 10px;
     }
 
@@ -169,4 +170,23 @@
         text-align: center;
         padding-bottom: 30px;
     }
+
+    @media (max-width: 1024px) {
+    .container_left {
+        width: 100%; /* Full width on tablets */
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start; /* Align content to the left */
+        justify-content: center;
+        padding: 20px;
+        position: relative; /* Ensure child elements are positioned relative to this */
+    }
+
+    .container_right {
+        position: absolute;
+        top: 10px; /* Adjust top position to align properly */
+        right: 70px; /* Keep it in the right corner */
+    }
+}
+
 </style>

From 56c29f3fee26e6a6a2f4268f1e01c34219974bf4 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Wed, 19 Mar 2025 08:28:28 +0000
Subject: [PATCH 7/8] style: fix linting issues met Prettier

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

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index d5cdb9e6..59562386 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -23,7 +23,10 @@
     <main>
         <div class="layout">
             <div class="container_left">
-                <img :src="dwengoLogo" style="align-self: center;"/>
+                <img
+                    :src="dwengoLogo"
+                    style="align-self: center"
+                />
                 <h> {{ t("homeTitle") }}</h>
                 <p class="info">
                     {{ t("homeIntroduction1") }}
@@ -32,7 +35,7 @@
                 <v-btn
                     size="large"
                     density="comfortable"
-                    style="font-weight: bolder; color: white; align-self: center;"
+                    style="font-weight: bolder; color: white; align-self: center"
                     color="#88BD28"
                     to="/login"
                 >
@@ -172,21 +175,20 @@
     }
 
     @media (max-width: 1024px) {
-    .container_left {
-        width: 100%; /* Full width on tablets */
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start; /* Align content to the left */
-        justify-content: center;
-        padding: 20px;
-        position: relative; /* Ensure child elements are positioned relative to this */
-    }
+        .container_left {
+            width: 100%; /* Full width on tablets */
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start; /* Align content to the left */
+            justify-content: center;
+            padding: 20px;
+            position: relative; /* Ensure child elements are positioned relative to this */
+        }
 
-    .container_right {
-        position: absolute;
-        top: 10px; /* Adjust top position to align properly */
-        right: 70px; /* Keep it in the right corner */
+        .container_right {
+            position: absolute;
+            top: 10px; /* Adjust top position to align properly */
+            right: 70px; /* Keep it in the right corner */
+        }
     }
-}
-
 </style>

From eeceff801b24985465d78b80f4869d2188ed0c42 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Sat, 22 Mar 2025 12:22:49 +0100
Subject: [PATCH 8/8] style: responsive voor grote monitor

---
 frontend/src/views/HomePage.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index 59562386..d8562fba 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -138,7 +138,7 @@
         flex-direction: column;
         padding: 20px;
         align-items: flex-start;
-        justify-content: flex-start;
+        justify-content: center;
     }
 
     .container_right {
@@ -171,24 +171,26 @@
 
     .info {
         text-align: center;
+        padding-left: 10px;
+        padding-right: 10px;
         padding-bottom: 30px;
     }
 
     @media (max-width: 1024px) {
         .container_left {
-            width: 100%; /* Full width on tablets */
+            width: 100%;
             display: flex;
             flex-direction: column;
-            align-items: flex-start; /* Align content to the left */
+            align-items: flex-start;
             justify-content: center;
             padding: 20px;
-            position: relative; /* Ensure child elements are positioned relative to this */
+            position: relative;
         }
 
         .container_right {
             position: absolute;
-            top: 10px; /* Adjust top position to align properly */
-            right: 70px; /* Keep it in the right corner */
+            top: 10px;
+            right: 80px;
         }
     }
 </style>