Landing page Claude Code : offre claire, confiance, tracking et tests

Une landing page est un parcours de décision, pas une simple maquette

Claude Code peut produire rapidement une page avec hero, cartes de fonctionnalités, tarifs, FAQ et CTA. C’est utile, mais insuffisant pour une page destinée à vendre, qualifier des prospects ou vendre une formation. Une bonne landing page aide une personne précise à comprendre une offre précise, à vérifier qu’elle peut faire confiance, puis à passer à l’action avec une mesure fiable.

La conversion ne signifie pas uniquement achat. Il peut s’agir d’une réservation de conseil, d’un téléchargement de checklist, d’un achat de modèle, d’une demande de formation ou d’un début d’essai. CTA signifie Call To Action, c’est-à-dire l’appel à l’action comme “Réserver une revue” ou “Recevoir la checklist”. Un bloc de confiance donne les preuves : processus, expérience, critères de revue, erreurs corrigées et limites honnêtes.

Dans le contexte ClaudeCodeLab, l’objectif n’est pas de promettre une hausse garantie du taux de conversion. L’objectif est de relier conseil Claude Code, modèles et formations à une page claire, mesurable, accessible et rapide. Les références officielles utiles sont Claude Code docs, Astro Pages, Tailwind CSS, React forms, GA4 events et Playwright.

Trois cas d’usage avant l’interface

Commencez par les situations réelles. Claude Code écrit de meilleures sections quand il comprend l’intention commerciale.

Cas d’usage	Situation du lecteur	Offre pertinente	Événement à mesurer
Vente de template pour indie maker	Veut une LP Claude Code mais manque de structure de copy	Template Astro LP et prompts de copy	Clic produit, début de checkout
Conseil SaaS ou agence	A du trafic, mais des leads peu qualifiés	Diagnostic de 90 minutes et revue d’implémentation	Envoi du formulaire, réservation
Formation d’équipe	Veut standardiser l’usage de Claude Code	Atelier LP, revue de code, analytics et tests	Demande de formation, téléchargement du support

Le lecteur vérifie d’abord si la page le concerne, ensuite si elle est crédible, puis ce qui se passe après le clic. L’ordre des sections doit suivre cette logique.

flowchart TD
  A["Trafic depuis recherche, article, annonce ou social"] --> B["Premier écran avec audience, offre et CTA"]
  B --> C["Bloc de confiance avec méthode et preuves"]
  C --> D["Cas d'usage reliés à la situation du lecteur"]
  D --> E["Prix ou lead magnet réduit la friction"]
  E --> F["Formulaire, clic produit ou demande de formation"]
  F --> G["Événements et A/B test guident l'itération"]

Prompt de production pour Claude Code

Une demande vague donne une page vague. Spécifiez les livrables.

Implémente une landing page "Claude Code Landing Page Sprint" avec Astro, React et Tailwind CSS.

Objectif:
- Convertir les lecteurs en réservations de conseil, achats de templates ou demandes de formation.
- Audience: indie makers, opérateurs SaaS, agences et responsables engineering.
- Ne pas promettre d'amélioration garantie du taux de conversion.

Sections obligatoires:
- Premier écran: audience, offre, CTA principal, CTA secondaire.
- Bloc de confiance: expérience de Masa, processus de revue, checklist avant publication.
- Trois cas d'usage concrets.
- Prix ou lead magnet.
- Formulaire: name, email, company, goal, budget, consent.
- Événements: lp_view, cta_click, lead_submit, product_click.
- A/B test: comparer deux textes de CTA.
- Playwright mobile checks: CTA visible, labels corrects, pas de scroll horizontal.

Contraintes:
- TypeScript copiable, pas de pseudocode.
- Labels, focus, clavier et contraste corrects.
- Pas de vidéo hero lourde qui dégrade le LCP.
- Ne pas envoyer de données personnelles dans les événements.

Premier écran avec Astro

Le premier écran doit être clair avant d’être spectaculaire. Le composant suivant supporte deux variantes de copy.

