Descripción
Contexto general
Template de dashboard construido con Angular 20 (standalone components) y TailwindCSS v4. Diseñado como base reusable para lanzar aplicaciones SaaS rápidamente: incluye layout con barra lateral fija a 100vh con scroll propio, top bar con navegación, enrutamiento standalone con loadComponent y carga perezosa, y una página de inicio con tarjetas de métricas y actividad reciente. Iconografía con Heroicons (SVG inline) y convenciones de UI con colores base oscuros (#020512). Estructura preparada para escalar con páginas hijas (team, projects, calendar, documents, reports).
Motivación
Por qué lo construí
Tener una base reusable y escalable para lanzar ideas SaaS y validar rápidamente sin empezar desde cero.
Establecer un patrón de arquitectura frontend con standalone components, lazy loading y layout responsive desde el inicio.
Definir convenciones de UI (colores, iconografía, tipografía) que sirvan como guía visual consistente para futuros proyectos.
Características
Lo que destaca
Standalone components con Angular 20 — sin NgModules, con providers y router standalone configurado en app.config.ts.
Enrutamiento con carga perezosa vía loadComponent: ruta raíz carga el layout del dashboard y las páginas hijas se cargan bajo demanda.
Layout de dashboard con sidebar fija (sticky top-0 h-screen overflow-y-auto) y área de contenido con scroll independiente (flex-1 overflow-y-auto).
Componentes modulares: menu-lateral, opciones-menu, top-bar y marca-menu — cada uno con su template y lógica aislada.
TailwindCSS v4 vía PostCSS (@tailwindcss/postcss) sin necesidad de tailwind.config.* — configuración minimalista con @import "tailwindcss".
Página de inicio con tarjetas de métricas y actividad reciente, lista para conectar a servicios reales o signals/store.