/* global React, ReactDOM, InwardCarousel, StarField, ScaleSection, FeaturedClients, Marquee, Services, Performance, Stats, Process, CTA, Footer */
const { useEffect, useRef, useState } = React;
function Header() {
const [menuOpen, setMenuOpen] = useState(false);
const [hidden, setHidden] = useState(false);
useEffect(() => {
document.body.style.overflow = menuOpen ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [menuOpen]);
// Hide header on scroll down, show on scroll up — MOBILE ONLY. On desktop
// the floating pill stays pinned because there's plenty of horizontal
// room and a disappearing nav at the top of a wide canvas feels worse
// than just leaving it in place.
useEffect(() => {
const isMobile = () => window.matchMedia("(max-width: 760px)").matches;
let lastY = window.scrollY;
let raf = 0;
const tick = () => {
if (!isMobile()) { setHidden(false); raf = 0; return; }
const y = window.scrollY;
const dy = y - lastY;
if (y < 60) {
setHidden(false);
} else if (Math.abs(dy) > 4) {
setHidden(dy > 0); // scrolling down → hide
}
lastY = y;
raf = 0;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const close = () => setMenuOpen(false);
return (
{/* Mobile full-screen menu overlay */}
);
}
function GlobalCursor() {
// A single arrow cursor that follows the mouse across the WHOLE page
// (hero + every section below). The StarField canvas still paints its
// constellation lines + soft glow under the cursor inside the hero, but
// the arrow itself is now this DOM element so it stays visible everywhere.
const cursorRef = useRef(null);
useEffect(() => {
// Skip on touch devices — they keep the native tap experience.
if (window.matchMedia("(hover: none)").matches) return;
const el = cursorRef.current;
if (!el) return;
let x = -100, y = -100;
const onMove = (e) => {
x = e.clientX; y = e.clientY;
el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
if (el.style.opacity !== "1") el.style.opacity = "1";
};
const onLeave = () => { el.style.opacity = "0"; };
const onDown = () => { el.classList.add("is-down"); };
const onUp = () => { el.classList.remove("is-down"); };
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseleave", onLeave);
window.addEventListener("mousedown", onDown);
window.addEventListener("mouseup", onUp);
document.body.classList.add("has-custom-cursor");
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseleave", onLeave);
window.removeEventListener("mousedown", onDown);
window.removeEventListener("mouseup", onUp);
document.body.classList.remove("has-custom-cursor");
};
}, []);
return (
);
}
function Hero() {
return (
AI Creatives That Turn
Attention Into
Revenue.
);
}
function App() {
// Apply reveal-on-scroll for .reveal elements
useEffect(() => {
const els = document.querySelectorAll(".reveal");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
});
}, { threshold: 0.15 });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
// Smooth-scroll for in-page anchor clicks. The browser's
// scroll-behavior: smooth alone is unreliable inside iframes / when html
// has overflow rules — wiring up a global handler guarantees it works.
useEffect(() => {
const HEADER_OFFSET = 96;
const DURATION = 450;
const easeInOutCubic = (t) => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;
let activeAnim = 0;
const smoothScrollTo = (targetY) => {
cancelAnimationFrame(activeAnim);
const startY = window.scrollY;
const delta = targetY - startY;
if (Math.abs(delta) < 2) return;
const startT = performance.now();
const step = (now) => {
const t = Math.min(1, (now - startT) / DURATION);
window.scrollTo(0, startY + delta * easeInOutCubic(t));
if (t < 1) activeAnim = requestAnimationFrame(step);
};
activeAnim = requestAnimationFrame(step);
};
const onClick = (e) => {
const a = e.target.closest && e.target.closest('a[href^="#"]');
if (!a) return;
const href = a.getAttribute("href");
if (!href || href === "#" || href.length < 2) return;
const target = document.querySelector(href);
if (!target) return;
e.preventDefault();
const top = target.getBoundingClientRect().top + window.scrollY - HEADER_OFFSET;
smoothScrollTo(top);
};
document.addEventListener("click", onClick);
return () => {
document.removeEventListener("click", onClick);
cancelAnimationFrame(activeAnim);
};
}, []);
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
