Aller au contenu
Bibliotheque UIJABS

Blocs de landing page 14 variantes

Les blocs d'une page commerciale, dans l'ordre ou ils se posent : banniere, preuve, offre, objections, action finale. Regle tenue partout : chaque bloc porte UN message et UNE action. Deux appels a l'action concurrents dans le meme bloc en annulent un.

A. Bannieres

Centree, en deux colonnes avec formulaire, sur photo, plus la bande de reassurance qui suit.

Artisan RGE QualiPAC

Votre pompe a chaleur posee en 3 semaines

Etude thermique offerte, dossier MaPrimeRenov monte par nos soins, pose par nos equipes salariees. Intervention en Ile-de-France.

06 12 34 56 78

Reponse sous 24 h, sans engagement.

Banniere centree

L'ouverture la plus simple et la plus efficace pour un artisan : promesse, preuve de serieux, un seul bouton, le telephone juste dessous.

Voir le codeMasquer le code 
<section class="bloc hero hero--centre">
  <div class="bloc__centre">
    <span class="hero__pastille"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg> Artisan RGE QualiPAC</span>
    <h1 class="bloc__titre">Votre pompe a chaleur posee en 3 semaines</h1>
    <p class="bloc__chapo">Etude thermique offerte, dossier MaPrimeRenov monte par nos soins, pose par nos equipes salariees. Intervention en Ile-de-France.</p>
    <div class="hero__actions">
      <button class="btn btn--plein btn--xl">Demander mon devis gratuit</button>
      <a href="tel:+33612345678" class="btn btn--tel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> 06 12 34 56 78</a>
    </div>
    <p class="hero__note">Reponse sous 24 h, sans engagement.</p>
  </div>
