Reservation Form - Copy this React, Tailwind Component to your project
Crea un formulario de reserva en tres pasos para una aplicación web de restaurante. Utiliza un diseño limpio y moderno, ideal para dispositivos móviles y escritorio, con animaciones suaves para la transición entre los pasos. Cada paso debe mostrar un encabezado claro, campos relevantes, y botones de navegación "Atrás" y "Siguiente". Paso 1: Información de la Reserva Encabezado: "Información de Reserva" Subtítulo: "Por favor, proporciona los detalles de tu reserva." Campos a incluir: Cantidad de Personas: Selecciona de 1 a 30 (menú desplegable o selector de números). Sede: Lista desplegable con las sedes disponibles del restaurante. Fecha de Reserva: Selector de fecha que permita elegir un día (desactiva fechas pasadas). Hora de Reserva: Selector de hora, con opciones basadas en la disponibilidad del restaurante. Observaciones (Opcional): Campo de texto para cualquier observación especial, como preferencia de mesa o necesidades específicas. Botones: Siguiente: Botón para ir al Paso 2. Paso 2: Información Personal Encabezado: "Información Personal" Subtítulo: "¿Quién realizará la reserva? Proporciona tus datos de contacto." Campos a incluir: Nombre: Campo de texto. Apellido: Campo de texto. Correo Electrónico: Campo de entrada de email para confirmar el correo de contacto. Autoriza envio de correos: Campo para autorizar envios de correso. Fecha de Nacimiento: Selector de fecha para elegir el cumpleaños (desactiva fechas posteriores). Teléfono: Campo de entrada de número, con validación para que incluya el formato de teléfono local. Botones: Atrás: Botón para volver al Paso 1. Siguiente: Botón para ir al Paso 3. Paso 3: Información Adicional Encabezado: "Más Información acerca de la Reserva" Texto de advertencia o aclaración: "Por el momento, no ofrecemos el servicio de decoración, pero si lo prefieres, puedes encargarte tú mismo. Para obtener más información, contáctanos." Visualización final de la reserva: Muestra en esta pantalla un resumen de los datos ingresados en los pasos 1 y 2. Botones: Atrás: Botón para volver al Paso 2. Confirmar Reserva: Botón principal para confirmar la reserva. Estilo Visual y Diseño UX: Utiliza colores elegantes y neutros con toques de color en los botones (como verde o azul) para guiar al usuario en la navegación. Añade una barra de progreso o indicadores visuales para que el usuario sepa en qué paso del formulario está. Cada campo debe estar bien espaciado y organizado para facilitar la lectura y la selección. Proporciona retroalimentación visual en los campos obligatorios y en los errores de validación.
