Personnalisez « Page footer vidéo aux yeux qui suivent le curseur »

Recreate this exact single-page creative studio footer. This is a fidelity task, not a redesign. Implement the supplied content, assets, CSS, and interactions exactly. Build only this footer page. Keep it local; do not publish or deploy it. Do not add a header, hero, cards, forms, sections, buttons, links, animations, or extra copy. The appended source snapshots are the authoritative specification—copy them exactly, adapting only import paths or framework plumbing. Do not substitute approximate typography, another logo, stock video, or a generic eye-following effect. The page is one footer with a left info column, a centered script logo, a right contact-style column with three social icons, and a lavender character video that fills the viewport behind all content on desktop and stacks after the content on mobile. Keep the composition spacious and minimal with very dark text and no overlay over the video; all labels, copy, icons, and the logo are static, non-clickable, with no invented destinations and no “Truus” shown anywhere. Preserve the exact visible copy and character counts: left badge “have a fresh idea?”, left headline “imagination”/“meets craft”, labels “Made”/“Story”/“In the lab”/“Say hey”, right badge “say hey”, right headline “let’s team up!”/“bring us your idea*”, note “*good things start with one spark. let’s make yours.”, and social icons LinkedIn, Instagram, TikTok using the exact SVGs. The central logo is the outlined script Logoipsum SVG (viewBox 169×40) with fill currentColor inheriting #080909. Headlines use Epilogue Black 900 and all other text DM Sans Regular 400 via real local woff2 files with font-synthesis: none; colors are text/logo #080909, desktop fallback bg #dfe4f2, badge #f7f8fa, mobile bg #f0eefa; no shadows, borders, cards, or gradients. Follow the exact desktop layout (>700px) with the specified vw values and three-column absolute placement, and the exact mobile overrides (≤700px) inside @media(max-width:700px) with the stacked order logo/left/right/video, grid nav, and full-bleed video wrapper. Use the complete literal CloudFront video URL (1920×1080, 24fps, ~7.041667s), save as public/footer-background.mp4, and create the all-intra public/footer-scrub.mp4 with the given ffmpeg command; the video element is muted, playsInline, preload="auto", no controls or poster. Implement the exact desktop cursor scrubbing using gaze-frames.json: eye midpoint (948,418), cover scale max(w/1920,h/1080), compute eyeX/eyeY, subtract from pointer, ignore within 8px, atan2 normalized to [0,2π), pick the row of minimum circular angular difference, use time + 1/240s, seek only if delta > 1/48s with frame data and no seek in progress, clamp to duration - 1/24, coalesce via requestAnimationFrame, no interpolation, start paused at 0 and hold the chosen frame, recalc on resize/scroll, passive listeners removed on unmount; cardinals right 2.54167s, down 0.33333s, left 1.0s, up 1.70833s. On mobile (≤700px) disable pointer seeking and play the below-content video muted and looping, respect prefers-reduced-motion, and use matchMedia listeners to switch at the 700px breakpoint. Use footer aria-label="Footer", aria-hidden video wrapper with pointer-events:none, logo wrapper role="img" aria-label="Studio logo" with aria-hidden SVG, social wrappers labeled LinkedIn/Instagram/TikTok, language en, title “Studio — Footer”, the given description, and favicon /logo.svg with fill #080909. Build with React and TypeScript and ordinary CSS using the exact supplied source files (app/page.tsx, app/layout.tsx, client video component); no animation library, UI framework, or canvas. Convert public/logo.svg's fillRule/clipRule back to fill-rule/clip-rule and set #080909 while preserving viewBox and path. Build successfully and verify cardinal gaze mapping, mobile stacking, wrapping at 320px/390px, and desktop layout above 700px, without changing content, keeping all work local.