Voy a generar inspiración de diseño y luego construir todo el sistema.
Voy a empezar creando el sistema de diseño en modo claro y todos los archivos necesarios.
Ahora voy a crear los componentes base reutilizables (logo, frame, QR card).
Ahora voy a construir todas las pantallas de contenido en paralelo.
Ahora construyo el carrusel TV principal y conecto todo en app/page.tsx.
He rediseñado completamente la App TV de Califix Compliance con una identidad visual ejecutiva en modo claro, basada en una paleta minimalista de 5 colores (indigo de marca + verde, rojo, ámbar para semáforo de cumplimiento + neutros slate) y tipografía Inter con JetBrains Mono para datos. La rotación incluye 14 pantallas: dashboard con KPIs corregidos y gráfico stacked area, monitoreo con tarjetas alineadas (sin bug), porcentaje de cumplimiento con donut + top incumplimientos, 3 detalles de riesgo, top empresas, días sin accidentes, historias de éxito y 4 pantallas publicitarias intercaladas (¿Sabías Qué? y Historias de Éxito Featured) que aparecen cada 4-5 pantallas con bloques QR para app móvil, landing de cotización y plataforma SaaS generados con qrcode.react.
El reproductor TV avanza automáticamente (12s contenido / 15s publicidad), con barra de progreso, controles play/pause/anterior/siguiente, reloj en vivo, indicador "En vivo / Publicidad" y dots de paginación que distinguen visualmente las pantallas publicitarias de las operativas.
Voy a hacer una refactorización completa. Primero instalo next-themes para el toggle de modo oscuro.
Ahora voy a hacer toda la refactorización. Empiezo por el theme provider y la nueva navbar global.
Theme provider ya existe. Ahora refactorizo el ScreenFrame para que sea minimalista (sin navbar interna, sin chips, sin status), refactorizo el carrusel (sin footer, navbar global mínima, controles auto-ocultos) y construyo la pantalla de riesgos combinada.
Ahora refactorizo dashboard, monitoreo (sin frecuencia), porcentaje de cumplimiento (sin "3 categorías"), did-you-know (con imagen del alert), y los demás. También simplifico tone (quito step prop pasado a ScreenFrame).
Ahora refactorizo top companies, days no accidents, success stories, did-you-know (con imagen del alert), ad-success-story.
Ahora las pantallas publicitarias. La de "¿Sabías Qué?" para examen pre-ocupacional debe incluir la imagen del alert de Califix debajo del título.
Ahora reescribo el TvCarousel con la navbar global mínima (logo + theme toggle + cerrar sesión), sin footer, intercalando ads cada 4 pantallas no publicitarias, controles auto-ocultos.
Ahora simplifico el QR card (más minimalista, sin tanto texto), añado la versión hairline para los ads, y actualizo el componente del logo (versión más ejecutiva). También debo refactorizar el app/globals.css para que el modo oscuro se vea bien y el bg-grid-soft se adapte.
El page.tsx ya está bien. Por último voy a refinar globals.css para mejorar el modo oscuro (que el bg-grid-soft y los soft tones se vean bien en ambos modos) y verificar logs.
Estos errores son antiguos (logs stale del primer render antes de que el layout tuviera dimensiones); el patrón actual con min-h-0 flex-1 ya soluciona ese caso. La refactorización completa la app TV con un sistema mucho más minimalista y profesional:
Cambios principales:
next-themes y un toggle integrado en la navbar global. Tokens de color recalibrados para ambos modos.ScreenFrame interno ya no repite header, status, eyebrow ni step indicator — solo título y subtítulo. Sin footer.risks-screen.tsx muestra Financiero, Previsional y Judicial Laboral como 3 tarjetas verticales minimalistas (severidad + nombre + N° empresas + frase).Elimina la pantalla de "Riesgos detectados".
En "¿Sabías qué? Cumplimiento legal, en una pantalla." Muestra solo 1 QR, no 2.
en "Días sin Accidentes" que sea similar a "Top Empresas del Mes", a un lado los que tienen días sin accidentes y al otro los opuestos.
Reemplazar "historias de éxito" por "Casos de éxito".
todos los casos de éxito deben seguir un formado de una imagen a la izquierda y ficha con información a la derecha.
En general casos de éxito debe ser basado en personas, por ende elimina el de mutual y usa otro ejemplo acorde al enfoque de "basado en personas".
Haz un caso de éxito de auditar empresas, a la izquierda un video y a la derecha la info.
Elimina la duplicación de pantallas que hay, por ejemplo el dashboard inicial de "Compliance en tiempo real" se repite en la pantalla 11 y así las demás, debería ser un solo flujo sin repeticiones y que el sistema intercale las de casos de éxito o sabías que, las pantallas que son publicitarias y varian.
En "Historuas de éxito" donde se muestran los QR de descara app movil, cotizar ne califix.cl. az que sean solo 2 QR, para descargar la App Mobil y para "Monitorea el compliance de tus empresas" en califixcompliance.cl (no califix.cl). Aumenta el tiempo que cada pantalla permanece, 30 segundos.