</section>
.hero { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.hero--centre { text-align: center; }
.hero--centre .bloc__chapo { margin-left: auto; margin-right: auto; }
.hero__pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-4);
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--c-success-soft);
  color: var(--c-success);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.hero__pastille svg { width: 14px; height: 14px; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
py-20 text-center [&_h1]:text-5xl [&_h1]:font-extrabold [&_h1]:tracking-tight
Renovation energetique

Divisez votre facture de chauffage par trois

Nous prenons en charge l'etude, le dossier d'aides et la pose. Vous ne payez que le reste a charge.

  • Devis sous 24 h
  • Aides deduites du devis
  • Garantie 5 ans pieces et main d'oeuvre
Estimation gratuite
Sans engagement. Vos donnees ne sont pas revendues.
Banniere en deux colonnes

Texte a gauche, image ou formulaire a droite. Le formulaire dans la banniere capte davantage qu'un bouton qui renvoie plus bas.

Voir le codeMasquer le code 
<section class="bloc hero hero--deux">
  <div>
    <span class="bloc__sur">Renovation energetique</span>
    <h1 class="bloc__titre">Divisez votre facture de chauffage par trois</h1>
    <p class="bloc__chapo">Nous prenons en charge l'etude, le dossier d'aides et la pose. Vous ne payez que le reste a charge.</p>
    <ul class="hero__points">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg> Devis sous 24 h</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg> Aides deduites du devis</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg> Garantie 5 ans pieces et main d'oeuvre</li>
    </ul>
  </div>
  <form class="hero__form">
    <strong>Estimation gratuite</strong>
    <div class="champ"><label class="champ__label">Votre code postal</label><input class="saisie" value="93330"></div>
    <div class="champ"><label class="champ__label">Telephone</label><input class="saisie" type="tel" placeholder="06 12 34 56 78"></div>
    <button class="btn btn--plein btn--bloc btn--lg">Etre rappele</button>
    <small>Sans engagement. Vos donnees ne sont pas revendues.</small>
  </form>
</section>
.hero--deux {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-10);
  align-items: center;
  container-type: inline-size;   /* suit son conteneur, pas la fenetre */
}
.hero__points { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.hero__points li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-text); }
.hero__points svg { width: 17px; height: 17px; color: var(--c-success); flex: none; }
.hero__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-2);
  box-shadow: var(--sh-2);
}
.hero__form strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.hero__form small  { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
@container (max-width: 780px) { .hero--deux { grid-template-columns: 1fr; gap: var(--sp-6); } }
@supports not (container-type: inline-size) {
  @media (max-width: 860px) { .hero--deux { grid-template-columns: 1fr; gap: var(--sp-6); } }
}
grid grid-cols-2 items-center gap-12 max-md:grid-cols-1

Chauffagiste a Neuilly-sur-Marne depuis 2009

Depannage, entretien et installation. Intervention sous 2 h en urgence.

06 12 34 56 78
Banniere sur photo

Quand la photo de chantier porte le message. Le voile sombre est obligatoire : sans lui, le texte devient illisible des que la photo change.

Voir le codeMasquer le code 
<section class="bloc hero hero--photo">
  <div class="hero__voile"></div>
  <div class="bloc__centre hero__contenu">
    <h1 class="bloc__titre">Chauffagiste a Neuilly-sur-Marne depuis 2009</h1>
    <p class="bloc__chapo">Depannage, entretien et installation. Intervention sous 2 h en urgence.</p>
    <div class="hero__actions">
      <button class="btn btn--lg-verre btn--lg-teinte btn--lg">Demander un devis</button>
      <a href="tel:+33612345678" class="btn btn--lg-verre btn--lg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> 06 12 34 56 78</a>
    </div>
  </div>
</section>
.hero--photo {
  position: relative;
  isolation: isolate;
  border: none;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 20% 25%, #3b6ea5 0 18%, transparent 52%),
    radial-gradient(circle at 78% 30%, #8a6a4a 0 20%, transparent 55%),
    linear-gradient(160deg, #253347 0%, #3d4d63 55%, #6b5a48 100%);
}
.hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,16,.45), rgba(8,10,16,.78)); }
.hero__contenu { position: relative; text-align: center; }
.hero--photo .bloc__titre { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero--photo .bloc__chapo { color: rgba(255,255,255,.9); margin-left: auto; margin-right: auto; }
relative isolate [&_.voile]:absolute [&_.voile]:inset-0 [&_.voile]:bg-gradient-to-t [&_.voile]:from-black/75
Artisan RGEQualiPAC et QualiBois
Devis sous 24 hEtude thermique offerte
Garantie 5 ansPieces et main d'oeuvre
Urgence 2 h7 jours sur 7
Bande de reassurance

Juste sous la banniere : les trois arguments qui levent les doutes avant la lecture. Certifications, delais, garanties.

Voir le codeMasquer le code 
<div class="reassur">
  <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg><span><strong>Artisan RGE</strong><small>QualiPAC et QualiBois</small></span></div>
  <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span><strong>Devis sous 24 h</strong><small>Etude thermique offerte</small></span></div>
  <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17c3 0 3-9 6-9s3 9 6 9 3-5 6-5"/><path d="M3 21h18"/></svg><span><strong>Garantie 5 ans</strong><small>Pieces et main d'oeuvre</small></span></div>
  <div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg><span><strong>Urgence 2 h</strong><small>7 jours sur 7</small></span></div>
</div>
.reassur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.reassur > div { display: flex; align-items: center; gap: var(--sp-3); }
.reassur svg { width: 22px; height: 22px; color: var(--c-primary); flex: none; }
.reassur span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reassur strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); }
.reassur small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
grid grid-cols-4 gap-6 border-y py-6 max-md:grid-cols-2

B. Contenu

Prestations, parcours en etapes, preuve chiffree, avant / apres, questions frequentes, zone d'intervention.

Nos prestations

Ce que nous installons

Pompe a chaleur

Air/eau et air/air, de 6 a 16 kW, monobloc ou bi-bloc.

Chauffe-eau

Thermodynamique 150 a 300 L, remplacement en une journee.

Entretien annuel

Contrat avec rappel automatique et rapport apres visite.
Grille de prestations

Ce que fait l'entreprise. Trois a six entrees : au-dela, le visiteur ne retient plus rien et la page devient un catalogue.

Voir le codeMasquer le code 
<section class="bloc">
  <div class="bloc__centre">
    <span class="bloc__sur">Nos prestations</span>
    <h2 class="bloc__titre">Ce que nous installons</h2>
    <div class="cartes-grille" style="margin-top:var(--sp-6)">
      <a href="#" class="carte carte--lien service"><span class="service__icone"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" fill="#e8453c"/><path d="M14 2v6h6" fill="#fff" fill-opacity=".35"/><text x="12" y="17" font-family="system-ui,sans-serif" font-size="6.5" font-weight="700" fill="#fff" text-anchor="middle">PDF</text></svg></span><h3 class="carte__titre">Pompe a chaleur</h3><p class="carte__texte">Air/eau et air/air, de 6 a 16 kW, monobloc ou bi-bloc.</p></a>
      <a href="#" class="carte carte--lien service"><span class="service__icone service__icone--vert"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></span><h3 class="carte__titre">Chauffe-eau</h3><p class="carte__texte">Thermodynamique 150 a 300 L, remplacement en une journee.</p></a>
      <a href="#" class="carte carte--lien service"><span class="service__icone"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span><h3 class="carte__titre">Entretien annuel</h3><p class="carte__texte">Contrat avec rappel automatique et rapport apres visite.</p></a>
    </div>
  </div>
