// landing-sections.jsx — page sections (Hero, Strategy, Logos, Glance, Dives, Outcomes, Testimonials, CTA, Footer) // Note: useEffect/useRef/useState are already destructured from React in landing-mockups.jsx, // which loads first. Re-declaring with `const` here would throw "Identifier already declared". /* ------------------------------------------------------------------ i18n bridge — read window.Wisbid.i18n; force re-render on change. t(key) returns the translation or falls back to EN, then the key. ------------------------------------------------------------------ */ const useT = () => { const i18n = typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n || null; const [, force] = useState(0); useEffect(() => { if (!i18n) return; const unsub = i18n.subscribe(() => force((v) => v + 1)); return unsub; }, [i18n]); return (key, fallback) => i18n ? i18n.t(key, fallback) : (fallback || key); }; const useLocale = () => { const i18n = typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n || null; const [code, setCode] = useState(i18n ? i18n.get() : "en"); useEffect(() => { if (!i18n) return; const unsub = i18n.subscribe((c) => setCode(c)); return unsub; }, [i18n]); const set = (c) => {if (i18n) i18n.set(c);}; return [code, set]; }; window.useWisbidT = useT; /* ------------------------------------------------------------------ Hooks ------------------------------------------------------------------ */ // Scroll reveal — adds .is-in when entering viewport function useReveal() { useEffect(() => { if (typeof window === "undefined") return; const els = document.querySelectorAll(".lp-reveal"); if (!els.length) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // Animated count-up triggered when element enters viewport function useCountUp(ref, target, { duration = 1600, suffix = "", decimals = 0 } = {}) { useEffect(() => { if (!ref.current) return; const el = ref.current; let raf = 0;let started = false; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const render = (v) => { el.textContent = v.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix; }; if (reduced) {render(target);return;} const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started) { started = true; const start = performance.now(); const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); render(target * eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); io.unobserve(el); } }); }, { threshold: 0.4 }); io.observe(el); return () => {cancelAnimationFrame(raf);io.disconnect();}; }, [ref, target, duration, suffix, decimals]); } // Parallax — translate Y by scroll delta * factor when in view function useParallax(ref, factor = 0.08) { useEffect(() => { if (!ref.current) return; const el = ref.current; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) return; let ticking = false; const update = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight; const center = r.top + r.height / 2; const delta = (vh / 2 - center) * factor; el.style.transform = `translate3d(0, ${delta.toFixed(1)}px, 0)`; ticking = false; }; const onScroll = () => { if (!ticking) {ticking = true;requestAnimationFrame(update);} }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, [ref, factor]); } /* ------------------------------------------------------------------ Navigation ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Demo drawer — slides in from the right on "Book a demo" ------------------------------------------------------------------ */ const openDemo = () => window.dispatchEvent(new CustomEvent("wisbid:demo")); const DemoDrawer = () => { const t = useT(); const [open, setOpen] = useState(false); useEffect(() => { const onOpen = () => setOpen(true); window.addEventListener("wisbid:demo", onOpen); return () => window.removeEventListener("wisbid:demo", onOpen); }, []); useEffect(() => { const onKey = (e) => {if (e.key === "Escape") setOpen(false);}; if (open) { document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; } return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [open]); const channels = [ { k: "email", icon: "inbox", label: t("demo.emailLabel"), value: "pohwp@wisbid.com", href: "mailto:pohwp@wisbid.com?subject=Wisbid%20demo%20request" }, { k: "phone", icon: "users", label: t("demo.callLabel"), value: "+65 9475 5548", href: "tel:+6594755548" }]; return (
setOpen(false)} />
); }; /* ------------------------------------------------------------------ Navigation ------------------------------------------------------------------ */ const Navigation = () => { const t = useT(); const [locale, setLocale] = useLocale(); const [scrolled, setScrolled] = useState(false); const [mega, setMega] = useState(null); const [mobile, setMobile] = useState(false); const [langOpen, setLangOpen] = useState(false); const langRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 16); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (!langOpen) return; const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [langOpen]); const LANGS = [ { code: "en", short: "EN", label: "English", native: "English", flag: "assets/flags/en.png" }, { code: "zh", short: "ZH", label: "Chinese", native: "中文", flag: "assets/flags/zh.png" }, { code: "ta", short: "TA", label: "Tamil", native: "தமிழ்", flag: "assets/flags/ta.png" }, { code: "tl", short: "TL", label: "Tagalog", native: "Tagalog", flag: "assets/flags/tl.svg" }, { code: "th", short: "TH", label: "Thai", native: "ไทย", flag: "assets/flags/th.png" }, { code: "ms", short: "MS", label: "Melayu", native: "Melayu", flag: "assets/flags/ms.webp" }]; const current = LANGS.find((l) => l.code === locale) || LANGS[0]; const navItems = [ { key: "product", label: t("nav.product"), mega: true }, { key: "strategy", label: t("nav.theLoop") }, { key: "integrations", label: t("nav.integrations") }, { key: "features", label: t("nav.features") }, { key: "compare", label: t("nav.compare") }, { key: "pricing", label: t("nav.pricing") }]; const [activeNav, setActiveNav] = useState("strategy"); useEffect(() => { const ids = navItems.filter((n) => !n.mega).map((n) => n.key); const els = ids.map((id) => document.getElementById(id)).filter(Boolean); if (!els.length) return; const io = new IntersectionObserver( (entries) => { const visible = entries. filter((e) => e.isIntersecting). sort((a, b) => b.intersectionRatio - a.intersectionRatio); if (visible.length) setActiveNav(visible[0].target.id); }, { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.1, 0.25, 0.5] } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); const handleNavClick = (e, key) => { e.preventDefault(); const el = document.getElementById(key); if (!el) return; const navHeight = 68; const rect = el.getBoundingClientRect(); const sectionTop = rect.top + window.scrollY; let top; if (key === "integrations") { // Integrations is a 220vh scroll-pinned section: the logos only become // visible mid-progress. Aim for ~55% through so the row is centred. const vh = window.innerHeight; const total = Math.max(0, rect.height - vh); top = sectionTop + total * 0.55 - navHeight - 8; } else { top = sectionTop - navHeight - 8; } window.scrollTo({ top, behavior: "smooth" }); setMega(null); setMobile(false); }; return ( ); }; /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ const Hero = () => { const t = useT(); const mockRef = useRef(null); useParallax(mockRef, 0.04); return (
{t("hero.eyebrow")}

{t("hero.headline1")} {t("hero.headlineEm")}{t("hero.headlineEnd")}

{t("hero.lede")}

{t("hero.scrollCue")}
); }; /* ------------------------------------------------------------------ Strategy + AI execution — 4 intelligence cards ------------------------------------------------------------------ */ const Strategy = () => { const t = useT(); const cards = [ { kind: "intake", label: t("strategy.card1.label", "Intake & Triage"), title: t("strategy.card1.title", "Every channel becomes a real work item"), desc: t("strategy.card1.desc", "Email, WhatsApp, voice, walk-in — Wisbid turns messy intake into a tracked request with the right asset, vendor and SLA already attached.") }, { kind: "dispatch", label: t("strategy.card2.label", "Dispatch"), title: t("strategy.card2.title", "Right team, right context, first time"), desc: t("strategy.card2.desc", "WisAI matches each request to the technician, vendor or DLP partner who has handled it before. Routes, ETAs and prior work travel with the dispatch.") }, { kind: "evidence", label: t("strategy.card3.label", "Evidence"), title: t("strategy.card3.title", "Close with proof, not promises"), desc: t("strategy.card3.desc", "Geo-tagged photos, checklist steps, meter readings and vendor signatures attach as you work — every closure carries its audit trail.") }, { kind: "audit", label: t("strategy.card4.label", "Audit"), title: t("strategy.card4.title", "Audit-ready, every quarter"), desc: t("strategy.card4.desc", "Inspection packs assemble themselves: SOPs, evidence, vendor sign-off, approver notes. Export to PDF when BCA, MCST chair or insurer asks.") }]; return (
01{t("loop.kicker", "The Wisbid loop")}

{t("loop.lead", "One platform from request to closure — with WisAI doing the work in between.")}

{t("loop.sub", "Four intelligence layers, one operational loop. Wisbid replaces the spreadsheets, group chats and PDF email chains FM teams use today.")}

{cards.map((c, i) => )}
); }; /* ------------------------------------------------------------------ Customer logo strip ------------------------------------------------------------------ */ const Logos = () => { const t = useT(); // Fictional but plausible Singapore facilities customer placeholders. const customers = ["Marina One MCST", "Northbridge Estates", "Sentosa Quay", "Pacific Estate", "Keppel Bay MCST", "Orchard Towers", "Robinson 88", "Bedok Reservoir TC", "Punggol Coast", "Kent Ridge FM", "Bukit Batok MCST", "Tampines Edge"]; return (
{t("logos.heading", "The best facilities teams in Singapore run on Wisbid")}
{customers.map((c) =>
{c.split(" ").slice(0, 2).join(" ")}
)}
); }; /* ------------------------------------------------------------------ WisAiScenarioShowcase — WisAI Copilot scenario animation ------------------------------------------------------------------ */ const useWisAiMotionInView = typeof window !== "undefined" && window.Motion && window.Motion.useInView ? window.Motion.useInView : null; const useWisAiMotionReduced = typeof window !== "undefined" && window.Motion && window.Motion.useReducedMotion ? window.Motion.useReducedMotion : null; const WISAI_EASE = typeof _EASE !== "undefined" ? _EASE : [0.22, 1, 0.36, 1]; const panelVariants = { hidden: { opacity: 0, y: 14, scale: 0.99 }, show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.42, ease: WISAI_EASE } }, exit: { opacity: 0, y: -10, scale: 0.99, transition: { duration: 0.24, ease: WISAI_EASE } } }; const staggerContainer = { hidden: {}, show: { transition: { staggerChildren: 0.1, delayChildren: 0.08 } } }; const staggerItem = { hidden: { opacity: 0, y: 10 }, show: { opacity: 1, y: 0, transition: { duration: 0.34, ease: WISAI_EASE } } }; const cardReveal = { hidden: { opacity: 0, y: 16, scale: 0.98 }, show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.42, ease: WISAI_EASE } } }; const sourceScan = { hidden: { opacity: 0, y: 12, scale: 0.98 }, show: (i = 0) => ({ opacity: 1, y: 0, scale: 1, transition: { delay: i * 0.15, duration: 0.38, ease: WISAI_EASE } }) }; const SCENARIOS = [ { key: "blocked", tabLabel: "Why is this blocked?", tabSubcopy: "Email + work log + WO chat", prompt: "Why has WO-2026-SM-0148 been blocked for so long? Check the Gmail vendor email thread, the work order timeline, technician work logs, and internal work-order chat. Tell me the blocker and draft the next update.", headline: "Blocked on site access confirmation — not technician availability.", body: "The vendor is ready to attend, and the technician has noted that parts are available. The work order remains on hold because the Level 2 service-corridor night access slot and isolation permit have not been confirmed.", actions: ["Copy requester update", "Draft vendor reply", "Add internal note draft", "Open work order"], progress: [ "Reading recent Gmail messages", "Retrieving work order timeline", "Checking technician work logs", "Checking internal work-order chat" ], checked: [ "Gmail", "Work orders", "Technician work logs", "Internal work-order chat" ], sources: [ ["Gmail vendor thread", "Vendor requested night access + isolation permit", "gmail"], ["Work order timeline", "On Hold · Waiting for Site Access", "clock"], ["Technician work log", "Parts ready · awaiting mall access", "file"], ["Internal WO chat", "Site team asked to confirm Level 2 access", "users"] ], artifactTitle: "Blocker summary", draft: { title: "Draft requester update", text: "Hi, the repair is currently waiting for the confirmed night access slot for the Level 2 service corridor. The vendor has confirmed readiness to attend once access is approved. We will update you once the access window is confirmed." } }, { key: "breaking", tabLabel: "What keeps breaking?", tabSubcopy: "Site trends + hotspots", prompt: "What are the most common issues across Sunshine Mall in the past 3 months? Show the top issue types, affected locations, recurring assets, and which ones are driving repeat work orders.", headline: "Air-conditioning comfort complaints are the top recurring issue at Sunshine Mall.", body: "The highest volume comes from aircon not cold / comfort complaints, followed by water leaks and toilet plumbing issues. Level 2 East Atrium and B1 Food Court are the main hotspots, with FCU-L2-17 showing repeated work-order activity.", actions: ["Open in Reports & Analytics", "Show underlying work orders", "Download CSV", "Create ops brief draft"], progress: [ "Reading Sunshine Mall requests", "Retrieving work orders from the past 3 months", "Grouping problem codes", "Checking recurring assets" ], checked: [ "Service requests", "Work orders", "Problem codes", "Assets & locations" ], bars: [ ["Aircon not cold", 42], ["Water leak", 31], ["Toilet blockage", 24], ["Lighting fault", 18], ["Escalator/lift area defect", 11] ], hotspots: ["Level 2 East Atrium", "B1 Food Court", "Level 3 Toilets"], repeatAssets: ["FCU-L2-17", "AHU-B1-03", "Sump Pump-B1-02"] }, { key: "dlp", tabLabel: "DLP / warranty check", tabSubcopy: "Asset documents + citations", prompt: "For WO-2026-SM-0148 on FCU-L2-17, check the O&M manual and DLP/warranty documents. Is this likely DLP/warranty relevant, what does the manual say to check, and what evidence should the technician capture before closure?", headline: "This appears DLP/warranty-relevant, but should be reviewed before formal claim submission.", body: "The DLP schedule indicates FCU-L2-17 is still within the defects liability period. The O&M manual points first to condensate tray condition, drain blockage, float switch operation, and chilled-water line insulation checks. Before closure, the technician should capture clear evidence so the FM team can decide whether to raise a DLP/warranty claim.", actions: ["Create checklist draft", "Open asset documents", "Attach citation pack", "Open work order"], progress: [ "Retrieving permitted asset documents", "Reading O&M manual", "Checking DLP / warranty schedule", "Reviewing commissioning report" ], checked: [ "Work orders", "O&M manual", "DLP / warranty schedule", "Commissioning report" ], docs: [ ["O&M Manual", "FCU Series O&M Manual", "Condensate drainage inspection", "Page 42", "p.42"], ["DLP / Warranty Schedule", "Sunshine Mall Handover Pack", "Mechanical equipment DLP", "Page 7", "p.7"], ["Commissioning Report", "FCU-L2-17 commissioning checklist", "Page 3", "Page 3", "p.3"] ], checklist: [ "Affected ceiling / stain area", "FCU-L2-17 nameplate", "Condensate tray condition", "Drain-line test result", "Float switch test result", "Before / after photos", "Completion note with likely cause" ] } ]; function useWisAiReducedMotionFallback() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); return reduced; } function useWisAiInViewFallback(ref) { const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { threshold: 0.28, rootMargin: "0px 0px -10% 0px" }); io.observe(ref.current); return () => io.disconnect(); }, [ref]); return inView; } const WisAiMotionNode = (props) => { const as = props.as || "div"; const enabled = props.enabled !== false; const className = props.className; const children = props.children; const style = props.style; const variants = props.variants; const initial = props.initial; const animate = props.animate; const exit = props.exit; const transition = props.transition; const custom = props.custom; const domProps = {}; const localKeys = [ "as", "enabled", "className", "children", "style", "variants", "initial", "animate", "exit", "transition", "custom" ]; Object.keys(props).forEach((key) => { if (!localKeys.includes(key)) domProps[key] = props[key]; }); if (enabled && _motion) { const MotionTag = _motion[as] || _motion.div; return React.createElement( MotionTag, Object.assign({}, domProps, { className, style, variants, initial, animate, exit, transition, custom }), children ); } const Tag = as; return React.createElement(Tag, Object.assign({}, domProps, { className, style }), children); }; const ScenarioTabs = ({ scenarios, activeKey, onSelect, tabRefs }) => { const onKeyDown = (event, index) => { const last = scenarios.length - 1; let nextIndex = index; if (event.key === "ArrowRight") nextIndex = index === last ? 0 : index + 1; if (event.key === "ArrowLeft") nextIndex = index === 0 ? last : index - 1; if (event.key === "Home") nextIndex = 0; if (event.key === "End") nextIndex = last; if (nextIndex !== index) { event.preventDefault(); onSelect(nextIndex, true); window.requestAnimationFrame(() => tabRefs.current[nextIndex] && tabRefs.current[nextIndex].focus()); } }; return (
{scenarios.map((scenario, index) => )}
); }; const AnimatedSourceCard = ({ source, index, motionEnabled }) => (
{source[2] === "gmail" ? : }
{source[0]} {source[1]}
); const MarkdownRule = () =>