/* global React */ // ============================================================ // Overseas CDN, "What is" + "Why UD" + Trust stats // ============================================================ const OV_WHAT_CSS = ` .OV-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} .OV-what-head{max-width:none;margin-bottom:48px} .OV-what-head .OV-lede,.OV-what-head .OV-lede.OV-lede-hl{max-width:none} .OV-maps{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .OV-maps .OV-map{max-width:none;justify-self:stretch} .OV-maps .OV-map-toggle{display:none} .OV-maps .OV-map-legend{display:none} @media (max-width:900px){.OV-maps{grid-template-columns:1fr}} .OV-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} .OV-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .OV-lede.OV-lede-hl{position:relative;margin-top:22px;padding:22px 26px;background:linear-gradient(120deg,rgba(167,139,250,0.10) 0%,rgba(124,58,237,0.07) 100%);border-radius:14px;color:#3b2d59} .OV-lede.OV-lede-hl::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:99px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%)} .OV-lede.OV-lede-hl strong{color:#6D28D9} .OV-lede{margin-top:24px;font-size:17px;line-height:1.8;color:#475569;max-width:560px;text-wrap:pretty} .OV-lede strong{color:#0F2A47;font-weight:600} .OV-lede + .OV-lede{margin-top:18px} /* Global speed map (red = slow / no CDN, green = fast / UD CDN) */ .OV-map{position:relative;width:100%;max-width:560px;justify-self:end;display:flex;flex-direction:column;gap:16px} .OV-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} .OV-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} .OV-map-toggle button .dot{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor} .OV-map-toggle button[data-on="slow"].on{background:#fff;color:#dc2626;box-shadow:0 2px 8px rgba(15,42,71,0.10)} .OV-map-toggle button[data-on="fast"].on{background:#fff;color:#15803d;box-shadow:0 2px 8px rgba(15,42,71,0.10)} .OV-map-stage{position:relative;width:100%;aspect-ratio:600/360;border-radius:20px;overflow:hidden;background:radial-gradient(125% 130% at 50% 0%,#FBFAFE 0%,#F4F1FB 100%);border:1px solid rgba(15,42,71,0.08)} .OV-map-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block} .OV-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)} .OV-map-badge .ms{font-family:'Chakra Petch',ui-monospace,monospace} .OV-map-legend{display:flex;gap:24px;flex-wrap:wrap;font-family:'Noto Sans HK','Inter',sans-serif} .OV-map-legend div{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#475569} .OV-map-legend .sw{width:24px;border-top:3px dashed;flex:none} @media (max-width: 1024px){ .OV-what{padding:var(--section-pad-y-t) 0} .OV-what-inner{grid-template-columns:1fr;gap:52px} .OV-map{justify-self:start;max-width:540px} } @media (max-width: 640px){ .OV-what{padding:var(--section-pad-y-m) 0} .OV-h2{font-size:32px;letter-spacing:-1px} .OV-lede{font-size:15.5px} } /* ---------- Why UD ---------- */ .OV-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} .OV-why-head{max-width:820px;margin-bottom:52px} .OV-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .OV-why-card{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;padding:34px 30px 32px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:16px;overflow:hidden} .OV-why-card::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);opacity:0;transition:opacity .2s} .OV-why-card:hover{border-color:transparent;box-shadow:0 18px 40px rgba(124,58,237,0.13);transform:translateY(-3px)} .OV-why-card:hover::after{opacity:1} .OV-why-card.flag{background:radial-gradient(120% 120% at 85% 0%,#33215e 0%,#1a2347 45%,#0F2A47 100%);color:#fff;border-color:transparent} .OV-why-card.flag::after{display:none} .OV-why-card.flag::before{content:'';position:absolute;top:-90px;right:-90px;width:240px;height:240px;background:radial-gradient(circle,rgba(167,139,250,0.42) 0%,transparent 70%);pointer-events:none} .OV-why-card.flag:hover{box-shadow:0 22px 50px rgba(51,33,94,0.45);transform:translateY(-3px)} .OV-why-card.flag .OV-why-h3{font-size:23px} .OV-why-num{position:absolute;top:26px;right:28px;font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;color:rgba(124,58,237,0.75);font-variant-numeric:tabular-nums} .OV-why-card.flag .OV-why-num{color:rgba(196,181,253,0.75)} .OV-why-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)} .OV-why-card.flag .OV-why-icon{background:linear-gradient(135deg,rgba(167,139,250,0.28) 0%,rgba(124,58,237,0.18) 100%);color:#d8caff;box-shadow:inset 0 0 0 1px rgba(196,181,253,0.22)} .OV-why-icon svg{width:30px;height:30px;overflow:visible} .OV-why-h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3;text-wrap:balance;color:inherit} .OV-why-p{margin:0;font-size:15px;line-height:1.7;color:#475569;text-wrap:pretty} .OV-why-card.flag .OV-why-p{color:rgba(255,255,255,0.78)} .OV-why-p b{color:#0F2A47;font-weight:600} .OV-why-card.flag .OV-why-p b{color:#fff} /* trust stats strip at the foot of Why */ .OV-trust{margin-top:48px;display:grid;grid-template-columns:1.15fr 2fr;gap:48px;align-items:center;padding-top:48px;border-top:1px solid rgba(15,42,71,0.10)} .OV-trust-lede{font-size:16px;line-height:1.8;color:#475569;text-wrap:pretty;margin:0} .OV-trust-lede strong{color:#0F2A47;font-weight:600} .OV-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;overflow:hidden} .OV-stat{padding:26px 22px;border-right:1px solid rgba(15,42,71,0.08)} .OV-stat:last-child{border-right:0} .OV-stat-v{font-family:'Inter',sans-serif;font-size:34px;font-weight:700;color:#0F2A47;letter-spacing:-1.2px;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline} .OV-stat-v .u{font-size:15px;font-weight:600;color:#A855F7;letter-spacing:-.2px;margin-left:3px} .OV-stat-l{margin-top:10px;font-size:13px;font-weight:600;color:#475569;letter-spacing:-.1px;line-height:1.4} @media (max-width: 1024px){ .OV-why{padding:var(--section-pad-y-t) 0} .OV-why-grid{grid-template-columns:repeat(2,1fr)} .OV-trust{grid-template-columns:1fr;gap:28px} } @media (max-width: 800px){ .OV-why-card{padding:30px 26px 28px} .OV-stats{grid-template-columns:repeat(2,1fr)} .OV-stat{border-bottom:1px solid rgba(15,42,71,0.08)} .OV-stat:nth-child(odd){border-right:1px solid rgba(15,42,71,0.08)} .OV-stat:nth-child(even){border-right:0} .OV-stat:last-child{grid-column:1 / -1} } @media (max-width: 640px){ .OV-why{padding:var(--section-pad-y-m) 0} .OV-why-head{margin-bottom:40px} .OV-why-grid{grid-template-columns:1fr;gap:14px} .OV-stat-v{font-size:30px} } `; // ---- Overseas speed map on a dotted WORLD MAP ---- // Equirectangular world rendered as a dot-matrix (continents = unions of // simple ellipses in lon/lat space, sampled into dots). Two stories: // slow → every overseas user detours back to the HK origin (long red routes) // fast → an edge node sits right next to each city (short green hops) const OV_VB_W = 600, OV_VB_H = 360, OV_PAD_T = 26, OV_PAD_B = 30; const OV_LAT_TOP = 80, OV_LAT_BOT = -56; const ovX = (lon) => ((lon + 180) / 360) * OV_VB_W; const ovY = (lat) => OV_PAD_T + ((OV_LAT_TOP - lat) / (OV_LAT_TOP - OV_LAT_BOT)) * (OV_VB_H - OV_PAD_T - OV_PAD_B); const OV_RXK = OV_VB_W / 360; const OV_RYK = (OV_VB_H - OV_PAD_T - OV_PAD_B) / (OV_LAT_TOP - OV_LAT_BOT); // continent regions [lon, lat, rxDeg, ryDeg] const OV_LAND = [ [-100, 47, 32, 20], [-116, 60, 18, 12], [-150, 62, 13, 8], [-90, 30, 16, 11], [-101, 22, 9, 8], [-42, 72, 12, 10], [-80, 15, 8, 6], [-63, -8, 16, 15], [-65, -30, 11, 18], [-72, -46, 6, 9], [15, 52, 19, 11], [-3, 54, 6, 6], [26, 60, 15, 8], [18, 9, 22, 17], [25, -13, 18, 20], [47, -19, 5, 7], [46, 28, 14, 12], [92, 56, 44, 21], [78, 24, 14, 13], [106, 35, 17, 13], [122, 52, 15, 11], [138, 38, 4, 8], [105, 13, 11, 9], [116, 0, 14, 7], [134, -25, 18, 13], [172, -42, 6, 8], ]; function ovGenDots() { const regs = OV_LAND.map(([lon, lat, rd, ryd]) => ({ cx: ovX(lon), cy: ovY(lat), rx: rd * OV_RXK, ry: ryd * OV_RYK })); const dots = []; const step = 10.5; for (let x = 8; x < OV_VB_W; x += step) { for (let y = OV_PAD_T - 6; y < OV_VB_H - OV_PAD_B + 12; y += step) { for (const r of regs) { const dx = (x - r.cx) / r.rx, dy = (y - r.cy) / r.ry; if (dx * dx + dy * dy <= 1) { dots.push([x, y]); break; } } } } return dots; } const OV_CITIES = [ { name: '洛杉磯', lon: -118, lat: 34, ndx: 20, ndy: -2, slow: '245ms', fast: '52ms' }, { name: '紐約', lon: -74, lat: 41, ndx: -20, ndy: -4, slow: '286ms', fast: '38ms' }, { name: '倫敦', lon: -0.1, lat: 51.5, ndx: 18, ndy: 6, slow: '312ms', fast: '44ms' }, { name: '杜拜', lon: 55, lat: 25, ndx: -18, ndy: 8, slow: '218ms', fast: '61ms' }, { name: '聖保羅', lon: -46.6, lat: -23.5, ndx: 20, ndy: 2, slow: '340ms', fast: '58ms' }, { name: '悉尼', lon: 151, lat: -33.8, ndx: -20, ndy: -2, slow: '168ms', fast: '42ms' }, ]; const OV_HK = { lon: 114, lat: 22 }; function OverseasSpeedMap({ force }) { const [mode, setMode] = React.useState(force || 'slow'); const fast = mode === 'fast'; const accent = fast ? '#16a34a' : '#dc2626'; const dotFill = fast ? 'rgba(22,163,74,0.32)' : 'rgba(220,38,38,0.28)'; const dots = React.useMemo(ovGenDots, []); const O = { x: ovX(OV_HK.lon), y: ovY(OV_HK.lat) }; const cities = OV_CITIES.map((c) => { const x = ovX(c.lon), y = ovY(c.lat); return { ...c, x, y, nx: x, ny: y - 22 }; }); const ld = cities.find((c) => c.name === '倫敦'); const slowHero = `M ${O.x} ${O.y} Q ${(O.x + ld.x) / 2} ${Math.min(O.y, ld.y) - 70} ${ld.x} ${ld.y}`; return (
{fast ? <>就近邊緣節點 · 平均 <100ms · 快 : <>繞道香港源站 · 250ms+ · 慢}
紅 = 慢（繞道香港源站）
綠 = 快（就近邊緣節點）
); } function OverseasWhat() { return ( <>

甚麼是 海外 CDN？

海外 CDN 是針對全球用戶而設的內容傳遞網絡服務。它把你的網站、圖片、影片與 API 回應 預先快取於全球各地的邊緣節點，海外用戶連線時只從最就近的節點取得內容， 毋須繞道源站所在地，因而大幅縮短跨境載入時間並避開長距離網絡的不可預測性。

UD 的海外 CDN 節點覆蓋亞洲、歐洲及美洲主要市場，配以超過 300Gb 國際頻寬， 能在大型推廣活動或流量突發時自動分散負載，為跨境企業帶來接近本地的瀏覽體驗。

); } // ----- Why UD, 4 cards + trust stats ----- const OvGlyphGlobe = () => ( ); const OvGlyphBandwidth = () => ( ); const OvGlyphShield = () => ( ); const OvGlyphTag = () => ( ); const OvGlyphChat = () => ( ); const OvGlyphBolt = () => ( ); const OV_WHY_CARDS = [ { flag: true, icon: , title: '全球覆蓋，就近交付', body: '節點遍佈亞洲、歐洲及美洲主要市場，海外用戶就近存取內容，平均延遲低於 100 毫秒，載入時間由 6 秒以上縮短至 2 秒以內。', }, { icon: , title: '300Gb+ 國際頻寬，承壓不掉線', body: '自家管理國際出口頻寬超過 300Gb，99.99% 服務正常運行。雙十一、黑五、新品發佈等流量突發仍維持穩定延遲，省下源站擴容的固定投入。', }, { icon: , title: '內建安全防護，毋須額外加購', body: '流量經 UD 邊緣節點轉折，自動隱藏源伺服器位址，並內建免費憑證、網頁應用程式防火牆與阻斷服務攻擊防護，從源頭減少網絡攻擊風險。', }, { icon: , title: '港幣計價，按用量收費', body: '流量由每 GB HK$0.40 起，按用量累進計費，毋須長期合約或最低承諾。月度發票清楚列出實際用量，方便財務核算。', }, { icon: , title: '24 × 7 香港本地真人支援', body: '電郵、電話、即時通訊全天候待命，香港團隊以中文即時解決問題，毋須跨時區或輪候自動回覆。', }, { icon: , title: '毋須改架構，即日上線', body: '透過 UD 管理介面或開發者介面加入網域、設定快取規則並監察用量，整個流程於同一個工作天內完成。', }, ]; function OverseasWhy() { return (

為何企業選用 UD 海外 CDN

把進軍環球市場最棘手的網速、頻寬成本與保安，整合成一套即裝即用的方案。

{OV_WHY_CARDS.map((c, i) => (
{String(i + 1).padStart(2, '0')}
{c.icon}

{c.title}

))}
); } window.OverseasWhat = OverseasWhat; window.OverseasWhy = OverseasWhy;