// Never Forget — modernized landing using actual app assets const useReveal = () => { React.useEffect(() => { const els = document.querySelectorAll(".reveal, .reveal-stagger"); const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); }; // Tilt-on-hover for feature cards const useTilt = () => { React.useEffect(() => { const cards = document.querySelectorAll(".feature-card.tilt"); const handlers = []; cards.forEach((card) => { const onMove = (e) => { const r = card.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width; const py = (e.clientY - r.top) / r.height; const rx = (py - 0.5) * -6; const ry = (px - 0.5) * 8; card.style.transform = `perspective(1000px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-3px)`; card.style.setProperty("--mx", `${px * 100}%`); card.style.setProperty("--my", `${py * 100}%`); }; const onLeave = () => {card.style.transform = "";}; card.addEventListener("mousemove", onMove); card.addEventListener("mouseleave", onLeave); handlers.push([card, onMove, onLeave]); }); return () => handlers.forEach(([c, m, l]) => { c.removeEventListener("mousemove", m); c.removeEventListener("mouseleave", l); }); }, []); }; // Magnetic effect for primary CTAs const useMagnetic = () => { React.useEffect(() => { const els = document.querySelectorAll("[data-magnetic]"); const handlers = []; els.forEach((el) => { const onMove = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - r.left - r.width / 2; const y = e.clientY - r.top - r.height / 2; el.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px)`; }; const onLeave = () => {el.style.transform = "";}; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); handlers.push([el, onMove, onLeave]); }); return () => handlers.forEach(([el, m, l]) => { el.removeEventListener("mousemove", m); el.removeEventListener("mouseleave", l); }); }, []); }; // Animated count up const CountUp = ({ end, duration = 1600, suffix = "", decimals = 0 }) => { const [val, setVal] = React.useState(0); const ref = React.useRef(null); const started = React.useRef(false); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !started.current) { started.current = true; let raf, start; const tick = (ts) => { if (!start) start = ts; const t = Math.min((ts - start) / duration, 1); const eased = 1 - Math.pow(1 - t, 3); setVal(end * eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); } }, { threshold: 0.4 }); obs.observe(el); return () => obs.disconnect(); }, [end, duration]); return {val.toFixed(decimals)}{suffix}; }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light" } /*EDITMODE-END*/; const App = () => { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); React.useEffect(() => { document.documentElement.setAttribute("data-theme", tweaks.theme); }, [tweaks.theme]); useReveal(); useTilt(); useMagnetic(); return ( <>