curiositech/windags-skills

Conception Web pour la Vente

L'art de construire des sites web qui vendent. Pas de stratégie marketing, pas de rédaction, pas d'infrastructure de tests A/B — les motifs de conception réels, les systèmes visuels et les techniques interactives qui transforment les visiteurs en clients.

Principe fondamental : La meilleure conception de vente est invisible. Les visiteurs ne pensent pas « ceci me vend quelque chose ». Ils pensent « c'est exactement ce qu'il me faut ». Chaque pixel, chaque révélation au défilement, chaque placement de preuve sociale renforce la confiance et le désir ou les érode. Il n'y a pas de neutralité.

---

Quand l'Utiliser

À utiliser pour :

• Concevoir des pages d'atterrissage qui doivent convertir les visiteurs en inscriptions/achats
• Créer des pages de tarification avec une architecture de niveaux efficace
• Placer et concevoir des preuves sociales (témoignages, logos, études de cas)
• Élaborer des boutons CTA qui sont cliqués (taille, couleur, texte, emplacement)
• Structurer des pages de vente long format (séquences problème-agitation-solution)
• Ajouter des signaux de confiance (badges de sécurité, garanties, visages humains)
• Créer des démos interactives de produits et des visites guidées de fonctionnalités
• Créer des « moments wow » — révélations déclenchées par le défilement, comparaisons avant/après
• Auditer des pages existantes pour détecter les faiblesses de conception de conversion

Ne PAS utiliser pour :

• La rédaction et la stratégie de message → utiliser product-appeal-analyzer ou des compétences de rédaction
• La mise en œuvre de tests A/B → utiliser frontend-developer
• La création publicitaire payante → utiliser des compétences marketing
• Les audits de friction UX → utiliser ux-friction-analyzer (complémentaire — exécutez les deux)
• La conception web générale → utiliser web-design-expert
• L'implémentation de paiement/abonnement → utiliser webapp-paywall-implementation

---

Le Plan de la Page de Vente par Défilement

La page de vente long format moderne suit un arc psychologique. Chaque section a un rôle. Sautez une section et la page perd des visiteurs.

La Structure en 8 Sections

┌─────────────────────────────────────────────┐
│  1. HERO — Promesse + Signal d'Identité      │  ← 0-5 secondes
│     « Ceci est pour les gens comme moi »      │
├─────────────────────────────────────────────┤
│  2. BARRE DE LOGOS — Raccourci de Preuve      │  ← 5-10 secondes
│     « Utilisé par des noms que je connais »   │
├─────────────────────────────────────────────┤
│  3. PROBLÈME — Douleur Reconnue              │  ← 10-30 secondes
│     « Ils comprennent ma situation »         │
├─────────────────────────────────────────────┤
│  4. AGITATION — Conséquences de l'Inaction   │  ← 30-60 secondes
│     « C'est pire que je ne pensais »          │
├─────────────────────────────────────────────┤
│  5. SOLUTION — Produit comme Résolution       │  ← 1-2 minutes
│     « Voici comment ça marche + démo »        │
├─────────────────────────────────────────────┤
│  6. PREUVE — Preuve Sociale Approfondie      │  ← 2-3 minutes
│     « De vraies personnes, de vrais résultats »│
├─────────────────────────────────────────────┤
│  7. TARIFICATION — Architecture de l'Offre    │  ← 3-4 minutes
│     « Valeur claire, choix évident »          │
├─────────────────────────────────────────────┤
│  8. CTA FINAL — Urgence + Garantie            │  ← Point de décision
│     « Sans risque, agissez maintenant »      │
└─────────────────────────────────────────────┘

Implémentation Section par Section

Section 1 : Hero (Le Verdict en 5 Secondes)

Le Hero décide si les visiteurs restent ou partent. Chaque élément doit gagner son pixel.

Motif de mise en page — le Hero convergent :

