feat: boost

app/components/Header.vue

@@ -28,17 +28,17 @@
               <span>部署 30 秒，省心 365 天</span>
             </div>
           </NuxtLink>
-          <NuxtLink to="/pc/products/sub3" class="dropdown-item">
+          <NuxtLink to="/pc/products/dns" class="dropdown-item">
             <img class="item-img" src="~/assets/svg/header/icon3.svg" alt="DNS 全球解析">
             <div class="item-text">
               <p>DNS 全球解析</p>
               <span>把地球缩成局域网——全球 280+ 节点实时同步</span>
             </div>
           </NuxtLink>
-          <NuxtLink to="/pc/products/sub4" class="dropdown-item">
-            <img class="item-img" src="~/assets/svg/header/icon4.svg" alt="高仿服务器">
+          <NuxtLink to="/pc/products/boost" class="dropdown-item">
+            <img class="item-img" src="~/assets/svg/header/icon4.svg" alt="高防服务器">
             <div class="item-text">
-              <p>高仿服务器</p>
+              <p>高防服务器</p>
               <span>单台扛 1.5T，秒级自动扩容</span>
             </div>
           </NuxtLink>

app/components/products/Defense.vue

@@ -0,0 +1,173 @@
+<template>
+  <section class="defense-section">
+    <div class="defense-container">
+      <div class="defense-header">
+        <h2>真正实现秒级抵御</h2>
+        <p>让高防服务器在DDoS攻击中守护您的业务无忧</p>
+      </div>
+
+      <div class="defense-grid">
+        <!-- Row 1 -->
+        <div v-mouse-glow class="defense-card">
+          <div class="card-title">
+            <div>
+              <h4>美/日/港三地高防节点</h4>
+              <h4>灵活部署，助您业务即刻抵御DDoS风</h4>
+            </div>
+          </div>
+          <div class="card-content">
+            <ul>
+              <li>• 美国节点：立足全球网络核心，提供卓越的欧美访问体验与高规格防御带宽，是进军国际市场的战略支点。</li>
+              <li>• 日本节点：作为东亚数据枢纽，为日本、韩国及泛亚地区用户提供超低延迟访问，保障区域业务流畅稳定。</li>
+              <li>• 香港节点：具备独特的网络中立性与中国大陆极速连接能力，是同时服务内地用户与全球业务的绝佳桥梁。</li>
+            </ul>
+            <NuxtPicture src="/images/products/ddos.png" />
+          </div>
+        </div>
+
+        <div v-mouse-glow class="defense-card">
+          <div class="card-title">
+            <div>
+              <h4>全球分布式近源清洗，让攻击流量</h4>
+              <h4>无法触及您的业务核心</h4>
+            </div>
+            <NuxtPicture src="/images/products/spread.png" />
+          </div>
+          <div class="card-content">
+            <p>
+              我们的国际高级防御线路，为您构筑了一道远离业务核心的“防火墙”。它基于遍布全球的多个流量清洗中心，提供高达2Tbps的单点防御带宽。其核心原理在于近源清洗：当攻击流量还在国际网络枢纽中奔袭时，系统便能在最靠近攻击源的节点对其进行实时识别、分流与彻底清洗。这意味着，只有洁净、安全的流量才会被转发至您的服务器。
+            </p>
+          </div>
+        </div>
+
+        <!-- Row 2 -->
+        <div v-mouse-glow class="defense-card full-width">
+          <div class="card-title">
+            <div>
+              <h4>从全局架构到智能边缘，为您重定义“安全”与“速度”</h4>
+              <p>
+                我们提供的不仅是一个高防节点，而是一张<span>深度融合安全能力与全球加速的智能网络。</span>
+                我们深知，传统的“CDN加速”与“高防服务器”是分离的两层，这常常意味着复杂的配置与潜在的性能损耗。因此，我们从根本上重新设计，
+                <span>基于完整的全球智能网络，原生构建了具备强大防护能力的CDN节点。</span>
+                每一个CDN节点，都原生集成了与骨干网同级的DDoS清洗与Web应用加速能力。
+              </p>
+            </div>
+          </div>
+          <NuxtPicture width="256" height="auto" class="defense-image" src="/images/products/sd.png" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup></script>
+<style lang="scss" scoped>
+.defense-section {
+  // padding: 80px 0;
+  color: #fff;
+
+  .defense-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  .defense-header {
+    text-align: center;
+    margin-bottom: 80px;
+
+    h2 {
+      margin-bottom: 30px;
+      font-size: 45px;
+      font-weight: 400;
+      line-height: 45px;
+    }
+
+    p {
+      font-size: 45px;
+      font-weight: 400;
+      line-height: 45px;
+      background: linear-gradient(90deg, #A2C2FF 5.58%, #A47DFF 89.68%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .defense-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+  }
+
+  .defense-card {
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.10);
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 22px;
+
+    &:hover {
+      border: 1px solid #5347FF;
+      background: linear-gradient(124deg, rgba(82, 91, 255, 0.07) -21.2%, rgba(144, 65, 255, 0.07) 72.72%);
+    }
+
+    &.full-width {
+      grid-column: 1 / -1;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 36px;
+      padding: 50px 32px 0;
+
+      p {
+        width: 744px;
+        margin-top: 20px;
+        line-height: 26px;
+      }
+
+      span {
+        color: #BEB9FF;
+      }
+    }
+
+    .card-title {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+
+      h4 {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 26px;
+      }
+
+      p {
+        color: rgba(255, 255, 255, 0.60);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 26px;
+      }
+    }
+
+    .card-content {
+      flex: 1;
+      display: flex;
+      color: rgba(255, 255, 255, 0.60);
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 26px;
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin-top: 20px;
+      }
+    }
+
+  }
+
+}
+</style>

app/components/products/SecurityServicesSuite.vue

@@ -107,7 +107,7 @@ const products = [
 
   .bg-img {
     position: absolute;
-    top: 0;
+    top: -10%;
     left: 0;
     width: 100%;
     height: auto;
@@ -117,7 +117,7 @@ const products = [
   .service-content {
     position: relative;
     z-index: 2;
-    padding-top: 306px;
+    padding-top: 180px;
     width: 100%;
     display: flex;
     flex-direction: column;

app/pages/pc/products/boost.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <section class="video-section">
+      <video ref="videoRef" class="video-bg" src="~/assets/video/web.mp4" autoplay loop muted playsinline
+        @loadedmetadata="onVideoLoaded"></video>
+      <div class="video-title">
+        <p class="video-text">Intelligent routing / dynamic optimization / real-time processing</p>
+        <h1><span>高防</span>服务器，也能<span>极致加速</span></h1>
+        <div class="video-subtitle">
+          <p>因为我们通过全球近源清洗，把攻击挡在千里之外，为合法流量让出了纯净快车道</p>
+          <p>这得益于我们完整的智能网络架构，可以以此基础构建原生的高防CDN，</p>
+          <p>这是一套完整的解决方案，而非功能拼凑 </p>
+        </div>
+        <div class="video-btn">
+          <span>联系我们</span>
+          <Icon name="line-md:chevron-right" />
+        </div>
+      </div>
+    </section>
+    <Defense />
+    <SecurityServicesSuite />
+    <section class="tabs-section">
+      <ParticlesCanvas class="tabs-canvas" />
+      <div class="toggle-container">
+        <div class="toggle-bg" :class="{ 'right': activeTab === 'defense' }"></div>
+        <div class="toggle-option" :class="{ 'active': activeTab === 'accelerate' }" @click="activeTab = 'accelerate'">
+          加速
+        </div>
+        <div class="toggle-option" :class="{ 'active': activeTab === 'defense' }" @click="activeTab = 'defense'">
+          防御
+        </div>
+      </div>
+
+      <div class="tab-content">
+        <transition name="fade" mode="out-in">
+          <div v-if="activeTab === 'accelerate'" key="accelerate" class="content-panel">
+            <div class="content-text">
+              <h3>高防，不应以牺牲速度为代价</h3>
+              <div>
+                <p> 在传统方案中，您常常面临两难选择：开启全力防御，可能影响用户体验；追求极致速度，又需在安全上承担风险。 我们的高防服务器终结了这种取舍。它通过全球近源清洗与智能路由调度的一体化架构，实现了：</p>
+                <p> 1. <span>加速式防御</span>：攻击在远离您服务器的外围被化解，合法流量无需绕行任何冗余检查点，路径更短，延迟更低。</p>
+                <p>2. <span>无感安全</span>：用户不会感知到任何复杂的验证或速度衰减，他们只会体验到前所未有的稳定与流畅。</p>
+                <p> <span>这意味您的业务可以同时达成两个看似矛盾的目标：在顶级安全防护下，实现全球用户的极速访问。</span></p>
+              </div>
+            </div>
+            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
+          </div>
+          <div v-else key="defense" class="content-panel">
+            <div class="content-text">
+              <h3>御攻击于无形，赋业务以极速</h3>
+              <div>
+                <p>我们的高防服务器，重新定义了“防护”的含义。它并非在您的业务通道上设置一道需要检查的“减速闸”，而是在全球网络边缘提前构建了一个智能的“净化与调度层”。</p>
+                <p>• <span>对于攻击流量</span>：在靠近攻击源的枢纽进行实时清洗与拦截，使其根本无权进入您的业务通道。</p>
+                <p>• <span>对于合法用户</span>：系统自动为其选择最洁净、最短、最稳定的路径，直连您的服务器。</p>
+                <p><span>因此，您获得的不是一个“更安全但可能更慢”的服务器，而是一个 “因极致安全而更加通畅” 的业务环境。威胁被阻挡在外，而体验畅行无内。</span></p>
+
+              </div>
+            </div>
+            <NuxtPicture width="446" height="366" src="/images/products/tab-img.png" alt="tab图片" />
+          </div>
+        </transition>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup>
+definePageMeta({
+  layout: 'pc'
+})
+useHead(() => ({
+  title: '高防服务器',
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
+    { name: 'description', content: '高防服务器，也能极致加速' },
+    { name: 'keywords', content: 'CDN分发|网站保护' }
+  ]
+}))
+import SecurityServicesSuite from '~/components/products/SecurityServicesSuite.vue';
+import Defense from '~/components/products/Defense.vue';
+import ParticlesCanvas from '~/components/ParticlesCanvas.vue'
+
+const activeTab = ref('accelerate')
+
+</script>
+<style lang="scss" scoped>
+.video-section {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+
+
+  .video-bg {
+    width: 100%;
+    height: auto;
+    display: block;
+    z-index: 1;
+    position: relative;
+    object-fit: cover;
+    clip-path: inset(0 0 9% 0);
+  }
+
+  .video-title {
+    position: absolute;
+    top: 30%;
+    left: 48%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 1200px;
+    z-index: 3;
+    color: #fff;
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+      color: #D8D3FF;
+      font-size: 45px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 80px;
+
+      span {
+        color: #997DFF;
+      }
+    }
+
+    .video-subtitle {
+      color: #E2D9FF;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 30px;
+
+      >p:last-of-type {
+        color: #9C8DFE;
+        font-size: 18px;
+      }
+    }
+
+    .video-text {
+      color: #E2D9FF;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 300;
+      line-height: 30px;
+    }
+
+
+    .video-btn {
+      cursor: pointer;
+      margin-top: 30px;
+      display: flex;
+      box-sizing: border-box;
+      width: 255px;
+      height: 60px;
+      padding: 7px 21px 7px 45px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 10px;
+      background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
+    }
+  }
+}
+
+.tabs-section {
+  width: 100%;
+  height: 660px;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%);
+    width: 972px;
+    height: 604px;
+    border-radius: 972px;
+    background: linear-gradient(180deg, rgba(123, 140, 255, 0.20) 0.19%, rgba(135, 85, 255, 0.20) 46.36%);
+    filter: blur(50px);
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0%;
+    transform: translate(-50%);
+    width: 574px;
+    height: 336px;
+    border-radius: 574px;
+    background: linear-gradient(180deg, #7B8CFF 0.19%, #8755FF 46.36%);
+    filter: blur(50px);
+    z-index: 1;
+  }
+
+  .tabs-canvas {
+    position: absolute;
+    height: 200px;
+    top: -10%;
+    left: 50%;
+    transform: translate(-50%);
+  }
+
+  .toggle-container {
+    position: relative;
+    display: flex;
+    width: 200px;
+    height: 50px;
+    border-radius: 26px;
+    border: 1px solid #CCA8FF;
+    background: rgba(22, 19, 56, 0.50);
+    backdrop-filter: blur(10px);
+    cursor: pointer;
+    overflow: hidden;
+    user-select: none;
+    margin: 0 auto;
+    z-index: 10;
+    box-sizing: border-box;
+  }
+
+  .toggle-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    background: #17133B;
+    border-radius: 24px;
+    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+    z-index: 1;
+  }
+
+  .toggle-bg.right {
+    transform: translateX(100%);
+  }
+
+  .toggle-option {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    color: #9D8FFF;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 20px;
+    transition: color 0.3s;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .toggle-option.active {
+    color: #D2CCFF;
+  }
+
+  .tab-content {
+    position: relative;
+    width: 100%;
+    max-width: 1200px;
+    margin: 40px auto 0;
+    padding: 40px 15px 40px 60px;
+    box-sizing: border-box;
+    z-index: 2;
+    border-radius: 20px;
+    border-top: 2px solid #9F46FF;
+    background: rgba(28, 26, 43, 0.60);
+    backdrop-filter: blur(100px);
+    color: #fff;
+    min-height: 446px;
+
+    .content-panel {
+      display: flex;
+      gap: 56px;
+
+      .content-text {
+        margin-top: 40px;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+
+        h3 {
+          color: #FFF;
+          font-size: 45px;
+          font-weight: 400;
+          line-height: 45px;
+        }
+
+        p {
+          color: rgba(255, 255, 255, 0.60);
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 26px;
+          width: 622px;
+        }
+
+        span {
+          color: #A39DFF;
+        }
+      }
+    }
+  }
+}
+</style>

app/pages/pc/products/dns.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+<script setup>
+definePageMeta({
+  layout: 'pc'
+})
+</script>
+<style lang="scss" scoped></style>

app/pages/pc/products/web.vue

@@ -58,7 +58,6 @@
     <CaseCard />
     <div class="bg-img">
       <NuxtImg src="/images/products/web-bg2.png" class="bg-img" alt="bg-img" />
-
     </div>
   </div>
 </template>
@@ -177,12 +176,6 @@ const cards = [
       line-height: 30px;
     }
 
-    p {
-      color: #E2D9FF;
-      font-size: 20px;
-      font-weight: 400;
-      line-height: 20px;
-    }
 
     .video-btn {
       cursor: pointer;
@@ -236,14 +229,13 @@ const cards = [
   }
 
   .cdn-content {
-    display: grid;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     max-width: 1200px;
     position: relative;
     margin: 136px auto 0;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(3, 1fr);
-    gap: 20px 100px;
+    gap: 20px;
 
     &::before,
     &::after {
@@ -267,37 +259,18 @@ const cards = [
     }
 
     .cdn-item {
-      display: contents;
-    }
-
-    // First Item
-    .cdn-item:nth-child(1) {
-      .item-text {
-        grid-column: 1 / 2;
-        grid-row: 1 / 2;
-      }
-
-      .item-img {
-        grid-column: 2 / 3;
-        grid-row: 1 / 3;
-        justify-self: end;
-      }
-    }
-
-    // Second Item
-    .cdn-item:nth-child(2) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 100px;
+      
       .item-img {
-        grid-column: 1 / 2;
-        grid-row: 2 / 4;
-      }
-
-      .item-text {
-        grid-column: 2 / 3;
-        grid-row: 3 / 4;
+        flex-shrink: 0;
       }
     }
 
     .item-text {
+      flex: 1;
       display: flex;
       flex-direction: column;
       gap: 36px;