Basic layout and navigation

src/components/HomeCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>HOME</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-button @click="update">Update</ion-button>
+      <br>
+      <ion-button @click="archive">View older versions</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+<script setup lang="ts">
+import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
+
+const emit = defineEmits<{(e: 'update'): void, (e: 'archive'): void, (e: "disconnect"): void}>();
+
+const update = () => {
+  emit("update");
+};
+
+const archive = () => {
+  emit("archive");
+};
+
+const disconnect = () => {
+  emit("disconnect");
+};
+
+</script>
+
+<style scoped>
+
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>