/* SKOPIA Tour — animated product walkthrough, inline on main page */ const TOUR_CHAPTERS = [ { id: 'upload', src: 'assets/demo-01-upload.png', eyebrow: '01 · INGEST', title: 'Drop in any schedule. Get answers in seconds.', caption: 'Native support for P6 XER, Microsoft Project MPP, and MSP XML. No installs, no migrations — drag a file in your browser and the analysis is running.', chips: ['XER', 'MPP', 'MSP XML', '0 setup'], spots: [ { x: 33.5, y: 56, w: 18, h: 18, kind: 'ring', label: 'Current schedule', side: 'left' }, { x: 60.5, y: 56, w: 18, h: 18, kind: 'ring', label: 'Baseline', side: 'right' }, ], duration: 6500, }, { id: 'gantt', src: 'assets/demo-02-gantt-critical.png', eyebrow: '02 · GANTT', title: 'Trace the critical path. End to end.', caption: 'Filter to the critical path, scrub the timeline, and follow finish-to-start logic across thousands of activities. Baseline overlay on every bar.', chips: ['Critical filter', 'Baseline overlay', 'Logic ties', 'Total float'], spots: [ { x: 8, y: 14, w: 14, h: 9, kind: 'pill', label: 'Critical only', side: 'right' }, { x: 76, y: 38, w: 22, h: 56, kind: 'frame', label: 'Critical path', side: 'left' }, ], duration: 6500, }, { id: 'wbs', src: 'assets/demo-03-wbs-grouping.png', eyebrow: '03 · STRUCTURE', title: 'Group by WBS. Open any branch.', caption: 'Switch instantly between flat list, WBS hierarchy, and custom groupings. Every level rolls up dates, float, and progress.', chips: ['WBS tree', 'Roll-up dates', 'Custom groups'], spots: [ { x: 21, y: 8, w: 9, h: 8, kind: 'pill', label: 'WBS view', side: 'right' }, { x: 4, y: 22, w: 26, h: 30, kind: 'frame', label: 'Hierarchy', side: 'right' }, ], duration: 6000, }, { id: 'relationships', src: 'assets/demo-04-relationships.png', eyebrow: '04 · LOGIC', title: 'Inspect every predecessor and successor.', caption: 'Click any activity to see its inbound and outbound relationships, lag, and relationship type — no diving through nested screens.', chips: ['Predecessors', 'Successors', 'FS / SS / FF', 'Lag visibility'], spots: [ { x: 4, y: 65, w: 30, h: 8, kind: 'pill', label: 'Selected activity', side: 'right' }, { x: 1, y: 75, w: 98, h: 22, kind: 'frame', label: 'Relationships drawer', side: 'top' }, ], duration: 6500, }, { id: 'logic', src: 'assets/demo-05-logic-modal.png', eyebrow: '05 · DCMA HEALTH', title: 'Find broken logic. Fix it before the client does.', caption: 'Every DCMA check expands into the exact activities that failed, with severity and a recommended remediation path.', chips: ['DCMA #1–14', 'Flagged activities', 'Severity', 'Remediation'], spots: [ { x: 14, y: 22, w: 72, h: 50, kind: 'frame', label: 'Logic completeness drill-in', side: 'bottom' }, ], duration: 6500, }, { id: 'thresholds', src: 'assets/demo-06-check-settings.png', eyebrow: '06 · TUNING', title: 'Calibrate every threshold to your contract.', caption: 'Tighten or loosen any check to match your client\u2019s spec. The grade and score recalculate the moment you nudge the slider.', chips: ['Per-check thresholds', 'Live recalc', 'Save as preset'], spots: [ { x: 26, y: 6, w: 35, h: 50, kind: 'frame', label: 'Check settings', side: 'bottom' }, { x: 32, y: 32, w: 25, h: 8, kind: 'pill', label: 'Live threshold', side: 'right' }, ], duration: 6500, }, { id: 'health', src: 'assets/demo-07-health-dashboard.png', eyebrow: '07 · OVERVIEW', title: 'Schedule health, at a glance.', caption: 'One dashboard shows your overall grade, all 14 DCMA checks, and a radar profile of where your schedule is strongest — and weakest.', chips: ['Grade A–F', '14 checks', 'Radar profile'], spots: [ { x: 8, y: 16, w: 17, h: 30, kind: 'ring', label: 'Overall grade', side: 'right' }, { x: 8, y: 47, w: 17, h: 32, kind: 'frame', label: 'Health profile', side: 'right' }, ], duration: 6500, }, { id: 'report', src: 'assets/demo-08-report-wizard.png', eyebrow: '08 · DELIVER', title: 'Client-ready report. One click.', caption: 'Pick the sections, the page size, and the brand. SKOPIA composes a polished PDF — cover, schedule, critical path, and analytics.', chips: ['Branded cover', 'A4 / A3 / Letter', 'Critical path trace', 'Analytics'], spots: [ { x: 34, y: 5, w: 36, h: 90, kind: 'frame', label: 'Report wizard', side: 'left' }, ], duration: 7000, }, ]; const TourHotSpot = ({ spot, index }) => { const labelPos = (() => { const side = spot.side || 'right'; const off = '110%'; if (side === 'right') return { left: off, top: '50%', transform: 'translateY(-50%)' }; if (side === 'left') return { right: off, top: '50%', transform: 'translateY(-50%)' }; if (side === 'top') return { left: '50%', bottom: '105%', transform: 'translateX(-50%)' }; return { left: '50%', top: '105%', transform: 'translateX(-50%)' }; })(); const baseStyle = { position: 'absolute', left: spot.x + '%', top: spot.y + '%', width: spot.w + '%', height: spot.h + '%', pointerEvents: 'none', }; return ( <>
{spot.label}
); }; const TourRail = ({ active, onPick }) => (
{TOUR_CHAPTERS.map((c, i) => { const isActive = i === active; return ( ); })}
); const Tour = () => { const [idx, setIdx] = useState(0); const [playing, setPlaying] = useState(true); const [progress, setProgress] = useState(0); const [inView, setInView] = useState(false); const sectionRef = useRef(null); // Pause when off-screen so it doesn't compete with the hero useEffect(() => { const el = sectionRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => setInView(e.isIntersecting), { threshold: 0.25 }); io.observe(el); return () => io.disconnect(); }, []); const chapter = TOUR_CHAPTERS[idx]; const shouldPlay = playing && inView; useEffect(() => { if (!shouldPlay) return; const dur = chapter.duration; const start = performance.now() - progress * dur; let raf; const tick = (now) => { const p = Math.min(1, (now - start) / dur); setProgress(p); if (p >= 1) { setIdx((i) => (i + 1) % TOUR_CHAPTERS.length); setProgress(0); } else { raf = requestAnimationFrame(tick); } }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [idx, shouldPlay]); // eslint-disable-line const goTo = (i) => { setIdx(((i % TOUR_CHAPTERS.length) + TOUR_CHAPTERS.length) % TOUR_CHAPTERS.length); setProgress(0); }; const next = () => goTo(idx + 1); const prev = () => goTo(idx - 1); const controlBtn = { width: 36, height: 36, borderRadius: '50%', border: '1px solid #E2E6F0', background: '#fff', cursor: 'pointer', color: '#1A1A2E', display: 'flex', alignItems: 'center', justifyContent: 'center', }; return (
From raw XER / MSP XML to client-ready PDF.} lede="An animated tour through SKOPIA Lens on a real schedule. Auto-plays — or click any chapter to jump." />
{/* Rail */} {/* Stage */}
{chapter.eyebrow}

{chapter.title}

{chapter.caption}

{chapter.chips.map((c) => ( {c} ))}
{/* Browser chrome */}
skopia.com.au / lens / residential-house-build ·{' '} {chapter.id}
{String(idx + 1).padStart(2, '0')} / {String(TOUR_CHAPTERS.length).padStart(2, '0')}
{/* Screenshot stack */}
{TOUR_CHAPTERS.map((c, i) => (
{c.title} {i === idx && c.spots.map((s, j) => ( ))}
))}
{/* Controls */}
{TOUR_CHAPTERS.map((_, i) => { const fill = i < idx ? 1 : i === idx ? progress : 0; return ( ); })}
{String(idx + 1).padStart(2, '0')} / {String(TOUR_CHAPTERS.length).padStart(2, '0')}
); }; Object.assign(window, { Tour });