200 lines
5.7 KiB
Vue
200 lines
5.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const { t, locale } = useI18n();
|
|
|
|
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
|
|
function changeLanguage(langCode: string): void {
|
|
locale.value = langCode;
|
|
localStorage.setItem("user-lang", langCode);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div class="layout">
|
|
<div class="container_left">
|
|
<img
|
|
:src="dwengoLogo"
|
|
alt="Dwengo logo"
|
|
style="align-self: center"
|
|
/>
|
|
<h1 class="h1">{{ t("homeTitle") }}</h1>
|
|
<p class="info">
|
|
{{ t("homeIntroduction1") }}
|
|
</p>
|
|
<p class="info">{{ t("homeIntroduction2") }}</p>
|
|
<v-btn
|
|
size="large"
|
|
density="comfortable"
|
|
style="font-weight: bolder; color: white; align-self: center"
|
|
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>
|
|
<h2 class="big">{{ t("innovative") }}</h2>
|
|
</div>
|
|
<div class="img_small">
|
|
<v-img
|
|
height="125"
|
|
width="125"
|
|
src="/assets/home/research_based.png"
|
|
></v-img>
|
|
<h2 class="big">{{ t("researchBased") }}</h2>
|
|
</div>
|
|
<div class="img_small">
|
|
<v-img
|
|
height="125"
|
|
width="125"
|
|
src="/assets/home/inclusive.png"
|
|
></v-img>
|
|
<h2 class="big">{{ t("sociallyRelevant") }}</h2>
|
|
</div>
|
|
<div class="img_small">
|
|
<v-img
|
|
height="125"
|
|
width="125"
|
|
src="/assets/home/socially_relevant.png"
|
|
></v-img>
|
|
<h2 class="big">{{ t("inclusive") }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="container_right">
|
|
<v-menu
|
|
open-on-hover
|
|
open-on-click
|
|
>
|
|
<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>
|
|
</main>
|
|
</template>
|
|
<style scoped>
|
|
.layout {
|
|
display: flex;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.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: center;
|
|
}
|
|
|
|
.container_right {
|
|
position: absolute;
|
|
top: 2%;
|
|
right: 100px;
|
|
}
|
|
|
|
.img_small {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20px;
|
|
}
|
|
|
|
img {
|
|
width: 300px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: large;
|
|
font-weight: bold;
|
|
align-self: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.big {
|
|
font-size: x-large;
|
|
}
|
|
|
|
.info {
|
|
text-align: center;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.container_left {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.container_right {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 80px;
|
|
}
|
|
}
|
|
</style>
|