Crea una interfaz web responsiva para una aplicación llamada “Comparador de Tarifas Móviles Chile”.
La interfaz debe tener un diseño moderno, limpio y adaptado a móviles. Inicia con una sección introductoria que explique brevemente:
💬 “Bienvenido al comparador de tarifas móviles de Chile. Descubre qué compañía te ofrece el mejor plan según tu situación actual.”
📌 A continuación, crea un formulario con los siguientes campos:
🟢 Botón: “Comparar tarifas”
Cuando el usuario da clic en “Comparar tarifas”, mostrar una tabla comparativa de planes, usando datos de ejemplo de estas compañías:
✅ Planes de ejemplo para mostrar en la tabla:
| Compañía | Nombre del plan | Precio | GB | Minutos | Beneficios |
|----------|------------------------|--------|-------|-------------|--------------------------------|
| Entel | Plan 60 GB | $25.990| 60 GB | Ilimitados | Apps libres |
| Movistar | Plan 5G Libre Full | $13.990| 150 GB| Ilimitados | Roaming WhatsApp, TV Free |
| WOM | Plan 150 GB | $11.990| 150 GB| Ilimitados | RRSS gratis |
| Claro | Plan Max M | $12.990| 300 GB| Ilimitados | RRSS ilimitadas, Roaming |
En cada fila de la tabla, añadir un botón: “Adquirir este plan”.
Cuando se da clic en ese botón, mostrar un mensaje emergente tipo modal o toast diciendo:
✅ “¡Gracias! Hemos enviado tus datos al equipo para contactarte y ayudarte a cambiarte de plan.”
No implementar la lógica de backend ni validaciones, solo el flujo visual e interacción básica.
La tabla de resultados debe tener scroll horizontal en móvil. Usa colores neutros, buen espaciado y íconos simples para mejorar la experiencia visual.
Vamos a crear una interfaz web responsiva para comparar tarifas móviles en Chile con un diseño moderno y adaptado a dispositivos móviles.
Esta aplicación incluye:
Formulario interactivo con:
Tabla comparativa que muestra:
Diseño responsivo:
Experiencia de usuario mejorada:
La aplicación está construida con Next.js y utiliza componentes de shadcn/ui para una interfaz moderna y accesible.