implemented guest pre application user flow

ui/src/pages/Homepage.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { useUserStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const user = useUserStore();
+
+function goToApplication() {
+    router.push('/apply') // change to your form route
+}
+</script>
+
+<template>
+    <div v-if="user.state == 'guest'"
+        class="min-h-screen flex flex-col items-center justify-center text-center bg-neutral-950 text-white px-4">
+        <h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
+        <p class="text-neutral-400 mb-8 max-w-md">
+            To join our unit, please fill out an application to continue.
+        </p>
+        <Button @click="goToApplication" class="px-6 py-3 text-lg">
+            Begin Application
+        </Button>
+    </div>
+    <div v-else>
+        HOMEPAGEEEEEEEEEEEEEEEEEEE
+    </div>
+</template>

ui/src/router/index.js

@@ -9,6 +9,7 @@ const router = createRouter({
 
     // AUTH REQUIRED
     { path: '/apply', component: () => import('@/pages/Application.vue'), meta: { requiresAuth: true } },
+    { path: '/', component: () => import('@/pages/Homepage.vue'), meta: { requiresAuth: true } },
 
     // MEMBER ROUTES
     { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
@@ -61,10 +62,10 @@ router.beforeEach(async (to) => {
 
   console.log(!user.hasRole("Dev"));
 
-  // Must have specific role
+  // // Must have specific role
-  if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
+  // if (to.meta.roles && !user.hasRole('Dev') && !user.hasAnyRole(to.meta.roles)) {
-    return '/unauthorized'
+  //   return '/unauthorized'
-  }
+  // }
 })
 
 export default router;