feat(frontend): initialisatie router en bijhorende.vue componenten

frontend/src/components/__tests__/HelloWorld.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 
 import { mount } from "@vue/test-utils";
-import HelloWorld from "../HelloWorld.vue";
+import HelloWorld from "./HelloWorld.vue";
 
 describe("HelloWorld", () => {
     it("renders properly", () => {

frontend/src/components/__tests__/HelloWorld.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+    defineProps<{
+        msg: string;
+    }>();
+</script>
+
+<template>
+    <div class="greetings">
+        <h1 class="green">{{ msg }}</h1>
+        <h3>
+            You’ve successfully created a project with
+            <a
+                href="https://vite.dev/"
+                target="_blank"
+                rel="noopener"
+                >Vite</a
+            >
+            +
+            <a
+                href="https://vuejs.org/"
+                target="_blank"
+                rel="noopener"
+                >Vue 3</a
+            >. What's next?
+        </h3>
+    </div>
+</template>
+
+<style scoped>
+    h1 {
+        font-weight: 500;
+        font-size: 2.6rem;
+        position: relative;
+        top: -10px;
+    }
+
+    h3 {
+        font-size: 1.2rem;
+    }
+
+    .greetings h1,
+    .greetings h3 {
+        text-align: center;
+    }
+
+    @media (min-width: 1024px) {
+        .greetings h1,
+        .greetings h3 {
+            text-align: left;
+        }
+    }
+</style>