Brief claude code lp v2 maîtrise digitale

title: "📋 Brief Claude Code — LP V2 Maîtrise Digitale" scope: md_global tenant: - type: concept tags: [] source: notion://pages/34826b6c-9c1d-8158-a7ce-f7166a7905e3 notion_id: "34826b6c-9c1d-8158-a7ce-f7166a7905e3" updated: 2026-07-31

> À coller directement dans Claude Code pour démarrer la session¶

🎯 Contexte du projet¶

Tu vas construire une landing page WordPress complète pour Maîtrise Digitale, une agence digitale spécialisée BTP basée en Occitanie. Objectif unique de la LP : décrocher un diagnostic gratuit de 30 min par téléphone Trafic source : Google Ads + Meta Ads (pas de SEO sur cette page) Stack : WordPress code direct (zéro builder — Elementor, Bricks, Oxygen), HTML/CSS/JS vanilla Hébergement : Hostinger

🎨 Identité visuelle¶

/* Couleurs */
--navy:     #0D1B2A;   /* fond principal dark */
--navy-2:   #132236;   /* fond sections alternées */
--gold:     #F5A623;   /* accent principal jaune */
--gold-dark:#D4891A;   /* gold hover */
--white:    #FFFFFF;
--grey-light:#F4F1EC;  /* fond sections claires */
--grey-text: #8A9BB0;  /* texte secondaire */
--success:  #2ECC71;   /* checkmarks verts */

/* Typographie */
Font principale : Inter (Google Fonts)
Font titres     : Inter 700-800 (pas de serif)

/* Espacements */
Section padding : 100px 0 (desktop) / 60px 0 (mobile)
Container max-width : 1200px
Border-radius cards : 12px

¶

📁 Structure de fichiers WordPress¶

wp-content/themes/maitrise-digitale/
├── functions.php          ← enqueue CSS/JS uniquement sur page LP
├── page-landing.php       ← template LP custom
├── assets/
│   ├── css/
│   │   └── lp.css         ← tout le style
│   └── js/
│       └── lp.js          ← accordion FAQ + smooth scroll + form
└── style.css              ← header thème WP (minimal)

functions.php : enqueue lp.css et lp.js uniquement si is_page_template('page-landing.php') page-landing.php : commence par <?php /* Template Name: Landing Page MD */ ?>

🏗️ Structure complète de la LP — 10 blocs¶

- Position : fixed top, z-index 1000, fond navy semi-transparent + blur
- Logo MD gauche : [MD] MaîtriseDigitale (texte, pas image — à remplacer)
- Droite : 1 seul bouton CTA "📞 Diagnostic Gratuit" (gold, border-radius 8px)
- PAS de liens de navigation (garder le prospect dans le tunnel)
- Au scroll > 50px : fond navy plein + box-shadow

BLOC 1 — HERO¶

