added user home page

app/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import PitcherList from '../views/PitcherList.vue'
 import Login from '../views/Login.vue'
+import Home from '../views/Home.vue'
 import PreparePitch from "@/views/PreparePitch.vue";
 import FinalizePitch from "@/views/FinalizePitch.vue";
 import BullpenStats from "@/views/BullpenStats.vue";
@@ -9,11 +10,15 @@ import BullpenStats from "@/views/BullpenStats.vue";
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/login'
+    redirect: '/home'
   }, {
     path: '/login',
     name: 'Login',
     component: Login
+  }, {
+    path: '/home',
+    name: 'Home',
+    component: Home
   }, {
     path: '/pitchers',
     name: 'Pitchers',

app/src/views/Home.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
+import { playOutline, statsChartOutline, personOutline } from 'ionicons/icons';
+import img from '../assets/groot.jpg'
+
+const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL
+
+const startBullpen = () => {
+  console.log('Starting bullpen session');
+};
+
+const showStats = () => {
+  console.log('Showing bullpen stats');
+};
+
+const showProfile = () => {
+  console.log('Showing profile');
+};
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>User Home</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <div class="user-container">
+        <ion-avatar class="user-avatar">
+          <img :src="img" alt="User Profile" class="avatar-frame" />
+        </ion-avatar>
+      </div>
+
+      <div class="button-container">
+        <ion-button expand="full" @click="startBullpen" class="full-width">
+          <ion-icon :icon="playOutline" slot="start" />
+          Start Bullpen Session
+        </ion-button>
+        <ion-button expand="full" @click="showStats" class="full-width">
+          <ion-icon :icon="statsChartOutline" slot="start" />
+          Show Bullpen Stats
+        </ion-button>
+        <ion-button expand="full" @click="showProfile" class="full-width">
+          <ion-icon :icon="personOutline" slot="start" />
+          Show Profile
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style scoped>
+.user-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30vh;
+  background-color: #f0f0f0; /* Change background color of top area */
+}
+
+.user-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  border: 4px solid #ccc;
+  overflow: hidden;
+}
+
+.avatar-frame {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 60vh;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding-top: 20px;
+}
+
+.full-width {
+  width: 100%;
+  justify-content: center;
+}
+</style>