VAG34
Le site de VAG34, atelier du Gard spécialisé en codage, rétrofit et diagnostic pour les marques du groupe Volkswagen (VW, Audi, Cupra, Seat, Skoda, Porsche). J'ai remplacé un WordPress de cinq pages par un site Next.js de 38 pages, dont 27 fiches de chantiers réels avec leurs photos. Tout est conçu d'abord pour le mobile, avec un seul objectif : que le visiteur appelle l'atelier.
▸ Le défi
L'ancien site était un WordPress de 2023 : cinq pages sans meta description, dont une page d'accueil presque vide. Rien n'expliquait ce que l'atelier sait faire de spécifique, comme la réparation du Travel Assist sans remplacer le volant. Les preuves existaient, mais seulement sur Facebook : une centaine de publications, alors que le blog du site ne contenait aucun article. Autre piège : l'atelier s'appelle VAG34 mais se trouve à Sardan, dans le Gard (30), pas dans l'Hérault.
La page Réalisations : chaque carte résume un chantier réel avec sa photo d'atelier, sa catégorie, le véhicule et le problème traité. Ici, trois interventions sur des Golf 8.
Focus sur l'expérience utilisateur : détails de navigation, micro-interactions et hiérarchie visuelle.
▸ La solution
J'ai tout reconstruit avec Next.js 16 et Tailwind CSS 4, sur une base claire : fond blanc cassé, cyan du logo en accent, titres en Archivo, pas de mode sombre. Chaque prestation a sa page avec une FAQ, et chaque chantier a sa fiche : le véhicule, le problème, l'intervention étape par étape, le résultat. Ces fiches sont de simples fichiers JSON, donc en ajouter une ne demande aucune ligne de code. Sur mobile, une barre fixe « Appeler l'atelier » et WhatsApp reste accessible sur toutes les pages. Côté SEO, chaque page porte ses données structurées et les anciennes adresses WordPress sont redirigées en 301.
Les cinq prestations, présentées en liste numérotée plutôt qu'en cartes à icônes. Chaque ligne dit ce qui est fait concrètement et mène à une page dédiée avec sa FAQ.
Résultats clés
Le site est en ligne sur vag34.com depuis l'été 2026 : 38 pages au sitemap contre cinq auparavant, et 27 chantiers consultables sans passer par Facebook. En septembre, j'ai ajouté la republication automatique des publications Facebook de l'atelier et les avis Google de sa fiche. La mesure d'audience fonctionne sans cookie, donc sans bandeau de consentement, et chaque clic sur « Appeler » ou « WhatsApp » est compté.
Discutons de votre vision.
Je conçois et développe sur mesure pour des marques exigeantes. Réponse sous 24h.
Chaque projet suit un processus structuré pour garantir un résultat optimal.
Ce projet a été réalisé en 1 semaine, de la découverte initiale au déploiement final.
Audit de l'existant
J'ai extrait le contenu de l'ancien WordPress (pages, médias, articles, métadonnées SEO) pour partir de faits : cinq pages datant de 2023, aucune meta description, un blog sans article. J'ai noté les adresses à conserver telles quelles et celles à rediriger.
Direction artistique
Point de départ : les sites officiels Porsche et Audi, clairs et précis, à l'opposé du look tuning. La palette tient en quelques tokens, dont le cyan #1FA8E0 tiré du logo de l'atelier. Archivo pour les titres, Inter pour le texte, une grille de 12 colonnes et beaucoup de blanc.
Contenu & chantiers
À partir de l'export de la page Facebook de l'atelier, j'ai écrit un script qui convertit les photos de chaque chantier en WebP et lit leurs dimensions pour réserver leur place à l'affichage. Résultat : 27 fiches construites sur le même plan (véhicule, problème, intervention, résultat), chacune reliée à sa prestation.
Développement & SEO technique
Site en Next.js 16 (App Router) avec des pages pré-générées. Animations GSAP et défilement Lenis, coupés si le visiteur a demandé moins d'animations. Formulaire de contact envoyé par Resend, avec champ piège anti-spam et limite d'envois. Côté SEO : données structurées, sitemap, redirections 301 et images Open Graph par prestation et par chantier, contrôlés avec des scripts Playwright avant la mise en ligne sur Vercel.
Évolutions après lancement
En septembre, deux ajouts. La page Réalisations republie les publications Facebook de l'atelier : l'appel à l'API Graph de Meta se fait côté serveur avec un cache d'une heure, et la section se masque toute seule si l'API ne répond pas. La page d'accueil affiche de vrais avis Google avec la note globale de la fiche et le balisage AggregateRating.
Projet suivant