fuck come on

src/app/auth/signin/page.tsx

@@ -3,12 +3,13 @@
 import { useState } from "react"
 import { signIn, getSession } from "next-auth/react"
 import { useRouter } from "next/navigation"
+import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Alert, AlertDescription } from "@/components/ui/alert"
-import { Loader2 } from "lucide-react"
+import { Loader2, ArrowLeft } from "lucide-react"
 
 export default function SignIn() {
   const [email, setEmail] = useState("")
@@ -102,6 +103,15 @@ export default function SignIn() {
                 "Iniciar Sesión"
               )}
             </Button>
+            
+            <div className="pt-4 border-t">
+              <Link href="/">
+                <Button variant="outline" className="w-full" disabled={isLoading}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  Cancelar
+                </Button>
+              </Link>
+            </div>
           </form>
         </CardContent>
       </Card>

src/app/page.tsx

@@ -5,8 +5,9 @@ import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { GraduationCap, Users, BookOpen, UserCheck } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { GraduationCap, Users, BookOpen, UserCheck, ArrowRight } from 'lucide-react'
 
 export default function Home() {
   const { data: session, status } = useSession()
@@ -46,90 +47,71 @@ export default function Home() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="container mx-auto px-4 py-16">
-        <div className="text-center mb-16">
-          <div className="flex items-center justify-center gap-3 mb-6">
-            <GraduationCap className="h-12 w-12 text-blue-600" />
-            <h1 className="text-4xl font-bold text-gray-900">TAPIR</h1>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
+      <div className="container mx-auto px-4 py-20">
+        {/* Hero Section */}
+        <div className="text-center mb-20">
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <div className="p-3 bg-primary/10 rounded-2xl">
+              <GraduationCap className="h-10 w-10 text-primary" />
+            </div>
+            <h1 className="text-5xl font-bold slate-900 bg-clip-text">
+              TAPIR
+            </h1>
           </div>
-          <h2 className="text-2xl font-semibold text-gray-700 mb-4">
-            Sistema de Gestión de Asistencia Estudiantil
+          <h2 className="text-xl text-muted-foreground mb-8 max-w-lg mx-auto">
+            Sistema moderno de gestión de asistencia estudiantil
           </h2>
-          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-            Plataforma integral para el control y seguimiento de la asistencia académica
-          </p>
+          <Link href="/auth/signin">
+            <Button size="lg" className="px-8 py-4 text-lg rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
+              Acceder al Sistema
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+          </Link>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
-                <Users className="h-6 w-6 text-blue-600" />
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+          <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group">
+            <CardHeader className="text-center pb-4">
+              <div className="mx-auto w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-blue-100 transition-colors">
+                <Users className="h-8 w-8 text-blue-600" />
               </div>
-              <CardTitle>Administradores</CardTitle>
-              <CardDescription>
-                Gestión completa del sistema, usuarios y configuraciones
-              </CardDescription>
+              <CardTitle className="text-lg">Administradores</CardTitle>
+              <Badge variant="secondary" className="w-fit mx-auto mt-2">
+                Gestión completa
+              </Badge>
             </CardHeader>
-            <CardContent>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>• Gestión de usuarios y roles</li>
-                <li>• Configuración de periodos académicos</li>
-                <li>• Reportes y estadísticas</li>
-                <li>• Administración de clases</li>
-              </ul>
-            </CardContent>
           </Card>
 
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
-                <BookOpen className="h-6 w-6 text-green-600" />
+          <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group">
+            <CardHeader className="text-center pb-4">
+              <div className="mx-auto w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-green-100 transition-colors">
+                <BookOpen className="h-8 w-8 text-green-600" />
               </div>
-              <CardTitle>Profesores</CardTitle>
-              <CardDescription>
-                Control de asistencia y gestión de clases asignadas
-              </CardDescription>
+              <CardTitle className="text-lg">Profesores</CardTitle>
+              <Badge variant="secondary" className="w-fit mx-auto mt-2">
+                Control de asistencia
+              </Badge>
             </CardHeader>
-            <CardContent>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>• Registro de asistencia</li>
-                <li>• Gestión de clases</li>
-                <li>• Reportes de estudiantes</li>
-                <li>• Seguimiento académico</li>
-              </ul>
-            </CardContent>
           </Card>
 
-          <Card className="text-center">
-            <CardHeader>
-              <div className="mx-auto w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
-                <UserCheck className="h-6 w-6 text-purple-600" />
+          <Card className="border-0 shadow-md hover:shadow-lg transition-all duration-300 group">
+            <CardHeader className="text-center pb-4">
+              <div className="mx-auto w-16 h-16 bg-purple-50 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-purple-100 transition-colors">
+                <UserCheck className="h-8 w-8 text-purple-600" />
               </div>
-              <CardTitle>Estudiantes</CardTitle>
-              <CardDescription>
-                Consulta de asistencia y seguimiento académico personal
-              </CardDescription>
+              <CardTitle className="text-lg">Estudiantes</CardTitle>
+              <Badge variant="secondary" className="w-fit mx-auto mt-2">
+                Consulta personal
+              </Badge>
             </CardHeader>
-            <CardContent>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>• Consulta de asistencia</li>
-                <li>• Horarios de clases</li>
-                <li>• Historial académico</li>
-                <li>• Notificaciones</li>
-              </ul>
-            </CardContent>
           </Card>
         </div>
 
-        <div className="text-center">
-          <Link href="/auth/signin">
-            <Button size="lg" className="px-8 py-3 text-lg">
-              Iniciar Sesión
-            </Button>
-          </Link>
-          <p className="text-sm text-gray-500 mt-4">
+        {/* Footer */}
+        <div className="text-center mt-16">
+          <p className="text-sm text-muted-foreground">
             ¿Necesitas ayuda? Contacta al administrador del sistema
           </p>
         </div>