feat: Implement faculty management routes and UI components

- Added a new route for managing faculties with a grid display of faculties.
- Created a detailed view for each faculty including metrics and recent activities.
- Introduced a new loader for fetching faculty data and associated plans and subjects.
- Enhanced the existing plans route to include a modal for plan details.
- Updated the login and index pages with improved UI and styling.
- Integrated a progress ring component to visualize the quality of plans.
- Applied a new font style across the application for consistency.

src/routes/index.tsx

@@ -1,4 +1,7 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { ArrowRight } from "lucide-react"
 import '../App.css'
 
 export const Route = createFileRoute('/')({
@@ -7,9 +10,59 @@ export const Route = createFileRoute('/')({
 
 function App() {
   return (
-    <div className="App">
-      <h2>Bienvenido al sistema de gestión de vuelos</h2>
-      <Link to="/planes">Iniciar sesión</Link>
+    <div className="min-h-screen flex flex-col bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 text-white">
+      {/* Navbar */}
+      <header className="flex items-center justify-between px-10 py-6 border-b border-slate-700/50">
+        <h1 className="text-2xl font-mono tracking-tight">Génesis</h1>
+        <Link to="/login" search={{ redirect: '/planes' }}>
+          <Button variant="outline" className="text-white border-slate-500 hover:bg-slate-700/50">
+            Iniciar sesión
+          </Button>
+        </Link>
+      </header>
+
+      {/* Hero */}
+      <main className="flex-1 flex flex-col items-center justify-center text-center px-6">
+        <h2 className="text-5xl md:text-6xl font-mono font-bold mb-6">
+          Bienvenido a <span className="text-cyan-400">Génesis</span>
+        </h2>
+        <p className="text-lg md:text-xl text-slate-300 max-w-2xl mb-8">
+          El sistema académico diseñado para transformar la gestión universitaria 🚀.
+          Seguro, moderno y hecho para crecer contigo.
+        </p>
+
+        <div className="flex gap-4">
+          <Link to="/login" search={{ redirect: '/planes' }}>
+            <Button size="lg" className="rounded-2xl px-6 py-3 text-lg font-mono">
+              Comenzar <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+          </Link>
+          <Button size="lg" variant="outline" className="rounded-2xl px-6 py-3 text-lg font-mono border-slate-600 text-slate-200 hover:bg-slate-700/50">
+            Conoce más
+          </Button>
+        </div>
+      </main>
+
+      {/* Highlights */}
+      <section className="grid md:grid-cols-3 gap-6 px-10 py-16 bg-slate-900/60 backdrop-blur-md border-t border-slate-700/50">
+        {[
+          { title: "Gestión Académica", desc: "Administra planes de estudio, carreras y facultades con total control." },
+          { title: "Tecnología Moderna", desc: "Construido con React, Supabase y prácticas seguras de última generación." },
+          { title: "Escalable", desc: "Diseñado para crecer junto con tu institución." }
+        ].map((item, i) => (
+          <Card key={i} className="bg-slate-800/60 border-slate-700 hover:border-cyan-500 transition-colors duration-300">
+            <CardContent className="p-6">
+              <h3 className="font-mono text-xl mb-3 text-cyan-400">{item.title}</h3>
+              <p className="text-slate-300">{item.desc}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+
+      {/* Footer */}
+      <footer className="py-6 text-center text-slate-400 text-sm border-t border-slate-700/50">
+        © {new Date().getFullYear()} Génesis — Universidad La Salle
+      </footer>
     </div>
   )
 }