Que fait Landing Page Fast ?

Production de pages d'atterrissage sur mesure. Les décisions sont prises pour vous. Résultat : une page fonctionnelle, déployée et alignée avec votre marque en 4 à 8 heures, pas des semaines.

Ce skill intègre les règles frontend-quality (a11y, Core Web Vitals, mobile-first) et les en-têtes web-security-baseline — vous n'avez pas à y penser pendant la construction.

Stack (par défaut — ne pas dévier sans raison)

Astro + Tailwind + Composants style shadcn/ui + Vercel.
TypeScript en mode strict.
astro:assets pour l'optimisation des images.
astro:transitions si multi-pages (garder minimal — une seule page est plus rapide à livrer).

Quand dévier :

Besoin de portes d'authentification / contenu dynamique par utilisateur évoluant vers l'application complète → utiliser Next.js 15 App Router au lieu d'Astro.
Opérateur déjà standardisé sur SvelteKit pour le projet → l'utiliser.

Ne PAS utiliser : WordPress, Wix, HTML+JS brut sans framework, CSS vanilla sans Tailwind. Plus lent à livrer, plus difficile à faire évoluer.

Structure des sections (éprouvée pour le public technique B2B/SaaS)

Dans cet ordre. Ne rien sauter sans raison explicite :

Hero — titre + sous-titre + CTA principal + visuel
Preuve sociale — logos, bandeau de statistiques, témoignage (uniquement si réel)
Problème — ce qui ne va pas avec le statu quo (vous GAGNEZ en crédibilité ici)
Solution — comment cela le résout (max 3 fonctionnalités)
Fonctionnement — 3 à 4 étapes avec diagramme ou captures d'écran
Cas d'usage — 2 à 3 personas, pas plus
Tarifs — affichez les prix sauf si vous ne pouvez vraiment pas
FAQ — 5 à 8 vraies questions, vraies réponses
CTA final — réaffirmez la valeur, répétez l'action
Pied de page — mentions légales, réseaux sociaux, contact

Passer la section « À propos / Équipe » sauf si la crédibilité du fondateur est l'argument de vente (la plupart des produits B2B infra : passer ; les produits grand public fondés par un fondateur : inclure).

Anatomie du Hero

