// Hero — animated text cycle + container-scroll tilting card + interactive contract preview const { useState, useEffect, useRef, useLayoutEffect, useCallback } = React; const HERO_ROTATE = [ 'made simple.', 'reviewed faster.', 'in plain English.', 'balanced.']; // Mock contract clauses — hover/tap to see SubSync's flag const CLAUSES = [ { id: 'c1', n: '14.2', title: 'Liability', text: 'The Subcontractor shall be liable to the Contractor for all losses, damages, costs and expenses howsoever suffered or incurred by the Contractor arising directly or indirectly out of or in connection with the Subcontractor\u2019s performance of the Works.', flag: { level: 'high', label: 'HIGH RISK', heading: 'No liability cap — uncapped exposure', detail: 'Industry norm is to cap liability at the contract value (sometimes 1.5×). As written, your exposure is unlimited.', ask: 'Cap aggregate liability at the Subcontract Sum and exclude consequential loss.' } }, { id: 'c2', n: '22.1', title: 'Payment', text: 'Notwithstanding anything to the contrary, the Subcontractor shall not be entitled to payment of any amount until the Contractor has first received payment from the Principal of all amounts attributable to the Subcontract Works.', flag: { level: 'high', label: 'HIGH RISK', heading: 'Pay-when-paid trigger', detail: 'Conditioning your payment on the Principal paying the Contractor. This is void and unenforceable under SOPA in NSW, VIC and QLD.', ask: 'Strike this clause. Replace with a fixed payment date tied to claim submission.' } }, { id: 'c5', n: '15.6', title: 'Indemnity', text: 'The Subcontractor shall indemnify and keep indemnified the Contractor against any and all claims, losses, damages, liabilities, costs and expenses (including legal costs on a full indemnity basis) arising out of or in connection with the Subcontract Works, however caused.', flag: { level: 'high', label: 'HIGH RISK', heading: 'Open-ended indemnity — “however caused”', detail: 'Forces you to indemnify the Contractor even where the loss is caused by the Contractor or a third party. Highly one-sided and uninsurable as drafted.', ask: 'Limit indemnity to losses caused by the Subcontractor’s negligence, and exclude losses caused by the Contractor or others.' } }, { id: 'c3', n: '18.4', title: 'EOT notices', text: 'A claim for an extension of time must be made by the Subcontractor in writing within five (5) business days of the event giving rise to the delay, failing which the Subcontractor shall have no entitlement to an extension.', flag: { level: 'medium', label: 'MEDIUM RISK', heading: 'EOT notice window only 5 business days', detail: 'Tight. Industry standard is 10\u201314 business days. Time bars are strictly enforced — miss it and the claim dies.', ask: 'Negotiate to 10 business days minimum, and tie the window to when the delay is reasonably evident.' } }, { id: 'c4', n: '9.3', title: 'Variations', text: 'The Contractor may direct variations to the Subcontract Works at any time. The Subcontractor shall be entitled to a reasonable adjustment to the Subcontract Sum and time for completion, assessed in accordance with the rates in the Schedule of Rates.', flag: { level: 'compliant', label: 'Ready for review', heading: 'Variation clause is fair', detail: 'Allows time and cost recovery on directed variations, with assessment tied to the agreed rates. No action needed.', ask: 'Accept as drafted.' } }]; const LEVEL_STYLES = { high: { bg: '#ffe7e1', border: '#ffd0c4', text: '#8a1505', dot: '#ee2200', accent: '#ee2200' }, medium: { bg: '#fef5d8', border: '#fbe39a', text: '#6b4d00', dot: '#fab515', accent: '#fab515' }, compliant: { bg: '#e3f5e1', border: '#bce7b6', text: '#1a5a18', dot: '#69c765', accent: '#69c765' } }; /* ───────── Animated text cycle (height-stable, blur fade) ───────── */ function AnimatedTextCycle({ words, interval = 3200 }) { const [i, setI] = useState(0); const [w, setW] = useState('auto'); const measureRef = useRef(null); useLayoutEffect(() => { if (!measureRef.current) return; const el = measureRef.current.children[i]; if (el) { const r = el.getBoundingClientRect(); setW(`${Math.ceil(r.width)}px`); } }, [i]); useEffect(() => { const t = setInterval(() => setI((p) => (p + 1) % words.length), interval); return () => clearInterval(t); }, [interval, words.length]); return ( {/* hidden measure */} {words.map((wd, idx) => {wd} )} ); } /* ───────── Container-scroll tilting card ───────── */ function useContainerScroll(ref) { const [tilt, setTilt] = useState(1); // 0..1 → 1 = tilted, 0 = flat useEffect(() => { const onScroll = () => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; // 1 when top of section is at top of viewport, 0 when its bottom is at top const total = r.height + vh * 0.4; const passed = Math.max(0, -r.top + vh * 0.4); const p = Math.min(1, Math.max(0, passed / total)); // We want: top of viewport on landing = tilted, after scrolling = flat setTilt(Math.max(0, 1 - p * 2.2)); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [ref]); return tilt; } /* ───────── Interactive contract preview ───────── */ function ContractPreview() { const [active, setActive] = useState(null); // clause id const [pinned, setPinned] = useState(null); const shown = pinned || active; const clause = shown ? CLAUSES.find((c) => c.id === shown) : null; return (
{/* Document side */}
Subcontract_Proplex Construction_V.1.pdf
{CLAUSES.map((c) => { const isActive = shown === c.id; const lvl = LEVEL_STYLES[c.flag.level]; return (
setActive(c.id)} onMouseLeave={() => setActive(null)} onClick={() => setPinned(pinned === c.id ? null : c.id)} style={{ cursor: 'pointer', padding: '10px 12px', margin: '6px -12px', borderRadius: 8, background: isActive ? lvl.bg : 'transparent', borderLeft: `3px solid ${isActive ? lvl.accent : 'transparent'}`, transition: 'background 180ms, border-color 180ms' }}>
CL {c.n} {c.title} {isActive && Flagged }

{c.text}

); })}

· hover or click any clause to see SubSync's review ·

{/* Flag panel */}
SubSync · live review
3m 12s
{!clause &&

Hover a clause →

See the risk flag, plain-English explanation, and what to push back on.

3 High
6 Medium
5 OK
} {clause && }
); } function FlagDetail({ clause }) { const lvl = LEVEL_STYLES[clause.flag.level]; // animate in const [shown, setShown] = useState(false); useEffect(() => { setShown(false); const id = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(id); }, [clause.id]); return (
{clause.flag.label} CL {clause.n}

{clause.flag.heading}

{clause.flag.detail}

Suggested ask

{clause.flag.ask}

); } /* ───────── Hero composition ───────── */ function Hero() { const words = typeof window !== 'undefined' && window.__SS_HEADLINE || HERO_ROTATE; const stageRef = useRef(null); const tilt = useContainerScroll(stageRef); const rotate = tilt * 18; // 0..18deg const scale = 0.96 + (1 - tilt) * 0.04; // ambient spotlight const [mp, setMp] = useState({ x: 50, y: 40 }); const onMove = useCallback((e) => { const r = e.currentTarget.getBoundingClientRect(); setMp({ x: (e.clientX - r.left) / r.width * 100, y: (e.clientY - r.top) / r.height * 100 }); }, []); return (
{/* ambient spotlight */} ); } Object.assign(window, { Hero });