Page de cas.

01

Le déroulé.

Huit blocs, d’après la maquette validée par JB le 12 octobre : le visuel d’abord, puis le récit et sa fiche, le point fort dans une cellule allumée, ce qu’en dit le client, le cas suivant, la bande et le contact. Tout vient de la fiche markdown de src/content/realisations et des libellés de pages-v3 et accueil-v3 ; la page n’écrit aucun texte.

Une page sort pour chaque fiche marquée page, avec l’accord du client et sans masque : aujourd’hui 7, Bosco Services, Cathédrale de Nantes, PepPsy, La Grande Table, Mes Jardiniers, Clotilde Davenne, Builders. Le récit est découpé à chaque ## par src/data/recit-cas.ts ; chaque morceau passe par le processeur markdown d’Astro, avec les réglages du site. Deux blocs de la page précédente sont partis : les tarifs du suivi, qui restent sur /suivi/, et le relevé en paires clé et valeur, dont la durée, ce que ça remplace et la mise en service passent dans la fiche ; la ligne du résultat n’a plus de place.

02

L’en-tête et la vitrine large.

Le fil, le logo du client, son nom, son résumé, l’étiquette d’offre, et aucun bouton : celui du contact est dans la fiche. Puis la vitrine en 21/9, d’un rail à l’autre : la matière du client, la capture principale dans son cadre, ses puces.

Mes Jardiniers

Un site où l’on réserve son jardinier en quelques clics, et derrière, le logiciel qui planifie les interventions des équipes terrain.

Site internet et logiciel métier

mesjardiniers.fr

Next.jsRéservation en ligne

const tete = {
  fil: [{ href: '/realisations/', libelle: P.realisations.etiquette }, { href: `/realisations/${cas.id}/`, libelle: nom }],
  titre: nom, lead: d.resume ?? undefined, offre: etiquette, logo: logoClient(cas.id),
}
<EnTetePage {...tete} />

<Section classe="tr-sec--plein">
  <Vitrine slug={cas.id} matiere={d.matiere} support={d.support} vitrine={d.vitrine} site={d.site}
    format="large" eager reserve={P.realisations.reserve} />
</Section>

EnTetePage a deux props que seule la page de cas passe : logo, posé au-dessus du titre quand le fichier existe, et offre, l’étiquette sous le chapô. Les cadres, les formats et les places des puces sont dans Vitrine des cas.

03

Le récit et la fiche collante.

À gauche, le récit : le texte de la fiche jusqu’à la troisième section. À droite, le projet en bref, sur fond pâle, qui reste à portée pendant la lecture. Les lignes suivent toujours le même ordre et ne portent que des faits que Grinn détient : jamais un résultat.

const { recit, fort } = await recitCas(cas.body)

<Section id="recit" classe="tr-sec--plein">
  <div class="tr-recit">
    <div class="tr-recit__texte"><Prose><Fragment set:html={recit} /></Prose></div>
    <FicheCas label={P.realisation.releve.titre} libelles={P.realisation.fiche} offre={offre}
      perimetre={d.perimetre} stack={d.stack} duree={d.duree} remplace={d.remplace} depuis={d.depuis} tourne={d.tourne}
      externes={externes} cta={{ href: '#contact', libelle: V3.cta }} />
  </div>
</Section>

L’ordre des lignes : Offre, Ce qu’on a fait, Avec, Durée, Ce que ça remplace, En service depuis, Aujourd’hui (P.realisation.fiche), puis les liens. L’offre mène à sa page quand la fiche en nomme une. La fiche n’a pas de titre visible : son nom pour les lecteurs d’écran est « Le projet en bref. ».

04

La cellule allumée.

La quatrième section du récit, propre au cas, dans une cellule vert clair qui va d’un rail à l’autre : l’étiquette, le titre, le texte, les étapes de la fiche au besoin, et une seconde vitrine à droite. Sous 861 px, la vitrine passe sous le texte.

Le point fort

De la réservation au camion

Un client réserve un forfait sur le site, et la demande entre aussitôt dans le planning. Elle prend sa place dans la tournée du bon secteur.

Le chef d’équipe retrouve l’intervention sur son téléphone, avec l’adresse et le besoin décrit par le client. Personne ne recopie rien entre les deux.

1. Site → Le client réserve
2. Planning → La tournée se compose
3. Terrain L’équipe intervient

mesjardiniers.fr/reserver

5 étapes Direct dans le planning

