login functionality + home page mock

app/pages/index.vue

@@ -1,5 +1,47 @@
 <template>
-  <div>
-      <h1> This will be the home page </h1>
+  <div
+    class="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center p-6 transition-colors duration-300">
+    <div class="w-full max-w-2xl animate-[fadeInUp_0.6s_ease-out]">
+
+      <header class="text-center mb-12">
+        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight">
+          Academic Management System
+        </h1>
+        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mx-auto">
+          Streamline your educational workflow, manage student records, and oversee courses in one place.
+        </p>
+      </header>
+
+      <nav class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+        <nuxt-link to="/auth/login"
+          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🔐</div>
+          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">Access Portal</h2>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Sign in to manage your personalized dashboard and academic
+            data.</p>
+        </nuxt-link>
+
+        <nuxt-link to="/auth-test"
+          class="group p-8 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+          <div class="text-3xl mb-4 group-hover:scale-110 transition-transform">🛠️</div>
+          <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2">System Test</h2>
+          <p class="text-sm text-gray-500 dark:text-gray-400">Verify API connections and authentication state
+            persistence.</p>
+        </nuxt-link>
+
+      </nav>
+
+      <footer class="mt-16 text-center">
+        <div
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 text-xs font-medium text-gray-600 dark:text-gray-400">
+          <span class="relative flex h-2 w-2">
+            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+          </span>
+          System Operational
+        </div>
+      </footer>
+    </div>
   </div>
-</template>
+</template>