Team Section

1"use client";
2
3import { useEffect } from "react";
4import gsap from "gsap";
5
6const splitTextIntoChars = (element: HTMLElement) => {
7  const text = element.textContent || "";
8  element.innerHTML = "";
9  const chars: HTMLElement[] = [];
10
11  for (let i = 0; i < text.length; i++) {
12    const span = document.createElement("span");
13    span.classList.add("letter");
14    span.textContent = text[i];
15    span.style.display = "inline-block";
16    element.appendChild(span);
17    chars.push(span);
18  }
19
20  return chars;
21};
22
23const TEAM_MEMBERS = [
24  "Anelka",
25  "Djodev",
26  "Greg",
27  "Yves",
28  "Pelagie",
29  "HK",
30  "Promesse",
31  "Lucien",
32  "Big Man"
33];
34
35const getAvatarUrl = (name: string) => {
36  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(name)}`;
37};
38
39const getBreakpoint = () => {
40  if (typeof window === "undefined") return "desktop";
41  const width = window.innerWidth;
42  if (width < 480) return "mobile-sm";
43  if (width < 768) return "mobile";
44  if (width < 1024) return "tablet";
45  return "desktop";
46};
47
48const getAnimationConfig = (breakpoint: string) => {
49  const configs: Record<string, { scale: number; duration: number }> = {
50    "mobile-sm": { scale: 1.6, duration: 0.3 },
51    "mobile": { scale: 1.6, duration: 0.3 },
52    "tablet": { scale: 1.85, duration: 0.35 },
53    "desktop": { scale: 2, duration: 0.35 },
54  };
55  return configs[breakpoint] || configs.desktop;
56};
57
58const TeamSection = () => {
59  useEffect(() => {
60    if (typeof window === "undefined") {
61      return;
62    }
63
64    const breakpoint = getBreakpoint();
65    const config = getAnimationConfig(breakpoint);
66
67    const profileImages = document.querySelectorAll(".profile-images .img");
68    const nameElements = document.querySelectorAll(".profile-names .name");
69    const nameHeadings = document.querySelectorAll(".profile-names .name h1");
70
71    nameHeadings.forEach((heading) => {
72      splitTextIntoChars(heading as HTMLElement);
73    });
74
75    const defaultName = document.querySelector(".name.default");
76    const defaultLetters = defaultName ? defaultName.querySelectorAll(".letter") : [];
77
78    if (defaultLetters.length) {
79      gsap.set(defaultLetters, { y: "0%" });
80    }
81
82    // Animations seulement pour tablet et desktop
83    if (breakpoint === "tablet" || breakpoint === "desktop") {
84      profileImages.forEach((img, index) => {
85        const correspondingName = nameElements[index + 1];
86// … truncated