[Titre : 6 à 10 mots, promesse de valeur]
[Sous-titre : 15 à 25 mots, qui/quoi/pourquoi]
[CTA principal] [CTA secondaire — « voir comment ça marche »]
[Visuel : capture d'écran, diagramme ou boucle de démo de 30 s]

Règles du titre :

Promettre un résultat, pas une fonctionnalité.
Préférer le spécifique à l'abstrait.
Inclure le mot-clé principal pour le SEO et la qualification.

Exemples :

❌ « Infrastructure puissante pour les applications modernes »
✅ « Infrastructure RPC Solana avec p99 inférieur à 50 ms »
❌ « Plateforme transparente pour les appels d'offres publics »
✅ « Rejoignez les appels d'offres publics en 10 minutes »

Paramètres par défaut spécifiques au projet

Landing [Projet A]

Marché localisé principal, anglais sur /en quand une deuxième langue est nécessaire.
Hero : capture d'écran du tableau de bord avec un appel d'offres en surbrillance.
Signaux de confiance : références légales (badges de conformité pertinents), logo d'audit, certifications réglementaires si applicable.
Couleur : couleur primaire de la marque + crème neutre + accent sobre.
Mobile-first exigence stricte : la plupart des utilisateurs sont sur téléphone.
Capture de formulaire : WhatsApp + email (WhatsApp est énorme en AR pour les PME).

Landing [Projet B]

Marché localisé principal, anglais sur /en quand une deuxième langue est nécessaire.
Confiance, confiance, confiance. Badges de conformité, visualisation du chiffrement, messages sur le contrôle des patients.
Style photographique : chaleureux, humain, PAS techno/froid.
Couleur : palette plus chaude que [Projet A] (terre cuite, sauge, crème).
Formulaires minimes — juste email + sélecteur « Je suis [patient | médecin | clinique] ».
Avis de confidentialité bien visible (références aux lois locales applicables sur les droits des patients et la protection des données personnelles).

Page produit [Entreprise]

Anglais d'abord, pas de localisation.
Riche en code. Extraits en direct qui se copient-collent.
Chiffres de performance partout (« p99 < 50 ms », « 100k TPS »), avec lien vers la méthodologie de benchmark.
CTA d'inscription au niveau gratuit.
Couleur : palette de la marque [Entreprise] issue des sorties brand-creation.

Planning horaire

Heure 1 : Configuration

pnpm create astro@latest <projet> -- --template basics --typescript strict
cd <projet>
pnpm add @astrojs/tailwind @astrojs/sitemap @astrojs/vercel
pnpm dlx astro add tailwind sitemap vercel
pnpm add -D @astrojs/check

Initialiser le projet Vercel (le CLI détecte automatiquement Astro) :

pnpm dlx vercel link
pnpm dlx vercel deploy --prod  # déploiement initial à blanc, valide le pipeline

Heures 2 à 3 : Contenu et structure

Rédiger le contenu en markdown D'ABORD (dans docs/landing-copy.md).
Ne pas concevoir tant que le contenu n'est pas réel.
Section par section. Viewport mobile-first pendant la construction.

Heure 4 : Polissage visuel

Visuel du Hero via le skill nanobanana OU une capture d'écran réelle.
Illustrations des sections cohérentes (un seul style — ne pas mélanger).
Échelle d'espacement Tailwind strictement respectée (pas de valeurs arbitraires).

Heure 5 : Formulaires et analytics

Le formulaire va vers Resend (email transactionnel) OU Supabase (base de données de liste d'attente) via une fonction Edge Vercel.
Script Plausible (auto-hébergé sur Walter-VM ou cloud 9 €/mois).
Tester le flux complet : formulaire → confirmation par email → ligne dans la base de données.

Heure 6 : SEO et en-têtes

Balises Meta (titre, description, og:, twitter:) par page.
URL canonique.
Données structurées JSON-LD (Organisation ou Produit).
Robots.txt + sitemap.xml (le plugin Astro génère automatiquement).

En-têtes de sécurité (dans vercel.json ou middleware) :

{
  "headers": [{
    "source": "/(.*)",
    "headers": [
      { "key": "Strict-Transport-Security",
        "value": "max-age=31536000; includeSubDomains; preload" },
      { "key": "X-Content-Type-Options", "value": "nosniff" },
      { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
      { "key": "Permissions-Policy",
        "value": "camera=(), microphone=(), geolocation=()" },
      { "key": "Content-Security-Policy",
        "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io" }
    ]
  }]
}

Heure 7 : Passage performance

Exécution Lighthouse. TOUS LES QUATRE SCORES ≥ 95.
Tailles d'images correctes (formats nouvelle génération, dimensionnées pour le viewport).
Bundle < 150 KB gzippé initial.
Élément LCP préchargé.

Heure 8 : Déploiement et vérification

Domaine personnalisé via Vercel (DNS Cloudflare pointé vers Vercel).
Déploiement en production.
Test sur un vrai téléphone.
Soumettre à Google Search Console.
Premier événement analytics enregistré.

Budget de performance (IMPÉRATIF)

Métrique	Budget	Outillage
Performance Lighthouse	≥ 95	CI
Accessibilité Lighthouse	≥ 95	CI
Bonnes pratiques Lighthouse	≥ 95	CI
SEO Lighthouse	≥ 95	CI
LCP sur 3G	< 2,5 s	WebPageTest
INP p75	< 200 ms	RUM (Plausible si activé, ou lib web-vitals)
CLS	< 0,1	RUM
JS initial gzippé	< 150 Ko	bundlewatch
Temps jusqu'au premier octet	< 200 ms	Vercel edge

Si une métrique échoue : corriger avant le lancement. Les pages marketing avec de mauvaises mesures font chuter la conversion immédiatement.

Règles de rédaction

Pour un produit technique ([Entreprise]) :

Commencer par le nom que le client recherche (« Solana RPC »).
Statistiques tôt — donner une raison de croire dans les 5 premières secondes.
Montrer > dire : extrait de code, capture d'écran, chiffres réels.
Un seul CTA, répété.

Pour les marchés grand public / localisés ([Projet A], [Projet B]) :

Mots simples, phrases courtes.
Commencer par la question que l'utilisateur se pose.
Signaux de confiance (conformité, badges de sécurité) plus visibles.
Plusieurs CTA acceptables (s'inscrire, en savoir plus, contacter).

Capture de formulaire

// Fonction Edge Vercel : /api/signup.ts
export const config = { runtime: 'edge' }

export default async function handler(req: Request) {
  if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 })

  const { email, source } = await req.json()

  // Limiter le débit par IP via Vercel KV / Upstash
  // Valider l'email avec zod
  // Insérer dans la table de liste d'attente Supabase (protégée par RLS)
  // Déclencher l'email de confirmation via Resend
  // Retourner 200 ou une erreur spécifique

  return Response.json({ ok: true })
}

NE JAMAIS :

Faire confiance au client pour « se souvenir » de l'état de soumission.
Ignorer la validation côté serveur.
Oublier la limitation de débit (un utilisateur, un bot, une attaque DDoS — même bogue).

Analytics par défaut

Plausible (auto-hébergé sur Walter-VM ou cloud) :

<script defer data-domain="[projet-a].com.ar" src="https://plausible.<domain>/js/script.js"></script>

Suivi :

Pages vues (par défaut)
Clics sortants (data-domain="..." data-track-outbound="true")
Soumissions de formulaires (événement personnalisé)
Profondeur de défilement sur les pages longues (événement personnalisé, anti-rebond)

NE PAS :

Ajouter Google Analytics. Lourd, hostile à la vie privée, ambigu dans l'UE-AAR.
Ajouter des outils de rejeu de session. Surtout pas pour [Projet B] (risque PHI).
Ajouter des cartes de chaleur. Lourd + intrusif.

Anti-patrons (à ne pas faire)

Hero en carrousel — personne ne clique au-delà de la diapositive 1.
Trop de CTA — « S'inscrire » + « En savoir plus » + « Regarder la démo » + « Lire le blog » dans le Hero = paralysie décisionnelle.
Photos libres de droits de personnes diverses souriant dans des bureaux — signal instantané de « SaaS générique ».
Défilé de 50 petits logos de concurrents — en choisir 4 à 6 lisibles.
Mur de fonctionnalités — en choisir 3 ou 6, pas 27.
Vidéo auto-lancée avec son — rebond instantané.
Popup modal avant le chargement de la page — rebond instantané.
Bannière de cookies qui bloque la page — illégal dans l'UE, agaçant partout. Utiliser une notification minimale et non bloquante.

Quand tester A/B

Ne pas le faire avant d'avoir 1 000+ visiteurs/semaine. En dessous, le bruit domine.

Quand prêt :

Tester UN élément à la fois (titre, visuel du Hero, texte du CTA).
Utiliser les tests A/B Vercel ou le test fractionné de Plausible.
Signification statistique avant de déclarer un gagnant.

Règles strictes

Le budget de 8 h est impératif. Si vous êtes à l'heure 6 et que vous concevez encore, livrez le travail de l'heure 7 et sautez le polissage de l'heure 8. Mieux vaut un produit imparfait en ligne qu'un produit parfait dans votre dépôt.
Chaque script externe audité. Pas de « tant qu'on y est, ajoutons Hotjar / FullStory / Drift ». Chaque script ralentit la page et augmente le risque pour la vie privée.
Aucun changement en production sans déploiement de prévisualisation approuvé.
Échec Lighthouse = lancement bloqué.

Intégration

nanobanana pour la génération de Hero / d'illustrations.
Sorties brand-creation pour la palette, la typographie, la voix.
Règles frontend-quality intégrées (a11y + perf).
En-têtes web-security-baseline intégrés.
seo-keyword-research (backlog différé) informe le contenu et les meta.
Skill pr-review pour la révision finale avant fusion.

Ce que ce skill ne fait PAS

Applications multi-pages avec authentification, tableaux de bord, etc. → commencer avec Next.js.
Mise en place de blog. Utiliser Astro Starlight ou un framework de documentation de type Mintlify.
Automatisation du marketing par email. Utiliser ConvertKit / Beehiiv.
Chat de support client. Si nécessaire, utiliser Crisp (option argentine, multilingue).

Landing Page Fast

Qu'est-ce que Landing Page Fast ?

Demander à votre IA préférée

Documentation