// Northbound Automations — landing page // Single React artifact. British English. No em dashes. const { useState, useEffect, useRef } = React; const { motion, AnimatePresence, useScroll, useTransform } = window.framerMotion || {}; // ---------- Inline icon components (lucide via createIcons not ideal in React; use SVG) ---------- const Icon = ({ path, className = "w-4 h-4", stroke = 1.6 }) => ; const ArrowUpRight = (p) => } />; const Play = (p) => } />; const Zap = (p) => } />; const Palette = (p) => } />; const BarChart3 = (p) => } />; const Shield = (p) => } />; const Settings = (p) => } />; const LineChart = (p) => } />; const Bot = (p) => } />; const Workflow = (p) => } />; const Wrench = (p) => } />; const Database = (p) => } />; const Quote = (p) => } />; const Compass = (p) => } />; const Menu = (p) => } />; const X = (p) => } />; // ------------------ NAV ------------------ function Nav() { const [open, setOpen] = useState(false); const links = ["Home", "Services", "Work", "Process", "About", "Contact"]; return (
{/* Logo */} Northbound {/* Centre pill */} {/* Right CTA */}
Book a call
{open &&
}
); } // ------------------ HERO ------------------ function HeroVideo({ src = "assets/hero.mp4", objectPosition = "center" }) { const aRef = React.useRef(null); const bRef = React.useRef(null); const [active, setActive] = React.useState("a"); // which video is currently visible const fadingRef = React.useRef(false); const FADE = 1.2; // seconds of crossfade React.useEffect(() => { const a = aRef.current; const b = bRef.current; if (!a || !b) return; // Start A, pre-seek B to 0 and pause until needed a.play().catch(() => {}); b.pause(); b.currentTime = 0; const onTime = (e) => { const cur = e.target; const dur = cur.duration; if (!dur || isNaN(dur) || fadingRef.current) return; // Trigger crossfade when FADE seconds remain if (dur - cur.currentTime <= FADE) { fadingRef.current = true; const other = cur === a ? b : a; try { other.currentTime = 0; other.play().catch(() => {}); } catch (err) {} setActive(cur === a ? "b" : "a"); // Reset the finishing video once faded out, ready for its next turn setTimeout(() => { try { cur.pause(); cur.currentTime = 0; } catch (err) {} fadingRef.current = false; }, FADE * 1000 + 40); } }; a.addEventListener("timeupdate", onTime); b.addEventListener("timeupdate", onTime); return () => { a.removeEventListener("timeupdate", onTime); b.removeEventListener("timeupdate", onTime); }; }, []); const common = "absolute inset-0 w-full h-full object-cover transition-opacity duration-[1200ms] ease-linear"; return ( <>