// App root — composes all sections + sticky mobile CTA + WhatsApp button + scroll observer
function StickyMobileCTA({ visible }) {
return (
);
}
function WhatsAppFAB() {
return (
);
}
function App() {
const [scrollPct, setScrollPct] = React.useState(0);
React.useEffect(() => {
// Scroll progress for sticky CTA
const onScroll = () => {
const max = document.body.scrollHeight - window.innerHeight;
setScrollPct(window.scrollY / Math.max(1, max));
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
React.useEffect(() => {
// IntersectionObserver for fade-up
const els = document.querySelectorAll('.fade-up');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
els.forEach(el => io.observe(el));
// Pointer-tracked card glow
const cards = document.querySelectorAll('.card');
const onMove = (e) => {
const r = e.currentTarget.getBoundingClientRect();
e.currentTarget.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
e.currentTarget.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
};
cards.forEach(c => c.addEventListener('pointermove', onMove));
return () => {
io.disconnect();
cards.forEach(c => c.removeEventListener('pointermove', onMove));
};
});
return (
<>
0.3} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();