FER Web
Landing Publica - FER Powerlifting
Landing publica del evento FER CUP II 2026 en Almussafes. Presenta modalidades, horarios, ubicacion, galeria, tutoriales, equipo y formulario de inscripcion multi-paso. Construido con React 18, Vite, TypeScript, Tailwind CSS y Framer Motion para un diseno cinematico con paleta mistica FER. Validacion robusta con Zod y gestion de pagos via Stripe.
Tecnologías utilizadas
Front-end
Tailwind CSS
Framer Motion
Responsive DesignDevOps
VPSHerramientas
JotaiFuncionalidades principales
Hero animado con Framer Motion
Animaciones de entrada, scroll-linked effects, paleta mistica FER con tipografia Fugaz One. Diseno cinematico que marca el tono del evento desde el primer pixel.
Modalidades de powerlifting
Detalle de sentadilla, press de banca y peso muerto con reglamento IPF/equipado, categorias y records por division.
Calendario y horarios del evento
Bloques por dia, plataforma de salida, calentamiento y breaks. Datos en vivo desde el backend para reflejar cambios de ultima hora.
Mapa interactivo y como llegar
Google Maps embebido, direccion del pabellon, parking, transporte publico y hoteles cercanos.
Galeria de ediciones anteriores
Carrusel de imagenes en alta resolucion con lazy load y lightbox. Memorias visuales de cada FER Cup.
Historia del equipo y comunidad
Seccion con timeline, equipo organizador, valores y como FER Powerlifting nacio como evento independiente.
Tutoriales y normativa visual
Guias paso a paso para atletas novatos: como inscribirse, equipacion valida, comandos en plataforma y sanciones.
Formulario de inscripcion con Zod
Validacion robusta de cada paso (datos personales, categoria de peso, modalidad, pago) con Zod + react-hook-form.
Inscripcion multi-paso responsive
Wizard mobile-first con guardado automatico, resumen lateral y soporte para pago via Stripe o transferencia.
Pago seguro con Stripe Checkout
Pasarela de pago Stripe Checkout en modo hosted: tarjeta, Apple Pay y Google Pay. Webhook server-side confirma el pago y libera la plaza automaticamente.
QR unico generado al inscribirse
QRCoder del backend genera un QR firmado por competicion (HMAC con QrSecret) que se almacena en BunnyCDN y se incrusta tanto en el email de confirmacion como en la pagina de exito para check-in en la mesa de registro.
Emails transaccionales automaticos
MailKit envia emails HTML branded para cada hito: confirmacion de inscripcion con QR embebido, confirmacion de pago y notificacion al admin. Configurable SMTP/Gmail por competicion desde el backoffice.
Pantalla de inscripcion confirmada con QR
Tras pagar por Stripe, el atleta llega a una pantalla de exito con su codigo QR descargable, instrucciones para el dia del evento y resumen completo de su inscripcion.
Email de confirmacion de pago
Email HTML branded con detalle del pago, modalidad inscrita, categoria de peso, horarios y siguiente paso. Se envia automaticamente cuando el webhook de Stripe confirma el cargo.
Manejo robusto de errores de pago
Estados tipados para cada fase del pago: loading, redirecting, already_paid, stripe_unavailable y error. Mensajes claros y opcion de reintentar sin perder el progreso de inscripcion.
Vista movil optimizada
Diseno mobile-first con menu hamburguesa, secciones colapsables y CTAs accesibles en cualquier pantalla.
Galería de imágenes
