Anatomie

Le composant se divise en deux parties. En haut, un en-tête centré avec un badge optionnel (pill avec bordure) et un titre h2, enveloppés dans une motion.div whileInView qui monte en fondu. En dessous, une grille CSS `grid-cols-1 md:grid-cols-3 lg:grid-cols-6` dispose les cartes de citations. Chaque carte est une motion.div avec des coins arrondis et une bordure, une icône Quote semi-transparente en haut à gauche, du texte en italique serif, et un bloc d'attribution en bas (nom + rôle optionnel) séparé par une bordure fine.

Comment ça marche

Chaque carte s'initialise avec `opacity: 0`, `y: 20` et une rotation de `+2°` (index pair) ou `-2°` (index impair). Quand elle entre dans le viewport, whileInView l'amène à `opacity: 1`, `y: 0`, `rotate: 0` en 0,5 s. Le stagger est manuel : `delay: i * 0.08`, donc la 8e carte démarre 640 ms après la première, se lisant de gauche à droite comme un dévoilement. L'option viewport `once: true` fait que l'animation ne se déclenche qu'une fois par session, gardant les performances de scroll propres.

Comment le coder en React

1. Définir la structure de données et la carte des tailles

   Crée une interface QuoteItem avec id, text, author, un rôle optionnel et une taille optionnelle ('small' | 'medium' | 'large'). Associe les tailles à des classes Tailwind col-span et text-size en amont pour garder la boucle de rendu simple.

   const sizeClasses = {
     small:  "col-span-1",
     medium: "col-span-1 md:col-span-2",
     large:  "col-span-1 md:col-span-2 lg:col-span-3",
   };

2. Construire le conteneur CSS grid

   Utilise `grid-cols-1 md:grid-cols-3 lg:grid-cols-6` avec `auto-rows-auto` pour que les cartes ne prennent que la hauteur dont elles ont besoin. Six colonnes au grand breakpoint permet à une carte 'large' de remplir la moitié de la rangée, 'medium' un tiers, et 'small' un sixième.

   <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 auto-rows-auto">

3. Animer chaque carte avec un stagger et une rotation

   Enveloppe chaque carte dans une motion.div. Règle la rotation initiale à `(i % 2 === 0 ? 1 : -1) * 2` degrés pour que les cartes adjacentes s'inclinent dans des directions opposées à l'entrée. Ramène tout à zéro dans whileInView avec un délai par carte.

   <motion.div
     initial={{ opacity: 0, y: 20, rotate: (i % 2 === 0 ? 1 : -1) * 2 }}
     whileInView={{ opacity: 1, y: 0, rotate: 0 }}
     viewport={{ once: true }}
     transition={{ delay: i * 0.08, duration: 0.5 }}
   >

4. Composer l'intérieur de la carte

   Place l'icône Quote (lucide-react) à 50% d'opacité comme marqueur décoratif, puis le texte de la citation dans un paragraphe en italique serif, puis un bloc d'attribution séparé par une border-t. Toutes les couleurs référencent des CSS custom properties pour hériter du preset de thème actif.

   <Quote className="h-5 w-5 mb-3" style={{ color: "var(--color-accent)", opacity: 0.5 }} />
   <p className="font-serif italic">&ldquo;{quote.text}&rdquo;</p>
   <div className="mt-4 pt-3 border-t" style={{ borderColor: "var(--color-border)" }}>
     <p className="text-xs font-semibold">{quote.author}</p>
   </div>

Quand l'utiliser

Cette section fonctionne bien comme bloc culturel ou de valeurs sur la page about d'une agence ou d'un portfolio, dans la section 'ce en quoi on croit' d'une startup, ou sur une page produit où la preuve sociale vient des fondateurs plutôt que des utilisateurs. À placer après un paragraphe about narratif. À éviter pour les pages de témoignages à fort volume (20+ avis) où un carousel ou une liste paginée convient mieux, et sur les pages critiques pour la conversion où un texte concentré prime sur la mosaïque.

Utilisé par

• Notion, Utilise un mur de citations de fondateurs et d'équipe sur sa page about pour transmettre la philosophie de l'entreprise.
• Basecamp, Présente les valeurs et principes de l'entreprise comme des blocs de citations autonomes dans une mise en page éditoriale dispersée.
• Mailchimp, Mélange des citations mises en avant et des déclarations de fondateurs dans une grille mosaïque sur ses pages culture et about.

FAQ