</section>
/* reutilise .cartes-grille et .service de cards.css */
grid grid-cols-3 gap-4 max-md:grid-cols-1

Comment ca se passe

  1. 1Vous nous appelez

    Un echange de 10 minutes pour cerner le besoin.

    Jour 1
  2. 2Visite technique

    Releve sur place et etude thermique offerte.

    Sous 5 jours
  3. 3Devis et aides

    Devis detaille, aides deduites, dossier monte par nos soins.

    Sous 24 h apres la visite
  4. 4Pose et mise en service

    Par nos equipes salariees, en 1 a 3 jours.

    Sous 3 semaines
Etapes du parcours

Repondre a « comment ca se passe ». Quatre etapes maximum, chacune avec un delai : c'est le delai qui rassure, pas le nombre d'etapes.

Voir le codeMasquer le code 
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Comment ca se passe</h2>
    <ol class="parcours">
      <li><span>1</span><strong>Vous nous appelez</strong><p>Un echange de 10 minutes pour cerner le besoin.</p><small>Jour 1</small></li>
      <li><span>2</span><strong>Visite technique</strong><p>Releve sur place et etude thermique offerte.</p><small>Sous 5 jours</small></li>
      <li><span>3</span><strong>Devis et aides</strong><p>Devis detaille, aides deduites, dossier monte par nos soins.</p><small>Sous 24 h apres la visite</small></li>
      <li><span>4</span><strong>Pose et mise en service</strong><p>Par nos equipes salariees, en 1 a 3 jours.</p><small>Sous 3 semaines</small></li>
    </ol>
  </div>
</section>
.parcours {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-6) 0 0;
  padding: 0;
}
.parcours li { display: flex; flex-direction: column; gap: 6px; position: relative; }
.parcours span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: var(--fs-lg);
  font-weight: 800;
}
.parcours strong { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.parcours p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; }
.parcours small { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-primary-ink); }
grid grid-cols-4 gap-6 [&_span]:h-10 [&_span]:w-10 [&_span]:rounded-full max-md:grid-cols-1
1 240installations depuis 2009
4,8 / 5note moyenne sur 312 avis
2 hdelai moyen en urgence
5 ansde garantie incluse
Preuve chiffree

Trois a quatre chiffres qui installent la credibilite. Ils doivent etre verifiables : un chiffre invente se retourne contre l'entreprise.

Voir le codeMasquer le code 
<div class="chiffres">
  <div><strong>1 240</strong><span>installations depuis 2009</span></div>
  <div><strong>4,8 / 5</strong><span>note moyenne sur 312 avis</span></div>
  <div><strong>2 h</strong><span>delai moyen en urgence</span></div>
  <div><strong>5 ans</strong><span>de garantie incluse</span></div>
</div>
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-text);
  color: var(--c-surface);
  text-align: center;
}
.chiffres strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.chiffres span   { display: block; margin-top: 4px; font-size: var(--fs-sm); opacity: .72; line-height: 1.4; }
grid grid-cols-4 gap-6 rounded-2xl bg-slate-900 p-8 text-white max-md:grid-cols-2

Nos realisations

Avant
Chaudiere fioul de 1998, consommation 2 400 L par an
Apres
PAC air/eau 11 kW, facture divisee par 3

Maison de 112 m2 a Neuilly-sur-Marne, chantier realise en aout 2026.

Avant / apres

La preuve visuelle d'un chantier. Deux photos datees et legendees valent mieux qu'un paragraphe d'arguments.

Voir le codeMasquer le code 
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Nos realisations</h2>
    <div class="realisation">
      <figure><div class="doc-vignette doc-photo doc-photo--6"><span class="doc-etat doc-etat--info">Avant</span></div><figcaption>Chaudiere fioul de 1998, consommation 2 400 L par an</figcaption></figure>
      <figure><div class="doc-vignette doc-photo doc-photo--3"><span class="doc-etat doc-etat--ok">Apres</span></div><figcaption>PAC air/eau 11 kW, facture divisee par 3</figcaption></figure>
    </div>
    <p class="realisation__note">Maison de 112 m2 a Neuilly-sur-Marne, chantier realise en aout 2026.</p>
  </div>
</section>
.realisation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.realisation figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.realisation figcaption { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.45; }
.realisation__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (max-width: 560px) { .realisation { grid-template-columns: 1fr; } }
grid grid-cols-2 gap-4 max-sm:grid-cols-1

