Skip to content
All projectsAlivaon client · 2026

Léandry PETNGA - Préparation mentale

Redesign of a mental coach's website for footballers, built around a single goal: booking the diagnostic session.

ContextAlivaon client
Year2026
Next.js 16React 19TypeScriptTailwind CSS 4MDXZodPlaywrightDocker
100
Lighthouse accessibility
100
Lighthouse SEO
95+
Mobile performance
1
Goal: the booking
01

Problem

  • The old site spoke to everyone - athletes, entrepreneurs, individuals - in self-help vocabulary, with no clear path to getting in touch.
  • The offer had to be refocused on football, the technology replaced without losing existing rankings, and the ground prepared for the client to edit his own content one day.
02

Solution

  • Strategy before code: positioning, personas and a plan for every page, built around one promise - the gap between training and match day - which became the site's visual signature.
  • Next.js 16 App Router, Server Components by default and component caching; all content (pages made of typed sections, testimonials, FAQ, MDX blog) lives outside the code and is validated by Zod schemas at build time.
  • A content-access layer isolated behind a single interface, cached and revalidatable: moving to a back office or CMS will only mean replacing three read functions.
  • Booking form as a Server Action that works without JavaScript, protected by a honeypot, a minimum delay and rate limiting, with emails sent through Brevo.
  • SEO: metadata checked at build time, JSON-LD (ProfessionalService, FAQPage, BlogPosting, VideoObject…), generated share images, llms.txt and 301 redirects for every old URL.
  • Video testimonials encoded and subtitled (local transcription with Whisper), players' faces blurred in photos; Playwright acceptance tests and a Docker image ready for a VPS.
03

Result

  • A site refocused on a single journey, from the first screen to the booking, designed mobile-first.
  • Mobile Lighthouse scores of 95 to 98 for performance and 100 for accessibility, best practices and SEO on every page measured.
  • Automated acceptance tests covering the mobile journey, every page, every redirect and the absence of broken links.

Stack

  • Next.js / React
  • TypeScript
  • Tailwind CSS
  • MDX / Zod
  • Brevo
  • Playwright
  • Docker

/ Contact

Software to design, deploy, operate?

Write to me. I reply within 48 h.