dès maintenant.
{/* CTAs agrandis */}
Rejoindre maintenant Accéder à la plateforme
{/* Sentinel : dès qu'il sort de l'écran, le sticky CTA apparaît */}
{/* Vidéo de démo autoplay */}
);
}
/* ─── VslTitle : barre URL-style typewriter avec curseur clignotant ─── */
function VslTitle() {
const FULL = 'vizionmrr.fr/bienvenue-dans-une-nouvelle-ere';
const [text, setText] = useState('');
const [done, setDone] = useState(false);
useEffect(() => {
let i = 0;
let cancelled = false;
// Petit délai avant de démarrer le typing (attends que la vidéo charge)
const start = setTimeout(() => {
const tick = () => {
if (cancelled) return;
if (i <= FULL.length) {
setText(FULL.slice(0, i));
i++;
setTimeout(tick, 28 + Math.random() * 22);
} else {
setDone(true);
}
};
tick();
}, 600);
return () => { cancelled = true; clearTimeout(start); };
}, []);
return (
{/* Cadenas + https */}
{/* URL text — police plus grande, plus lisible */}
https://{text}
{/* Curseur clignotant */}
);
}
function HeroVideo() {
const { landing } = useLandingStats();
const videoSrc = landing?.videoUrl || HERO_VIDEO_SRC; // fallback local en dev si rien dans la DB
const videoRef = useRef(null);
const rootRef = useRef(null);
const [loaded, setLoaded] = useState(false);
const [scrollScale, setScrollScale] = useState(1);
const [muted, setMuted] = useState(true);
// Au clic sur l'overlay : unmute + redémarre depuis le début pour que le viewer entende tout
const handleUnmute = () => {
const v = videoRef.current;
if (!v) return;
v.muted = false;
v.volume = 1;
v.currentTime = 0;
v.play().catch(() => {});
setMuted(false);
};
// Si aucune URL vidéo n'est configurée ni en dev ni en prod, ne rien rendre
if (!videoSrc) return null;
useEffect(() => {
const v = videoRef.current;
if (!v) return;
// Démarrage auto garanti (muted + playsinline)
const tryPlay = () => { v.play().catch(() => {}); };
tryPlay();
v.addEventListener('loadeddata', () => setLoaded(true));
return () => v.removeEventListener('loadeddata', () => setLoaded(true));
}, []);
// Parallax subtil : le cadre VSL s'agrandit légèrement au scroll
useEffect(() => {
const onScroll = () => {
const el = rootRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
// Progression : 0 quand la vidéo est sous l'écran, ~1 quand elle est au-dessus
const raw = (vh - rect.top) / (vh + rect.height);
const p = Math.max(0, Math.min(1, raw));
// Scale de 1 → 1.04 — léger mais perceptible
setScrollScale(1 + p * 0.04);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
{/* Browser chrome façon macOS — caché sur mobile via CSS */}
LIVE
{/* Conteneur vidéo 16/10 avec bords intérieurs arrondis */}
{/* Overlay vignette pour fondre avec le fond */}
{/* Overlay "Activer le son" — visible tant que la vidéo est mute */}
{muted && loaded && (
)}