Créer une section À propos fondateur en React
Une section fondateur React associe un placeholder de portrait à gauche avec une citation serif, le nom, le rôle et la bio à droite dans une grille CSS deux colonnes. Les deux colonnes s'animent au scroll via whileInView de Framer Motion, l'image passant de scale 0.95 à 1 et le texte glissant depuis y:20.
- Stack : React + Framer Motion + Lucide React, ~145 lignes, zéro dépendance supplémentaire.
- Animations : whileInView avec once:true, spring EASE [0.16, 1, 0.3, 1], décalage 100ms entre image et texte.
- La grille passe en colonne unique sur mobile via style inline ; le portrait utilise un ratio 3/4.
- Entièrement thémé : chaque couleur et espacement vient des CSS custom properties, compatible avec les 7 presets.
- Accessible : balises blockquote et p sémantiques, couleur accent sur le rôle, placeholder image visible dans tous les modes de thème.
AboutFounder est une section React en split-layout conçue pour humaniser une marque. Elle place un placeholder de portrait à gauche et une grande citation serif, le nom, le rôle et un paragraphe de bio à droite. Les deux côtés entrent en vue séparément, donnant à la révélation un rythme naturel et posé sans charger de bibliothèque d'animation autre que Framer Motion.
Anatomie
La section extérieure utilise des CSS custom properties pour tous les paddings et l'arrière-plan. À l'intérieur, une grille deux colonnes (colonne gauche fixe à 320px, droite en 1fr) contient deux motion.div. La colonne gauche affiche un placeholder en ratio 3/4 avec un overlay coloré et une icône ImageIcon de Lucide centrée. La colonne droite empile quatre éléments de haut en bas : une icône Quote au-dessus de la citation, une ligne nom/rôle séparée de la bio par une bordure inférieure, puis le paragraphe de bio.
Comment ça marche
Les deux motion.div utilisent whileInView pour se déclencher quand l'élément croise le viewport. La colonne image anime opacity 0→1 et scale 0.95→1 en 600ms. La colonne contenu utilise la même durée mais démarre 100ms plus tard (delay: 0.1) et glisse depuis y:20 au lieu de scaler. Les deux partagent la même courbe de bézier [0.16, 1, 0.3, 1], qui produit une décélération rapide sans dépassement typique des sites produits soignés. L'option viewport `once: true` empêche l'animation de rejouer au scroll vers le haut.
Comment le coder en React
Mets en place la grille deux colonnes
Enveloppe tout dans une section avec les paddings en CSS variables, puis à l'intérieur place un div avec display:grid, gridTemplateColumns:'320px 1fr' et un gap de 4rem. Sur mobile tu passeras en colonne unique. Utiliser des styles inline sur les tokens CSS évite toute friction avec les breakpoints Tailwind.
<div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: "4rem", alignItems: "center", }}>Anime le placeholder portrait à l'entrée en vue
Enveloppe la colonne gauche dans un motion.div. Définis initial à opacity:0, scale:0.95 et whileInView à opacity:1, scale:1. Passe viewport={{once:true}} pour que la révélation ne se déclenche qu'une fois. Utilise la constante ease personnalisée pour une décélération fluide.
const EASE = [0.16, 1, 0.3, 1] as const; <motion.div initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ duration: 0.6, ease: EASE }} >Décale l'animation de la colonne contenu
La colonne droite utilise les mêmes paramètres de transition avec un glissement depuis y:20 et un délai de 100ms. Ce petit décalage donne l'impression que les deux colonnes sont chorégraphiées plutôt que simultanées. Garde des durées identiques pour que le timing paraisse intentionnel.
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: 0.1, ease: EASE }} >Connecte la citation et la bio
Dans la colonne droite, place une icône Quote (Lucide) avec une faible opacité au-dessus d'un élément blockquote sémantique. En dessous, affiche le nom et le rôle dans une ligne flex, séparée de la bio par une bordure inférieure. Passe tout le contenu textuel en props pour que le composant reste réutilisable pour différents fondateurs ou membres d'équipe.
Quand l'utiliser
À utiliser en milieu de page sur les landing pages de startup, les sites d'agence ou les portfolios pour humaniser la marque avant un bloc de preuve sociale ou un CTA. Elle fonctionne particulièrement bien après une section fonctionnalités, offrant aux lecteurs un moment de connexion avec la personne derrière le produit. À éviter sur les pages e-commerce pures ou transactionnelles où la crédibilité personnelle ne pilote pas la conversion, et ne pas l'empiler directement après une autre section plein-écran à fort contenu image.
Utilisé par
- Basecamp, Le visage du fondateur Jason Fried et ses citations directes ancrent la page À propos, établissant la crédibilité personnelle avant le pitch produit.
- Notion, Les portraits de l'équipe et des fondateurs avec de courtes bios apparaissent dans la section histoire de l'entreprise pour relier le produit à de vraies personnes.
- Framer, Grille fondateurs et équipe avec nom, rôle et courte description dans un split layout épuré typique des entreprises d'outils de design.
FAQ
Comment remplacer le placeholder par une vraie photo ?
Supprime l'ImageIcon et la div overlay dans le motion.div gauche, puis affiche une Image Next.js (ou un img standard) qui remplit le conteneur. Conserve le borderRadius et overflow:hidden sur le wrapper pour que le portrait reste découpé dans le rectangle arrondi.
Peut-on rendre la grille responsive sans Tailwind ?
Oui. Ajoute une règle CSS ou une media query inline qui bascule gridTemplateColumns en '1fr' sous 768px. Comme le composant utilise des styles inline, tu peux aussi passer un objet sx-style ou l'envelopper dans un styled-component si ton projet les utilise.
Pourquoi utiliser once:true sur le déclencheur viewport ?
Rejouer l'animation d'entrée chaque fois qu'un utilisateur scrolle devant la section paraît saccadé et attire l'attention sur le mécanisme plutôt que sur le contenu. once:true déclenche la révélation uniquement à la première intersection, ce qui ressemble à une transition de chargement de page soignée plutôt qu'à un effet en boucle.
Quelle police serif est utilisée pour la citation ?
La citation lit la CSS custom property var(--font-serif), définie par le preset de thème actif. Place n'importe quelle font-family serif là, Georgia, Lora, Playfair Display, et la citation l'hérite automatiquement sans toucher au code du composant.