Questions frequentes

Quelles aides puis-je obtenir ?

MaPrimeRenov, les CEE et la TVA a 5,5 % selon vos revenus et le logement. Nous montons le dossier et deduisons les aides du devis : vous ne payez que le reste a charge.

Combien de temps dure la pose ?

Une journee pour un chauffe-eau, deux a trois jours pour une pompe a chaleur avec depose de l'ancienne chaudiere.

Intervenez-vous en urgence ?

Oui, 7 jours sur 7, avec un delai moyen de 2 heures en Ile-de-France.

Questions frequentes

Les objections traitees avant l'appel. Les <details> natifs suffisent : ni JavaScript, ni probleme de clavier, et le contenu reste indexable.

Voir le codeMasquer le code 
<section class="bloc">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Questions frequentes</h2>
    <div class="faq">
      <details open><summary>Quelles aides puis-je obtenir ?</summary><p>MaPrimeRenov, les CEE et la TVA a 5,5 % selon vos revenus et le logement. Nous montons le dossier et deduisons les aides du devis : vous ne payez que le reste a charge.</p></details>
      <details><summary>Combien de temps dure la pose ?</summary><p>Une journee pour un chauffe-eau, deux a trois jours pour une pompe a chaleur avec depose de l'ancienne chaudiere.</p></details>
      <details><summary>Intervenez-vous en urgence ?</summary><p>Oui, 7 jours sur 7, avec un delai moyen de 2 heures en Ile-de-France.</p></details>
    </div>
  </div>
</section>
.faq { margin-top: var(--sp-5); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq p { margin: 0 0 var(--sp-4); max-width: 70ch; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.65; }
[&_details]:border-b [&_summary]:cursor-pointer [&_summary]:py-4 [&_summary]:font-semibold

Ou nous intervenons

Seine-Saint-Denis, Val-de-Marne et est parisien, sous 2 h en urgence.

Neuilly-sur-MarneNeuilly-PlaisanceLe Raincy GagnyVillemombleRosny-sous-Bois Noisy-le-GrandChellesBondy
Zone d'intervention

Un artisan local doit dire ou il intervient, en toutes lettres. C'est aussi ce que cherchent les moteurs de recherche.

Voir le codeMasquer le code 
<section class="bloc zone">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Ou nous intervenons</h2>
    <p class="bloc__chapo">Seine-Saint-Denis, Val-de-Marne et est parisien, sous 2 h en urgence.</p>
    <div class="zone__villes">
      <span>Neuilly-sur-Marne</span><span>Neuilly-Plaisance</span><span>Le Raincy</span>
      <span>Gagny</span><span>Villemomble</span><span>Rosny-sous-Bois</span>
      <span>Noisy-le-Grand</span><span>Chelles</span><span>Bondy</span>
    </div>
  </div>
</section>
.zone__villes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.zone__villes span {
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
}
flex flex-wrap gap-2 [&_span]:rounded-full [&_span]:border [&_span]:px-3 [&_span]:py-1.5

C. Conversion

Appel a l'action final, formulaire de contact, barre collante mobile, bandeau de cookies.

Recevez votre devis sous 24 heures

Etude thermique offerte, aides deduites, sans engagement.

06 12 34 56 78
Appel a l'action final

Le dernier bloc avant le pied de page. Un seul message, un seul bouton, et le telephone en secours pour ceux qui ne remplissent pas de formulaire.

Voir le codeMasquer le code 
<section class="bloc cta-final">
  <div class="bloc__centre">
    <h2 class="bloc__titre">Recevez votre devis sous 24 heures</h2>
    <p class="bloc__chapo">Etude thermique offerte, aides deduites, sans engagement.</p>
    <div class="hero__actions">
      <button class="btn btn--inverse btn--xl">Demander mon devis</button>
      <a href="tel:+33612345678" class="btn btn--contour btn--xl cta-final__tel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> 06 12 34 56 78</a>
    </div>
  </div>
</section>
.cta-final {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  text-align: center;
  color: #fff;
}
.cta-final .bloc__titre { color: #fff; }
.cta-final .bloc__chapo { color: rgba(255,255,255,.9); margin-left: auto; margin-right: auto; }
.cta-final__tel { border-color: rgba(255,255,255,.55); color: #fff; }
.cta-final__tel:hover { background: rgba(255,255,255,.14); }
rounded-2xl bg-blue-600 py-16 text-center text-white

Parlons de votre projet

Un artisan vous rappelle sous 24 h. Pas de robot, pas de centre d'appel.

  • 06 12 34 56 78
  • contact@jabsdev.fr
  • Du lundi au samedi, 8 h - 19 h
Vos coordonnees ne servent qu'a vous repondre.
Formulaire de contact

Le formulaire final. Quatre champs maximum : chaque champ supplementaire fait perdre des demandes. Le message est le seul champ long.

Voir le codeMasquer le code 
<section class="bloc contact">
  <div>
    <h2 class="bloc__titre">Parlons de votre projet</h2>
    <p class="bloc__chapo">Un artisan vous rappelle sous 24 h. Pas de robot, pas de centre d'appel.</p>
    <ul class="hero__points">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> 06 12 34 56 78</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg> contact@jabsdev.fr</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Du lundi au samedi, 8 h - 19 h</li>
    </ul>
  </div>
  <form class="hero__form">
    <div class="form-grille">
      <div class="champ col-6"><label class="champ__label">Nom</label><input class="saisie"></div>
      <div class="champ col-6"><label class="champ__label">Telephone</label><input class="saisie" type="tel"></div>
      <div class="champ col-12"><label class="champ__label">Votre projet</label><textarea class="saisie" rows="3" placeholder="Remplacement d'une chaudiere fioul dans une maison de 110 m2..."></textarea></div>
    </div>
    <button class="btn btn--plein btn--bloc btn--lg">Envoyer ma demande</button>
    <small>Vos coordonnees ne servent qu'a vous repondre.</small>
  </form>
</section>
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; container-type: inline-size; }
.contact .hero__points svg { color: var(--c-primary); }
@container (max-width: 780px) { .contact { grid-template-columns: 1fr; gap: var(--sp-6); } }
@supports not (container-type: inline-size) {
  @media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--sp-6); } }
}
grid grid-cols-2 gap-12 max-md:grid-cols-1
Appeler WhatsApp
Barre d'action collante