function HeroSection() {
  return (
    <section className="hero">
      {/* Accroche — crédibilité murmurée */}
      <p className="hero-eyebrow">Utilisé par plus de 2 400 équipes d'ingénierie</p>

      {/* Titre principal — une promesse, axée sur les avantages */}
      <h1 className="hero-headline">
        Livrez des fonctionnalités en heures,<br />pas en sprints
      </h1>

      {/* Sous-titre — comment, en une phrase */}
      <p className="hero-subheadline">
        L'automatisation des flux de travail par IA qui transforme votre backlog
        en code déployé — relu, testé et prêt.
      </p>

      {/* Groupe de CTA — principal + secondaire à faible engagement */}
      <div className="hero-cta-cluster">
        <a href="/inscription" className="cta-primary">
          Commencer à construire gratuitement
        </a>
        <a href="/demo" className="cta-secondary">
          Voir la démo de 2 min
        </a>
      </div>

      {/* Preuve visuelle — produit en action, pas une capture d'écran */}
      <div className="hero-visual">
        <video autoPlay muted loop playsInline>
          <source src="/extrait-demo.mp4" type="video/mp4" />
        </video>
      </div>
    </section>
  );
}

.hero {
  padding: 5rem 2rem 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.hero-headline {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.hero-subheadline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-cta-cluster {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

Ce que les meilleurs font différemment (Stripe, Linear, Vercel, Notion) :

• Stripe : Arrière-plans animés avec dégradés qui semblent vivants, pas décoratifs. La capacité du produit est révélée par des micro-interactions — vous faites défiler et le produit se démontre lui-même.
• Linear : Mode sombre qui signale « outil puissant pour les constructeurs sérieux ». Zéro déchet visuel. Le design EST la promesse du produit — rapidité et précision.
• Vercel : Hero centré sur la typographie avec une ligne qui encadre l'ensemble du produit. Le CTA est « Commencer le déploiement » pas « S'inscrire » — orienté action.
• Notion : Montre le produit en fonctionnement, pas une capture d'écran. Le Hero EST une mini-démo.

Section 2 : Barre de Logos (Le Raccourci de Confiance)

4 à 6 logos reconnaissables. Pas 20. La quantité dilue ; la qualité valide.

function LogoBar() {
  return (
    <section className="logo-bar">
      <p className="logo-bar-label">
        Utilisé par les équipes de
      </p>
      <div className="logo-bar-logos">
        {logos.map(logo => (
          <img
            key={logo.name}
            src={logo.src}
            alt={logo.name}
            className="logo-bar-logo"
          />
        ))}
      </div>
    </section>
  );
}

.logo-bar {
  padding: 2rem 2rem;
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.logo-bar-label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: 1.25rem;
}

.logo-bar-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.logo-bar-logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}

.logo-bar-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

Règles de conception :

• Logos en niveaux de gris par défaut (moins de bruit visuel, paradoxalement plus de crédibilité)
• Tous les logos à la même hauteur visuelle (28-32px) quelle que soit leur proportion d'origine
• 5 logos est le point idéal — moins semble clairsemé, plus semble encombré
• Étiquette au-dessus (« Utilisé par », « Utilisé par les équipes de ») pas en dessous
• Si vous n'avez pas de logos reconnaissables, utilisez des métriques à la place : « 2 400+ équipes », « 10M+ déploiements »

Section 3 : Problème (Douleur Reconnue)

Le visiteur doit se sentir vu. Cette section valide sa lutte.

Motif : La grille des trois douleurs

function ProblemSection() {
  return (
    <section className="problem-section">
      <h2 className="section-eyebrow">Ça vous parle ?</h2>
      <div className="pain-grid">
        <PainCard
          icon={<ClockIcon />}
          title="Des semaines perdues dans les cycles de relecture"
          description="Les PR restent en attente pendant des jours. Le contexte est perdu. Les ingénieurs changent de contexte entre les fonctionnalités en attendant les approbations."
        />
        <PainCard
          icon={<AlertTriangleIcon />}
          title="Les bugs passent quand même"
          description="La relecture manuelle attrape les problèmes de style, pas les bugs logiques. Les choses qui cassent la production cassent toujours la production."
        />
        <PainCard
          icon={<TrendingDownIcon />}
          title="La vélocité de livraison stagne"
          description="Plus d'ingénieurs, même résultat. Les frais généraux de processus augmentent plus vite que l'équipe."
        />
      </div>
    </section>
  );
}

Règles de conception :

• Utilisez les mots du visiteur, pas le jargon de votre produit
• 3 points de douleur maximum (plus dilue l'impact)
• Les icônes doivent renforcer l'émotion, pas décorer
• La section doit faire hocher la tête aux visiteurs, pas les faire tressaillir — empathie, pas peur

Section 4 : Agitation (Le Coût de l'Inaction)

Cette section monte les enjeux. Pas avec la peur — avec la clarté sur ce que le problème coûte réellement.

Motif : La cascade de conséquences

Montrez des conséquences croissantes : temps perdu, argent perdu, opportunité manquée, moral de l'équipe érodé. Utilisez des chiffres réels quand c'est possible (« L'équipe moyenne perd 14 heures/semaine en frais généraux de relecture de code »).

Approche de conception : Fond plus sombre, typographie légèrement plus serrée, compteur animé optionnel montrant le gaspillage qui s'accumule. Cette section est visuellement « plus lourde » que la section Problème — c'est le point bas avant l'arrivée de la solution.

Section 5 : Solution (Produit comme Résolution)

Le pivot émotionnel. La page passe du problème à la possibilité.

Motif : Vitrine de fonctionnalités avec révélations déclenchées par le défilement

function SolutionSection() {
  return (
    <section className="solution-section">
      <h2>Voici comment ça marche</h2>
      <div className="feature-showcase">
        {features.map((feature, i) => (
          <FeatureRow
            key={feature.id}
            reverse={i % 2 === 1}  /* mise en page alternée */
            title={feature.title}
            description={feature.description}
            visual={feature.visual}  /* vidéo, animation ou interactif */
          />
        ))}
      </div>
    </section>
  );
}

function FeatureRow({ reverse, title, description, visual }) {
  const ref = useRef(null);
  const isVisible = useIntersectionObserver(ref, { threshold: 0.3 });

  return (
    <div
      ref={ref}
      className={`feature-row ${reverse ? 'reverse' : ''}`}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'translateY(0)' : 'translateY(2rem)',
        transition: 'opacity 0.6s ease, transform 0.6s ease',
      }}
    >
      <div className="feature-text">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
      <div className="feature-visual">
        {visual}
      </div>
    </div>
  );
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4rem 0;
}

.feature-row.reverse {
  direction: rtl;
}

.feature-row.reverse > * {
  direction: ltr;
}

.feature-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.feature-text p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-row.reverse {
    direction: ltr;
  }
}

Ce qui fait vendre :

• La mise en page alternée évite la monotonie du défilement
• Les visuels sont interactifs ou animés — pas des images statiques
• Chaque fonctionnalité est présentée comme un avantage (« Livrez 3 fois plus vite ») pas comme une capacité (« CI/CD automatisé »)
• Les révélations déclenchées par le défilement créent des moments de découverte — la page « se dévoile » pendant qu'ils lisent
• 3 à 5 fonctionnalités maximum. Plus que cela, vous listez, vous ne vendez pas.

Section 6 : Preuve (Preuve Sociale Approfondie)

Témoignages, études de cas, métriques. C'est là que le scepticisme meurt.

function ProofSection() {
  return (
    <section className="proof-section">
      <h2>Les équipes livrent plus vite avec nous</h2>

      {/* Barre de métriques — chiffres concrets */}
      <div className="metrics-bar">
        <Metric value="73%" label="cycles de relecture plus rapides" />
        <Metric value="2,4x" label="plus de déploiements par semaine" />
        <Metric value="89%" label="moins de bugs en production" />
      </div>

      {/* Témoignage vedette — une citation puissante avec un visage */}
      <blockquote className="featured-testimonial">
        <img src="/temoignages/sarah.jpg" alt="Sarah Chen" />
        <div>
          <p className="quote">
            « Nous sommes passés d'un déploiement par mois à un déploiement quotidien.
            L'équipe apprécie vraiment le processus de relecture maintenant. »
          </p>
          <cite>
            <strong>Sarah Chen</strong>
            <span>VP Ingénierie, Acme Corp</span>
          </cite>
        </div>
      </blockquote>

      {/* Grille de témoignages — largeur de la preuve */}
      <div className="testimonial-grid">
        {testimonials.map(t => (
          <TestimonialCard key={t.id} {...t} />
        ))}
      </div>
    </section>
  );
}

.metrics-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 3rem 0;
}

.metric-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.metric-label {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
}

.featured-testimonial {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.5rem;
  background: var(--color-surface-elevated);
  border-radius: 1rem;
  border: 1px solid var(--color-border-subtle);
  margin: 3rem 0;
}

.featured-testimonial img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.featured-testimonial .quote {
  font-size: 1.25rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Hiérarchie de la preuve sociale (du plus fort au plus faible) :

1. Personne nommée + photo + entreprise + rôle + résultat spécifique (« Sarah Chen, VP Ingénierie chez Acme Corp : cycles de relecture 73 % plus rapides »)
2. Témoignage nommé + fonction (« Marc D., CTO »)
3. Logo de l'entreprise (pas de personne, mais une marque reconnaissable)
4. Métriques agrégées (« 2 400+ équipes »)
5. Moyenne d'évaluation par étoiles (« ★★★★☆ (4.8/5) »)
6. Témoignage générique (« Un client a dit... »)

Section 7 : Tarification (L'Architecture de l'Offre)

La page de tarification n'est pas une liste de prix. C'est un argumentaire de vente. La grille de niveaux est la chose la plus persuasive de la page.

Motif : Contraste centre-extrémité

function PricingSection() {
  return (
    <section className="pricing-section">
      <h2>Un prix simple pour une puissance illimitée</h2>
      <p className="pricing-subtitle">
        Pas de frais cachés. Pas de surprises. Passez à un niveau supérieur quand vous êtes prêt.
      </p>
      <div className="pricing-grid">
        <PricingCard
          name="Starter"
          price="0"
          description="Pour essayer le produit"
          features={[
            "Jusqu'à 3 membres",
            "500 actions/mois",
            "Modèles de flux de travail de base",
            "Assistance par e-mail"
          ]}
          cta="Commencer gratuitement"
        />
        <PricingCard
          name="Pro"
          price="29"
          description="Pour les équipes qui expédient"
          features={[
            "Membres illimités",
            "Actions illimitées",
            "Flux de travail IA avancés",
            "Intégrations prioritaires",
            "Assistance prioritaire"
          ]}
          highlighted={true}
          cta="Commencer l'essai gratuit"
        />
        <PricingCard
          name="Entreprise"
          price="Personnalisé"
          description="Pour les organisations à grande échelle"
          features={[
            "Tout du niveau Pro",
            "Déploiement sur site",
            "SSO et conformité",
            "Gestionnaire de compte dédié",
            "Création de flux personnalisée"
          ]}
          cta="Contacter les ventes"
        />
      </div>
    </section>
  );
}

function PricingCard({ name, price, description, features, highlighted, cta }) {
  return (
    <div className={`pricing-card ${highlighted ? 'highlighted' : ''}`}>
      {highlighted && <span className="pricing-badge">Le plus populaire</span>}
      <h3 className="pricing-name">{name}</h3>
      <p className="pricing-price">
        <span className="currency">€</span>{price}
        {price !== "Personnalisé" && <span className="period">/mois</span>}
      </p>
      <p className="pricing-description">{description}</p>
      <ul className="pricing-features">
        {features.map(f => <li key={f}>{f}</li>)}
      </ul>
      <a href="/inscription" className={`cta-${highlighted ? 'primary' : 'secondary'}`}>
        {cta}
      </a>
    </div>
  );
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-card {
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.pricing-card.highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
  position: relative;
}

.pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 1rem;
  border-radius: 999px;
}

.pricing-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.currency {
  font-size: 1.5rem;
  vertical-align: super;
  margin-right: 0.125rem;
}

.period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.pricing-description {
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex-grow: 1;
}

.pricing-features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.9375rem;
}

.pricing-features li:last-child {
  border-bottom: none;
}

Règles de tarification :

• L'effet leurre : Trois niveaux. Le niveau intermédiaire est celui que vous voulez qu'ils achètent. Le niveau supérieur le fait paraître abordable. Le niveau inférieur est volontairement sous-fonctionnalisé.
• Ancrage : Montrez le prix le plus élevé en premier si l'utilisateur fait défiler horizontalement. Tout semble moins cher en comparaison.
• Prix annuel vs mensuel : Basculez avec « Économisez 20 % » mis en évidence. Le prix annuel est le choix par défaut.
• Le niveau Pro doit « gagner » : Effet de surbrillance (bordure, ombre, badge « Le plus populaire »). Pas un simple changement de couleur — il doit visuellement dominer.
• Chiffres ronds : 29 €/mois pas 27,50 €. Les prix ronds sont plus faciles à traiter cognitivement.
• Comparaison des fonctionnalités : Si les niveaux sont complexes, ajoutez une ligne « Ce qui est inclus » au-dessus des fonctionnalités pour cadrer chaque niveau comme une valeur, pas une limitation.

Section 8 : CTA Final (Dernière Chance de Convertir)

Le moment de vérité. Tout ce qui a précédé mène à ce bouton.

Motif : La zone d'atterrissage finale

function FinalCTA() {
  return (
    <section className="final-cta">
      <h2>Prêt à transformer votre flux de travail ?</h2>
      <p className="final-cta-subtitle">
        Rejoignez plus de 2 400 équipes qui livrent plus vite avec une meilleure qualité.
      </p>
      <div className="final-cta-cluster">
        <a href="/inscription" className="cta-primary cta-large">
          Commencer votre essai gratuit
        </a>
      </div>
      <div className="final-trust-signals">
        <span>🔒 Aucune carte de crédit requise</span>
        <span>⏱ Configuration en 2 minutes</span>
        <span>✅ Annulation à tout moment</span>
      </div>
    </section>
  );
}

.final-cta {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(to bottom, var(--color-surface), var(--color-background));
}

.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.final-cta-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto 2.5rem;
}