---
// src/components/LandingHero.astro
export interface Props {
  variant: "control" | "lead_magnet";
}

const { variant } = Astro.props;

const copy = {
  control: {
    eyebrow: "Claude Code Landing Page Sprint",
    headline: "Livrer une landing Claude Code avec offre, formulaire et tracking",
    body: "Nous transformons la page en parcours mesurable: premier écran, confiance, prix, formulaire, événements et QA mobile.",
    primary: "Réserver une revue gratuite",
    secondary: "Voir les templates",
  },
  lead_magnet: {
    eyebrow: "Checklist gratuite incluse",
    headline: "Trouver les points de fuite avant de coder l'interface",
    body: "Vérifiez offre, CTA, prix, formulaire, vitesse, accessibilité et nommage des événements avant publication.",
    primary: "Recevoir la checklist",
    secondary: "Voir la formation",
  },
}[variant];
---

<section class="bg-slate-950 px-4 py-16 text-white sm:py-20">
  <div class="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
    <div>
      <p class="text-sm font-semibold uppercase tracking-wide text-cyan-300">{copy.eyebrow}</p>
      <h1 class="mt-4 max-w-3xl text-4xl font-bold leading-tight sm:text-5xl">{copy.headline}</h1>
      <p class="mt-5 max-w-2xl text-lg leading-8 text-slate-200">{copy.body}</p>
      <div class="mt-8 flex flex-col gap-3 sm:flex-row">
        <a data-cta-id="hero-primary" href="#lead-form" class="inline-flex min-h-12 items-center justify-center rounded-md bg-cyan-300 px-6 font-semibold text-slate-950 hover:bg-cyan-200 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">{copy.primary}</a>
        <a data-cta-id="hero-secondary" href="/products" class="inline-flex min-h-12 items-center justify-center rounded-md border border-slate-500 px-6 font-semibold text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">{copy.secondary}</a>
      </div>
      <p class="mt-4 text-sm text-slate-400">Pas de promesse magique. La valeur est la clarté, l'implémentation et la mesure.</p>
    </div>
    <div class="rounded-lg border border-slate-700 bg-slate-900 p-6">
      <h2 class="text-lg font-semibold">À vérifier avant publication</h2>
      <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-200">
        <li>L'audience, l'offre et l'action suivante sont visibles immédiatement.</li>
        <li>La confiance repose sur une méthode et des preuves concrètes.</li>
        <li>Formulaire, produit et formation ont des événements séparés.</li>
        <li>En mobile, CTA et formulaire restent utilisables.</li>
      </ul>
    </div>
  </div>
</section>

Les attributs data-cta-id rendent le suivi robuste, même si le texte du bouton change.

Confiance, preuve, prix et lead magnet

La page doit répondre aux inquiétudes dans l’ordre.

Bloc	À montrer	À éviter
Confiance	Checklist, captures, bio, processus QA	Badges vides et slogans vagues
Preuve	Ce que Masa a testé, ce qui a cassé, ce qui a changé	Faux témoignages, chiffres invérifiables
Prix	Différence entre template, revue et formation	Cacher tout prix derrière un formulaire
Lead magnet	Checklist, grille d’audit, prompts de copy	PDF mince uniquement conçu pour capter l’email

Le chemin naturel est products pour l’autonomie, training pour les équipes, et formulaire pour une revue.

Schema de formulaire et endpoint Astro

Le schema décrit ce que le formulaire accepte. Cet endpoint fonctionne sans dépendance externe.

// src/pages/api/lead.ts
import type { APIRoute } from "astro";

type LeadInput = {
  name: string;
  email: string;
  company: string;
  goal: string;
  budget: "template" | "consulting" | "training" | "undecided";
  consent: boolean;
};

