A
Anonymous

Winner Screen - Copy this React, Tailwind Component to your project

Toma el rol de un diseñador web senior y: "Crear un componente visual de pantalla de ganador para el juego 'El Switcher' que siga la misma estética y estructura de diseño descrita en el archivo PDF. El componente debe cumplir con las siguientes especificaciones detalladas: Tipografía: Usar la fuente 'Lekton', que se emplea en el resto del juego, tanto para el título como para los botones. Colores: Mantener la paleta de colores utilizada en los botones y elementos principales del juego. Los botones de acción están destacados con tonos neutros, como gris y blanco, con bordes definidos y efectos de hover. El fondo debe ser oscuro o semi transparente para resaltar el componente de ganador sobre el fondo del juego. Estructura: Un título grande en la parte superior que diga '¡Ganaste!' en un tamaño de fuente destacado. Debajo del título, debe haber una imagen icónica (puede ser un trofeo o una corona) centrada, que simbolice la victoria. Botón principal: Incluir un botón grande con la etiqueta 'Regresar al Inicio' en el estilo de los botones del juego. Debe estar centrado en la parte inferior del componente. Efectos de hover en el botón: Al pasar el ratón sobre el botón, debe cambiar de color de manera sutil, como en otros botones de la interfaz (por ejemplo, un cambio de fondo a un tono más claro). Dimensiones y proporciones: El diseño debe ser responsive, ajustándose tanto a pantallas grandes como pequeñas, pero siempre centrando el título, la imagen y el botón. Animaciones: Incluir una leve animación de aparición para que el componente de ganador haga un fade in cuando aparezca en pantalla. El botón debe tener una animación de hover que coincida con los botones existentes en el PDF (cambio de color o sombra cuando se pasa el cursor por encima). Estilo de borde: Mantener los bordes redondeados y los márgenes consistentes con otros botones y elementos visuales de la interfaz de usuario del juego, como se observa en el diseño del lobby y las tarjetas de juego.

Prompt
Component Preview

About

WinnerScreen - A responsive winner display with 'Lekton' font, trophy icon, hover effects, and a central 'Regresar al Inicio' button, bui. Copy code today!

Share

Last updated 1 month ago