added pages

src/constants.ts

@@ -0,0 +1,6 @@
+export enum ROUTES {
+	HOME = "#/",
+	STATUS = "#/status",
+	INSTALL = "#/install",
+	UPDATE = "#/update",
+}

src/pages/Home/ActionButtons.svelte

@@ -2,29 +2,32 @@
 	import FaTasks from "svelte-icons/fa/FaTasks.svelte"
 	import FaArrowAltCircleRight from "svelte-icons/fa/FaArrowAltCircleRight.svelte"
 	import Update from "svelte-icons/fa/FaRedoAlt.svelte"
+	import { ROUTES } from "../../constants"
 </script>
 
 <div class="main-buttons-container">
-	<button>
+	<a href={ROUTES.STATUS}>
 		<div class="icon"><FaTasks /></div>
 		<div>Status</div>
-	</button>
-	<button>
+	</a>
+
+	<a href={ROUTES.INSTALL}>
 		<div class="icon"><FaArrowAltCircleRight /></div>
 		<div>Install</div>
-	</button>
-	<button>
+	</a>
+
+	<a href={ROUTES.UPDATE}>
 		<div class="icon"><Update /></div>
 		<div>Update</div>
-	</button>
+	</a>
 </div>
 
 <style lang="scss">
 	.main-buttons-container {
 		@apply grid gap-6 grid-cols-3;
 
-		button {
-			@apply p-4 w-24 h-24 rounded-xl bg-red-500 text-white font-normal;
+		a {
+			@apply p-4 w-24 h-24 text-center rounded-xl bg-red-500 text-white font-normal;
 
 			.icon {
 				@apply w-full h-6 mb-2;

src/pages/Install/index.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { ROUTES } from "../../constants"
+</script>
+
+<a href={ROUTES.HOME}>Home</a>

src/pages/Status/index.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { ROUTES } from "../../constants"
+</script>
+
+<a href={ROUTES.HOME}>Home</a>

src/pages/Update/index.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { ROUTES } from "../../constants"
+</script>
+
+<a href={ROUTES.HOME}>Home</a>

src/routes.ts

@@ -1,5 +1,11 @@
 import Home from "./pages/Home/index.svelte"
+import Status from "./pages/Status/index.svelte"
+import Install from "./pages/Install/index.svelte"
+import Update from "./pages/Update/index.svelte"
 
 export default {
 	"/": Home,
+	"/status": Status,
+	"/install": Install,
+	"/update": Update,
 }