2026 · Diseño y desarrollo end-to-end · Agencia Xpandex
FERA Training Club
Centro de entrenamiento híbrido en Palma, trilingüe y estático
- Astro 6
- TypeScript
- Tailwind CSS 4
- Zod 4
- View Transitions
- Idiomas
- ES · EN · CA
- Salida
- Estática
- Framework JS
- Ninguno en cliente
La web por dentro
Capturas de la web en producción, a 1440 px y a 375 px.
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Contexto
Un centro de entrenamiento funcional híbrido en Palma de Mallorca, certificado como centro HYROX oficial. Abría en julio y necesitaba la web lista para la preventa de socio fundador, con captación desde el primer día.
Mallorca es mercado de tres lenguas: castellano, inglés y catalán. No era un extra opcional, era condición de partida.
Enfoque
- Astro estático puro. Sin isla de framework en cliente: lo que llega al navegador es HTML, CSS y un poco de JS propio. En una web cuyo trabajo es explicar el método y llevar al formulario, cargar React no aporta nada.
- i18n propio con rutas localizadas para español, inglés y catalán, con sitemap multilingüe. Cada idioma tiene su URL, no un parámetro ni un cambio en cliente.
- Zod 4 validando el formulario con el mismo esquema que documenta los campos. El error de validación se define una vez.
- Bloque de preventa justo tras el hero — durante la apertura, la conversión era captar socios fundadores, así que el formulario iba antes que cualquier otra sección, no en una página aparte.
- View Transitions nativas de Astro entre páginas. Da continuidad tipo aplicación sin router de cliente ni el peso que conlleva.
- Tipografías self-hosted (Hanken Grotesk y Space Mono) en woff2, servidas desde el propio dominio.
Trabajo realizado
- Arquitectura Astro estática con TypeScript en modo estricto
- Sistema i18n de tres idiomas con rutas y sitemap localizados
- Sistema de diseño en tokens de Tailwind 4, sobre naranja de marca y fondos oscuros
- Formularios de reserva de clase y preventa con validación Zod
- Páginas de método, clases, planes, HYROX y tienda
- Despliegue continuo: push a la rama principal publica en producción
Resultado
En producción sobre su dominio propio desde la apertura. Al no haber CMS ni base de datos, la web no tiene superficie de ataque que mantener: es un directorio de ficheros estáticos servidos por el hosting.
Nota sobre el trabajo
Proyecto desarrollado en Agencia Xpandex, donde llevo el ciclo completo: diseño, desarrollo, rendimiento, accesibilidad, SEO técnico y despliegue. La fotografía del centro la aporta el cliente.