Sur telephone, elle suit le defilement : le numero reste a portee de pouce du haut en bas de la page. C'est le bloc le plus rentable d'un site d'artisan.

Voir le codeMasquer le code 
<div class="cta-collant">
  <a href="tel:+33612345678" class="btn btn--plein btn--lg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/></svg> Appeler</a>
  <a href="https://wa.me/33612345678" class="btn btn--whatsapp btn--lg"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.3-4c-.3-.5-.7-1.2-.7-2.2 0-1 .5-1.5.7-1.7.2-.2.5-.3.6-.3h.5c.2 0 .4 0 .6.4l.7 1.8c.1.1.1.3 0 .5l-.3.4-.3.3c-.1.1-.2.3 0 .5.2.3.7 1.1 1.4 1.7.9.8 1.6 1 1.9 1.2.2.1.4 0 .5-.1l.7-.8c.2-.2.3-.2.5-.1l1.7.8c.2.1.4.2.4.3.1.1.1.5-.1 1Z"/></svg> WhatsApp</a>
  <button class="btn btn--secondaire btn--lg">Devis</button>
</div>
.cta-collant {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  max-width: 420px;
  padding: var(--sp-3);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 16px rgba(16,24,40,.1);
}
.cta-collant .btn { flex: 1; padding: 0 var(--sp-3); }
fixed inset-x-0 bottom-0 z-40 flex gap-2 border-t bg-white p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] md:hidden

Nous utilisons des cookies de mesure d'audience. Ils nous aident a comprendre quelles pages sont utiles. Aucun cookie publicitaire.

Bandeau de cookies

Obligation legale. Refuser doit etre aussi simple qu'accepter : deux boutons de meme poids visuel, sinon le consentement n'est pas valable.

Voir le codeMasquer le code 
<div class="cookies">
  <p><strong>Nous utilisons des cookies de mesure d'audience.</strong> Ils nous aident a comprendre quelles pages sont utiles. Aucun cookie publicitaire.</p>
  <div class="cookies__actions">
    <button class="btn btn--secondaire">Refuser</button>
    <button class="btn btn--secondaire">Personnaliser</button>
    <button class="btn btn--plein">Accepter</button>
  </div>
</div>
.cookies {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
}
.cookies p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.cookies strong { color: var(--c-text); }
.cookies__actions { display: flex; gap: var(--sp-2); flex: none; }
@media (max-width: 700px) {
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__actions { flex-wrap: wrap; }
  .cookies__actions .btn { flex: 1; }
}
fixed inset-x-4 bottom-4 z-50 flex items-center gap-4 rounded-xl border bg-white p-4 shadow-2xl