Citations.

01

Le mur.

Trois colonnes de la trame. Les citations se posent en quinconce autour du titre, qui occupe deux cases au milieu de la grille ; des cases vides laissent respirer. C’est la section « Ce qu’ils en disent » de l’accueil, telle quelle.

Emploi

Les citations des clients, en bloc, avec le titre de la section au milieu et un bouton vers les réalisations.

Moment

Une fois par page, sur l’accueil et sur la page carrières. La page d’un cas cite autrement : une seule carte, celle de son client, dans le bloc CitationCas (voir Page de cas).

Jamais

Avec des citations écrites par nous, ni dans un carrousel : le mur ne défile pas.

<Mur verbatims={verbatims} etiquette={V3.verbatims.surtitre} titre={V3.verbatims.titre} titreId="mur-spec" bouton={{href:'/realisations/',libelle:V3.realisations.bouton}} />

const verbatims = (await getCollection('verbatims')).sort((a, b) => a.data.ordre - b.data.ordre)

Qui va où

Le composant range huit cases dans l’ordre du tableau MUR : la tête prend deux colonnes, les vides n’existent qu’à partir de 1000 px. En dessous, le titre passe en tête (order -1) et les cases vides disparaissent ; la grille a deux colonnes dès 700 px, trois dès 1000 px.

02

La carte.

Dans sa cellule au trait pointillé, la carte a un bord plein. Le logo en haut, la citation en romain, puis le portrait rond et le nom en capitales.

03

Aucune citation inventée.

Les quatre fiches de src/content/verbatims n’ont qu’un ordre et un sujet. Citation, auteur et fonction valent null tant que le client n’a pas fourni les siens.

Quand la citation manque, la carte écrit « Emplacement du verbatim client, sur » suivi du sujet, puis la pastille EnAttente « verbatim réel à récupérer » ; le nom devient « Prénom Nom » et la fonction « Fonction · Entreprise ». Quand une citation existe, elle s’affiche entre guillemets “ ”, avec l’auteur et la fonction de la fiche. Rien d’autre ne change : la carte garde la même place et le même bord.

Le logo du client

Le champ client de la fiche (src/content.config.ts, null aujourd’hui) nomme le client. Mur.astro affiche alors son logo à l’encre s’il est dans public/assets/logos/clients/, sinon son nom en toutes lettres ; la réserve « Logo client » reste tant que le champ est vide. Un logo ne se publie qu’avec l’accord du client.

Sur la page d’un cas

Le même champ client relie un verbatim à la page de son cas : la page cherche la fiche dont le client, mis en slug, est l’identifiant du cas ou le nom du client, et qui a une citation. Elle la pose dans CitationCas, une carte bordée à côté de l’étiquette « Ce qu’en dit le client » ; sans elle, la carte garde sa réserve au nom du client, et la note dit que le témoignage est à venir. Le détail : Page de cas, rubrique 05.

04

D’où vient la forme.

Le mur reprend la disposition des citations de baseten.co, choisie par JB à la place du carrousel de l’accueil précédent : la grille, le titre au milieu et les cases vides viennent de là, le trait pointillé, les verts et la réserve de logo sont à nous.

Le carrousel (Carrousel.astro et Verbatim.astro, encore visibles sur l’accueil précédent) demandait un script pour défiler ; le mur se lit en entier, sans rien toucher, et chaque carte garde sa place dans la grille.