FERA Training Club

Context

A hybrid functional training centre in Palma de Mallorca, certified as an official HYROX venue. It was opening in July and needed the site ready for founding-member pre-sales, converting from day one.

Mallorca is a three-language market: Spanish, English and Catalan. That wasn’t an optional extra, it was a starting condition.

Approach

• Pure static Astro. No client-side framework island: what reaches the browser is HTML, CSS and a little of our own JS. For a site whose job is to explain the method and drive people to a form, shipping React adds nothing.
• Custom i18n with localised routes for Spanish, English and Catalan, plus a multilingual sitemap. Each language gets its own URL, not a query parameter or a client-side switch.
• Zod 4 validating the form with the same schema that documents the fields. Validation errors are defined once.
• Pre-sale block immediately after the hero — during opening, the conversion was signing founding members, so the form came before any other section rather than on a separate page.
• Native Astro View Transitions between pages. App-like continuity without a client router or the weight it brings.
• Self-hosted typefaces (Hanken Grotesk and Space Mono) as woff2, served from the site’s own domain.

What I built

• Static Astro architecture with TypeScript in strict mode
• Three-language i18n system with localised routes and sitemap
• Design system in Tailwind 4 tokens, built on brand orange over dark grounds
• Class booking and pre-sale forms with Zod validation
• Method, classes, plans, HYROX and shop pages
• Continuous deployment: pushing to the main branch publishes to production

Outcome

Live on its own domain since opening day. With no CMS and no database, the site has no attack surface to maintain: it’s a directory of static files served by the host.

A note on this work

Built at Xpandex, where I run the full cycle: design, development, performance, accessibility, technical SEO and deployment. Venue photography supplied by the client.