{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-section",
  "title": "Team Section",
  "description": "Interactive team preview section with hover reveal animation.",
  "files": [
    {
      "path": "registry/default/blocks/teams/team-section.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect } from \"react\";\r\nimport gsap from \"gsap\";\r\n\r\nconst splitTextIntoChars = (element: HTMLElement) => {\r\n  const text = element.textContent || \"\";\r\n  element.innerHTML = \"\";\r\n  const chars: HTMLElement[] = [];\r\n\r\n  for (let i = 0; i < text.length; i++) {\r\n    const span = document.createElement(\"span\");\r\n    span.classList.add(\"letter\");\r\n    span.textContent = text[i];\r\n    span.style.display = \"inline-block\";\r\n    element.appendChild(span);\r\n    chars.push(span);\r\n  }\r\n\r\n  return chars;\r\n};\r\n\r\nconst TEAM_MEMBERS = [\r\n  \"Anelka\",\r\n  \"Djodev\",\r\n  \"Greg\",\r\n  \"Yves\",\r\n  \"Pelagie\",\r\n  \"HK\",\r\n  \"Promesse\",\r\n  \"Lucien\",\r\n  \"Big Man\"\r\n];\r\n\r\nconst getAvatarUrl = (name: string) => {\r\n  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(name)}`;\r\n};\r\n\r\nconst getBreakpoint = () => {\r\n  if (typeof window === \"undefined\") return \"desktop\";\r\n  const width = window.innerWidth;\r\n  if (width < 480) return \"mobile-sm\";\r\n  if (width < 768) return \"mobile\";\r\n  if (width < 1024) return \"tablet\";\r\n  return \"desktop\";\r\n};\r\n\r\nconst getAnimationConfig = (breakpoint: string) => {\r\n  const configs: Record<string, { scale: number; duration: number }> = {\r\n    \"mobile-sm\": { scale: 1.6, duration: 0.3 },\r\n    \"mobile\": { scale: 1.6, duration: 0.3 },\r\n    \"tablet\": { scale: 1.85, duration: 0.35 },\r\n    \"desktop\": { scale: 2, duration: 0.35 },\r\n  };\r\n  return configs[breakpoint] || configs.desktop;\r\n};\r\n\r\nconst TeamSection = () => {\r\n  useEffect(() => {\r\n    if (typeof window === \"undefined\") {\r\n      return;\r\n    }\r\n\r\n    const breakpoint = getBreakpoint();\r\n    const config = getAnimationConfig(breakpoint);\r\n\r\n    const profileImages = document.querySelectorAll(\".profile-images .img\");\r\n    const nameElements = document.querySelectorAll(\".profile-names .name\");\r\n    const nameHeadings = document.querySelectorAll(\".profile-names .name h1\");\r\n\r\n    nameHeadings.forEach((heading) => {\r\n      splitTextIntoChars(heading as HTMLElement);\r\n    });\r\n\r\n    const defaultName = document.querySelector(\".name.default\");\r\n    const defaultLetters = defaultName ? defaultName.querySelectorAll(\".letter\") : [];\r\n\r\n    if (defaultLetters.length) {\r\n      gsap.set(defaultLetters, { y: \"0%\" });\r\n    }\r\n\r\n    // Animations seulement pour tablet et desktop\r\n    if (breakpoint === \"tablet\" || breakpoint === \"desktop\") {\r\n      profileImages.forEach((img, index) => {\r\n        const correspondingName = nameElements[index + 1];\r\n        if (!correspondingName) return;\r\n        const letters = correspondingName.querySelectorAll(\".letter\");\r\n        gsap.set(letters, { y: \"100%\" });\r\n        gsap.set(img, { scale: 1 });\r\n\r\n        img.addEventListener(\"mouseenter\", () => {\r\n          gsap.to(img, {\r\n            scale: config.scale,\r\n            duration: config.duration,\r\n            ease: \"power2.out\",\r\n            overwrite: \"auto\"\r\n          });\r\n          gsap.to(letters, {\r\n            y: \"-100%\",\r\n            duration: 0.6,\r\n            ease: \"power3.out\",\r\n            stagger: { each: 0.02, from: \"center\" },\r\n            overwrite: \"auto\"\r\n          });\r\n          if (defaultLetters.length) {\r\n            gsap.to(defaultLetters, {\r\n              y: \"-150%\",\r\n              duration: 0.6,\r\n              ease: \"power3.out\",\r\n              stagger: { each: 0.02, from: \"center\" },\r\n              overwrite: \"auto\"\r\n            });\r\n          }\r\n        });\r\n\r\n        img.addEventListener(\"mouseleave\", () => {\r\n          gsap.to(img, {\r\n            scale: 1,\r\n            duration: config.duration,\r\n            ease: \"power2.out\",\r\n            overwrite: \"auto\"\r\n          });\r\n          gsap.to(letters, {\r\n            y: \"100%\",\r\n            duration: 0.6,\r\n            ease: \"power3.out\",\r\n            stagger: { each: 0.02, from: \"center\" },\r\n            overwrite: \"auto\"\r\n          });\r\n          if (defaultLetters.length) {\r\n            gsap.to(defaultLetters, {\r\n              y: \"0%\",\r\n              duration: 0.6,\r\n              ease: \"power3.out\",\r\n              stagger: { each: 0.02, from: \"center\" },\r\n              overwrite: \"auto\"\r\n            });\r\n          }\r\n        });\r\n      });\r\n    }\r\n\r\n    // Gestion du redimensionnement\r\n    const handleResize = () => {\r\n      const newBreakpoint = getBreakpoint();\r\n      if (newBreakpoint !== breakpoint) {\r\n        window.location.reload();\r\n      }\r\n    };\r\n\r\n    window.addEventListener(\"resize\", handleResize);\r\n    return () => window.removeEventListener(\"resize\", handleResize);\r\n  }, []);\r\n\r\n  return (\r\n      <>\r\n        <style>{`\r\n        @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700;900&display=swap');\r\n        \r\n        * {\r\n          box-sizing: border-box;\r\n        }\r\n        \r\n        .team {\r\n          position: relative;\r\n          width: 100%;\r\n          height: 100svh;\r\n          background-color: #fff;\r\n          color: #1f1f1e;\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n          align-items: center;\r\n          gap: 0.5em;\r\n          overflow: hidden;\r\n          padding: 0;\r\n          margin: 0;\r\n        }\r\n        \r\n        .profile-images {\r\n          width: 100%;\r\n          max-width: 100%;\r\n          display: flex;\r\n          justify-content: center;\r\n          align-items: center;\r\n          flex-wrap: wrap;\r\n          gap: 0.5rem;\r\n        }\r\n        \r\n        .img {\r\n          position: relative;\r\n          width: 50px;\r\n          height: 50px;\r\n          padding: 3px;\r\n          cursor: pointer;\r\n          will-change: width, height;\r\n          flex-shrink: 0;\r\n        }\r\n        \r\n        .img img {\r\n          border-radius: 0.5rem;\r\n          width: 100%;\r\n          height: 100%;\r\n          object-fit: cover;\r\n          border: 1px solid #e5e7eb; /* gray-200 */\r\n          background-color: #fff;\r\n        }\r\n        \r\n        .profile-names {\r\n          width: 100%;\r\n          height: 6rem;\r\n          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\r\n          overflow: hidden;\r\n          position: relative;\r\n        }\r\n        \r\n        .name h1 {\r\n          position: absolute;\r\n          width: 100%;\r\n          text-align: center;\r\n          text-transform: uppercase;\r\n          font-family: 'Barlow Condensed', sans-serif;\r\n          font-size: 2rem;\r\n          font-weight: 900;\r\n          letter-spacing: 0;\r\n          line-height: 1;\r\n          color: #f93535;\r\n          user-select: none;\r\n          transform: translateY(100%);\r\n          margin: 0;\r\n          padding: 0;\r\n        }\r\n        \r\n        .name.default h1 {\r\n          transform: translateY(0);\r\n          color: #111111;\r\n        }\r\n        \r\n        .name h1 .letter {\r\n          position: relative;\r\n          transform: translateY(0%);\r\n          will-change: transform;\r\n        }\r\n        \r\n        /* MOBILE SMALL (< 480px) */\r\n        @media (max-width: 479px) {\r\n          .team {\r\n            gap: 0.4em;\r\n            padding: 0;\r\n          }\r\n          \r\n          .profile-images {\r\n            gap: 0.2rem;\r\n          }\r\n          \r\n          .img {\r\n            width: 40px;\r\n            height: 40px;\r\n            padding: 1px;\r\n          }\r\n          \r\n          .profile-names {\r\n            height: 3.5rem;\r\n          }\r\n          \r\n          .name h1 {\r\n            font-size: 1rem;\r\n            letter-spacing: 0;\r\n          }\r\n        }\r\n        \r\n        /* MOBILE (480px - 767px) */\r\n        @media (min-width: 480px) and (max-width: 767px) {\r\n          .team {\r\n            gap: 0.8em;\r\n            padding: 0.5rem;\r\n          }\r\n          \r\n          .profile-images {\r\n            gap: 0.4rem;\r\n          }\r\n          \r\n          .img {\r\n            width: 50px;\r\n            height: 50px;\r\n            padding: 2px;\r\n          }\r\n          \r\n          .profile-names {\r\n            height: 5rem;\r\n          }\r\n          \r\n          .name h1 {\r\n            font-size: 1.5rem;\r\n            letter-spacing: 0;\r\n          }\r\n        }\r\n        \r\n        /* TABLET (768px - 1023px) */\r\n        @media (min-width: 768px) and (max-width: 1023px) {\r\n          .team {\r\n            gap: 1.5em;\r\n            padding: 1rem;\r\n          }\r\n          \r\n          .profile-images {\r\n            gap: 0.6rem;\r\n            flex-wrap: nowrap;\r\n          }\r\n          \r\n          .img {\r\n            width: 60px;\r\n            height: 60px;\r\n            padding: 3px;\r\n          }\r\n          \r\n          .profile-names {\r\n            height: 9rem;\r\n          }\r\n          \r\n          .name h1 {\r\n            font-size: 6rem;\r\n            letter-spacing: -0.2rem;\r\n          }\r\n        }\r\n        \r\n        /* DESKTOP (>= 1024px) */\r\n        @media (min-width: 1024px) {\r\n          .team {\r\n            gap: 2.5em;\r\n            padding: 1.5rem;\r\n          }\r\n          \r\n          .profile-images {\r\n            gap: 0.75rem;\r\n            flex-wrap: nowrap;\r\n            width: max-content;\r\n          }\r\n          \r\n          .img {\r\n            width: 70px;\r\n            height: 70px;\r\n            padding: 5px;\r\n          }\r\n          \r\n          .profile-names {\r\n            height: 20rem;\r\n          }\r\n          \r\n          .name h1 {\r\n            font-size: 20rem;\r\n            letter-spacing: -0.5rem;\r\n          }\r\n        }\r\n        \r\n        /* Support pour écrans très larges */\r\n        @media (min-width: 1920px) {\r\n          .team {\r\n            gap: 3em;\r\n            padding: 2rem;\r\n          }\r\n          \r\n          .img {\r\n            width: 80px;\r\n            height: 80px;\r\n          }\r\n        }\r\n      `}</style>\r\n\r\n        <section className=\"team\">\r\n          <div className=\"profile-images\">\r\n            {TEAM_MEMBERS.map((member) => (\r\n                <div key={member} className=\"img\">\r\n                  <img\r\n                      src={getAvatarUrl(member)}\r\n                      alt={member}\r\n                      loading=\"lazy\"\r\n                  />\r\n                </div>\r\n            ))}\r\n          </div>\r\n\r\n          <div className=\"profile-names\">\r\n            <div className=\"name default\"><h1>Bag\\Ui</h1></div>\r\n            {TEAM_MEMBERS.map((member) => (\r\n                <div key={member} className=\"name\">\r\n                  <h1>{member}</h1>\r\n                </div>\r\n            ))}\r\n          </div>\r\n        </section>\r\n      </>\r\n  );\r\n};\r\n\r\nexport default TeamSection;",
      "type": "registry:block",
      "target": "components/blocks/team-section.tsx"
    }
  ],
  "type": "registry:block"
}