Testimonial hero

Ce qui est inclus

Le premier écran d’un site en deux colonnes : sur-titre, titre, paragraphe, appel à l’action et preuve sociale à gauche ; une photo au coin biseauté à droite, avec une carte d’avis épinglée à 8 px de son angle inférieur droit.

Une seule feuille de style, ses trois polices et ses images. Aucune dépendance, aucune étape de build, aucune requête externe, et pas une ligne de JavaScript : le glissement du libellé du bouton tient dans une transition CSS déclenchée par :hover et :focus-visible.

Fonctionnalités

• Un bouton qui répond aussi au clavier — son libellé monte hors d’une fenêtre d’une ligne pendant qu’une copie arrive par le bas, et sa flèche sort par la droite pendant qu’une copie entre par la gauche. 350 ms sur cubic-bezier(.25,.46,.45,.94), au survol comme au focus.
• Il se replie sur sa colonne, pas sur la fenêtre — les paliers étroits sont écrits en @container. Posé dans une colonne de 460 px au milieu d’un écran large, il passe en une colonne comme il le ferait sur un téléphone.
• Une variable pour l’échelle — toutes les mesures dérivent de --prh-font-size, le corps du texte courant : titre, marges, arrondis, carte et photo suivent ensemble.
• La carte d’avis est du balisage sémantique — <figure>, <blockquote> et <figcaption>, la note en role="img" avec son libellé, les étoiles en décoration.
• Le biseau est dans l’image — le coin coupé de la photo vient de son canal alpha, pas d’un clip-path : il survit au recadrage cover des petites largeurs.
• Mouvement réduit et couleurs forcées — prefers-reduced-motion coupe le glissement, forced-colors rend au bouton et à la carte un contour visible.

Le poser dans une page

Une feuille de style, puis le balisage :

<link rel="stylesheet" href="testimonial-hero.css">

<section class="testimonial-hero">
  <div class="testimonial-hero__grille">
    <div class="testimonial-hero__colonne">
      <div class="testimonial-hero__intro">
        <div class="testimonial-hero__entete">
          <p class="testimonial-hero__surtitre">Consultancy</p>
          <h1 class="testimonial-hero__titre">Measurable</h1>
        </div>
        <p class="testimonial-hero__texte">Une phrase.</p>
      </div>

      <div class="testimonial-hero__rangee">
        <a class="testimonial-hero__bouton" href="#contact">
          <span class="testimonial-hero__libelles">
            <span class="testimonial-hero__libelle">Book a call</span>
            <span class="testimonial-hero__libelle"
                  aria-hidden="true">Book a call</span>
          </span>
          <span class="testimonial-hero__fleches" aria-hidden="true">
            <svg class="testimonial-hero__fleche">…</svg>
            <svg class="testimonial-hero__fleche
                        testimonial-hero__fleche--relais">…</svg>
          </span>
        </a>
        <p class="testimonial-hero__confiance">…</p>
      </div>
    </div>

    <div class="testimonial-hero__media">
      <img class="testimonial-hero__photo" src="hero.webp" alt="…">
      <figure class="testimonial-hero__avis">…</figure>
    </div>
  </div>
</section>

Le balisage complet est dans demo.html. Pour changer la photo, remplacez hero.webp et donnez son rapport à --prh-photo-ratio — c’est lui qui réserve la place avant le chargement.

Ce qu’il faut savoir

• Le libellé du bouton ne se coupe plus. Dans l’original, la rangée est saturée : bouton et mention réclament 625,68 px pour 612,63 px de colonne, le libellé passe sur deux lignes et la fenêtre d’une ligne le coupe — on y lit « START A FREE » au lieu de « START A FREE MEETING ». Ici le bouton ne se comprime plus et la mention absorbe le dépassement. data-prh-original restitue le comportement d’origine à l’identique.
• Le composant n’a pas de script. Il rend la même chose avec et sans JavaScript, sous une politique de sécurité stricte, et n’a ni style ni script en ligne.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un hero de gabarit Webflow, relevées sur le site en ligne — getBoundingClientRect pour les boîtes, getComputedStyle pour la typographie, et les durées lues dans son moteur d’animation. Le code, lui, est original. Photo, portraits et étoile sont repris du gabarit ; les polices Cambo, Geist Mono et Aspekta sont sous licence SIL Open Font.