Rénovation du Léman

Année: 2025
Rôle: Site vitrine · Refonte · Motion design
Stack: Next.js 16, TypeScript, Tailwind CSS, Framer Motion, Lenis
Liens: Voir le siteDépôt privé

Site d'une entreprise de rénovation intérieure et extérieure installée à Genève et à Saint-Genis-Pouilly, entièrement repensé en 2026 en gardant ses couleurs. Direction « Plan clair » : grille d'architecte, grands titres, et le contour du Léman vectorisé depuis le logo comme fil conducteur animé. Diaporama et photos révélés par un passage de rouleau bleu, compteurs, services qui mènent à un devis pré-rempli, méthode en quatre étapes qui se remplit au défilement, réalisations épinglées qui défilent à l'horizontale, filtres et recherche, visionneuse plein écran, carte schématique des deux bureaux, en français et en anglais. Au passage : un formulaire de contact enfin fonctionnel (il était factice), les vrais textes servis aux moteurs de recherche et le contrôle des types réactivé.

Étude de cas

Le contexte

Une entreprise de rénovation entre Genève et la France voisine. Son site datait, et son formulaire de contact affichait « Message envoyé » sans rien envoyer : des demandes de clients se perdaient.

Mon rôle

Seul : refonte complète en gardant les couleurs de l'entreprise, animations, corrections et mise en ligne.

Défis techniques

01
Un fil conducteur tiré du logo
J'ai vectorisé le lac du logo (détection du contour puis simplification) pour en faire un tracé animé et une carte schématique des deux bureaux.
02
Des textes lisibles par Google
La page servie contenait les clés de traduction au lieu des textes : le français est maintenant servi par défaut, et la langue choisie est lue sans décalage d'hydratation.
03
Un formulaire qui arrive vraiment
La demande s'ouvre, complète, dans la messagerie du visiteur, adressée au bureau choisi (Suisse ou France) ; chaque service mène à un devis au sujet pré-rempli.

Extrait de code

contexts/language-context.tsxExtrait d'un dépôt privé

const read = (): Locale => {  try {    return localStorage.getItem("language") === "en" ? "en" : "fr"  } catch {    return "fr"  }} export function LanguageProvider({ children }: { children: React.ReactNode }) {  const language = useSyncExternalStore(subscribe, read, () => "fr" as Locale)  // …}

Le serveur rend toujours le français ; la langue enregistrée est lue ensuite, sans décalage d'hydratation.

Résultat

En ligne sur www.renovationleman.ch, avec le contrôle des types réactivé et les composants morts supprimés.

Rénovation du Léman — Accueil — Fig. 01Accueil

Rénovation du Léman — La méthode au défilement — Fig. 02La méthode au défilement

Rénovation du Léman — Services — Fig. 03Services

Rénovation du Léman — À propos — Fig. 04À propos

Rénovation du Léman — Réalisations épinglées — Fig. 05Réalisations épinglées

Rénovation du Léman — Appel à l'action — Fig. 06Appel à l'action

Rénovation du Léman — Toutes les réalisations — Fig. 07Toutes les réalisations

Rénovation du Léman — Page projet — Fig. 08Page projet

Rénovation du Léman — Visionneuse — Fig. 09Visionneuse

Rénovation du Léman — Contact et carte — Fig. 10Contact et carte