{fort && (
  <Section id="point-fort" classe="tr-sec--plein" titreId="tr-fort">
    <PointFort etiquette={P.realisation.pointFort} titre={fort.titre} texte={fort.texte} etapes={d.etapes} titreId="tr-fort">
      <Vitrine slot="visuel" slug={cas.id} matiere={d.matiere} support={d.support} vitrine={vitrine} site={d.site}
        angle={Boolean(vitrine.captureAngle)} maxPuces={vitrine.captureAngle ? undefined : 0} format="cellule" reserve={P.realisations.reserve} />
    </PointFort>
  </Section>
)}

Le titre et le texte arrivent déjà rendus par le processeur markdown : la typographie du récit reste telle quelle. Le vert clair est un vert Grinn : aucune teinte nouvelle. Sans captureAngle, la cellule reprend la capture de tête sans ses puces : c’est aujourd’hui le cas de Bosco Services, Cathédrale de Nantes, PepPsy, La Grande Table, Clotilde Davenne. Une seconde capture par cas reste à fournir.

05

La citation.

Une carte bordée, le logo, la citation, la signature ; à côté, l’étiquette. Aucun texte client n’est inventé : tant que le verbatim signé manque, la carte montre sa réserve au nom du client, en encre troisième, et la note dit qu’il est à venir.

Le témoignage de Mes Jardiniers sur le travail mené ensemble.

Ce qu’en dit le client

Témoignage signé à venir.

<Section id="citation" classe="tr-sec--plein" label={C.etiquette}>
  <CitationCas verbatim={verbatim} logo={logo} client={nom} etiquette={C.etiquette}
    emplacement={C.emplacement.replace('{client}', nom)} signataire={C.signataire} note={C.note} />
</Section>

La page cherche le verbatim dans la collection verbatims par son champ client, comparé à l’identifiant du cas et au nom du client. Aujourd’hui, 1 verbatim a un client et une citation. Le mur de citations de l’accueil est un autre composant, dans Citations.

06

Le cas suivant.

Le nom en grand, l’accroche, un bouton dessiné, et la vitrine du cas à droite : tout le bloc est un lien. On suit l’ordre des fiches parmi les cas publiés ; le dernier renvoie au premier.

Cas suivant · E-commerce

Clotilde Davenne

La boutique Shopify d’un domaine de Chablis, règles du vin comprises.

Lire le cas ↗

clotildedavenne.fr

{suivant && (
  <Section id="cas-suivant" classe="tr-sec--plein" titreId="tr-suivant">
    <CasSuivant href={`/realisations/${suivant.id}/`} etiquette={`${P.realisation.suivant} · ${libelleOffre(suivant.data.expertise)}`}
      nom={suivant.data.client} accroche={suivant.data.accroche ?? suivant.data.resume} bouton={P.realisations.lireCas} titreId="tr-suivant">
      <Vitrine slot="visuel" slug={suivant.id} matiere={suivant.data.matiere} support={suivant.data.support} vitrine={suivant.data.vitrine}
        site={suivant.data.site} maxPuces={0} reserve={P.realisations.reserve} />
    </CasSuivant>
  </Section>
)}

L’ordre : Bosco Services → Cathédrale de Nantes → PepPsy → La Grande Table → Mes Jardiniers → Clotilde Davenne → Builders, puis de nouveau Bosco Services. Sous le nom, l’accroche de la fiche, la phrase courte écrite pour les cartes, plutôt que le résumé, qui est le chapô de sa propre page.

07

Les cas limites.

Ce que fait la page quand une fiche ne donne pas tout. La dernière colonne est calculée sur les fiches, à la construction de cette page.

Une page de cas ne se publie qu’avec l’accord du client : le récit, le résumé et l’adresse de la page le nomment, une page anonyme le nommerait quand même. Il n’y a donc ni page anonyme, ni pastille d’attente, ni noindex sur une page de cas.

Une capture peut porter un chiffre du client sans que la fiche le dise. Celle de l’accueil de Mes Jardiniers (accueil.webp) montre le bandeau de son site, avec le nombre et la note de ses avis Google ; elle paraît dans la vitrine de tête de sa page, dans sa carte de la page Réalisations, dans sa carte de l’accueil (depuis le 13 octobre) et dans les spécimens du design system. Elle est à recadrer, ou à remplacer ; c’est à JB de trancher.

RègleUn cas se publie nommé, avec l’accord du client, et sans chiffre de résultat : ni note de store, ni nombre d’avis, ni téléchargements, pas même dans une capture.