/* global React */ // ============================================================ // Video CDN, Outcomes (4 benefits) + mid CTA // Feature card: live concurrent viewer graph // ============================================================ const VD_BEN_CSS = ` .VD-ben{position:relative;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47;border-top:1px solid rgba(15,42,71,0.06);border-bottom:1px solid rgba(15,42,71,0.06)} .VD-ben-head{max-width:820px;margin-bottom:52px} .VD-ben-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} .VD-ben-h2 .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .VD-ben-lede{margin-top:22px;font-size:17px;line-height:1.7;color:#475569;max-width:600px;text-wrap:pretty} .VD-ben-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:stretch} /* Featured outcome */ .VD-feat{position:relative;background:radial-gradient(120% 120% at 100% 0%,#1A3A5A 0%,#0F2A47 65%);color:#fff;border-radius:24px;padding:44px 44px 36px;overflow:hidden;display:flex;flex-direction:column;gap:22px} .VD-feat::before{content:'';position:absolute;top:-120px;right:-90px;width:340px;height:340px;background:radial-gradient(circle,rgba(167,139,250,0.32) 0%,transparent 70%);pointer-events:none} .VD-feat-num{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:2.2px;color:#C4B5FD;text-transform:uppercase} .VD-feat-h3{margin:0;font-size:32px;font-weight:700;letter-spacing:-.8px;line-height:1.18;color:#fff;text-wrap:balance;max-width:420px} .VD-feat-h3 .accent{background:linear-gradient(135deg,#C4B5FD 0%,#A855F7 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .VD-feat-p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,0.74);max-width:440px;text-wrap:pretty} /* live-viewer area chart inside feature */ .VD-feat-chart{margin-top:auto;background:rgba(255,255,255,0.04);border:1px solid rgba(196,181,253,0.18);border-radius:14px;padding:22px 22px 18px;backdrop-filter:blur(2px)} .VD-feat-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px} .VD-feat-chart-lbl{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.6px;color:rgba(196,181,253,0.7);text-transform:uppercase} .VD-feat-chart-v{font-family:'Chakra Petch','Inter',sans-serif;font-size:22px;font-weight:600;color:#C4B5FD;letter-spacing:-.4px;line-height:1;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px} .VD-feat-chart-v::before{content:'';width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,0.55);animation:vdLivePulse 1.5s ease-in-out infinite} @keyframes vdLivePulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0.55)}50%{transform:scale(1.3);box-shadow:0 0 0 6px rgba(34,197,94,0)}} .VD-feat-svg{width:100%;height:100px;display:block} .VD-feat-axis{margin-top:6px;display:flex;justify-content:space-between;font-family:'Chakra Petch',monospace;font-size:9.5px;color:rgba(196,181,253,0.75);letter-spacing:.8px;text-transform:uppercase} /* Secondary outcomes, compact stack */ .VD-sec{display:flex;flex-direction:column;gap:14px} .VD-sec-it{position:relative;background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:16px;padding:22px 24px 22px 78px;transition:border-color .2s,transform .2s,box-shadow .2s} .VD-sec-it:hover{border-color:#A855F7;box-shadow:0 12px 28px rgba(124,58,237,0.10);transform:translateY(-1px)} .VD-sec-ic{position:absolute;left:24px;top:22px;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#F3EEFE 0%,#E7DEFB 100%);color:#7C3AED;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(124,58,237,0.10)} .VD-sec-ic svg{width:22px;height:22px} .VD-sec-h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.3;color:#0F2A47} .VD-sec-p{margin:6px 0 0;font-size:14.5px;line-height:1.65;color:#475569;text-wrap:pretty} .VD-sec-p b{color:#0F2A47;font-weight:600} /* Mid CTA banner */ .VD-midcta{margin-top:48px;position:relative;background:#fff;border:1px solid rgba(124,58,237,0.18);border-radius:20px;padding:30px 36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;overflow:hidden} .VD-midcta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%)} .VD-midcta-text{padding-left:18px} .VD-midcta-t{margin:0;font-size:22px;font-weight:700;color:#0F2A47;letter-spacing:-.4px;line-height:1.3;text-wrap:balance} .VD-midcta-t .accent{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .VD-midcta-s{margin:6px 0 0;font-size:14px;color:#64748b;font-family:'Chakra Petch','Inter',sans-serif;letter-spacing:.6px} .VD-midcta-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;font-size:14.5px;font-weight:700;border-radius:999px;text-decoration:none;letter-spacing:.2px;box-shadow:0 8px 22px rgba(124,58,237,0.30);transition:all .15s;white-space:nowrap} .VD-midcta-btn:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 12px 28px rgba(124,58,237,0.40)} @media (max-width: 1024px){ .VD-ben{padding:var(--section-pad-y-t) 0} .VD-ben-grid{grid-template-columns:1fr;gap:18px} .VD-feat-h3{font-size:28px} } @media (max-width: 640px){ .VD-ben{padding:var(--section-pad-y-m) 0} .VD-ben-head{margin-bottom:40px} .VD-ben-h2{font-size:32px;letter-spacing:-1px} .VD-feat{padding:32px 26px 28px} .VD-feat-h3{font-size:26px} .VD-sec-it{padding:20px 20px 20px 70px} .VD-sec-ic{left:20px;top:20px;width:34px;height:34px} .VD-midcta{grid-template-columns:1fr;padding:22px 22px;gap:14px;margin-top:32px} .VD-midcta-text{padding-left:14px} .VD-midcta-t{font-size:17px;letter-spacing:-.3px;line-height:1.35} .VD-midcta-s{font-size:13px;letter-spacing:.4px} .VD-midcta-btn{justify-self:start;padding:12px 22px;font-size:13.5px} } `; // Concurrent-viewer area chart, simulates a live event surge then plateau function VDLiveChart() { // 20 points: ramp + surge + plateau const PTS = [40, 90, 180, 300, 520, 780, 920, 1010, 1080, 1140, 1200, 1260, 1290, 1310, 1330, 1340, 1350, 1355, 1360, 1366]; const max = 1400, w = 480, h = 100, pad = 4; const xStep = (w - pad * 2) / (PTS.length - 1); const toXY = (v, i) => [pad + i * xStep, h - pad - (v / max) * (h - pad * 2)]; const path = PTS.map((v, i) => { const [x, y] = toXY(v, i); return (i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1); }).join(' '); const area = path + ` L ${w - pad} ${h - pad} L ${pad} ${h - pad} Z`; const [lx, ly] = toXY(PTS[PTS.length - 1], PTS.length - 1); return ( ); } // ---- icons ---- const VdIcRevenue = () => ; const VdIcDevice = () => ; const VdIcShield = () => ; const VdIcCoin = () => ; const VD_SECONDARY = [ { icon: , t: '觀眾體驗一致', p: '不論手機、平板、桌面或智能電視，不論 4G、5G 或 Wi-Fi，觀眾都享受流暢觀看，平均觀看時長與留存率隨之提升。', }, { icon: , t: '版權內容受保護', p: '配備授權控制機制，防止盜鏈與越區觀看，保障內容投資與授權合約執行。', }, { icon: , t: '源站基建成本下降', p: '邊緣節點承接靜態與大流量影片資源，源站只承擔 origin 與動態邏輯，毋須因觀眾增長頻繁擴容。', }, ]; function VideoBenefits() { return ( <>

直播不斷線，觀眾不離場

影片 CDN 不只是把訊號送到觀眾眼前。它直接影響你的訂閱、廣告收入、留存率，以及運營成本。

突發流量自動承壓，訂閱與廣告收入穩定

觀看人數突發增長時，邊緣節點自動分散負載，源站只處理 origin pull。 直播、賽事、帶貨日不再因擠塞中斷。

直播當日同時觀看人數 1,366,408
T-30m開始T+30mT+60mNOW
{VD_SECONDARY.map((s, i) => (
{s.icon}

{s.t}

))}
); } window.VideoBenefits = VideoBenefits;