);
const SparklesIcon = p => ;
const LayersIcon = p => ;
const ArrowRightIcon = p => ;
const PhoneIcon = p => ;
const MailIcon = p => ;
const PlusIcon = p => ;
const FacebookIcon = ({size=24,className=''}) => ;
const InstagramIcon = ({size=24,className=''}) => ;
const LinkedInIcon = ({size=24,className=''}) => ;
const TikTokIcon = ({size=24,className=''}) => ;
const SproutIcon = p => ;
const ZapIcon = p => ;
const MapPinIcon = p => ;
const AwardIcon = p => ;
const TrendingUpIcon = p => ;
const HandshakeIcon = p => ;
const GraduationIcon = p => ;
const BookOpenIcon = p => ;
const CoinsIcon = p => ;
const CheckCircleIcon = p => ;
const InfoIcon = p => ;
const RocketIcon = p => ;
const BellIcon = p => ;
const ClockIcon = p => ;
const HeartIcon = p => ;
const StethoscopeIcon = p => ;
const ClipboardIcon = p => ;
const CalendarIcon = p => ;
const BuildingIcon = p => ;
const CheckIcon = p => ;
const MicroscopeIcon = p => ;
const MapIcon = p => ;
// ═══════════════════════════════════════════════════════════════════
// HELPERS
// ═══════════════════════════════════════════════════════════════════
const useReveal = (ref) => {
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('.reveal').forEach((el, i) =>
setTimeout(() => el.classList.add('in'), i * 130)
);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
};
const useCountUp = (target, duration, shouldStart) => {
const [count, setCount] = useState(0);
useEffect(() => {
if (!shouldStart) return;
let startTime = null;
const easeOut = t => 1 - Math.pow(1-t, 3);
const step = ts => {
if (!startTime) startTime = ts;
const p = Math.min((ts - startTime) / duration, 1);
setCount(Math.round(easeOut(p) * target));
if (p < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}, [shouldStart]);
return count;
};
// ═══════════════════════════════════════════════════════════════════
// NAVBAR
// ═══════════════════════════════════════════════════════════════════
const Navbar = ({ page = 'home' }) => {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', fn, {passive:true});
return () => window.removeEventListener('scroll', fn);
}, []);
const links = [
{ label:'Inicio', href: page==='home' ? '#inicio' : '/', active: page==='home', scrollId: page==='home' ? '#inicio' : null },
{ label:'Proyectos', href: '/proyectos', active: page==='projects' },
{ label:'Nuestro Equipo', href: '/equipo', active: page==='team' },
{ label:'Contacto', href: '/contacto', active: page==='contact' },
];
const logoHref = page === 'home' ? '#inicio' : '/';
const go = (e, link) => {
if (link.scrollId) {
e.preventDefault(); setMenuOpen(false);
document.querySelector(link.scrollId)?.scrollIntoView({behavior:'smooth'});
return;
}
setMenuOpen(false);
};
return (
<>
);
};
// ═══════════════════════════════════════════════════════════════════
// HERO
// ═══════════════════════════════════════════════════════════════════
const dismissLoader = () => {
const fill = document.getElementById('loader-bar-fill');
const loader = document.getElementById('page-loader');
if (!loader) return;
if (fill) { fill.style.animation = 'none'; fill.style.width = '100%'; fill.style.transition = 'width 0.25s ease'; }
setTimeout(() => {
loader.classList.add('hide');
setTimeout(() => loader.remove(), 600);
}, 250);
};
const Hero = () => {
const videoRef = useRef(null);
useEffect(() => {
const video = videoRef.current;
if (!video) { dismissLoader(); return; }
if (video.readyState >= 3) { dismissLoader(); return; }
video.addEventListener('canplay', dismissLoader, { once: true });
const fallback = setTimeout(dismissLoader, 5000);
return () => { video.removeEventListener('canplay', dismissLoader); clearTimeout(fallback); };
}, []);
return (
Asociación Bolivia Joven
Jóvenes que{' '}
transforman
);
};
// ═══════════════════════════════════════════════════════════════════
// MISSION & VISION
// ═══════════════════════════════════════════════════════════════════
const Mission = () => {
const ref = useRef(null);
useReveal(ref);
return (
Jóvenes que{' '}
transforman
el futuro de Bolivia
Conectamos jóvenes con proyectos de impacto social, oportunidades de liderazgo y una red que trasciende fronteras.
Una organización construida
por y para jóvenes bolivianos
Bolivia Joven es una red de estudiantes comprometidos con el desarrollo social del país. A través de proyectos colaborativos, formación en liderazgo y alianzas estratégicas, creamos oportunidades reales de impacto.
{[
{letter:'M',label:'Misión',accent:'var(--red)',bg:'rgba(162,0,50,0.15)',borderAccent:'rgba(162,0,50,0.1)',text:'Construir, fortalecer y conectar a jóvenes líderes, impulsando su desarrollo personal y social a través de espacios de participación, aprendizaje y acción.',delay:'reveal-d2',hoverClass:'card-red-hover'},
{letter:'V',label:'Visión',accent:'var(--gold)',bg:'rgba(233,211,108,0.12)',borderAccent:'rgba(233,211,108,0.08)',text:'Establecernos como la principal asociación referente en liderazgo juvenil en Bolivia, conocida por su profesionalismo, inclusión y cohesión.',delay:'reveal-d3',hoverClass:'card-gold-hover'},
].map(c=>(
))}
);
};
// ═══════════════════════════════════════════════════════════════════
// STATS
// ═══════════════════════════════════════════════════════════════════
const StatCard = ({icon:Icon,value,suffix,label,accent,bg}) => {
const [started,setStarted] = useState(false);
const ref = useRef(null);
const count = useCountUp(value,2200,started);
useEffect(()=>{
const obs = new IntersectionObserver(([e])=>{if(e.isIntersecting){setStarted(true);obs.disconnect();}},{threshold:0.4});
if(ref.current) obs.observe(ref.current);
return ()=>obs.disconnect();
},[]);
return (
{c.letter}
{c.label}
{c.text}
{count.toLocaleString()}{suffix}
{label}
{bg}
El impacto que generamos
Proyectos destacados
{[-1,1].map((d,i)=>(
))}
Nuestros Aliados
Organizaciones que creen en el potencial de la juventud boliviana
{item.a}
Preguntas
frecuentes
Todo lo que necesitas saber antes de dar el paso. Si tienes más dudas, escríbenos.
{FAQS.map((item,i)=>)}
Postúlate hoy y
forma parte
del cambio
Te notificaremos cuando abran las inscripciones. Sé el primero en saber.
{e.currentTarget.style.background='#f5e07a';e.currentTarget.style.boxShadow='0 8px 40px rgba(233,211,108,0.55)';}} onMouseLeave={e=>{e.currentTarget.style.background='var(--gold)';e.currentTarget.style.boxShadow='0 0 40px rgba(233,211,108,0.35)';}}> Únete