Crea un flujo de inscripción de 3 pasos con las siguientes características:
- Paso 1 (Cursos): Una sección de tarjetas de cursos con un botón que diga "Inscribirme". Al hacer clic, debe usar un estado para cambiar a la siguiente vista (Simular navegación).
- Paso 2 (Registro y Pago): > * Un formulario de registro (Nombre, Email, Teléfono).
- Debajo, una sección de "Pago por Transferencia" que muestre claramente los datos bancarios (Banco, CLABE, Beneficiario).
- Un botón de acción principal que diga "He realizado el pago".
- Paso 3 (Redirección): Al confirmar el pago, mostrar una pantalla de éxito breve que diga "¡Casi listo!" y que automáticamente (o mediante un botón destacado) redirija al usuario a un enlace de WhatsApp para enviar el comprobante.
Requisitos técnicos:- Usa Tailwind CSS para un diseño moderno y limpio.
- Usa componentes de Lucide React para iconos (checkmarks, banco, usuario).
- La navegación entre pasos debe ser fluida (usa transiciones simples).
- Haz que el diseño sea responsivo y profesional.
Voy a crear un componente de flujo de inscripcion de 3 pasos que reemplazara el boton simple de "Inscribirme" en las tarjetas de cursos. Usare un modal/overlay para el proceso de inscripcion con transiciones suaves.
Ahora actualizo el componente de cursos para integrar el flujo de inscripcion:
Se creo el flujo de inscripcion de 3 pasos con todas las caracteristicas solicitadas:
Paso 1 (Confirmar Curso): Muestra la tarjeta del curso seleccionado con duracion, nivel, y beneficios incluidos (certificacion, material digital, acceso a plataforma). El boton "Continuar con Inscripcion" avanza al siguiente paso.
Paso 2 (Registro y Pago): Formulario con campos de Nombre, Email, Telefono y Empresa (opcional). Debajo, seccion de "Pago por Transferencia" con datos bancarios completos (Banco BBVA, CLABE, Cuenta, Beneficiario, Referencia) y botones para copiar cada dato. El boton "He realizado el pago" solo se habilita cuando el formulario esta completo.
Paso 3 (Redireccion): Pantalla de exito con icono de check verde, mensaje personalizado con el nombre del usuario, y redireccion automatica a WhatsApp despues de 3 segundos. El boton verde "Enviar Comprobante por WhatsApp" abre la conversacion con un mensaje prellenado que incluye el nombre del curso.
El flujo incluye indicador de progreso visual con pasos numerados, transiciones suaves entre pasos, y un modal con backdrop blur que se cierra al hacer clic fuera. Los datos bancarios y de WhatsApp estan centralizados en constantes al inicio del archivo para facilitar su modificacion.
Ahora voy a agregar el logo de CIIC y el precio de $2,000 a cada tarjeta de curso. Tambien actualizare el enrollment-flow para mostrar el precio.
Ahora voy a agregar el logo CIIC y el precio en la tarjeta de cada curso:
Ahora actualizo el enrollment flow para pasar el precio y mostrarlo:
Ahora actualizo el enrollment-flow para mostrar el precio:
Ahora necesito cerrar el div extra que agrege:
Tambien agrego el precio a la seccion de pago en el paso 2:
He agregado el logo de CIIC y el precio de $2,000 MXN a cada tarjeta de curso. Los cambios incluyen: (1) El logo aparece en la parte superior de cada tarjeta junto con el precio destacado en color naranja (accent); (2) En el flujo de inscripcion (paso 1), se muestra el logo y precio en un header destacado antes de la informacion del curso; (3) En el paso 2 de pago, se muestra un recuadro con el "Total a pagar" para que el usuario tenga claro el monto a transferir. El precio esta definido como constante COURSE_PRICE = 2000 al inicio del archivo, facilitando su modificacion futura.