Cartes.

01

La carte d’offre.

Le nom en étiquette, ce que le patron gagne en titre, une phrase, le prix, le bouton, et en bas la scène de l’offre annotée de ses technologies. Au survol, la cellule pâlit, une lueur suit le pointeur et la scène s’approche.

Emploi

Présenter une offre : sur l’accueil, et dans la page des offres.

Moment

Dans une Grille de classe tr-offres, une carte par offre, dans l’ordre de V3.offres.cartes, et des cellules allumées pour finir la dernière rangée de trois s’il y manque des cartes.

Jamais

Avec un prix dans le titre ou sur le bouton. Avec plus de trois annotations. Seule, hors d’une grille.

const offres = await getCollection('offres')
const technos = (id) => offres.find((o) => o.id === id)?.data.technos ?? []
/* Trois colonnes : ce qui manque pour finir la rangée s'allume (aucune cellule avec six offres). */
const ALLUMEES = (3 - (V3.offres.cartes.length % 3)) % 3

<Grille classe="tr-offres">
  { V3.offres.cartes.map((o) => (
    <Carte id={ o.id } nom={ o.nom } titre={ o.titre } texte={ o.texte } bouton={ V3.offres.bouton } technos={ technos(o.id) } />
  )) }
  { Array.from({ length: ALLUMEES }).map(() => <CelluleAllumee />) }
</Grille>
<!-- L’accueil ne passe pas le prix ; la page des offres le passe (prix={ o.prix }). -->

02

La carte de réalisation.

L’offre en étiquette, le client en titre, une phrase, puis l’image du cas. Sur l’accueil, depuis le 13 octobre, c’est la vitrine du cas, celle des petites cartes par trois de la page Réalisations (format petite, 16/11, sans puce) ; sans vitrine passée, la photo du produit en service, ou sa réserve tant qu’elle n’est pas fournie (les preuves d’une page d’offre). Quand le cas a sa page et que le client est nommé, toute la carte est le lien, vitrine comprise. La page Réalisations ne l’emploie plus depuis le 12 octobre : elle a la sienne, CarteCas.

const realisations = await getCollection('realisations')
const c = realisations.find((r) => r.id === 'clotilde-davenne')

<Grille classe="tr-cas">
  <Cas vitrine={ { cas: c, reserve: P.realisations.reserve } } nom={ c.data.client } etiquette="Boutique en ligne"
    resume={ c.data.resume } href={ c.data.page ? '/realisations/' + c.id + '/' : null } logo={ c.id } />
</Grille>
<!-- Sans vitrine (les preuves d’une page d’offre) : photo={ c.id }, statut et brief, la réserve photo. -->

La carte vitrine, le cas en largeur, la petite carte et la cellule d’appel de la page Réalisations sont dans Page Réalisations.

03

La cellule de rôle.

Dans la grille de l’équipe, chaque rôle a sa cellule : un titre, une phrase, et l’illustration du rôle en bas. Quatre rôles, quatre illustrations, sous la photo de groupe.

Le chef de projet

Votre interlocuteur unique, du premier échange au suivi.

Le design UX/UI

Les parcours et les écrans, pensés pour être utiles.

<Grille element="div" classe="tr-equipe">
  {/* la cellule tr-equipe__photo d’abord */}
  { V3.equipe.roles.map((r) => (
    <Cellule element="div" classe="tr-role">
      <h3>{ r.nom }</h3>
      <p class="small">{ r.texte }</p>
      <Scene nom={ r.scene } />
    </Cellule>
  )) }
</Grille>

04

Les colonnes du suivi.

Un titre, le prix en Outfit vert profond, une phrase. Trois cellules côte à côte, l’une sous l’autre au téléphone. Le prix s’affiche, il n’argumente pas : il vient de marque.ts.

<Tarifs colonnes={ V3.suivi.colonnes } />

05

La cellule allumée dans une grille.

Les engagements font cinq cellules sur quatre colonnes : deux cellules allumées pour finir la rangée. Les offres font six cartes sur trois colonnes : leurs rangées sont pleines, aucune cellule allumée. La cellule allumée est une cellule pâle où cinq carrés verts s’allument l’un après l’autre, puis respirent. Elle est décorative et disparaît sous 600 px.

<Engagements liste={ V3.engagements.liste } />
<!-- Engagements pose une cellule par engagement, puis ce qui manque pour finir la rangée de quatre, deux cellules allumées au plus :
     const allumees = Math.min((4 - (liste.length % 4)) % 4, 2)
     { Array.from({ length: allumees }).map(() => <CelluleAllumee />) } -->

Les carrés, leurs positions et leurs durées sont dans Bandes et cellules allumées.

RègleUne carte dit le gain en titre, montre le prix sans l’argumenter, et finit par sa scène ou sa photo.