Page Réalisations.

01

Le déroulé.

Six blocs, d’après la maquette validée par JB le 12 octobre, sur le modèle de la page des clients de baseten.co : l’en-tête, un bandeau de logos, la grille des cas en rythmes différents, le mur des clients, la bande, le contact. Les textes viennent de pages-v3 et accueil-v3, les cas de leurs fiches ; la page n’écrit aucun texte.

La page précédente posait tous les cas, sous une tête, dans la grille tr-cas, une photo en réserve par carte ; le bandeau des clients venait après, avec son étiquette, ses logos chargés à la demande. Les cartes de l’accueil et des pages d’offre gardent cette carte (Cas.astro, voir Cartes) : celles des pages d’offre avec leur photo en réserve, celles de l’accueil, depuis le 13 octobre, avec la vitrine du cas au format des petites cartes de cette page. La page Réalisations a la sienne, CarteCas, avec la vitrine du cas.

02

Le bandeau à badges.

Le bandeau des clients, juste sous l’en-tête, sans étiquette : le titre du mur la porte plus bas. Il défile comme sur l’accueil ; un petit badge marque les clients dont le cas a sa page.

<Section classe="tr-logos">
  <Logos noms={mur.map((c) => c.nom)} badge={P.realisations.badge} />
</Section>

Le défilement, l’arrêt au survol, le bouton pause et le mouvement réduit sont ceux du bandeau de l’accueil : voir Logos. Le badge est un mot de la copie (P.realisations.badge) : dans la piste lue, il suit le nom du client (l’alt du logo, ou le nom écrit) ; la seconde piste est muette. Les cases du bandeau ne sont pas des liens : ce sont celles du mur qui mènent aux cas.

03

La grille des cas.

Six colonnes dès 861 px, une seule en dessous. Les cas se posent dans l’ordre d’une table écrite dans la page, chacun avec sa forme : par deux en carte vitrine, seul en largeur, par trois en petite carte. La cellule d’appel ferme la dernière rangée.

Une carte vitrine prend trois colonnes, un cas en largeur six, une petite carte et l’appel deux. Une rangée ne mélange pas les formes : quand la forme change, ou que la place manque, une case vide finit la rangée. Sous 861 px, tout passe sur une colonne, dans le même ordre, et les cases vides disparaissent.

<Section id="cas" classe="tr-cases-sec" titreId="tr-cas">
  <h2 class="sr-only" id="tr-cas">{P.realisations.catalogue.etiquette}</h2>
  <Grille classe="tr-cases" stagger={null}>
    <CarteCas slug={cas.id} cas={cas.data} forme="vitrine" nom={v.nom} logo={v.logo} href={v.href} site={v.site} anonyme={v.anonyme}
      etiquette={V3.realisations.offreLibelle[cas.data.expertise] ?? cas.data.expertise}
      lire={P.realisations.lireCas} voirSite={P.realisations.voirSite} reserve={P.realisations.reserve} eager={eager} />
    <!-- … une carte par cas, dans l’ordre de la table ; forme="large" ou forme="petite" -->
    <li class="tr-cel tr-cc tr-cc--vide" style="--span:3" aria-hidden="true"></li>
    <AppelCas etiquette={P.realisations.appel.etiquette} titre={P.realisations.appel.titre} texte={P.realisations.appel.texte}
      bouton={{ href: '/contact/', libelle: V3.cta }} />
  </Grille>
</Section>

04

La carte vitrine.

Le logo à gauche et « Lire le cas » à droite, l’offre en voix d’étiquette, un titre, puis la vitrine du cas. Quand le cas a sa page, toute la carte est le lien, et pâlit au survol.

Emploi

Présenter un cas sur la page Réalisations : son client, son offre, une phrase, et son produit dans sa vitrine.

Moment

Dans la grille tr-cases, par deux, à la place que lui donne la table de la page.

Jamais

Hors de la page Réalisations : l’accueil et les pages d’offre gardent la carte Cas. Avec un chiffre de résultat dans le titre ou dans la capture.

05

Le cas en largeur.

Toute la rangée : le texte à gauche, avec une phrase d’appui et trois faits en grands chiffres, la vitrine à droite. Les faits disent la durée, l’année de mise en service, la stack ou ce qui est propre au cas : jamais un résultat.

Les cas en largeur aujourd’hui : Mes Jardiniers, Builders. Sous 861 px, la carte s’empile comme les autres : le texte, les faits, puis la vitrine.

06

Les petites cartes et l’appel.

La dernière rangée, par trois : les petites cartes, le bouton en bas, et la cellule d’appel sur l’encre, qui ferme la grille.

La cellule d’appel est la seule cellule de grille à l’encre. La règle « jamais d’aplat » tient pour les sections ; cette cellule, dans la grille et délimitée par son trait, est une exception validée par JB sur la maquette.

07

Le mur des clients.

Le titre centré, un passage surligné, puis tous les clients en cases, cinq par rangée, deux au téléphone. Ceux dont le cas a sa page portent le badge et mènent à leur cas.

<Section classe="tr-murl-sec" titreId="tr-mur">
  <MurLogos clients={mur} titre={P.realisations.mur.titre} surligne={P.realisations.mur.surligne} badge={P.realisations.badge} id="tr-mur" />
</Section>

08

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.

RègleUn cas se montre avec l’accord de son client, dans sa vitrine, et sans chiffre de résultat ; sans accord, la page ne le nomme pas.