Add animated home page

ui/src/router/index.js

@@ -2,7 +2,7 @@ import { createRouter, createMemoryHistory , createWebHashHistory} from 'vue-rou
 
 const routes = [
   // Configuración
-  { path: '/', redirect: '/empleados' },
+  { path: '/', name: 'home', component: () => import('@/views/HomeView.vue') },
   { path: '/config',     name: 'settings',  component: () => import('@/views/SettingsView.vue') },
 
   // ────── Empleados ──────

ui/src/views/HomeView.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { onMounted } from 'vue'
+
+const features = [
+  { title: 'Empleados', text: 'Administra tu equipo y sus perfiles.' },
+  { title: 'Tareas', text: 'Asigna tareas y realiza seguimiento.' },
+  { title: 'Planillas', text: 'Gestiona las planillas de trabajo.' },
+  { title: 'Asistencias', text: 'Controla la asistencia del personal.' }
+]
+
+onMounted(() => {
+  document.querySelectorAll('.feature').forEach((el, i) => {
+    el.style.animationDelay = `${i * 0.2}s`
+  })
+})
+</script>
+
+<template>
+  <div class="landing">
+    <section class="hero">
+      <h1>Núcleo</h1>
+      <p>Gestión integral de tu organización</p>
+      <RouterLink to="/empleados" class="btn-start">Comenzar</RouterLink>
+    </section>
+    <section class="features">
+      <div v-for="f in features" :key="f.title" class="feature">
+        <h2>{{ f.title }}</h2>
+        <p>{{ f.text }}</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.landing {
+  text-align: center;
+  padding: 2rem 1rem;
+}
+.hero h1 {
+  font-size: 3rem;
+  color: var(--primary-color);
+  animation: fade-in-down 0.6s ease both;
+}
+.hero p {
+  margin-top: 0.5rem;
+  animation: fade-in-down 0.8s ease both;
+}
+.btn-start {
+  margin-top: 1.5rem;
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 0.5rem;
+  transition: background-color 0.3s;
+}
+.btn-start:hover { background-color: var(--secondary-color); }
+.features {
+  margin-top: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.feature {
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  background-color: var(--background-color);
+  opacity: 0;
+  animation: fade-in-up 0.5s forwards;
+}
+@keyframes fade-in-down {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: none; }
+}
+</style>