introduce more NuxtUI components instead of hand rolling.

frontend/components/AppFooter.vue

@@ -1,24 +1,21 @@
 <template>
-    <header class="bg-blue-500 text-white p-4">
-      <div class="container mx-auto flex justify-between items-center">
-        <h1 class="text-xl font-bold">ZeroTwentyFifty</h1>
-        <nav>
-          <ul class="flex space-x-4">
-            <li><NuxtLink to="/">Home</NuxtLink></li>
-            <li><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
-            <li><NuxtLink to="/about">About</NuxtLink></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-  </template>
-
-  <script setup lang="ts">
-  </script>
-
-  <style scoped>
-  header {
-    background-color: var(--color-primary);
-  }
-  </style>
-
+  <UFooter class="bg-blue-500 text-white p-4 fixed bottom-0 w-full">
+    <div class="container mx-auto flex justify-between items-center">
+      <h1 class="text-xl font-bold">ZeroTwentyFifty</h1>
+      <nav>
+        <ul class="flex space-x-4">
+          <li><NuxtLink to="/">Home</NuxtLink></li>
+          <li><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
+          <li><NuxtLink to="/about">About</NuxtLink></li>
+        </ul>
+      </nav>
+    </div>
+  </UFooter>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+/* No additional styles needed for sticky footer */
+</style>

frontend/components/AppHeader.vue

@@ -1,24 +1,26 @@
 <template>
-    <header class="bg-blue-500 text-white p-4">
-      <div class="container mx-auto flex justify-between items-center">
-        <h1 class="text-xl font-bold">ZeroTwentyFifty</h1>
-        <nav>
-          <ul class="flex space-x-4">
-            <li><NuxtLink to="/">Home</NuxtLink></li>
-            <li><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
-            <li><NuxtLink to="/about">About</NuxtLink></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
+    <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
   </template>
 
-  <script setup lang="ts">
-  </script>
-
-  <style scoped>
-  header {
-    background-color: var(--color-primary);
-  }
-  </style>
+<script setup lang="ts">
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  badge: 100
+}, {
+  label: 'Home',
+  icon: 'i-heroicons-home',
+  to: '/'
+}, {
+  label: 'Dashboard',
+  icon: 'i-heroicons-chart-bar',
+  to: '/dashboard'
+}, {
+  label: 'About',
+  icon: 'i-heroicons-information-circle',
+  to: '/about'
+}]
+</script>
 

frontend/components/AuthForm.vue

@@ -5,8 +5,7 @@ import { useRouter } from 'vue-router'
 const { state, validate, onSubmit } = useAuth()
 const router = useRouter()
 
-async function handleSubmit(event: Event) {
-  event.preventDefault()
+async function handleSubmit(event: FormSubmitEvent<any>) {
   const success = await onSubmit(event)
   if (success) {
     router.push('/dashboard')
@@ -15,20 +14,41 @@ async function handleSubmit(event: Event) {
 </script>
 
 <template>
-  <div class="bg-white p-6 rounded-lg shadow-md">
-    <h2 class="text-2xl font-bold mb-4 text-gray-800">Login</h2>
-    <UForm :validate="validate" :state="state" class="space-y-4" @submit="handleSubmit">
-      <UFormGroup label="Email" name="email" class="text-gray-700">
-        <UInput v-model="state.email" class="border-gray-300" />
+  <UCard class="max-w-md mx-auto">
+    <UCardTitle class="text-2xl font-bold mb-4">Login</UCardTitle>
+    <UForm 
+      :validate="validate"
+      :state="state"
+      class="space-y-4"
+      @submit="handleSubmit"
+    >
+      <UFormGroup label="Email" name="email">
+        <UInput
+          v-model="state.email"
+          color="primary"
+          variant="outline"
+          placeholder="Enter your email"
+        />
       </UFormGroup>
 
-      <UFormGroup label="Password" name="password" class="text-gray-700">
-        <UInput v-model="state.password" type="password" class="border-gray-300" />
+      <UFormGroup label="Password" name="password">
+        <UInput 
+          v-model="state.password"
+          type="password"
+          color="primary"
+          variant="outline"
+          placeholder="Enter your password"
+        />
       </UFormGroup>
 
-      <UButton type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white">
-        Submit
+      <UButton
+        type="submit"
+        color="primary"
+        variant="solid"
+        block
+      >
+        Login
       </UButton>
     </UForm>
-  </div>
+  </UCard>
 </template>

frontend/components/FootprintList.vue

@@ -6,11 +6,12 @@ const { footprints, fetchFootprints } = useFootprints()
 </script>
 
 <template>
-  <div class="bg-white p-6 rounded-lg shadow-md">
-    <h2 class="text-2xl font-bold mb-4 text-gray-800">Footprints Dashboard</h2>
+  <UCard class="p-6">
+    <UCardTitle>Footprints Dashboard</UCardTitle>
     <UButton 
       @click="fetchFootprints" 
-      class="mb-4 bg-blue-600 hover:bg-blue-700 text-white"
+      class="mb-4"
+      color="primary"
     >
       Fetch Footprints
     </UButton>
@@ -20,5 +21,5 @@ const { footprints, fetchFootprints } = useFootprints()
       </li>
     </ul>
     <p v-else class="text-gray-700">No footprints data available. Click the button to fetch data.</p>
-  </div>
+  </UCard>
 </template>

frontend/pages/dashboard.vue

@@ -1,6 +1,5 @@
 <template>
     <section>
-      <p>This page will be displayed at the /about route.</p>
       <FootprintList />
     </section>
 </template>