/* global React */ // ============================================================ // China CDN, "What is China CDN" + "Why UD" // What: topology diagram (origin → edge nodes around China → users) // Why: 4 trimmed selling points (from 6), no pills/eyebrows // ============================================================ const CH_WHAT_CSS = ` .CH-what{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47} .CH-what-head{max-width:none;margin-bottom:48px} .CH-what-head .CH-lede,.CH-what-head .CH-lede.hl{max-width:none} .CH-maps{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .CH-maps .CH-map{max-width:none;justify-self:stretch} .CH-maps .CH-map-toggle{display:none} .CH-maps .CH-map-legend{display:none} @media (max-width:900px){.CH-maps{grid-template-columns:1fr}} .CH-h2{margin:0;font-size:clamp(36px,4.2vw,56px);line-height:1.08;font-weight:700;letter-spacing:-1.6px;color:#0F2A47;text-wrap:balance;max-width:780px} .CH-h2 .accent{background:linear-gradient(100deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .CH-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:560px;text-wrap:pretty} .CH-lede strong{color:#0F2A47;font-weight:600} .CH-lede + .CH-lede{margin-top:18px} .CH-lede.hl{margin-top:22px;background:linear-gradient(180deg,#F6F1FE 0%,#F1EAFD 100%);border:1px solid rgba(139,92,246,0.22);border-radius:14px;padding:22px 24px;color:#3B2A5A;box-shadow:0 6px 20px rgba(139,92,246,0.10)} .CH-lede.hl strong{color:#6D28D9} /* China speed map (red = slow / no CDN, green = fast / UD CDN) */ .CH-map{position:relative;width:100%;max-width:540px;justify-self:end;display:flex;flex-direction:column;gap:16px} .CH-map-toggle{display:flex;align-self:flex-start;background:#F1EEF9;border:1px solid rgba(15,42,71,0.10);border-radius:999px;padding:4px;gap:2px} .CH-map-toggle button{appearance:none;border:0;background:transparent;cursor:pointer;font-family:'Noto Sans HK','Inter',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:-.1px;color:#64748b;padding:9px 17px;border-radius:999px;white-space:nowrap;display:flex;align-items:center;gap:8px} .CH-map-toggle button .dot{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor} .CH-map-toggle button[data-on="slow"].on{background:#fff;color:#dc2626;box-shadow:0 2px 8px rgba(15,42,71,0.10)} .CH-map-toggle button[data-on="fast"].on{background:#fff;color:#15803d;box-shadow:0 2px 8px rgba(15,42,71,0.10)} .CH-map-stage{position:relative;width:100%;aspect-ratio:600/520;border-radius:20px;overflow:hidden;background:radial-gradient(125% 120% at 50% 0%,#FBFAFE 0%,#F4F1FB 100%);border:1px solid rgba(15,42,71,0.08)} .CH-map-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block} .CH-map-badge{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:13.5px;font-weight:800;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.94);backdrop-filter:blur(4px);box-shadow:0 3px 12px rgba(15,42,71,0.10)} .CH-map-badge .ms{font-family:'Chakra Petch',ui-monospace,monospace} .CH-map-legend{display:flex;gap:24px;flex-wrap:wrap;font-family:'Noto Sans HK','Inter',sans-serif} .CH-map-legend div{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#475569} .CH-map-legend .sw{width:24px;border-top:3px dashed;flex:none} @media (max-width: 1024px){ .CH-what{padding:var(--section-pad-y-t) 0} .CH-what-inner{grid-template-columns:1fr;gap:56px} .CH-map{justify-self:start;max-width:520px} } @media (max-width: 640px){ .CH-what{padding:var(--section-pad-y-m) 0} .CH-h2{font-size:32px;letter-spacing:-1px} .CH-lede{font-size:15.5px} } /* ---------- Why UD China CDN (4 cards) ---------- */ .CH-why{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);padding:var(--section-pad-y-d) 0;border-top:1px solid rgba(15,42,71,0.06);border-bottom:1px solid rgba(15,42,71,0.06);font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47} .CH-why-head{max-width:780px;margin-bottom:56px} .CH-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .CH-why-card{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.08);border-radius:20px;padding:34px 32px 32px;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;flex-direction:column;gap:18px;overflow:hidden} .CH-why-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#A855F7,#7C3AED);transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .CH-why-card:hover::before{transform:scaleX(1)} .CH-why-card:hover{border-color:rgba(139,92,246,0.30);box-shadow:0 18px 44px rgba(124,58,237,0.13);transform:translateY(-3px)} .CH-why-card.flag{background:linear-gradient(150deg,#15233D 0%,#0F2A47 55%,#241a45 145%);color:#fff;border-color:transparent} .CH-why-card.flag::after{content:'';position:absolute;top:-90px;right:-70px;width:260px;height:260px;background:radial-gradient(circle,rgba(139,92,246,0.34) 0%,transparent 70%);pointer-events:none} .CH-why-card.flag::before{background:linear-gradient(90deg,#C4B5FD,#A855F7)} .CH-why-card.flag:hover{box-shadow:0 20px 48px rgba(15,42,71,0.40)} .CH-why-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between} .CH-why-icon{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#F4ECFE 0%,#ECE1FD 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(139,92,246,0.14)} .CH-why-icon svg{width:34px;height:34px;overflow:visible} .CH-why-card.flag .CH-why-icon{background:linear-gradient(135deg,rgba(168,85,247,0.32) 0%,rgba(124,58,237,0.30) 100%);color:#DDD0FE;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.28)} .CH-why-idx{font-family:'Chakra Petch','Inter',sans-serif;font-size:30px;font-weight:600;letter-spacing:.5px;color:rgba(139,92,246,0.18);font-variant-numeric:tabular-nums;line-height:1} .CH-why-card.flag .CH-why-idx{color:rgba(196,181,253,0.38)} .CH-why-h3{position:relative;z-index:1;margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3;text-wrap:balance;color:inherit} .CH-why-p{position:relative;z-index:1;margin:0;font-size:15px;line-height:1.7;color:#475569;text-wrap:pretty} .CH-why-card.flag .CH-why-p{color:rgba(255,255,255,0.78)} @media (max-width: 1024px){ .CH-why{padding:var(--section-pad-y-t) 0} } @media (max-width: 800px){ .CH-why-grid{grid-template-columns:1fr;gap:14px} .CH-why-card{padding:30px 26px 28px} } @media (max-width: 640px){ .CH-why{padding:var(--section-pad-y-m) 0} .CH-why-head{margin-bottom:40px} } `; // ---- China speed map: red (slow / no CDN) vs green (fast / UD CDN) ---- // Stylized China silhouette. Two stories on the same map: // slow → traffic detours to an overseas origin (long red routes) // fast → an edge node sits right next to each city (short green hops) const CHINA_PATH = "M 96 250 C 70 215 78 165 120 140 C 150 122 165 150 200 140 C 235 130 250 96 300 100 C 345 104 360 132 405 120 C 450 108 470 92 510 110 C 548 128 556 150 540 175 C 528 195 500 192 492 212 C 486 228 470 226 452 232 C 470 244 486 250 478 266 C 470 280 452 276 458 296 C 470 312 470 330 452 350 C 436 372 420 384 402 398 C 380 412 356 410 336 420 C 312 430 300 414 286 420 C 262 432 240 410 210 402 C 170 390 140 360 116 322 C 96 292 100 272 96 250 Z"; const CH_CITIES = [ { name: '北京', x: 436, y: 206, node: { x: 408, y: 196 }, slow: '296ms', fast: '38ms' }, { name: '西安', x: 360, y: 258, node: { x: 333, y: 250 }, slow: '281ms', fast: '44ms' }, { name: '成都', x: 286, y: 300, node: { x: 259, y: 290 }, slow: '312ms', fast: '47ms' }, { name: '上海', x: 462, y: 300, node: { x: 434, y: 304 }, slow: '274ms', fast: '31ms' }, { name: '香港', x: 403, y: 398, node: { x: 376, y: 392 }, slow: '268ms', fast: '22ms' }, ]; const CH_ORIGIN = { x: 58, y: 66 }; // Dramatic detour path overseas → 香港, used for the slow packet const SLOW_HERO = `M ${CH_ORIGIN.x} ${CH_ORIGIN.y} C 150 230 545 175 545 320 C 545 415 470 405 403 398`; function ChinaSpeedMap({ force }) { const [mode, setMode] = React.useState(force || 'slow'); const pick = (m) => setMode(m); const fast = mode === 'fast'; const accent = fast ? '#16a34a' : '#dc2626'; const fill = fast ? 'rgba(34,197,94,0.16)' : 'rgba(239,68,68,0.15)'; const stroke = fast ? 'rgba(22,163,74,0.55)' : 'rgba(220,38,38,0.50)'; return (
{fast ? <>香港節點直送內地 · 平均 <50ms · 快 : <>公網繞道海外 · 280ms+ · 慢}
紅 = 慢（繞道海外源站）
綠 = 快（香港節點 CN2 GIA 直送內地）
); } function ChinaWhat() { return ( <>

甚麼是 中國 CDN？

中國 CDN 是一種針對內地用戶而設的內容傳遞網絡服務。它將你的網站、圖片、影片、API 回應 預先快取於中國周邊的邊緣節點，內地網民連線時只需從最就近的節點取得內容， 毋須繞道海外伺服器，因而大幅縮短載入時間並避開跨境網絡擠塞。

UD 的中國 CDN 採用全中國最優質的 CN2 GIA 專線, 中國電信下一代承載網中最高級別的線路， 獲中國電信、中國聯通及中國移動三大營運商支援，具備高優先級、高穩定性及低延遲三大特性， 能為跨境企業帶來接近本地服務器的體驗。

); } // ----- Why UD China CDN, 4 cards (no pills, no eyebrow) ----- const GlyphRoute = () => ( ); const GlyphShield = () => ( ); const GlyphNoICP = () => ( ); const GlyphChat = () => ( ); const WHY_CARDS = [ { flag: true, icon: , title: '直連內地，毋須 ICP 備案', body: 'UD 透過香港及內地周邊的邊緣節點與 CN2 GIA 專線，把內容送到內地用戶眼前。毋須註冊內地公司或申請 ICP 備案，網民即可近乎本地速度瀏覽，省下動輒數月的審批。', }, { icon: , title: '頂級線路，延時低於 50ms', body: 'CN2 GIA 繞開擠塞的公共骨幹，繁忙時段仍維持穩定低延遲，承諾 99.99% 正常運行。配合 UD 自家管理的邊緣節點，把跨境網絡的不可預測性降到最低。', }, { icon: , title: '內建安全防護，毋須額外加購', body: '流量經 UD 邊緣節點轉折，自動隱藏源伺服器 IP，內建免費 Let\'s Encrypt SSL、WAF 與 DDoS 防護，從源頭減少網絡攻擊風險。', }, { icon: , title: '真人 24×7 技術支援', body: '電郵、電話、即時通訊全天候待命，香港團隊以中、英文為你解決問題，毋須跨時區或輪候自動回覆。', }, ]; function ChinaWhy() { return (

為何企業選用 UD 中國 CDN

把進軍內地最棘手的網速、合規與保安，整合成一套即裝即用的方案。

{WHY_CARDS.map((c, i) => (
{c.icon}

{c.title}

{c.body}

))}
); } window.ChinaWhat = ChinaWhat; window.ChinaWhy = ChinaWhy;