- Fond : navy (#0D1B2A) + image background artisan BTP (overlay 60% navy)
- Image placeholder : photo d'artisan en situation (à remplacer)

Badge top (pill) :
"🔒 Votre métier protégé sur votre zone — 1 seul partenaire par spécialité"
→ fond gold/10, border gold, texte gold, border-radius 50px

H1 (blanc, 56px desktop / 36px mobile, font-weight 800) :
"Vos concurrents décrochent des chantiers en ligne.
Pendant ce temps, vous comptez sur la recommandation."
→ "en ligne" souligné gold

Sous-titre (grey-light, 20px, font-weight 400) :
"Maîtrise Digitale construit votre système d'acquisition exclusif.
Vos leads vous appartiennent — jamais revendus à un concurrent."

3 bullets (icône ✅ gold) :
- Un agenda rempli sans passer vos soirées à courir après des devis
- Fini les plateformes qui bradent vos prix — vous choisissez vos clients
- Votre système actif en 30 jours sur votre zone

CTA principal (bouton gold large, 56px height) :
"Demander mon diagnostic gratuit →"

Micro-texte sous CTA (grey-text, 14px) :
"Créneaux limités · Sans engagement · Vous repartez avec un plan chiffré"

Barre désambiguïsation (fond navy-2, border-left 3px gold, padding 16px, margin-top 24px) :
⚠️ Maîtrise Digitale n'est pas Habitatpresto. On ne revend pas vos leads.

Tags corps de métiers (flex wrap, gap 8px, margin-top 32px) :
Chaque tag : fond white/10, border white/20, texte white, border-radius 50px, padding 6px 16px
Tags : Plombier · Électricien · Chauffagiste · Maçon · Couvreur · Menuisier · Isolation · ENR · Photovoltaïque · et tous corps de métiers BTP

BLOC 2 — DOULEURS¶

- Fond : grey-light (#F4F1EC)

H2 : "Vous vous reconnaissez ?"
Sous-titre : "Si oui, vous êtes exactement là où vous devez être."

Tableau 2 colonnes "Aujourd'hui / Dans 60 jours" :
→ Colonne gauche : fond blanc, icône 😤, texte dark
→ Colonne droite : fond navy, icône 💡, texte blanc
→ 5 lignes :
  1. Vous dépendez du bouche-à-oreille | Vos prospects vous trouvent directement
  2. Vous achetez des leads revendus à 5 concurrents | Vos leads vous appartiennent à 100%
  3. Votre agenda est imprévisible | Vous planifiez 3 mois à l'avance
  4. Vos soirées partent en prospection à froid | Votre système tourne sans vous
  5. Les agences ne comprennent pas votre métier | Un partenaire qui parle chantier

Section coût de l'inaction (fond navy, texte blanc, centré, padding 48px) :
⚠️ Chaque mois sans système digital, c'est 3 à 8 chantiers que vos concurrents
décrochent à votre place — sur votre propre zone.
[CTA secondaire : "Je veux récupérer ces chantiers →"]

BLOC 3 — MÉTHODE CAP¶

- Fond : navy (#0D1B2A)

Label gold uppercase : "LA MÉTHODE"
H2 blanc : "Le Système CAP"
H2 gold : "Capter · Activer · Pérenniser"
Sous-titre : "Chaque pilier s'appuie sur le précédent. L'ordre crée le ROI."

4 étapes (cards horizontales sur desktop, verticales mobile) :
Chaque card : numéro gold large (01/02/03/04), titre blanc, description grey-text

01 — CAPTER
"On identifie les prospects chauds sur votre zone avant qu'ils aillent chez un concurrent.
Référencement local, visibilité IA (ChatGPT, Perplexity), publicité ciblée."

02 — QUALIFIER
"Le système filtre automatiquement. Vous ne parlez qu'aux propriétaires prêts à démarrer.
Fini les curieux et les chasseurs de devis gratuits."

03 — ACTIVER
"Des demandes entrantes exclusives arrivent directement chez vous.
Pas de plateforme intermédiaire, pas de partage, pas de surenchère."

04 — PÉRENNISER
"Votre acquisition tourne sans vous. Prévisible, scalable, 100% propriétaire.
Votre actif digital — pas le nôtre."

BLOC 4 — TABLEAU COMPARATIF¶

- Fond : grey-light

H2 : "Pourquoi pas les plateformes ?"
Sous-titre : "Ce que vous payez vs ce que vous obtenez."

Tableau 4 colonnes :
| Critère | Maîtrise Digitale | Habitatpresto / Bark | Agence généraliste |
|---|---|---|---|
| Leads exclusifs | ✅ | ❌ | ❌ |
| Exclusivité géographique | ✅ | ❌ | ❌ |
| Spécialisé BTP | ✅ | ❌ | ❌ |
| Prix transparent | ✅ | ❌ | ❌ |
| Vous êtes propriétaire des leads | ✅ | ❌ | ❌ |
| Visibilité IA (ChatGPT, Perplexity) | ✅ | ❌ | ❌ |
| Suivi terrain dédié | ✅ | ❌ | ❌ |

Colonne MD : header navy, checkmarks gold
Colonnes concurrents : header grey, croix rouges

BLOC 5 — PREUVES (sans cas clients)¶

- Fond : navy

H2 : "Ce que vous obtenez. Concret. Chiffré."

3 cartes (fond navy-2, border gold/30, border-radius 12px) :

Carte 1 — Icône 🎯
"5 premières demandes qualifiées"
"En moyenne, nos clients reçoivent leurs 5 premières demandes dans les 30 premiers jours."

Carte 2 — Icône 🔒
"1 seul partenaire par métier et par zone"
"Votre spécialité est protégée. Aucun concurrent direct ne bénéficie du même système sur votre zone."

Carte 3 — Icône 💯
"100% de vos leads vous appartiennent"
"Aucune revente, aucun partage, aucune surprise. Vos leads sont un actif qui vous appartient."

→ Placeholder témoignage (card distincte, style citation) :
"À remplacer par un vrai témoignage — Prénom · Métier BTP · Ville · chiffre clé"
→ Afficher en état 'coming soon' ou vide avec border dashed

BLOC 6 — PRICING¶

- Fond : grey-light

H2 : "Choisissez votre niveau de présence"
Sous-titre : "Pas de commission. Pas de surprise. Juste un système qui tourne."

3 cartes pricing (grid 3 colonnes desktop, stack mobile) :

--- CARTE 1 : VISIBILITÉ ---
Label : "VISIBILITÉ"
Promesse : "Google vous trouve, les clients vous appellent"
Cible : Artisan · Petite PME
Prix : 400 €/mois
Setup : setup 1 500 – 2 500 €
Features (4 max) :
• Site WordPress + SEO technique
• Google Business Profile complet
• 2 articles SEO/mois
• Reporting mensuel
CTA : "Démarrer →"
Disponibilité : "Places disponibles en Occitanie"

--- CARTE 2 : ACQUISITION (mise en avant) ---
Badge : ⭐ POPULAIRE (fond gold, texte navy)
Label gold : "ACQUISITION"
Promesse : "Des leads exclusifs, dès J+30"
Cible : PME avec objectif leads
Prix : 700 €/mois (taille 48px, gold)
Setup : setup unique 1 500 €
Features (5 max) :
• Tout Visibilité +
• Google Ads + Meta Ads pilotés
• 2 LP haute conversion + simulateur
• CRM relances SMS/Mail auto
• Reporting + Optimisation CPL
Note : + Budget pub en sus (300–800 €/mois)
CTA gold : "Je veux ça →"
Disponibilité : "⚠️ X places disponibles ce trimestre"
Carte : fond navy, texte blanc (inversé vs les autres)

--- CARTE 3 : DOMINATION ---
Label : "DOMINATION"
Promesse : "La référence incontournable de votre zone"
Cible : Visibilité + Acquisition + RS
Prix : Dès 1 200 €/mois
Setup : sur devis · personnalisé
Features (4 max) :
• Tout Acquisition +
• Gestion RS (FB/IG + LinkedIn)
• Newsletter mensuelle
• 2 Landing Pages avec simulateur
CTA : "Me contacter →"
Disponibilité : "Sur sélection"

Bandeau options à la carte (fond navy, texte centré) :
"+ OPTIONS À LA CARTE — Réseaux sociaux +400 €/mois · Articles SEO +400 €/mois · Audit digital offert — porte d'entrée sans risque"

BLOC 7 — CTA FINAL + FORMULAIRE¶

- Fond : navy
- Section la plus importante — soignée

H2 : "En 30 minutes, vous repartez avec :"

3 points (icônes colorées) :
📊 Une estimation du nombre de leads qualifiés sur votre zone
🔍 L'analyse de votre présence digitale vs vos 3 concurrents locaux
🗺️ Un plan d'action chiffré que vous pouvez appliquer immédiatement

Formulaire 3 étapes (composant custom HTML/JS) :

ÉTAPE 1 — Votre métier
Titre : "Quel est votre corps de métier ?"
Choix sous forme de boutons/cards cliquables (pas un select) :
Plombier · Électricien · Chauffagiste · Maçon · Couvreur · Menuisier
Isolation · ENR/Photovoltaïque · Autre BTP

ÉTAPE 2 — Votre zone
Titre : "Où intervenez-vous ?"
Champ : Ville ou code postal (input text)
Champ : Nom de l'entreprise (input text)

ÉTAPE 3 — Vos coordonnées
Titre : "Comment vous joindre ?"
Champ : Prénom + Nom (input text)
Champ : Téléphone (input tel, required)
Champ : Email (input email, optional)
Checkbox RGPD : "J'accepte d'être contacté par Maîtrise Digitale — pas de spam"
Bouton submit : "Recevoir mon diagnostic gratuit →" (gold, full width)

Logique JS :
- Validation champ par champ avant passage à l'étape suivante
- Barre de progression (1/3 · 2/3 · 3/3) en haut du formulaire
- Bouton retour entre étapes
- Au submit : fetch POST vers WEBHOOK_URL (variable à remplacer)
- Payload JSON : {métier, ville, entreprise, prénom, nom, tel, email, timestamp, source: 'lp-md-v2'}
- Après submit : afficher message de confirmation (pas de redirect)
  Message : "✅ Parfait ! On vous rappelle sous 24h. Préparez une liste de vos 3 plus gros concurrents locaux — ça nous sera utile."

Micro-texte sous formulaire :
"Créneaux limités · Vous parlez à un humain, pas un bot · Sans engagement"

BLOC 8 — NURTURING EMAIL¶

- Fond : grey-light
- Section discrète, pas de pression

H3 : "Pas encore prêt à sauter le pas ?"
Texte : "Chaque mois, 1 conseil d'acquisition BTP que vous pouvez appliquer seul.
Pas de spam. Pas de bullshit. Juste du terrain."

Formulaire simple : email + bouton "Je veux ça"
Payload Make : {email, source: 'newsletter-lp-md'}

BLOC 9 — FAQ¶

- Fond : navy

H2 : "Questions fréquentes"

6 accordéons (JS toggle, animation smooth) :

Q1 : "Quel engagement de durée ?"
R : "Nos accompagnements démarrent sur 3 mois minimum pour laisser le temps au système de produire des résultats mesurables. Au-delà, vous êtes libre à tout moment avec 30 jours de préavis."

Q2 : "Comment garantissez-vous l'exclusivité ?"
R : "Simple : on n'accepte qu'un seul client par métier et par zone géographique. Si un électricien de Toulouse est déjà client, aucun autre électricien toulousain ne peut rejoindre le programme. C'est contractualisé."

Q3 : "Je ne suis pas actif sur les réseaux — c'est un problème ?"
R : "Non. Notre système repose sur Google Ads, Meta Ads, le SEO local et la visibilité IA — pas sur votre présence personnelle LinkedIn ou Instagram. Vous n'avez pas besoin d'être influenceur pour remplir votre agenda."

Q4 : "Combien de temps avant les premiers résultats ?"
R : "Les premières demandes arrivent généralement dans les 30 premiers jours pour les offres Acquisition et Domination. Pour l'offre Visibilité (SEO), comptez 3 à 6 mois pour un impact organique significatif."

Q5 : "Et si ça ne génère pas de leads ?"
R : "On travaille en totale transparence : vous avez accès aux tableaux de bord en temps réel. Si les résultats ne sont pas au rendez-vous, on ajuste la stratégie ensemble — et on vous dit clairement ce qui se passe."

Q6 : "Quelle différence avec une agence web classique ?"
R : "Une agence web livre un site et disparaît. Maîtrise Digitale construit un système d'acquisition qui tourne et s'optimise dans le temps. On est rémunéré sur l'abonnement mensuel, pas sur un one-shot — nos intérêts sont alignés avec vos résultats."

- Fond : #080F18 (plus sombre que navy)

Gauche : Logo + tagline "L'acquisition digitale pensée pour le BTP · Occitanie"
Centre : CTA discret "Diagnostic Gratuit →"
Droite : Liens légaux (Mentions légales · Politique de confidentialité · RGPD)
Bas : © 2025 Maîtrise Digitale · maitrisedigitale.fr

¶

⚙️ JavaScript requis (lp.js)¶

// 1. Navbar scroll behavior
// 2. Smooth scroll sur les ancres
// 3. FAQ accordion (toggle + animation height)
// 4. Formulaire multi-étapes :
//    - Gestion étapes 1/2/3
//    - Barre progression
//    - Validation par étape
//    - Submit fetch() vers WEBHOOK_URL
//    - Affichage message confirmation
// 5. Compteur animé (optionnel) sur les chiffres clés

const WEBHOOK_URL = 'REMPLACER_PAR_URL_MAKE'; // à configurer

¶

📱 Responsive — points clés¶

🚀 Ordre de construction recommandé¶

1. Setup fichiers WP (functions.php + page-landing.php + assets/)
2. Variables CSS + reset + base typography
3. Navbar
4. Hero (bloc le plus important — tester sur mobile dès maintenant)
5. Bloc douleurs
6. Méthode CAP
7. Tableau comparatif
8. Preuves
9. Pricing (3 cartes)
10. Formulaire multi-étapes + JS
11. FAQ + JS accordion
12. Nurturing email
13. Footer
14. Responsive pass complet
15. Optimisation perf (minify, lazy images)

¶

✅ Checklist avant mise en ligne¶

Remplacer WEBHOOK_URL Make dans lp.js
Remplacer image placeholder hero
Remplacer logo texte par logo image
Renseigner le nombre X de places disponibles
Ajouter un vrai témoignage (bloc 5) dès disponible
Configurer pixel Meta + Google Tag dans functions.php
Tester formulaire → Make → notification email
PageSpeed Insights > 85 mobile
Test formulaire sur iPhone + Android

Notes migration¶

Migré automatiquement depuis Notion le 2026-07-31
Wikilinks [[...]] créés depuis les <page> Notion (URL en suffixe)
Callouts Notion → MD custom navy/orange (via le converter)