Voy a crear una pantalla de login que se asemeje a la imagen que compartiste, utilizando el logo SVG proporcionado. Implementaré un diseño responsive con Next.js y Tailwind CSS.
He creado una pantalla de login que se asemeja a la imagen que compartiste. Características principales:
Diseño de dos columnas:
- Lado izquierdo: Placeholder para imagen (visible solo en pantallas medianas y grandes)
- Lado derecho: Formulario de login
Elementos del formulario:
- Logo T&T en un cuadro negro en la parte superior
- Mensaje de bienvenida en español
- Campo para correo electrónico
- Campo para contraseña
- Selector desplegable
- Checkbox para "Guardar mi contraseña"
- Botón azul de ingreso
Responsive:
- En dispositivos móviles, solo se muestra el formulario
- En pantallas más grandes, se muestra el diseño completo con dos columnas
El código utiliza Next.js con App Router y Tailwind CSS para los estilos, junto con los componentes de shadcn/ui para los elementos del formulario. El logo SVG que proporcionaste se ha integrado como un componente React.
¿Hay algún aspecto específico que te gustaría modificar o mejorar?
189d ago