/* global React */ const { useState: useVDPrcState } = React; // ============================================================ // Video CDN, Pricing (PAYG primary + Monthly secondary) // 3 region tabs: HK / CN / Global // ============================================================ const VD_PRC_CSS = ` .VD-prc{position:relative;background:#fff;padding:var(--section-pad-y-d) 0;font-family:'Inter','Noto Sans HK','Noto Sans TC',sans-serif;color:#0F2A47} .VD-prc-head{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;margin-bottom:36px} .VD-prc-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:680px} .VD-prc-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-prc-lede{margin:0;font-size:16.5px;line-height:1.7;color:#475569;max-width:520px;text-wrap:pretty} .VD-prc-lede strong{color:#0F2A47;font-weight:600} /* Region tabs */ .VD-prc-tabs{display:inline-flex;padding:6px;background:#F3EEFE;border-radius:999px;margin-bottom:36px;gap:4px;flex-wrap:wrap} .VD-prc-tab{appearance:none;border:0;background:transparent;padding:12px 22px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:15px;font-weight:600;color:#7C3AED;letter-spacing:-.1px;border-radius:999px;cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:10px} .VD-prc-tab:hover{color:#0F2A47} .VD-prc-tab.on{background:#fff;color:#0F2A47;box-shadow:0 4px 12px rgba(15,42,71,0.08)} .VD-prc-tab svg{width:18px;height:18px;color:#7C3AED} /* ---- PAYG (primary block) ---- */ .VD-payg-wrap{margin-bottom:64px} .VD-payg-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:18px} .VD-payg-h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px;color:#0F2A47;display:inline-flex;align-items:baseline;gap:14px} .VD-payg-h3 .from{font-family:'Chakra Petch','Inter',sans-serif;font-size:14px;font-weight:600;color:#7C3AED;letter-spacing:.2px} .VD-payg-h3 .from b{font-size:18px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;margin:0 4px} .VD-payg-cta{font-size:14px;font-weight:600;color:#7C3AED;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid currentColor;padding-bottom:2px} .VD-payg-cta:hover{color:#0F2A47} .VD-payg{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start} .VD-payg-tbl{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:18px;overflow:hidden} .VD-payg-row{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;align-items:center;gap:20px;padding:20px 28px;border-bottom:1px solid rgba(15,42,71,0.08)} .VD-payg-row:last-child{border-bottom:0} .VD-payg-row.head{background:#FAFAFE;padding:14px 28px} .VD-payg-row.head div{font-size:13px;font-weight:600;color:#94a3b8;letter-spacing:.2px;text-transform:uppercase;font-family:'Chakra Petch','Inter',sans-serif} .VD-payg-tier{font-size:15.5px;font-weight:600;color:#0F2A47;letter-spacing:-.1px} .VD-payg-price{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;color:#0F2A47;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1} .VD-payg-price small{font-size:13px;color:#94a3b8;font-weight:500;letter-spacing:0;margin-left:4px} .VD-payg-bar{position:relative;height:8px;background:rgba(167,139,250,0.14);border-radius:99px;overflow:hidden} .VD-payg-bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(135deg,#A855F7,#7C3AED);border-radius:99px} .VD-payg-row{grid-template-columns:1fr auto} .VD-payg-row>*:nth-child(3){display:none} .VD-payg-side{display:flex;flex-direction:column;gap:14px;padding:28px 26px;background:linear-gradient(180deg,#FAFAFE 0%,#F6F4FB 100%);border:1px solid rgba(124,58,237,0.16);border-radius:18px} .VD-payg-side h4{margin:0;font-size:14px;font-weight:700;color:#0F2A47;letter-spacing:-.1px} .VD-payg-side ul{margin:6px 0 auto;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px} .VD-payg-side li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:#475569;text-wrap:pretty} .VD-payg-side li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid #7C3AED;border-bottom:2px solid #7C3AED;transform:rotate(-45deg)} .VD-payg-side li b{color:#0F2A47;font-weight:600;font-variant-numeric:tabular-nums} .VD-payg-side .start{appearance:none;border:0;cursor:pointer;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 18px;border-radius:10px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:14.5px;font-weight:700;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(124,58,237,0.25);transition:all .15s;box-sizing:border-box} .VD-payg-side .start:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);transform:translateY(-1px);box-shadow:0 12px 26px rgba(124,58,237,0.36)} /* ---- Monthly (secondary block) ---- */ .VD-mon-wrap{margin-top:8px} .VD-mon-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:18px;padding-top:32px;border-top:1px dashed rgba(15,42,71,0.16)} .VD-mon-h3{margin:0;font-size:18px;font-weight:700;color:#0F2A47;letter-spacing:-.2px;display:inline-flex;align-items:baseline;gap:12px} .VD-mon-h3 .from{font-family:'Chakra Petch','Inter',sans-serif;font-size:13px;font-weight:600;color:#64748b;letter-spacing:.2px} .VD-mon-h3 .from b{font-size:16px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:#7C3AED;margin:0 4px} .VD-mon-h3 .desc{font-size:13.5px;font-weight:500;color:#94a3b8;letter-spacing:0;margin-left:4px} .VD-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .VD-plan{background:#fff;border:1px solid rgba(15,42,71,0.10);border-radius:14px;padding:22px 22px;display:flex;flex-direction:column;gap:12px;transition:all .2s;position:relative} .VD-plan:hover{border-color:#7C3AED;box-shadow:0 12px 28px rgba(15,42,71,0.08);transform:translateY(-2px)} .VD-plan.featured{background:#0F2A47;color:#fff;border-color:#0F2A47} .VD-plan.featured:hover{box-shadow:0 14px 32px rgba(15,42,71,0.30)} .VD-plan-rec{position:absolute;top:-10px;left:18px;background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff;padding:4px 10px;font-size:13px;font-weight:700;letter-spacing:.2px;border-radius:99px;box-shadow:0 4px 12px rgba(124,58,237,0.30)} .VD-plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .VD-plan-name{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px;color:#0F2A47} .VD-plan.featured .VD-plan-name{color:#fff} .VD-plan-tb{font-family:'Chakra Petch','Inter',sans-serif;font-size:14px;font-weight:600;color:#7C3AED;letter-spacing:-.2px;font-variant-numeric:tabular-nums} .VD-plan.featured .VD-plan-tb{color:#C4B5FD} .VD-plan-price{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:#0F2A47;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1;display:flex;align-items:baseline;gap:5px} .VD-plan.featured .VD-plan-price{color:#fff} .VD-plan-price .u{font-size:13px;color:#94a3b8;font-weight:500;letter-spacing:0} .VD-plan.featured .VD-plan-price .u{color:rgba(255,255,255,0.6)} .VD-plan.enterprise{background:linear-gradient(135deg,#0F2A47 0%,#1e3a5f 100%);color:#fff;border-color:transparent} .VD-plan.enterprise .VD-plan-name{color:#fff} .VD-plan.enterprise .VD-plan-tb{color:#C4B5FD} .VD-plan.enterprise .VD-plan-price{color:#fff;font-size:18px} .VD-plan-cta{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px 16px;border-radius:9px;font-family:'Noto Sans HK','Inter',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:-.1px;text-decoration:none;transition:all .18s;box-sizing:border-box;background:#F3EEFE;color:#7C3AED;margin-top:auto} .VD-plan-cta:hover{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff} .VD-plan.featured .VD-plan-cta{background:linear-gradient(135deg,#A855F7 0%,#7C3AED 100%);color:#fff} .VD-plan.featured .VD-plan-cta:hover{background:linear-gradient(135deg,#9333EA 0%,#6D28D9 100%);color:#fff} .VD-plan.enterprise .VD-plan-cta{background:#fff;color:#7c3aed} .VD-plan.enterprise .VD-plan-cta:hover{background:#F3EEFE;color:#7c3aed} @media (max-width: 1024px){ .VD-prc{padding:var(--section-pad-y-t) 0} .VD-prc-head{grid-template-columns:1fr;gap:18px;align-items:start} .VD-payg{grid-template-columns:1fr} .VD-plans{grid-template-columns:repeat(2,1fr)} } @media (max-width: 640px){ .VD-prc{padding:var(--section-pad-y-m) 0} .VD-prc-h2{font-size:32px;letter-spacing:-1px} .VD-prc-tabs{padding:5px;gap:2px;display:flex;width:100%;flex-wrap:nowrap} .VD-prc-tab{padding:10px 12px;font-size:13px;gap:6px;flex:1;justify-content:center} .VD-prc-tab svg{width:15px;height:15px} .VD-payg-row{grid-template-columns:1fr auto;padding:16px 20px} .VD-payg-row > div:nth-child(3){display:none} .VD-plans{grid-template-columns:1fr} .VD-mon-h3{flex-wrap:wrap} } `; // ----- Region datasets ----- const VD_REGIONS = { hk: { label: '香港觀眾', icon: , paygFrom: '0.28', paygFromTo: '0.60', monthlyFrom: '378', payg: [ { tier: '首 5 TB', price: '0.60', pct: 100 }, { tier: '5 – 10 TB', price: '0.50', pct: 84 }, { tier: '10 – 50 TB', price: '0.40', pct: 67 }, { tier: '50 – 100 TB', price: '0.35', pct: 58 }, { tier: '100 TB 以上', price: '0.28', pct: 47 }], plans: [ { name: '基本型', tb: '1 TB', monthly: '378' }, { name: '經濟型', tb: '5 TB', monthly: '1,688', featured: true }, { name: '標準型', tb: '20 TB', monthly: '5,628' }, { name: '專業型', tb: '50 TB', monthly: '12,500' }, { name: '進階型', tb: '100 TB', monthly: '20,000' }, { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true }] }, cn: { label: '中國內地觀眾', icon: , paygFrom: '0.90', paygFromTo: '1.80', monthlyFrom: '1,000', payg: [ { tier: '首 5 TB', price: '1.80', pct: 100 }, { tier: '5 – 10 TB', price: '1.55', pct: 86 }, { tier: '10 – 50 TB', price: '1.30', pct: 72 }, { tier: '50 – 100 TB', price: '1.10', pct: 61 }, { tier: '100 TB 以上', price: '0.90', pct: 50 }], plans: [ { name: '基本型', tb: '1 TB', monthly: '1,000' }, { name: '經濟型', tb: '5 TB', monthly: '4,500', featured: true }, { name: '標準型', tb: '20 TB', monthly: '15,000' }, { name: '專業型', tb: '50 TB', monthly: '33,750' }, { name: '進階型', tb: '100 TB', monthly: '60,750' }, { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true }] }, global: { label: '全球觀眾', icon: , paygFrom: '0.40', paygFromTo: '0.80', monthlyFrom: '628', payg: [ { tier: '首 5 TB', price: '0.80', pct: 100 }, { tier: '5 – 10 TB', price: '0.70', pct: 88 }, { tier: '10 – 50 TB', price: '0.60', pct: 75 }, { tier: '50 – 100 TB', price: '0.50', pct: 63 }, { tier: '100 TB 以上', price: '0.40', pct: 50 }], plans: [ { name: '基本型', tb: '1 TB', monthly: '628' }, { name: '經濟型', tb: '5 TB', monthly: '2,878', featured: true }, { name: '標準型', tb: '20 TB', monthly: '10,000' }, { name: '專業型', tb: '50 TB', monthly: '22,500' }, { name: '進階型', tb: '100 TB', monthly: '37,500' }, { name: '企業型', tb: '> 100 TB', monthly: '聯絡銷售', enterprise: true }] } }; const Arrow = () => ; function VideoPricing() { const [region, setRegion] = useVDPrcState('hk'); const r = VD_REGIONS[region]; return ( <>

按目標觀眾地區選擇計劃

所有方案內建 免費 SSL 證書、WAF 與 DDoS 防護。港幣計價、先用後付，月度發票清楚列出實際用量。

{/* Region tabs */}
{['hk', 'cn', 'global'].map((k) => )}
{/* ---------- PAYG (primary) ---------- */}

按用量計費 由 HK${r.paygFrom} / GB 起

月度流量級別
單價 / GB
相對成本
{r.payg.map((t, i) =>
{t.tier}
HK${t.price}/ GB
)}

請求數計費

  • HTTP / HTTPS 請求 首 2,000,000 次免費
  • 其後 HK$0.065 / 10,000 次
  • 毋須長期合約、毋須最低用量承諾
以按用量方案開始
{/* ---------- Monthly (secondary) ---------- */}

月費計劃 由 HK${r.monthlyFrom} / 月起

{r.plans.map((p, i) =>
{p.featured && 最受歡迎}

{p.name}

{p.tb}
{p.enterprise ? {p.monthly} : <>HK${p.monthly}/ 月}
{p.enterprise ? 聯絡銷售 : 馬上申請 }
)}
); } window.VideoPricing = VideoPricing;