/* global React, SHexLogo, Brandmark */ const { useState, useEffect, useRef } = React; // ============================================================ // useIsMobile hook // ============================================================ function useIsMobile() { const [isMobile, setIsMobile] = useState( () => typeof window !== "undefined" && window.matchMedia("(max-width: 900px)").matches ); useEffect(() => { const mq = window.matchMedia("(max-width: 900px)"); const handler = (e) => setIsMobile(e.matches); mq.addEventListener("change", handler); return () => mq.removeEventListener("change", handler); }, []); return isMobile; } window.useIsMobile = useIsMobile; // ============================================================ // useReveal — IntersectionObserver fade-up // ============================================================ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver( (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")), { threshold: 0.12, rootMargin: "0px 0px -8% 0px" } ); obs.observe(el); return () => obs.disconnect(); }, []); return ref; } window.useReveal = useReveal; // Wrapper for staggered reveals const Reveal = ({ delay = 0, children, as: Tag = "div", className = "", style = {} }) => { const ref = useReveal(); return ( {children} ); }; window.Reveal = Reveal; // ============================================================ // Icon set — minimal inline SVGs // ============================================================ const Icon = { arrow: (p) => , ext: (p) => , check: (p) => , plus: (p) => , globe: (p) => , star: (p) => , bot: (p) => , trend: (p) => , cpu: (p) => , rocket:(p) => , brief: (p) => , shield:(p) => , doc: (p) => , layers:(p) => , bars: (p) => , x: (p) => , in: (p) => , ig: (p) => , whatsapp:(p) => , }; window.Icon = Icon; // ============================================================ // Site Header // ============================================================ function SiteHeader({ current, theme = "group", subnav = null }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const isMobile = useIsMobile(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); const brandVariant = theme === "consult" ? "consult" : theme === "capital" ? "capital" : "group"; // route Contact link to the matching division page const contactHref = theme === "consult" ? "/consulting/contact" : theme === "capital" ? "/capital/contact" : "/contact"; const links = [ { href: "#/", label: "Home", id: "home" }, { href: "#/consulting", label: "Sinux Consulting", id: "consulting" }, { href: "#/capital", label: "Sinux Capital", id: "capital" }, { href: contactHref, label: "Contact", id: "contact" }, ]; return (
{theme === "consult" ? "SINUX CONSULTING" : theme === "capital" ? "SINUX CAPITAL" : "SINUX GROUP"} {!isMobile && ( )}
Get in Touch {isMobile && ( )}
{subnav} {open && ( setOpen(false)} links={links} current={current} /> )} ); } function MobileDrawer({ onClose, links, current }) { // portal alternative — render at top-level via fixed positioning is OK since header doesn't apply backdrop-filter when drawer is rendered as sibling outside header. // To be safe, render to document.body via ReactDOM.createPortal: return ReactDOM.createPortal(
{links.map((l) => ( {l.label} ))} Get in Touch
, document.body ); } window.SiteHeader = SiteHeader; // ============================================================ // Sub Nav // ============================================================ function SubNav({ items = [], active }) { return (
{items.map((it) => ( {it.label} ))}
); } window.SubNav = SubNav; // ============================================================ // Hero Background — orbs + hex grid + dot grid // ============================================================ function HeroBg({ theme = "group", showMesh = true }) { // hex pattern as inline SVG return (
{showMesh && ( {/* orbs */}
)} {/* hex grid */}
{/* corner watermark hex */}
); } window.HeroBg = HeroBg; // ============================================================ // Animated Stat Counter // ============================================================ function CountUp({ to, label, suffix = "", duration = 1500 }) { const [val, setVal] = useState(0); const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; let raf; const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(to * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); obs.disconnect(); } }, { threshold: 0.4 }); obs.observe(el); return () => { obs.disconnect(); if (raf) cancelAnimationFrame(raf); }; }, [to, duration]); return (
{val}{suffix}
{label}
); } window.CountUp = CountUp; // ============================================================ // Footer // ============================================================ function Footer({ variant = "group" }) { const isGroup = variant === "group"; const isConsult = variant === "consult"; const tagline = isGroup ? "Building the future through scalable ventures." : isConsult ? "Digital Growth + Technology Consulting. Powered by AI. Trusted Worldwide." : "Strategic investments and ventures for long-term value."; const contactHref = isConsult ? "/consulting/contact" : (variant === "capital" ? "/capital/contact" : "/contact"); const email = isConsult ? "info@sinuxconsulting.com" : (variant === "capital" ? "info@sinuxcapital.com" : "info@sinuxgroup.com"); const websiteName = isGroup ? "Sinux Group" : isConsult ? "Sinux Consulting" : "Sinux Capital"; return ( ); } window.Footer = Footer; // ============================================================ // Contact Section (shared) — wired to /api/send-email (Resend) // theme prop maps to a routing variant so the inquiry lands in the right inbox. // ============================================================ function ContactSection({ theme = "group" }) { const variant = theme === "consult" ? "consult" : theme === "capital" ? "capital" : "group"; const fallbackEmail = variant === "consult" ? "info@sinuxconsulting.com" : variant === "capital" ? "info@sinuxcapital.com" : "info@sinuxgroup.com"; const [status, setStatus] = useState("idle"); const [errorMsg, setErrorMsg] = useState(""); async function handleSubmit(e) { e.preventDefault(); if (status === "sending") return; setStatus("sending"); setErrorMsg(""); const form = e.target; const fd = new FormData(form); const payload = { variant }; fd.forEach((val, key) => { payload[key] = val; }); try { const r = await fetch("/api/send-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); if (!r.ok) { const data = await r.json().catch(() => ({})); throw new Error(data.error || `Server returned ${r.status}`); } setStatus("sent"); form.reset(); } catch (err) { setStatus("error"); setErrorMsg( err.message?.includes("Failed to fetch") ? "Couldn't reach the server. The form needs to be deployed to Vercel first." : err.message || "Something went wrong. Please email us directly." ); } } return (
Contact

Let's start a conversation.

Tell us about your project, ambition, or inquiry. We respond within one business day.

EMAIL{fallbackEmail}
MY+60 12-618 7256
US+1 (229) 374-6725
HRSMon–Fri 10:00am – 9:00pm
{status === "sent" ? (

Message received.

Thank you — we'll be in touch within one business day. For urgent matters, email us directly at{" "} {fallbackEmail}.

) : (