function validateLead(form: FormData): { ok: true; data: LeadInput } | { ok: false; errors: string[] } {
  const data: LeadInput = {
    name: String(form.get("name") ?? "").trim().slice(0, 80),
    email: String(form.get("email") ?? "").trim().slice(0, 120),
    company: String(form.get("company") ?? "").trim().slice(0, 120),
    goal: String(form.get("goal") ?? "").trim().slice(0, 1000),
    budget: String(form.get("budget") ?? "undecided") as LeadInput["budget"],
    consent: form.get("consent") === "on",
  };

  const errors: string[] = [];
  if (!data.name) errors.push("Name is required.");
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errors.push("A valid email is required.");
  if (data.goal.length < 20) errors.push("Please describe the goal in at least 20 characters.");
  if (!["template", "consulting", "training", "undecided"].includes(data.budget)) errors.push("Budget is invalid.");
  if (!data.consent) errors.push("Consent is required.");

  return errors.length ? { ok: false, errors } : { ok: true, data };
}

export const POST: APIRoute = async ({ request }) => {
  const result = validateLead(await request.formData());

  if (!result.ok) {
    return new Response(JSON.stringify({ ok: false, errors: result.errors }), {
      status: 400,
      headers: { "content-type": "application/json" },
    });
  }

  console.info("new_lp_lead", {
    emailDomain: result.data.email.split("@")[1],
    budget: result.data.budget,
    goalLength: result.data.goal.length,
  });

  return new Response(JSON.stringify({ ok: true }), {
    status: 200,
    headers: { "content-type": "application/json" },
  });
};

Les événements d’analytics ne doivent pas contenir nom, email, entreprise ou texte libre. Gardez les données personnelles dans le système de lead.

// src/components/LeadForm.tsx
import { useState } from "react";
import { trackLpEvent } from "../lib/lp-events";

export function LeadForm() {
  const [message, setMessage] = useState("");
  const [sending, setSending] = useState(false);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSending(true);

    const response = await fetch("/api/lead", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });

    setSending(false);
    if (!response.ok) {
      const body = await response.json();
      setMessage(body.errors?.join(" ") ?? "Vérifiez le formulaire.");
      return;
    }

    trackLpEvent({ eventName: "lead_submit", ctaId: "lead-form", value: "consulting" });
    setMessage("Demande envoyée. Consultez votre email pour la suite.");
    event.currentTarget.reset();
  }

  return (
    <form id="lead-form" onSubmit={onSubmit} className="space-y-5 rounded-lg border border-slate-200 p-6">
      <label className="block text-sm font-medium">Nom<input name="name" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Email<input name="email" type="email" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Objectif de la landing page<textarea name="goal" required minLength={20} rows={5} className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">Type d'aide
        <select name="budget" className="mt-1 w-full rounded-md border px-3 py-2">
          <option value="template">Template</option>
          <option value="consulting">Conseil</option>
          <option value="training">Formation d'équipe</option>
          <option value="undecided">Pas encore sûr</option>
        </select>
      </label>
      <label className="flex gap-2 text-sm"><input name="consent" type="checkbox" required />J'accepte d'être contacté au sujet de cette demande.</label>
      <button disabled={sending} className="min-h-11 w-full rounded-md bg-slate-950 px-5 font-semibold text-white disabled:opacity-60">{sending ? "Envoi..." : "Envoyer la demande"}</button>
      <p role="status" aria-live="polite" className="text-sm">{message}</p>
    </form>
  );
}

Événements, performance et A/B test

Fixez les noms avant publication.

// src/lib/lp-events.ts
type LpEventName = "lp_view" | "cta_click" | "lead_submit" | "product_click";

type LpEvent = {
  eventName: LpEventName;
  ctaId?: string;
  variant?: "control" | "lead_magnet";
  value?: "template" | "consulting" | "training";
};

declare global {
  interface Window {
    dataLayer?: Array<Record<string, unknown>>;
    gtag?: (command: "event", name: string, params: Record<string, unknown>) => void;
  }
}

export function trackLpEvent(event: LpEvent) {
  if (typeof window === "undefined") return;

  const params = {
    page_slug: "claude-code-landing-page",
    cta_id: event.ctaId,
    variant: event.variant,
    value_type: event.value,
  };

  window.dataLayer?.push({ event: event.eventName, ...params });
  window.gtag?.("event", event.eventName, params);
}

