Anatomie

La section contient deux colonnes dans un CSS grid : une zone de carte à gauche et une sidebar à droite. La carte est un div en position relative avec un ratio 16/9 et une superposition subtile de grille de points créée avec un fond en linear-gradient CSS. Chaque pin de localisation est un bouton en position absolue, placé aux pourcentages left/top correspondant à la position de la ville sur l'image. À droite, la sidebar alterne entre un état vide (bordure en pointillés, icône Briefcase) et un panneau de liste de postes, selon qu'un pin est sélectionné ou non.

Comment ça marche

Trois primitives Framer Motion portent l'interaction. D'abord, le titre de section et le conteneur de carte utilisent chacun whileInView pour s'afficher en fondu et en glissement lors du scroll. Ensuite, les pins apparaissent en cascade : chaque motion.button démarre à opacity 0, scale 0, et s'anime avec un délai = 0,2 + index × 0,08 seconde. Enfin, le changement de contenu dans la sidebar utilise AnimatePresence en mode='wait'. Quand un pin est cliqué, le panneau actuel sort (opacity 0, y -10) avant que le nouveau monte (opacity 0, y 10 puis opacity 1, y 0). Cliquer de nouveau sur le même pin le désélectionne, ramenant la sidebar à son état vide.

Comment le coder en React

1. Définir la structure de données et initialiser l'état

   Crée une interface Location avec city, country, des coordonnées x/y en pourcentage, un compteur openPositions et un tableau jobs. Déclare un unique useState<Location | null> pour suivre quel pin est actif. C'est le seul état nécessaire.

   interface Location {
     city: string;
     country: string;
     x: number; // 0-100, percent from left
     y: number; // 0-100, percent from top
     openPositions: number;
     jobs: { title: string; department: string; type: string }[];
   }
   
   const [selected, setSelected] = useState<Location | null>(null);

2. Construire le conteneur de carte avec superposition de grille

   Utilise position:relative et aspectRatio:'16/9' sur le div de carte. À l'intérieur, rends un div superposé en position absolue avec un fond en linear-gradient CSS pour simuler une grille. Garde son opacity faible (environ 0,15) pour qu'il se lise comme une texture, pas comme du bruit.

   <div style={{
     position: "relative",
     aspectRatio: "16/9",
     borderRadius: "var(--radius-xl)",
     background: "var(--color-background-alt)",
     overflow: "hidden",
   }}>
     <div style={{
       position: "absolute", inset: 0, opacity: 0.15,
       backgroundImage: "linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px)",
       backgroundSize: "40px 40px",
     }} />
     {/* pins go here */}
   </div>

3. Afficher les pins en cascade comme des boutons absolus

   Itère sur le tableau des localisations. Chaque pin est un motion.button avec scale:0 initial et whileInView scale:1, avec un délai de 0,2 + i * 0,08. Positionne-le avec les valeurs de pourcentage left et top issues des données. Au clic, sélectionne la localisation ou réinitialise la sélection si elle est déjà active.

   {locations.map((loc, i) => (
     <motion.button
       key={loc.city}
       initial={{ opacity: 0, scale: 0 }}
       whileInView={{ opacity: 1, scale: 1 }}
       viewport={{ once: true }}
       transition={{ duration: 0.4, delay: 0.2 + i * 0.08 }}
       onClick={() => setSelected(selected?.city === loc.city ? null : loc)}
       style={{ position: "absolute", left: `${loc.x}%`, top: `${loc.y}%`, transform: "translate(-50%, -50%)" }}
     >
       <MapPin />
       <span>{loc.city}</span>
     </motion.button>
   ))}

4. Changer la sidebar avec AnimatePresence mode='wait'

   Enveloppe le contenu de la sidebar dans AnimatePresence avec mode='wait'. Rends soit le panneau de liste de postes (keyed par selected.city) soit le panneau d'état vide (keyed 'empty'). Chaque panneau entre depuis y:10 et sort vers y:-10. Comme mode='wait' oblige l'ancien panneau à finir de sortir avant que le nouveau entre, la transition ressemble à un échange propre plutôt qu'à un chevauchement.

   <AnimatePresence mode="wait">
     {selected ? (
       <motion.div
         key={selected.city}
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -10 }}
         transition={{ duration: 0.3 }}
       >
         {/* job list */}
       </motion.div>
     ) : (
       <motion.div key="empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
         {/* empty state */}
       </motion.div>
     )}
   </AnimatePresence>

Quand l'utiliser

Cette section convient aux entreprises avec des bureaux dans trois villes ou plus qui veulent une alternative spatiale à un tableau d'offres classique. Elle s'intègre bien sur une page recrutement dédiée, entre une section culture et une section avantages. À éviter pour les entreprises en un seul lieu (la carte n'apporte rien) ou celles avec plus de 30 pins (l'interface se surcharge rapidement). Sur mobile, la grille passe à une seule colonne ; la carte se réduit à une petite vignette, laissant la sidebar faire la majorité du travail. Si le trafic est majoritairement mobile, préfère une liste déroulante de villes.

Utilisé par

• Stripe, La page recrutement liste les bureaux mondiaux avec des filtres de localisation ; l'approche spatiale reflète la manière dont les équipes distribuées sont mises en avant.
• Shopify, Utilise un layout par localisation de bureau sur son site recrutement pour mettre en avant les postes à distance et sur site par région.
• Airbnb, Le hub recrutement organise les postes ouverts par localisation de bureau, parallèle direct au pattern pin-et-sidebar.
• Notion, Liste les équipes par ville sur sa page recrutement, faisant de la géographie des bureaux un axe de navigation principal.

FAQ