import { useEffect, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { ArrowLeft, ArrowRight, ArrowUpRight, Check, ChevronDown, Menu, Search, X } from 'lucide-react'; import './styles.css'; import './carousel.css'; import './navigation.css'; import './branding.css'; const navigationGroups = [ { label: '解决方案', description: '覆盖安全、交易、市场、产品、资金与自动化的基础设施能力。', items: [ { label: '数字资产安全与金融犯罪合规', detail: '合约安全 · AML/KYT · 合规体系' }, { label: '交易平台与经纪商基础设施', detail: 'MetaTrader · 流动性 · 风险与运营' }, { label: '交易所与数字市场基础设施', detail: '交易场所 · 撮合 · 链上金融设施' }, { label: '衍生品与结构化产品工程', detail: '产品设计 · 定价 · 风险与生命周期' }, { label: '资本、风险与资金管理技术', detail: '资本规划 · Treasury · 估值与分析' }, { label: '企业工作流自动化与 AI 运营', detail: '合规 · 交易运营 · 系统集成与 Agent' }, ], }, { label: '行业方案', description: '从行业运营模型出发，组合市场、风险、合规与自动化能力。', items: [ { label: 'FX 与 CFD 经纪商', detail: 'MetaTrader · Bridge · LP · PAMM/MAM' }, { label: '数字资产与 Web3', detail: '钱包 · 托管 · AML · 智能合约与交易所' }, { label: '交易所与交易场所', detail: '撮合 · 市场数据 · 清算 · 做市' }, { label: '贵金属与商品', detail: '黄金 CFD · 期货 · 期权与风险管理' }, { label: '证券与财富管理', detail: '多资产交易 · OMS · 客户门户' }, { label: '银行与支付机构', detail: '稳定币 · 链上支付 · Treasury 与对账' }, { label: '基金与资管机构', detail: '估值 · 组合分析 · 交易连接与报告' }, { label: '金融科技企业', detail: 'API · 钱包 · 支付 · AI Agent 与数据平台' }, ], }, { label: '产品', description: '由项目能力沉淀为可部署、可集成、可持续运营的标准产品。', items: [ { label: 'Broker Risk Console', detail: '经纪商风险与敞口控制' }, { label: 'AML Operations Platform', detail: 'AML 案件与运营管理' }, { label: 'LP Reconciliation System', detail: '流动性与账务自动对账' }, { label: 'Derivatives Product Factory', detail: '衍生品设计、定价与生命周期' }, { label: 'Prediction Market Engine', detail: '预测市场核心能力' }, { label: 'Trading Operations Automation Hub', detail: '交易运营自动化中心' }, ], }, { label: '服务模式', description: '从评估与咨询开始，延展到实施、软件、托管与长期支持。', items: [ { label: 'Assessment', detail: '安全、架构与风险评估' }, { label: 'Advisory', detail: '产品、交易所、风控与 AML 咨询' }, { label: 'Implementation', detail: '平台、Bridge、合约与工作流交付' }, { label: 'Software License', detail: '风控、AML、对账与产品系统' }, { label: 'Usage-Based', detail: 'KYT、API、交易、钱包与市场数据' }, { label: 'Managed Service', detail: 'MetaTrader、AML、NOC 与 Dealing 运营' }, { label: 'Support & Maintenance', detail: '维护、升级与技术支持' }, ], }, ]; const tickerWords = ['Data', 'Systems', 'Enterprises', 'Markets', 'Networks', 'Services', 'Platforms']; const partners = ['NOVA', 'ORBIS', 'KINTA', 'MERIDIAN', 'ION', 'AURORA', 'MOSAIC', 'VANTA']; const announcements = [ { type: 'ANNOUNCEMENT', title: 'WISE TECH 推出跨域实时验证框架', art: 'announce-lime' }, { type: 'RESEARCH', title: '让高价值数据在复杂业务中持续可用', art: 'announce-blue' }, { type: 'SYSTEMS', title: '以确定性连接关键业务流程', art: 'announce-black' }, { type: 'REPORT', title: '企业级系统协作的下一步', art: 'announce-paper' }, ]; const useCases = [ { label: '交易与经纪基础设施', visual: 'case-blue', short: 'WISE\n+TRADING\n+INFRA', title: '为经纪商和交易团队构建稳定、可控的交易底座', points: ['MetaTrader 4 / 5 部署、迁移与运营治理', 'Bridge、流动性接入与报价分发体系', '订单路由、交易复制与 PAMM / MAM 架构', 'Broker Risk Console 敞口、限额与风险控制', '交易运营、Dealing Desk 与 NOC 托管支持'], }, { label: '数字资产与合规', visual: 'case-slate', short: 'WISE\n+DIGITAL\n+ASSETS', title: '把资产安全、合规控制和链上服务放入同一运营体系', points: ['钱包、托管与多签权限体系设计', 'AML / KYT 规则、案件和运营工作台', '交易所、OTC 与数字市场的接入架构', '智能合约安全评估与上线保障', '链上支付、稳定币与资金流可审计连接'], }, { label: '交易所与市场基础设施', visual: 'case-grid', short: 'WISE\n+MARKET\n+SYSTEMS', title: '让撮合、数据、清算和做市在可扩展的市场架构中协同', points: ['撮合引擎、订单簿和市场数据服务', '现货、衍生品与多资产交易场所设计', '清算、结算与对账流程自动化', '做市、流动性管理与风控接口', '交易监控、异常检测与运营报表'], }, { label: '风险、资金与产品工程', visual: 'case-blue', short: 'WISE\n+RISK\n+CAPITAL', title: '将风险判断、资金控制和产品生命周期转化为可执行的规则', points: ['资本规划、资金头寸与 Treasury 系统', 'LP Reconciliation System 流动性与账务对账', '衍生品设计、定价与风险参数治理', '保证金、限额和实时风险分析', '估值、组合分析与管理层决策报表'], }, { label: '自动化运营与 AI', visual: 'case-slate', short: 'WISE\n+AUTOMATION\n+OPS', title: '让关键运营流程以可解释、可审计的方式持续自动运行', points: ['交易、合规与财务工作流自动化', '跨系统 API 集成与事件编排', 'AI Agent 辅助案件、运营与客户服务', '规则执行、审批留痕与异常升级机制', '支持、维护、监控与持续优化服务'], }, ]; const stories = [ { tag: 'VIDEO', title: '从业务边界到验证网络', image: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1200&q=85' }, { tag: 'FIELD NOTE', title: '让自动执行具备可解释性', image: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1200&q=85' }, { tag: 'SYSTEM STUDY', title: '连接层如何服务规模化协作', image: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1200&q=85' }, { tag: 'VIDEO', title: '让资金、风险与运营使用同一套证据', image: 'https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1200&q=85' }, { tag: 'ARCHITECTURE', title: '从交易数据到可审计的执行路径', image: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=1200&q=85' }, { tag: 'CASE STUDY', title: '跨团队协作如何保持清晰与可控', image: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1200&q=85' }, ]; const news = [ { title: 'WISE TECH 为跨域制造系统建立数据验证网络', date: 'JUL 15, 2026', image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1100&q=85' }, { title: '开放执行层让多个业务环境持续协同', date: 'JUL 02, 2026', image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1100&q=85' }, { title: '从实时数据到可审计决策：企业系统的新基础', date: 'JUN 18, 2026', image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1100&q=85' }, { title: 'WISE TECH 与 PrimeXM 完成交易风险数据的连接验证', date: 'JUN 06, 2026', image: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1100&q=85' }, { title: '面向受监管数字市场的可审计执行框架正式发布', date: 'MAY 22, 2026', image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1100&q=85' }, { title: '从流动性到清算：一套更清晰的运营控制模型', date: 'MAY 09, 2026', image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1100&q=85' }, ]; function Mark() { return ; } function Brand({ compact = false }) { return {compact ? '' : <>WISETECH}; } function BusinessNavigation({ openGroup, onOpenGroup, onNavigate }) { return ; } function MobileBusinessNavigation({ openGroup, onOpenGroup, onNavigate }) { return ; } function App() { const [menuOpen, setMenuOpen] = useState(false); const [openNavGroup, setOpenNavGroup] = useState(null); const [openMobileNavGroup, setOpenMobileNavGroup] = useState(null); const [announcementOffset, setAnnouncementOffset] = useState(announcements.length); const [announcementResetting, setAnnouncementResetting] = useState(false); const [activeCase, setActiveCase] = useState(0); const [visibleCase, setVisibleCase] = useState(0); const [caseMotion, setCaseMotion] = useState('is-idle'); const [storyBounds, setStoryBounds] = useState({ atStart: true, atEnd: false }); const [newsBounds, setNewsBounds] = useState({ atStart: true, atEnd: false }); const [email, setEmail] = useState(''); const [subscribed, setSubscribed] = useState(false); const [navTheme, setNavTheme] = useState('hero'); const [tickerStep, setTickerStep] = useState(0); const [tickerDragOffset, setTickerDragOffset] = useState(0); const [tickerMotion, setTickerMotion] = useState('is-idle'); const [tickerLineHeight, setTickerLineHeight] = useState(92); const tickerStackRef = useRef(null); const tickerDragRef = useRef(null); const tickerWheelRemainderRef = useRef(0); const storyViewportRef = useRef(null); const storyDragRef = useRef(null); const newsViewportRef = useRef(null); const newsDragRef = useRef(null); const caseSwitchTimerRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => entries.forEach((entry) => entry.isIntersecting && entry.target.classList.add('is-visible')), { threshold: 0.14 }, ); document.querySelectorAll('[data-reveal]').forEach((element) => observer.observe(element)); return () => observer.disconnect(); }, []); useEffect(() => () => window.clearTimeout(caseSwitchTimerRef.current), []); useEffect(() => { const viewport = newsViewportRef.current; if (!viewport) return undefined; const syncNewsBounds = () => { const remaining = viewport.scrollWidth - viewport.clientWidth - viewport.scrollLeft; setNewsBounds({ atStart: viewport.scrollLeft < 2, atEnd: remaining < 2 }); }; syncNewsBounds(); viewport.addEventListener('scroll', syncNewsBounds, { passive: true }); window.addEventListener('resize', syncNewsBounds); return () => { viewport.removeEventListener('scroll', syncNewsBounds); window.removeEventListener('resize', syncNewsBounds); }; }, []); useEffect(() => { const viewport = storyViewportRef.current; if (!viewport) return undefined; const syncStoryBounds = () => { const remaining = viewport.scrollWidth - viewport.clientWidth - viewport.scrollLeft; setStoryBounds({ atStart: viewport.scrollLeft < 2, atEnd: remaining < 2 }); }; syncStoryBounds(); viewport.addEventListener('scroll', syncStoryBounds, { passive: true }); window.addEventListener('resize', syncStoryBounds); return () => { viewport.removeEventListener('scroll', syncStoryBounds); window.removeEventListener('resize', syncStoryBounds); }; }, []); useEffect(() => { const syncTickerLineHeight = () => { const firstLine = tickerStackRef.current?.querySelector('p'); if (firstLine) setTickerLineHeight(firstLine.getBoundingClientRect().height); }; syncTickerLineHeight(); window.addEventListener('resize', syncTickerLineHeight); return () => window.removeEventListener('resize', syncTickerLineHeight); }, []); useEffect(() => { const darkSections = ['.platform-feature', '.stories-section', '.site-footer']; const syncNavigationTheme = () => { const headerHeight = document.querySelector('.top-nav')?.offsetHeight || 80; const probeY = Math.min(headerHeight * 0.56, 52); const hero = document.querySelector('.ticker-hero'); const dark = darkSections.some((selector) => { const section = document.querySelector(selector); if (!section) return false; const rect = section.getBoundingClientRect(); return rect.top <= probeY && rect.bottom >= probeY; }); const heroRect = hero?.getBoundingClientRect(); const onHero = heroRect && heroRect.top <= probeY && heroRect.bottom >= probeY; setNavTheme(dark ? 'dark' : onHero ? 'hero' : 'light'); }; syncNavigationTheme(); window.addEventListener('scroll', syncNavigationTheme, { passive: true }); window.addEventListener('resize', syncNavigationTheme); return () => { window.removeEventListener('scroll', syncNavigationTheme); window.removeEventListener('resize', syncNavigationTheme); }; }, []); const activeCaseIndex = Math.min(activeCase, useCases.length - 1); const currentCase = useCases[Math.min(visibleCase, useCases.length - 1)]; const selectCase = (index) => { if (index === activeCase || caseMotion === 'is-leaving') return; setActiveCase(index); setCaseMotion('is-leaving'); window.clearTimeout(caseSwitchTimerRef.current); caseSwitchTimerRef.current = window.setTimeout(() => { setVisibleCase(index); setCaseMotion('is-entering'); caseSwitchTimerRef.current = window.setTimeout(() => setCaseMotion('is-idle'), 520); }, 170); }; const advanceTicker = (direction) => setTickerStep((step) => (step + direction + tickerWords.length) % tickerWords.length); const handleTickerWheel = (event) => { event.preventDefault(); event.stopPropagation(); tickerWheelRemainderRef.current += event.deltaY; const steps = Math.trunc(tickerWheelRemainderRef.current / 50); if (steps) { tickerWheelRemainderRef.current -= steps * 50; advanceTicker(steps); } }; const handleTickerPointerDown = (event) => { event.preventDefault(); event.stopPropagation(); event.currentTarget.setPointerCapture(event.pointerId); tickerDragRef.current = { pointerId: event.pointerId, startY: event.clientY }; setTickerDragOffset(0); }; const handleTickerPointerMove = (event) => { if (tickerDragRef.current?.pointerId !== event.pointerId) return; event.preventDefault(); event.stopPropagation(); setTickerDragOffset(event.clientY - tickerDragRef.current.startY); }; const finishTickerDrag = (event) => { if (tickerDragRef.current?.pointerId !== event.pointerId) return; event.preventDefault(); event.stopPropagation(); const distance = event.clientY - tickerDragRef.current.startY; const steps = Math.round(-distance / tickerLineHeight); if (steps) advanceTicker(steps); tickerDragRef.current = null; setTickerDragOffset(0); }; const scrollStories = (direction) => { const viewport = storyViewportRef.current; const firstCard = viewport?.querySelector('.story-card'); if (!viewport || !firstCard) return; viewport.scrollBy({ left: direction * (firstCard.offsetWidth + 1), behavior: 'smooth' }); }; const scrollNews = (direction) => { const viewport = newsViewportRef.current; const firstCard = viewport?.querySelector('.news-card'); if (!viewport || !firstCard) return; viewport.scrollBy({ left: direction * (firstCard.offsetWidth + 1), behavior: 'smooth' }); }; const handleStoryPointerDown = (event) => { if (event.pointerType === 'mouse' && event.button !== 0) return; const viewport = storyViewportRef.current; if (!viewport) return; viewport.setPointerCapture(event.pointerId); storyDragRef.current = { pointerId: event.pointerId, startX: event.clientX, startScrollLeft: viewport.scrollLeft, moved: false }; viewport.classList.add('is-dragging'); }; const handleStoryPointerMove = (event) => { const drag = storyDragRef.current; const viewport = storyViewportRef.current; if (!drag || drag.pointerId !== event.pointerId || !viewport) return; const distance = event.clientX - drag.startX; if (Math.abs(distance) > 4) drag.moved = true; if (drag.moved) event.preventDefault(); viewport.scrollLeft = drag.startScrollLeft - distance; }; const finishStoryDrag = (event) => { const drag = storyDragRef.current; const viewport = storyViewportRef.current; if (!drag || drag.pointerId !== event.pointerId || !viewport) return; if (viewport.hasPointerCapture(event.pointerId)) viewport.releasePointerCapture(event.pointerId); viewport.classList.remove('is-dragging'); storyDragRef.current = null; }; const handleStoryWheel = (event) => { const viewport = storyViewportRef.current; if (!viewport || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return; event.preventDefault(); viewport.scrollLeft += event.deltaY; }; const handleNewsPointerDown = (event) => { if (event.pointerType === 'mouse' && event.button !== 0) return; const viewport = newsViewportRef.current; if (!viewport) return; viewport.setPointerCapture(event.pointerId); newsDragRef.current = { pointerId: event.pointerId, startX: event.clientX, startScrollLeft: viewport.scrollLeft, moved: false }; viewport.classList.add('is-dragging'); }; const handleNewsPointerMove = (event) => { const drag = newsDragRef.current; const viewport = newsViewportRef.current; if (!drag || drag.pointerId !== event.pointerId || !viewport) return; const distance = event.clientX - drag.startX; if (Math.abs(distance) > 4) drag.moved = true; if (drag.moved) event.preventDefault(); viewport.scrollLeft = drag.startScrollLeft - distance; }; const finishNewsDrag = (event) => { const drag = newsDragRef.current; const viewport = newsViewportRef.current; if (!drag || drag.pointerId !== event.pointerId || !viewport) return; if (viewport.hasPointerCapture(event.pointerId)) viewport.releasePointerCapture(event.pointerId); viewport.classList.remove('is-dragging'); newsDragRef.current = null; }; const handleNewsWheel = (event) => { const viewport = newsViewportRef.current; if (!viewport || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return; event.preventDefault(); viewport.scrollLeft += event.deltaY; }; useEffect(() => { const ticker = tickerStackRef.current; if (!ticker) return undefined; ticker.addEventListener('wheel', handleTickerWheel, { passive: false }); return () => ticker.removeEventListener('wheel', handleTickerWheel); }, [handleTickerWheel]); useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return undefined; let launchTimer; let settleTimer; let idleTimer; const scheduleBurst = () => { launchTimer = window.setTimeout(() => { if (document.hidden || tickerDragRef.current) { scheduleBurst(); return; } setTickerMotion('is-burst'); setTickerStep((step) => (step + 3) % tickerWords.length); settleTimer = window.setTimeout(() => { setTickerMotion('is-settling'); setTickerStep((step) => (step + 1) % tickerWords.length); idleTimer = window.setTimeout(() => { setTickerMotion('is-idle'); scheduleBurst(); }, 640); }, 280); }, 4200); }; scheduleBurst(); return () => { window.clearTimeout(launchTimer); window.clearTimeout(settleTimer); window.clearTimeout(idleTimer); }; }, []); const loopedAnnouncements = [...announcements, ...announcements, ...announcements]; const nextAnnouncement = () => setAnnouncementOffset((value) => value + 1); const prevAnnouncement = () => setAnnouncementOffset((value) => value - 1); const resetAnnouncementLoop = () => { if (announcementOffset === announcements.length * 2) { setAnnouncementResetting(true); setAnnouncementOffset(announcements.length); } if (announcementOffset === announcements.length - 1) { setAnnouncementResetting(true); setAnnouncementOffset(announcements.length * 2 - 1); } }; useEffect(() => { if (!announcementResetting) return undefined; const frame = window.requestAnimationFrame(() => setAnnouncementResetting(false)); return () => window.cancelAnimationFrame(frame); }, [announcementResetting]); return
setOpenNavGroup(null)} />
{menuOpen && { setMenuOpen(false); setOpenMobileNavGroup(null); }} />}

WISE 连接
可信的下一步

WISE TECH 为关键业务提供开放的验证基础设施，让数据、规则和系统能够跨越边界持续协作。

{loopedAnnouncements.map((item, index) =>
WISE TECH
{item.type}

{item.title}

)}
最新动态

WISE TECH 平台：让复杂系统
建立确定性

WISE TECH 将分散的数据、流程和执行逻辑编织为一个可验证的开放层。团队可以在既有环境与新服务之间安全运行，同时保留关键操作的透明度与控制力。

每一次输入、判断和结果都拥有可追溯的依据，为系统在规模化后仍保持可靠提供基础。

探索平台

为数字金融与关键业务提供
可部署的基础设施

{useCases.map((item, index) => )}
{currentCase.short}

{currentCase.title}

{currentCase.title}

    {currentCase.points.map((point) =>
  • {point}
    • )}
了解更多

为什么 WISE TECH 是
关键系统的验证标准

解决关键协作中的不确定性

通过可信数据、规则执行和系统连接能力，使团队能够构建、运行和扩展重要的数字服务。

服务长期可靠的业务环境

将透明、可审计的规则带入复杂业务流程，让更多参与方以同一套证据协同。

为安全、可靠与规模而构建

从底层连接到最终执行，系统以持续监测和明确边界保持长期稳定。

{stories.map((story, index) =>

{story.title}

{story.tag} )}
{news.map((item, index) =>

{item.title}

{item.date}
)}

网站地图

按业务、行业、
产品与服务进入。

讨论你的基础设施需求
{navigationGroups.map((group) => )}

为下一步构建

让关键业务
从现在开始
可信连接。

预约咨询
; } createRoot(document.getElementById('root')).render();