Anatomie

La section comporte trois parties empilées verticalement. D'abord un bloc header (max-width 640px) avec un h2 et un paragraphe sous-titre, révélé d'un seul tenant. Ensuite une grille CSS à 2 colonnes égales et 1.5rem d'écart ; chaque carte a du padding, des coins arrondis, un fond card et un cercle décoratif flouté en haut à droite à 5% d'opacité. Dans chaque carte : un conteneur icône 48×48px avec fond accent-subtle, puis un titre h3, puis un paragraphe muted. Enfin, une flex row à fond accent avec le nombre de postes ouverts à gauche et un lien CTA en forme de pilule à droite.

Comment ça marche

Chaque élément animé utilise whileInView de Framer Motion avec viewport={{ once: true }} pour que l'animation se déclenche une seule fois à l'entrée dans l'écran et ne rejoue jamais au scroll vers le haut. Le header s'anime en un seul bloc (opacity 0→1, y 20→0, durée 0.6s). Chaque carte de valeur est retardée de `0.08 + i * 0.06` secondes, créant un stagger naturel de gauche à droite sur les colonnes de la grille. La barre CTA attend 0.3s, entrant après la dernière carte. Toutes les transitions partagent le même ease personnalisé `[0.16, 1, 0.3, 1]`, un ease-out rapide qui paraît réactif plutôt que rebondissant.

Comment le coder en React

1. Définir l'interface Value et la map d'icônes

   Chaque objet valeur porte une clé icon (string), un titre, une description et un hex couleur utilisé pour le blob décoratif. Résous les chaînes d'icônes en vrais composants Lucide en haut du fichier avec un lookup Record pour que l'API de props reste sérialisable.

   const ICON_MAP: Record<string, LucideIcon> = {
     shield: Shield,
     zap: Zap,
     heart: Heart,
     "book-open": BookOpen,
   };

2. Animer le header comme un seul bloc

   Englobe le h2 + sous-titre dans une seule motion.div avec initial={{ opacity: 0, y: 20 }} et whileInView={{ opacity: 1, y: 0 }}. Mets viewport={{ once: true }} pour éviter les replays. Une durée de 0.6s avec l'ease personnalisé suffit, pas de stagger ici, le bloc est petit.

   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
   >

3. Décaler les cartes de valeurs

   Mappe sur le tableau de valeurs et donne à chaque motion.div un délai de `0.08 + i * 0.06`. Avec 4 cartes cela étale l'entrée sur ~0.3s au total, ce qui paraît fluide sans sembler lent. Le blob décoratif est un div de 100px avec borderRadius 50%, positionné en absolu à top:-20 right:-20, utilisant la couleur de la valeur à 5% d'opacité.

   transition={{ duration: 0.5, delay: 0.08 + i * 0.06, ease: EASE }}

4. Construire la barre CTA accent

   Rends une motion.div avec display:flex, le fond accent et un délai de 0.3s pour qu'elle entre en dernier. À l'intérieur, une flex row contient un bloc texte à gauche (nombre de postes + tagline) et un lien pilule à droite avec la couleur de fond comme fond propre, créant un bouton inversé à partir de l'accent de la section.

   <motion.div
     initial={{ opacity: 0, y: 12 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.5, delay: 0.3, ease: EASE }}
     style={{ background: "var(--color-accent)" }}
   >

Quand l'utiliser

Utilise cette section en tête d'une page carrières ou à propos quand la culture est un différenciateur, startups, agences et éditeurs SaaS qui recrutent sur les valeurs plutôt que sur le salaire. Positionne-la avant les offres d'emploi pour que les visiteurs lisent le pourquoi avant le quoi. Évite-la sur les job boards transactionnels ou les pages où le temps jusqu'au dépôt de candidature prime ; dans ces contextes la profondeur de scroll supplémentaire coûte des conversions.

Utilisé par

• Stripe, Ouvre sa page carrières avec ses principes de fonctionnement avant les offres d'emploi, établissant la culture avant l'opportunité.
• Linear, La section valeurs et mode de travail précède le tableau des offres, mettant l'accent sur comment l'équipe fonctionne plutôt que sur les rôles.
• Notion, Affiche les valeurs fondamentales avec icônes et descriptions courtes au-dessus de la liste des postes sur sa page carrières.

FAQ