47 lines
2.4 KiB
Vue
47 lines
2.4 KiB
Vue
<template>
|
|
<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="no-underline text-current block 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="no-underline text-current block 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 class="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
|
|
</span>
|
|
System Operational
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template> |