La interfaz de usuario presentada exhibe un diseño moderno y adaptable, centrado en la experiencia del usuario. Se observa una barra de navegación superior, de altura fija de 5rem, que se adapta al ancho de la pantalla y permanece fija en la parte superior. Esta barra cambia su color de fondo según el tema seleccionado, optando por blanco en el tema claro y un tono gris oscuro (#18181b) en el tema oscuro.
Elementos de la Barra de Navegación
La barra de navegación incluye un logotipo en la esquina superior izquierda, con un icono que utiliza el color #9147ff. A la derecha del logotipo, se disponen enlaces de navegación, cada uno con un indicador visual sutil (una línea inferior de 0.4rem de altura) que varía en ancho según la función del enlace. Se identifican enlaces para “Descubrir”, “Explorar” y “Seguir”, siendo este último oculto por defecto y visible solo cuando el usuario ha iniciado sesión.
Un componente de búsqueda se encuentra integrado en la barra de navegación, aunque inicialmente está oculto y se expande bajo ciertas condiciones. En el extremo derecho, se muestra la información del usuario, incluyendo un avatar circular de 3rem de diámetro y opciones de inicio de sesión o registro, dependiendo del estado de la sesión del usuario.
Adaptabilidad y Temas
El diseño es responsivo, adaptándose a diferentes tamaños de pantalla. En dispositivos con un ancho máximo de 1023px, la barra de búsqueda se oculta. En pantallas más pequeñas, con un ancho máximo de 767px, la lista de enlaces de navegación se elimina. La interfaz también soporta un tema oscuro, invirtiendo los colores de fondo y algunos elementos para mejorar la legibilidad en entornos con poca luz.
Se incluye un indicador de carga visual, consistente en un spinner circular que gira continuamente. Este spinner se muestra durante las operaciones de carga y se desvanece gradualmente para proporcionar una transición suave.
