La llegada: el pase te recibe
01 · Demo vivaEl invitado viene de escanear un QR o tocar un link en WhatsApp. Lo primero que ve no es un formulario: es el pase de quien lo invitó — la misma tarjeta que ya conoce del chat, ahora recibiéndolo — con la frase que carga la relación: «Valentina te invita a importar con Mogos», el beneficio en claro, y un solo botón. La coreografía es la de la casa (ease-out, 640ms, cascada de 4 tiempos); con prefers-reduced-motion no hay placa: se aterriza directo en el formulario con el pase ya visible.
Valentina te invita a importar con Mogos
Tu beneficio: 10% de descuento en tu primer envío — sellado en tu pase
La placa de llegada. Solo existe con código válido. La coreografía cierra con el sello: el beneficio se estampa en el pase con el resorte de la casa — y el sello sigue puesto en el registro (continuidad literal). El barquito del manual navega la noche, quieto después de zarpar. El pase es el mismo artefacto que viajó por WhatsApp — continuidad literal entre el chat y la puerta. «Ya tengo cuenta» respeta al usuario existente sin esconderle la salida.
El registro: el beneficio nunca se pierde de vista
02 · PuertaTras el CTA, la placa se desliza y deja la puerta split de la familia aurora: el formulario a la derecha, y a la izquierda el pase anclado sobre la noche con el beneficio fijado. El invitado nunca duda de qué gana ni de quién lo trajo. El código viaja invisible — useReferralCode ya lo resuelve y lo persiste en cookie — así que el formulario no gana ni un campo.
10% en tu primer envío
El descuento se aplica solo al crear tu cuenta — no hay nada que escribir.
Te invitó Valentina
Crea tu cuenta
Empieza a importar desde China y Estados Unidos.
¿Ya tienes cuenta? Inicia sesión
El botón dice lo que pasa: «Registrarme y activar mi 10%» — el beneficio dentro de la acción, no en un banner aparte. En móvil la columna noche se apila arriba, compacta, y el formulario debajo.
El primer login: la promesa sigue viva
03 · HomeEl registro termina, la verificación pasa, y el cliente nuevo entra a su home (gramática aurora-home). Si el beneficio del referido sigue sin usarse, lo primero bajo el saludo es la banda de bienvenida: el punto rojo, «Tu 10% de Valentina te espera en tu primer envío», y el CTA directo a cotizar. Desaparece sola cuando el beneficio se usa o vence — nunca se convierte en ruido permanente.
Tu 10% de Valentina te espera en tu primer envío.
La banda usa la superficie celeste-soft con borde celeste — informativa, de la casa, sin gritar. El nombre del agente mantiene la relación personal hasta que la promesa se cumple.
Los estados, sin drama
04 · LeyLa puerta normal, sin placa y sin error. La doctrina ya existe en ReferralBanner: un código malo jamás rompe ni ensucia el registro. El invitado no paga los errores del link.
SHIPPING / STORAGE / GENERAL: misma llegada, copy del beneficio según la aplicación — el resolver ya devuelve application y value; los textos viven en el i18n del banner actual.
Si ya hay sesión activa, la placa no aparece: se aterriza en el home con la banda si el beneficio aplica, o directo al panel si no. «Ya tengo cuenta» en la placa lleva al login conservando el código.
Implementación
05 · Cierre| Pieza | Qué se hace |
|---|---|
| La placa de llegada | Componente nuevo en apps/client/components/auth/ montado en /register cuando useReferralCode resuelve: coreografía reutilizada de aurora-auth.css, pase con MembershipCard compacta (o su variante ligera), prefers-reduced-motion la salta, estado en sessionStorage para no repetirla en el mismo flujo. |
| La puerta split referida | Variante del register de aurora-familia: columna noche con el pase anclado + beneficio; el formulario no cambia de campos. El kick «Te invitó {agente}» y el botón «Registrarme y activar mi {valor}%» salen del mismo resolver. |
| La banda del home | Banda celeste-soft bajo el saludo del home del client, condicionada a «beneficio referido sin usar» — el dato ya existe en el perfil/promoción del cliente; CTA a cotizar. Se oculta al usarse o vencer. |
| Datos | GET /promotions/by-code/:code ya devuelve agent, value, application, code — todo lo que la placa, la puerta y la banda necesitan. Cero endpoints, cero migraciones. |
| Marca | El pase reutiliza MembershipCard + mogos-marks (ya en packages/ui); tokens --mogos-*; el punto rojo como firma en placa, botón y banda. |