11'use client'
22
3- import { useCallback , useEffect , useRef , useState } from 'react'
3+ import { useCallback , useId , useRef , useState } from 'react'
44import dynamic from 'next/dynamic'
55import Image from 'next/image'
66import Link from 'next/link'
@@ -171,8 +171,8 @@ function YouCursor({ x, y, visible }: YouCursorProps) {
171171 * Collaboration section — team workflows and real-time collaboration.
172172 *
173173 * SEO:
174- * - `<section id="collaboration" aria-labelledby="collaboration-heading">` .
175- * - `<h2 id="collaboration-heading">` for the section title .
174+ * - `<section id="collaboration">` is the stable anchor for in-page navigation .
175+ * - The section title `<h2>` is linked via `aria-labelledby` using a `useId()`-generated id .
176176 * - Product visuals use `<figure>` with `<figcaption>` and descriptive `alt` text.
177177 *
178178 * GEO:
@@ -181,41 +181,17 @@ function YouCursor({ x, y, visible }: YouCursorProps) {
181181 * - Reference "Sim" by name per capability ("Sim's real-time collaboration").
182182 */
183183
184- const CURSOR_LERP_FACTOR = 0.3
185-
186184export default function Collaboration ( ) {
185+ const headingId = useId ( )
187186 const [ cursorPos , setCursorPos ] = useState ( { x : 0 , y : 0 } )
188187 const [ isHovering , setIsHovering ] = useState ( false )
189188 const sectionRef = useRef < HTMLElement > ( null )
190- const targetPos = useRef ( { x : 0 , y : 0 } )
191- const animationRef = useRef < number > ( 0 )
192-
193- useEffect ( ( ) => {
194- const animate = ( ) => {
195- setCursorPos ( ( prev ) => ( {
196- x : prev . x + ( targetPos . current . x - prev . x ) * CURSOR_LERP_FACTOR ,
197- y : prev . y + ( targetPos . current . y - prev . y ) * CURSOR_LERP_FACTOR ,
198- } ) )
199- animationRef . current = requestAnimationFrame ( animate )
200- }
201-
202- if ( isHovering ) {
203- animationRef . current = requestAnimationFrame ( animate )
204- }
205-
206- return ( ) => {
207- if ( animationRef . current ) {
208- cancelAnimationFrame ( animationRef . current )
209- }
210- }
211- } , [ isHovering ] )
212189
213190 const handleMouseMove = useCallback ( ( e : React . MouseEvent ) => {
214- targetPos . current = { x : e . clientX , y : e . clientY }
191+ setCursorPos ( { x : e . clientX , y : e . clientY } )
215192 } , [ ] )
216193
217194 const handleMouseEnter = useCallback ( ( e : React . MouseEvent ) => {
218- targetPos . current = { x : e . clientX , y : e . clientY }
219195 setCursorPos ( { x : e . clientX , y : e . clientY } )
220196 setIsHovering ( true )
221197 } , [ ] )
@@ -228,7 +204,7 @@ export default function Collaboration() {
228204 < section
229205 ref = { sectionRef }
230206 id = 'collaboration'
231- aria-labelledby = 'collaboration-heading'
207+ aria-labelledby = { headingId }
232208 className = 'bg-[var(--landing-bg)]'
233209 style = { { cursor : isHovering ? 'none' : 'auto' } }
234210 onMouseMove = { handleMouseMove }
@@ -258,7 +234,7 @@ export default function Collaboration() {
258234 </ Badge >
259235
260236 < h2
261- id = 'collaboration-heading'
237+ id = { headingId }
262238 className = 'text-balance font-[430] font-season text-[32px] text-white leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
263239 >
264240 Realtime
0 commit comments