La performance fait partie de la conversion. Core Web Vitals explique LCP, INP et CLS. Sur une landing page, les risques viennent souvent des images hero trop lourdes, scripts tiers et blocs qui déplacent la mise en page.

// src/lib/landing-ab.ts
export type LandingVariant = "control" | "lead_magnet";

export function chooseLandingVariant(visitorId: string): LandingVariant {
  let hash = 2166136261;
  for (let index = 0; index < visitorId.length; index += 1) {
    hash ^= visitorId.charCodeAt(index);
    hash = Math.imul(hash, 16777619);
  }
  return Math.abs(hash) % 2 === 0 ? "control" : "lead_magnet";
}

---
// src/pages/lp.astro
import LandingHero from "../components/LandingHero.astro";
import { chooseLandingVariant } from "../lib/landing-ab";

const visitorId = Astro.cookies.get("lp_visitor")?.value ?? crypto.randomUUID();
Astro.cookies.set("lp_visitor", visitorId, {
  path: "/",
  sameSite: "lax",
  secure: import.meta.env.PROD,
  maxAge: 60 * 60 * 24 * 30,
});

const variant = chooseLandingVariant(visitorId);
---

<LandingHero variant={variant} />
<script define:vars={{ variant }}>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "lp_view", page_slug: "claude-code-landing-page", variant });
</script>

N’assignez pas les variantes uniquement avec localStorage: cela peut créer un clignotement et fausser l’exposition enregistrée.

QA mobile avec Playwright

// tests/landing-page.spec.ts
import { test, expect, devices } from "@playwright/test";

test.use({ ...devices["iPhone 13"] });

test("mobile LP keeps CTA visible and avoids horizontal overflow", async ({ page }) => {
  await page.goto("/lp");

  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
  await expect(page.locator('[data-cta-id="hero-primary"]')).toBeVisible();

  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
  const viewportWidth = page.viewportSize()?.width ?? 390;
  expect(scrollWidth).toBeLessThanOrEqual(viewportWidth + 1);
});

test("lead form requires consent", async ({ page }) => {
  await page.goto("/lp");
  await page.getByLabel("Nom").fill("Masa");
  await page.getByLabel("Email").fill("masa@example.com");
  await page.getByLabel("Objectif de la landing page").fill("Je veux améliorer une landing page de conseil Claude Code.");
  await page.getByRole("button", { name: "Envoyer la demande" }).click();

  await expect(page.getByLabel("J'accepte d'être contacté au sujet de cette demande.")).toBeFocused();
});

Pièges fréquents

Le premier piège est l’offre floue. “Automatiser avec l’IA” est trop large. “Implémenter la landing, le formulaire, les événements et la QA mobile de votre offre Claude Code” est vérifiable.

Le deuxième est la fausse preuve. N’inventez pas de témoignages ou de chiffres. Montrez le processus, la checklist et les essais réels de Masa.

Le troisième est de cacher toutes les actions derrière un formulaire. Certains lecteurs veulent un template, d’autres une formation, d’autres une revue.

Le quatrième est de traiter l’accessibilité comme un détail. Sans label, contraste et navigation clavier, vous perdez des conversions réelles.

Le cinquième est d’ajouter la mesure trop tard. Sans événements stables, les discussions d’optimisation deviennent des opinions.

Suite avec ClaudeCodeLab

Les lecteurs autonomes peuvent consulter products, les équipes training, et les personnes qui veulent une revue peuvent utiliser le formulaire. Pour compléter, lisez analytics avec Claude Code, A/B testing avec Claude Code, Playwright avec Claude Code et SEO avec Claude Code.

Résultat observé

En testant ce workflow, Masa n’a pas obtenu un chiffre magique. Le gain réel a été opérationnel: les CTA ids, le schema du formulaire et les tests mobiles étaient définis avant la finition visuelle. La page devient alors une base d’apprentissage, pas seulement une page qui semble correcte.