/* ============================================================
LPM shared components, loaded on every page before the
page-specific script. Exposes components on window.
============================================================ */
const { useState, useEffect, useRef } = React;
const VIDEO_SRC = "assets/launch-video.mp4?v=2";
const HOME = "index.html";
// The waitlist POSTs to the platform API (different origin, CORS is handled there).
const WAITLIST_API = "https://app.liftportfoliomanagement.com.au/api/waitlist";
const PAGES = [
{ href: "contracts.html", label: "Contracts & Pricing" },
{ href: "invoicing.html", label: "Invoice Audit" },
{ href: "maintenance-tender.html", label: "Run a Tender" },
{ href: "activity.html", label: "Activity & Planning" },
{ href: "enterprise.html", label: "Portfolio" },
{ href: "ai.html", label: "Ask Lola" },
];
const NAV_PAGES = [
{ href: "contracts.html", label: "Contracts & Pricing" },
{ href: "invoicing.html", label: "Invoice Audit" },
{ href: "activity.html", label: "Activity & Planning" },
{ href: "enterprise.html", label: "Portfolio" },
{ href: "ai.html", label: "Ask Lola" },
];
/* ---------- brand mark (dot-matrix from favicon) ---------- */
function Mark({ size = 26 }) {
const cols = [18, 34, 50, 66, 82];
const r = {
18: [1.4, 2.1, 2.45, 2.1, 1.4],
34: [2.1, 3.85, 4.55, 3.85, 2.1],
50: [2.8, 5.25, 7, 5.25, 2.8],
66: [2.1, 3.85, 4.55, 3.85, 2.1],
82: [1.4, 2.1, 2.45, 2.1, 1.4],
};
return (
);
}
/* ---------- AI mark (accent mini dot-grid) ---------- */
function AIMark({ size = 14 }) {
const pos = [5, 12, 19];
const r = [[1.1, 1.5, 1.1], [1.5, 2.2, 1.5], [1.1, 1.5, 1.1]];
return (
{pos.map((cx, i) => pos.map((cy, j) => (
);
}
/* ---------- icons ---------- */
const ico = {
file: <>
{ico[name] || null}
);
}
/* ---------- badge ---------- */
function Badge({ children = "Launching soon · AU & NZ" }) {
return
;
}
/* ---------- waitlist ---------- */
function Waitlist({ center = false, variant = "accent", cta = "Join the waitlist" }) {
const [name, setName] = useState("");
const [company, setCompany] = useState("");
const [email, setEmail] = useState("");
const [state, setState] = useState("idle");
const [errorMsg, setErrorMsg] = useState("");
const clearError = () => { if (state === "error") { setState("idle"); setErrorMsg(""); } };
async function submit(e) {
e.preventDefault();
if (!name.trim()) { setErrorMsg("Please enter your name."); setState("error"); return; }
if (!company.trim()) { setErrorMsg("Please enter your business or organisation."); setState("error"); return; }
if (!email.includes("@")) { setErrorMsg("Please enter a valid email address."); setState("error"); return; }
setState("loading");
try {
const res = await fetch(WAITLIST_API, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: name.trim(), company: company.trim(), email: email.trim() }),
});
const data = await res.json().catch(() => ({}));
if (res.ok) { if (window.gtag) window.gtag("event", "waitlist_signup"); setState("success"); return; }
setErrorMsg(data.error || "Something went wrong. Please try again.");
setState("error");
} catch {
setErrorMsg("Couldn't reach the server. Please try again in a moment.");
setState("error");
}
}
if (state === "success") {
return (
We'll reach out before we open the doors. Something good is coming.
);
}
return (
);
}
/* ---------- motion: reveal-on-scroll, cursor glow, scroll tilt ---------- */
const MOTION_OK = !(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
/* Renders nothing, attaches the page-wide motion behaviours after mount. */
function MotionFX() {
// scroll reveal with sibling stagger
useEffect(() => {
if (!MOTION_OK || !("IntersectionObserver" in window)) return;
const SEL = [
".section__head", ".fcard", ".aud__card", ".step", ".gpoint",
".guard__copy", ".drow__copy", ".drow__visual", ".fstep", ".stat",
".cta__inner", ".belief__q", ".founder__portrait", ".tl", ".cmethod",
".ledger", ".phero__inner", ".stage",
].join(",");
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 -7% 0px" });
const vh = window.innerHeight || 800;
const els = Array.from(document.querySelectorAll(SEL));
els.forEach((el) => {
const idx = el.parentElement ? Array.prototype.indexOf.call(el.parentElement.children, el) : 0;
el.style.setProperty("--d", Math.min(idx, 6) * 80 + "ms");
el.classList.add("reveal");
// anything already in the first viewport reveals immediately, no
// waiting on the observer's first async tick
if (el.getBoundingClientRect().top < vh) el.classList.add("in");
else io.observe(el);
});
return () => io.disconnect();
}, []);
// cursor-tracked glow position on cards
useEffect(() => {
const SEL = ".fcard,.aud__card,.step,.cmethod";
const move = (e) => {
const card = e.target && e.target.closest ? e.target.closest(SEL) : null;
if (!card) return;
const r = card.getBoundingClientRect();
card.style.setProperty("--mx", e.clientX - r.left + "px");
card.style.setProperty("--my", e.clientY - r.top + "px");
};
document.addEventListener("pointermove", move, { passive: true });
return () => document.removeEventListener("pointermove", move);
}, []);
return null;
}
/* 3D tilt that flattens out as the element scrolls into view */
function ScrollTilt({ max = 16, children }) {
const ref = useRef(null);
useEffect(() => {
if (!MOTION_OK || !ref.current) return;
const el = ref.current;
let raf = 0;
const update = () => {
raf = 0;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || 1;
const p = Math.min(1, Math.max(0, (vh - r.top) / (vh * 0.7)));
if (p >= 0.999) {
// fully settled: drop the transform so text re-renders pixel-crisp
el.style.transform = "none";
el.style.willChange = "auto";
} else {
el.style.transform = `perspective(1100px) rotateX(${((1 - p) * max).toFixed(2)}deg) scale(${(0.96 + p * 0.04).toFixed(3)})`;
el.style.willChange = "transform";
}
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, [max]);
return {children}
;
}
/* count-up number that animates when scrolled into view */
function CountUp({ to, prefix = "", suffix = "", duration = 1600 }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const final = prefix + to.toLocaleString() + suffix;
if (!MOTION_OK || !("IntersectionObserver" in window)) { el.textContent = final; return; }
let raf = 0;
const io = new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting) return;
io.disconnect();
const t0 = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = prefix + Math.round(to * eased).toLocaleString() + suffix;
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
}, { threshold: 0.5 });
io.observe(el);
return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
}, [to, prefix, suffix, duration]);
return {prefix}{to.toLocaleString()}{suffix} ;
}
/* ---------- video frame ---------- */
/* The launch film has no audio track yet (VO pending), so the control is a
replay button. When the voiced render lands, restore the sound toggle. */
function VideoFrame() {
const ref = useRef(null);
useEffect(() => { if (ref.current) { ref.current.muted = true; ref.current.play().catch(() => {}); } }, []);
function replay() {
const v = ref.current;
if (!v) return;
v.currentTime = 0;
v.play().catch(() => {});
}
return (
);
}
/* ---------- nav ---------- */
function Nav({ current }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const f = () => setScrolled(window.scrollY > 24);
f(); window.addEventListener("scroll", f, { passive: true });
return () => window.removeEventListener("scroll", f);
}, []);
return (
<>
LPM
);
}
/* ---------- footer ---------- */
function Footer() {
return (
);
}
/* ---------- page hero ---------- */
function PageHero({ icon, kicker, crumb, title, sub, pills, actions }) {
return (
{icon && {kicker}
{title}
{sub}
{pills &&
{pills.map((p, i) => {p} )}
}
);
}
/* ---------- deep row (alternating feature block) ---------- */
function DeepRow({ kicker, title, desc, points, visual, rev }) {
return (
{kicker &&
}
{title}
{desc}
{points && (
{points.map((p, i) => (
{p}
))}
)}
{visual}
);
}
/* ---------- AI impartial verdict ---------- */
function Verdict({ tag, title, children, inPanel }) {
return (
{title &&
{title}
}
{children}
);
}
/* ---------- CTA section ---------- */
function CTASection({ title = "Be first to know.", sub = "LPM is launching soon. Join the waitlist and we'll reach out before we open the doors." }) {
return (
Get early access
{title}
{sub}
);
}
/* ---------- page shell ---------- */
function PageShell({ current, children }) {
useEffect(() => { window.scrollTo(0, 0); }, []);
return (
);
}
Object.assign(window, {
VIDEO_SRC, HOME, PAGES, NAV_PAGES,
Mark, AIMark, ico, Icon, Badge, Waitlist, VideoFrame,
Nav, Footer, PageHero, DeepRow, Verdict, CTASection, PageShell,
MotionFX, ScrollTilt, CountUp, MOTION_OK,
});