// All sections of the Balduino landing. // Order: Nav, Hero (video), Manifesto, Features, HowItWorks, Army, Testimonials, Verse, FAQ, Footer const { useEffect, useRef, useState } = React; // ─── Hook: intersection-observer reveals ────────────────────────────────── function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('in');}); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } // ─── Hook: subtle parallax via scrollY ──────────────────────────────────── function useScrollY() { const [y, setY] = useState(0); useEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setY(window.scrollY)); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return y; } // ─────────────────────────────────────────────────────────────────────────── // NAV // ─────────────────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 24); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); return (
); } const navLink = { fontSize: 13.5, color: 'var(--cloud)', fontWeight: 500, letterSpacing: '-.005em' }; // ─────────────────────────────────────────────────────────────────────────── // HERO — full-bleed video with text overlay // ─────────────────────────────────────────────────────────────────────────── function Hero() { const videoRef = useRef(null); const y = useScrollY(); useEffect(() => { // Force-mute. React doesn't always set `muted` correctly on initial render, // so we set it imperatively on the DOM node and pin volume to 0. const v = videoRef.current; if (v) { v.muted = true; v.defaultMuted = true; v.volume = 0; v.play().catch(() => {}); // Re-assert if anything tries to unmute later. const reMute = () => {v.muted = true;v.volume = 0;}; v.addEventListener('volumechange', reMute); return () => v.removeEventListener('volumechange', reMute); } }, []); return (
{/* Video background */}
{/* Cinematic gradient overlays for legibility */}
{/* Vignette */}
{/* Content */}

Recupera tu atención.
Vuelve a Dios.

Balduino bloquea las apps que roban tu día, obliga a parar y orar a tus horas, y convierte cada sesión de enfoque en un templario para tu ejército.

4.8 · 2.300+ caballeros activos
{/* Scroll indicator */}
Continúa
); } function Arrow() { return ( ); } function Stars() { return (
{Array.from({ length: 5 }).map((_, i) => )}
); } // ─────────────────────────────────────────────────────────────────────────── // MANIFESTO // ─────────────────────────────────────────────────────────────────────────── function ManifestoPhoneVideo() { const ref = useRef(null); const [ready, setReady] = useState(false); useEffect(() => { const v = ref.current; if (!v) return; v.muted = true; v.defaultMuted = true; v.volume = 0; const onReady = () => setReady(true); if (v.readyState >= 3) onReady(); v.addEventListener('canplay', onReady); v.addEventListener('playing', onReady); v.play().catch(() => {}); return () => { v.removeEventListener('canplay', onReady); v.removeEventListener('playing', onReady); }; }, []); return (