Créer une landing page avec l'IA : comment obtenir un résultat professionnel

Cet article fait partie de la série "Refonte de site web avec l'IA". Épisode précédent : Transformer un podcast en articles de blog.

Le problème

AsuOs propose deux offres principales : le Sprint (développement intensif sur une courte période) et le SaaS sur mesure (développement d'applications cloud). Mais sur le site, ces offres n'avaient pas de page dédiée. Un prospect qui voulait comprendre nos services devait deviner, ou me contacter directement.

Il manquait aussi une page 404 digne de ce nom. Juste le message par défaut de Next.js. Pas très professionnel.

La page SaaS sur mesure

Claude Code a créé une page complète à app/[locale]/saas-sur-mesure-suisse/page.tsx, plus de 260 lignes, avec une hero section contenant l'accroche et la proposition de valeur claire, une section problèmes/solutions présentant les pain points des clients et notre approche pour les résoudre, le processus de développement étape par étape présenté visuellement, la stack technologique avec les raisons de nos choix, une FAQ pour les questions fréquentes des prospects, et des données structurées Schema.org avec le balisage Service pour le référencement.

Le tout entièrement traduit dans les 3 langues via les clés next-intl. Pas de texte en dur dans le composant.

Ce qui m'a impressionné

Claude Code n'a pas créé une page générique. Il a lu les autres pages du site, compris le ton, le design system (Tailwind avec la palette orange), et produit quelque chose de cohérent avec le reste. Les classes CSS, l'espacement, la hiérarchie typographique, tout était aligné sans que j'aie à préciser quoi que ce soit.

La page Sprint

La page Sprint est plus complexe. Elle inclut un composant client (SprintClient.tsx) de plus de 220 lignes avec la présentation complète de l'offre (qu'est-ce qu'un sprint, pour qui, quels résultats attendre), des témoignages clients avec photos et retours d'expérience, un processus en étapes sous forme de timeline visuelle, une grille de tarification avec les différentes formules, et une section FAQ interactive en accordéon avec animations d'ouverture/fermeture.

Claude Code a aussi ajouté des données structurées Schema.org pour les services de sprint, ce qui aide Google à comprendre exactement ce qu'on propose avec le prix, la durée et la zone géographique de service.

La page 404 personnalisée

C'est un petit détail, mais qui fait la différence. Plutôt qu'une page d'erreur froide, Claude Code a créé une 404 qui affiche un message sympathique dans la langue de l'utilisateur, propose des liens de navigation pour retrouver son chemin, inclut une image personnalisée, et fonctionne automatiquement dans les 3 langues.

Le pattern qui se dégage

Ce qui est frappant avec ces pages, c'est le pattern de travail. Je décris l'intention : "J'ai besoin d'une page pour notre offre SaaS." Claude Code regarde les pages existantes pour comprendre le style. Il crée la page en respectant les conventions du projet. Et moi j'ajuste le contenu business : les tarifs, les promesses, le positionnement.

Le code technique (les composants React, les Server Components, les métadonnées, les données structurées, le responsive) est géré automatiquement. Mon rôle se concentre sur ce qui compte vraiment : est-ce que cette page dit ce qu'on veut dire à nos clients ?

Un gain de temps concret

Créer une landing page de qualité professionnelle, c'est habituellement 2 à 4 heures de design (même avec un design system), 4 à 8 heures de développement, 1 à 2 heures d'intégration SEO (métadonnées, données structurées) et 1 à 2 heures de test et responsive. Soit 1 à 2 jours par page, minimum.

Ici, les trois pages ont été créées en moins d'une heure au total. Et elles étaient déjà responsives, SEO-ready et trilingues dès le départ.

Demain, on quitte le contenu et la structure pour entrer dans le territoire le plus fun de cette refonte : les animations. Comment donner vie à un site avec des transitions de page spectaculaires, un effet ripple sur le switch de thème, et du scroll infini animé. Le tout en restant accessible. C'est l'épisode que j'ai préféré vivre en direct.