.cta-large {
  font-size: 1.25rem;
  padding: 1rem 2.5rem;
}

.final-trust-signals {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--color-text-tertiary);
}

Éléments critiques du CTA final :

1. Répétez la promesse : Le titre reconnecte à la promesse initiale du Hero
2. Renforcez la preuve sociale : Rappelez-leur les chiffres (« 2 400+ équipes »)
3. Le CTA doit être le bouton le plus important de la page : Texte plus grand, padding plus grand, couleur plus audacieuse
4. Signaux de confiance : Aucune carte de crédit, annulation à tout moment, essai gratuit — placez-les juste en dessous du bouton, pas en petits caractères en bas
5. Garantie de remboursement : Si vous en avez une, c'est là qu'il faut la mettre. « Essayez sans risque pendant 30 jours. »

---

Techniques Avancées

Persuasion par le Défilement

Les révélations au défilement (scroll reveals, parallaxe, défis) ne sont pas décoratives — elles créent des mini-moments de « découverte ». Chaque fois que quelque chose apparaît ou change quand l'utilisateur fait défiler, cela libère une micro-dose de dopamine. Le visiteur devient un explorateur, pas un observateur passif.

Implémentation :

• Seuil : 0,3 (l'élément est à 30% visible) — suffisamment tôt pour que la transition semble naturelle, pas précipitée
• Rotation : transform: translateY(2rem) avec assouplissement — simple, efficace, pas de cinématique
• Ne pas révéler plus d'un élément à la fois — le groupement réduit l'impact individuel de chaque révélation

Architecture des CTA

Le bouton n'est jamais juste un bouton. C'est l'aboutissement de tout ce qui précède.

Règles :

• Contraste : Le CTA principal doit avoir le rapport de contraste le plus élevé de la page. La couleur d'arrière-plan du bouton doit être la couleur la plus saturée visible.
• Taille : Au moins 48px de hauteur. Un bouton plus grand signale une action plus importante.
• Texte orienté action : « Commencer l'essai gratuit » > « S'inscrire ». « Déployer maintenant » > « Soumettre ».
• Un seul CTA principal par vue : Plusieurs boutons principaux diluent l'action. Le secondaire doit être visuellement subordonné (contour, opacité réduite).
• Espace autour : Le CTA doit avoir de l'espace. Pas d'éléments concurrents dans un rayon de 50 px.
• Placer en bas du panier : Le CTA doit être tout en bas du composant, après que l'utilisateur a vu toute la valeur.

Architecture des Pages de Tarification

Le plan en 4 étapes :

1. Étiquette de section : « Une tarification simple et directe » — donne le ton de la transparence
2. Sous-titre : Une phrase qui répond à « pourquoi devrais-je payer pour ça ? »
3. Ancrage : Affichez le prix annuel en premier, avec « Économisez X% »
4. Niveaux : Commencez par une option gratuite ou à faible coût, placez l'offre premium au milieu, terminez avec l'option « Entreprise » coûteuse qui rend le niveau intermédiaire abordable

Anti-motifs à éviter :

• Texte de prix gris clair ou de petite taille (semble cher)
• « Contactez-nous » comme seul CTA (augmente la friction)
• Plus de 4 niveaux (paralysie par surcharge de choix)
• Niveaux verticaux sans comparaison côte à côte (l'utilisateur doit faire défiler pour comparer)
• Polices décoratives (semble peu professionnel pour les transactions)

---

Checklist de Conception de Vente

• Le Hero fait une promesse unique et claire en moins de 5 secondes
• Les logos sont en niveaux de gris, espacés et à hauteur égale
• La section Problème utilise les mots du visiteur, pas le jargon du produit
• La section Agitation montre des conséquences chiffrées quand c'est possible
• Les fonctionnalités sont présentées comme des avantages (résultat) pas des capacités (intrant)
• Les démos sont interactives ou vidéo — pas de captures d'écran statiques
• La preuve sociale inclut des témoignages nommés avec visages et résultats
• Les témoignages incluent une photo, un nom, un rôle et une entreprise
• Les métriques sont spécifiques et crédibles (« 73% » pas « la plupart »)
• La page de tarification utilise l'effet leurre avec un niveau mis en évidence
• Le niveau Pro est visuellement dominant (bordure, ombre, badge)
• La tarification est annuelle par défaut, avec un basculement mensuel disponible
• Le CTA final répète la promesse et comprend des signaux de confiance
• Tous les CTA principaux sont orientés action et uniques par vue
• Les révélations au défilement sont synchronisées — pas plus d'une à la fois
• La page a une seule action principale par vue
• Le design est réactif — la mise en page alterne sur mobile
• Les polices de caractères sont professionnelles et très lisibles (Inter, SF Pro, system-ui)
• Aucune image d'archive — tout le visuel soutient la promesse du produit

---

Références et Inspirations

Étudier ces pages dans l'ordre :

1. Stripe (stripe.com/pricing) — Architecture de tarification parfaite. La grille de niveaux est un instrument de vente.
2. Linear (linear.app) — Hero qui EST le produit. Zéro bruit. Chaque pixel vend de la vitesse.
3. Vercel (vercel.com) — Typographie et CTA qui cadrent tout le produit en une ligne.
4. Notion (notion.so/product) — Démonstration produit comme Hero. Le design enseigne pendant qu'il vend.
5. Apple (apple.com/iphone) — Révélations au défilement comme narration de produit. Le standard de la persuasion par le défilement.

Pourquoi celles-ci plutôt que d'autres :

• Ce ne sont pas des sites « de vente » au sens traditionnel (pas de popups agressifs, pas de compteurs de rareté)
• Ce sont des sites qui vendent des outils complexes à des publics techniques — exactement ce que ce modèle doit faire
• Leur design EST leur avantage concurrentiel. Vous ne pouvez pas copier leur code, mais vous pouvez copier leurs motifs

---

Notes Finales

Cette compétence concerne les motifs visuels et interactifs qui transforment les visiteurs en clients. Utilisez-la avec product-appeal-analyzer pour la stratégie de message, ux-friction-analyzer pour la fluidité du parcours utilisateur, et web-design-expert pour la conception web générale.

La meilleure vente ne ressemble pas à de la vente. Elle ressemble à de l'aide. Chaque section, chaque pixel, chaque transition — ils ont un seul travail : faire dire au visiteur « Oui, c'est exactement ce dont j'ai besoin. »