添加商业版页面 (#4)

* update:添加商业版内容 * update:添加插画并删除多余子版块 * update:加入商业版多发行版信息 * update:增加多cpu厂家标签 * update:商业版主页描述更新 * update:商业版标签前移到下载后面 * update:更新商业版内容“联系客服”按钮点击后的触发逻辑。展示联系方式并调用系统邮箱 * update:“关于页面”添加加入我们按钮 * update:使用@nuxt/icon引入SVG图标 * fix:修复竖屏设备导航栏由于增加”商业版“标签导致“GXDE OS"标签出界问题 * update:删除残留vue文件 * update:加入成果案例到商业版板块 * fix:修复790.29px*780px时，导航栏标签文字换行的问题 * fix:竖屏画面导航栏高度改为h-93.5 * update:更新商业版svg配图 * Standardize nav-link class styling Removed padding from nav-link classes for consistency. * fix(nav): 延后导航单行排布断点至 lg 修复视口在 780px~840px 区间时，因导航项增加导致的元素溢出和交叠问题。目前在设备大于 1024px 时才会并排显示导航栏项。 * style(commercial): 彻底重塑商业版前端插画与界面，并适配深色模式 1. 重绘场景插画：重新设计了“案例”、“客服”、“定制化”、“架构”、“分发”等 5 张大型场景 SVG 插图，升级为悬浮玻璃态面板、阵列多核管控板等高阶空间 UI 组合拼贴风，大幅提升商业严肃感与前瞻视觉。 2. 新增专属标题徽章：新设计 5 张针对各主体的立体厚重感微型徽章图（`*-title.svg`），替换原有的字体图标，增强每个模块的大型企服属性。 3. 清除硬编码与深色适配：地毯式拔除了插图内部强制锁色的 `<style>:root` 标签，并移除了用于高光的 `"#ffffff"` 死白硬层，无缝融入系统的深浅色动态 `var(--s-bg)` 等变量，适配完美的 Dark Mode 下暗色面板沉浸效果。 4. 界面版式对齐：重塑首屏第一区块（Section 1）的模拟 UI 板面为科技面板，收束卡片间距；重组了留板表单弹窗以及导航元素，令其样式表现与总应用的主界线全面拉齐。 --------- Co-authored-by: jiwangyihao <jwyh@jwyihao.top>
2026-06-22 09:44:16 +08:00 · 2026-03-04 13:42:02 +08:00
parent 059e01090c
commit be8c0d518f
13 changed files with 1047 additions and 14 deletions
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <rect x="64" y="64" width="384" height="96" rx="16" fill="var(--s-bg)"/>
+        <circle cx="112" cy="112" r="16" fill="var(--s-bg-3)"/>
+        <circle cx="160" cy="112" r="16" fill="var(--s-deco)"/>
+        <rect x="64" y="208" width="384" height="96" rx="16" fill="var(--s-bg-2)"/>
+        <circle cx="112" cy="256" r="16" fill="var(--s-bg-3)"/>
+        <circle cx="160" cy="256" r="16" fill="var(--s-bg)"/>
+        <rect x="64" y="352" width="384" height="96" rx="16" fill="var(--s-deco)"/>
+        <circle cx="112" cy="400" r="16" fill="var(--s-bg-2)"/>
+        <circle cx="160" cy="400" r="16" fill="var(--s-bg-3)"/>
+    </g>
+</svg>
@@ -0,0 +1,76 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="hubglow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="layer" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.5" />
+    </linearGradient>
+    <filter id="shadow-arch" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="-10" dy="25" stdDeviation="25" flood-opacity="0.15" />
+    </filter>
+  </defs>
+
+  <!-- Central Hub Layers -->
+  <g transform="translate(100, 420)">
+    <!-- Base Platform -->
+    <path d="M 300 100 L 500 200 L 300 300 L 100 200 Z" fill="var(--s-bg-2)" opacity="0.4" />
+    <path d="M 300 0 L 550 120 L 300 250 L 50 120 Z" fill="var(--s-bg-3)" opacity="0.3" transform="translate(0, -60)" />
+    
+    <!-- Central Core Layer -->
+    <!-- Center block -->
+    <g transform="translate(300, 50)" filter="url(#shadow-arch)">
+      <path d="M 0 0 L 100 -50 L 0 -100 L -100 -50 Z" fill="var(--s-deco)" />
+      <path d="M 0 0 L 100 -50 L 100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.7"/>
+      <path d="M 0 0 L -100 -50 L -100 50 L 0 100 Z" fill="var(--s-deco)" opacity="0.5"/>
+    </g>
+
+    <g transform="translate(300, -80)" filter="url(#shadow-arch)">
+      <path d="M 0 0 L 60 -30 L 0 -60 L -60 -30 Z" fill="var(--s-bg)" />
+      <path d="M 0 0 L 60 -30 L 60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.7"/>
+      <path d="M 0 0 L -60 -30 L -60 40 L 0 70 Z" fill="var(--s-bg)" opacity="0.5"/>
+    </g>
+    
+    <!-- Floating Architectural Nodes -->
+    <!-- Left Node -->
+    <g transform="translate(100, -20)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+    </g>
+
+    <!-- Top Node -->
+    <g transform="translate(300, -220)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-deco)" />
+    </g>
+
+    <!-- Right Node -->
+    <g transform="translate(500, -20)" filter="url(#shadow-arch)">
+       <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-3)" />
+       <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.7"/>
+       <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-3)" opacity="0.5"/>
+       <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+    </g>
+    
+      <!-- Right Node 2-->
+      <g transform="translate(420, 140)" filter="url(#shadow-arch)">
+         <path d="M 0 0 L 50 -25 L 0 -50 L -50 -25 Z" fill="var(--s-bg-2)" />
+         <path d="M 0 0 L 50 -25 L 50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.7"/>
+         <path d="M 0 0 L -50 -25 L -50 30 L 0 55 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+         <path d="M 0 -13 L 24 -25 L 0 -38 L -24 -25 Z" fill="var(--s-bg)" />
+      </g>
+
+    <!-- Connecting Datastreams -->
+    <path d="M 300 -80 L 300 -220" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="8,8" opacity="0.8" />
+    <path d="M 100 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
+    <path d="M 500 -20 L 300 80" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="8,8" />
+    <path d="M 420 90 L 300 30" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="8,8" />
+  </g>
+</svg>
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(256, 256)">
+        <rect x="-160" y="-160" width="160" height="160" rx="32" fill="var(--s-bg-2)"/>
+        <rect x="0" y="-160" width="160" height="160" rx="32" fill="var(--s-bg)"/>
+        <rect x="-160" y="0" width="160" height="160" rx="32" fill="var(--s-bg-3)"/>
+        <rect x="0" y="0" width="160" height="160" rx="32" fill="var(--s-deco)"/>
+        <circle cx="0" cy="0" r="48" fill="var(--s-bg)" opacity="0.9"/>
+        <circle cx="0" cy="0" r="16" fill="var(--s-bg-2)"/>
+    </g>
+</svg>
@@ -0,0 +1,79 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.5"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="25" stdDeviation="30" flood-opacity="0.1" />
+    </filter>
+  </defs>
+
+  <rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
+
+  <!-- Connecting Lines for Dashboard & Nodes -->
+  <path d="M 400 400 L 200 250" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 650 300" fill="none" stroke="var(--s-bg-2)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 250 600" fill="none" stroke="var(--s-bg-3)" stroke-width="4" stroke-dasharray="10 10"/>
+  <path d="M 400 400 L 600 650" fill="none" stroke="var(--s-deco)" stroke-width="4" stroke-dasharray="10 10"/>
+
+  <!-- Central Management Dashboard Panel -->
+  <g transform="translate(250, 250)" filter="url(#shadow)">
+    <!-- Base Panel - using bg instead of fixed #ffffff -->
+    <rect width="300" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-3)" stroke-width="3" opacity="0.95"/>
+    
+    <!-- Top Header -->
+    <path d="M 0 30 C 0 13.431 13.431 0 30 0 L 270 0 C 286.569 0 300 13.431 300 30 L 300 60 L 0 60 Z" fill="var(--s-bg-2)" opacity="0.5"/>
+    <circle cx="30" cy="30" r="8" fill="var(--s-deco)"/>
+    <circle cx="55" cy="30" r="8" fill="var(--s-bg-2)"/>
+    <circle cx="80" cy="30" r="8" fill="var(--s-bg-3)"/>
+    
+    <!-- Data Bars inside Dashboard -->
+    <rect x="30" y="100" width="240" height="40" rx="12" fill="var(--s-bg-2)"/>
+    <rect x="30" y="155" width="240" height="40" rx="12" fill="var(--s-bg-3)"/>
+    <rect x="30" y="210" width="160" height="40" rx="12" fill="var(--s-deco)"/>
+    <rect x="205" y="210" width="65" height="40" rx="12" fill="var(--s-bg-2)"/>
+    
+    <!-- Status Checkmarks / Dots -->
+    <circle cx="240" cy="120" r="8" fill="var(--s-bg)" opacity="0.8"/>
+    <circle cx="240" cy="175" r="8" fill="var(--s-bg)" opacity="0.8"/>
+    <circle cx="160" cy="230" r="8" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Peripheral Device 1 (Top Left) -->
+  <g transform="translate(100, 150) rotate(-15)" filter="url(#shadow)">
+    <rect width="180" height="120" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="140" height="80" rx="12" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="40" y="40" width="100" height="12" rx="6" fill="var(--s-deco)"/>
+    <circle cx="50" cy="75" r="10" fill="var(--s-bg-2)"/>
+    <rect x="70" y="70" width="50" height="10" rx="5" fill="var(--s-bg-3)"/>
+  </g>
+
+  <!-- Peripheral Device 2 (Top Right) -->
+  <g transform="translate(560, 200) rotate(10)" filter="url(#shadow)">
+    <rect width="140" height="160" rx="24" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="100" height="70" rx="15" fill="var(--s-bg)" opacity="0.95"/>
+    <rect x="20" y="100" width="100" height="20" rx="10" fill="var(--s-bg-3)"/>
+    <rect x="40" y="130" width="60" height="10" rx="5" fill="var(--s-deco)"/>
+  </g>
+
+  <!-- Peripheral Device 3 (Bottom Left) -->
+  <g transform="translate(150, 520) rotate(5)" filter="url(#shadow)">
+    <rect width="160" height="140" rx="24" fill="var(--s-bg-3)"/>
+    <rect x="20" y="20" width="120" height="60" rx="12" fill="var(--s-bg)" opacity="0.95"/>
+    <circle cx="50" cy="105" r="15" fill="var(--s-deco)"/>
+    <rect x="80" y="100" width="50" height="10" rx="5" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Peripheral Device 4 (Bottom Right) -->
+  <g transform="translate(520, 550) rotate(-8)" filter="url(#shadow)">
+    <rect width="180" height="100" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="20" y="20" width="60" height="60" rx="15" fill="var(--s-bg)" opacity="0.95"/>
+    <rect x="90" y="30" width="70" height="12" rx="6" fill="var(--s-deco)"/>
+    <rect x="90" y="55" width="50" height="12" rx="6" fill="var(--s-bg-3)"/>
+  </g>
+
+  <circle cx="350" cy="120" r="18" fill="var(--s-bg-3)"/>
+  <circle cx="680" cy="500" r="12" fill="var(--s-deco)"/>
+  <circle cx="100" cy="450" r="16" fill="var(--s-bg-2)"/>
+</svg>
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(256, 256)">
+        <rect x="-160" y="-120" width="160" height="240" rx="32" fill="var(--s-bg-2)"/>
+        <rect x="-80" y="-80" width="240" height="160" rx="40" fill="var(--s-bg)"/>
+        <rect x="0" y="40" width="160" height="80" rx="20" fill="var(--s-deco)"/>
+        <circle cx="80" cy="80" r="12" fill="var(--s-bg)" opacity="0.9"/>
+        <rect x="40" y="-20" width="80" height="16" rx="8" fill="var(--s-deco)"/>
+        <rect x="40" y="12" width="40" height="16" rx="8" fill="var(--s-bg-3)"/>
+    </g>
+</svg>
@@ -0,0 +1,55 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="-10" dy="25" stdDeviation="30" flood-opacity="0.1" />
+    </filter>
+  </defs>
+
+  <rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
+
+  <!-- Background Abstract Message Shape -->
+  <g transform="translate(400, 420) rotate(-15)">
+    <rect x="-240" y="-180" width="480" height="360" rx="60" fill="var(--s-bg)" opacity="0.8"/>
+  </g>
+
+  <!-- Mail / Contact Card floating in front -->
+  <g transform="translate(160, 220)" filter="url(#shadow)">
+    <!-- Base Card -->
+    <rect width="460" height="300" rx="30" fill="var(--s-bg)" stroke="var(--s-bg-2)" stroke-width="2" opacity="0.95"/>
+    
+    <!-- Top Bar -->
+    <path d="M 0 30 C 0 13.431 13.431 0 30 0 L 430 0 C 446.569 0 460 13.431 460 30 L 460 80 L 0 80 Z" fill="var(--s-bg-2)"/>
+    <circle cx="50" cy="40" r="16" fill="var(--s-bg)" opacity="0.8"/>
+    <rect x="80" y="32" width="160" height="16" rx="8" fill="var(--s-bg)" opacity="0.8"/>
+    
+    <!-- Messages Body -->
+    <rect x="40" y="110" width="220" height="50" rx="20" fill="var(--s-bg-2)"/>
+    <rect x="60" y="125" width="160" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="60" y="140" width="100" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+
+    <rect x="200" y="180" width="220" height="50" rx="20" fill="var(--s-bg-3)"/>
+    <rect x="220" y="195" width="180" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    <rect x="220" y="210" width="120" height="8" rx="4" fill="var(--s-bg)" opacity="0.9"/>
+    
+    <rect x="40" y="250" width="180" height="20" rx="10" fill="var(--s-bg-2)" opacity="0.8"/>
+  </g>
+
+  <!-- Floating Stats Card (Graph) representing Solution/Quote -->
+  <g transform="translate(520, 440) rotate(8)" filter="url(#shadow)">
+    <rect width="200" height="220" rx="30" fill="var(--s-bg)" stroke="var(--s-deco)" stroke-width="3" opacity="0.95"/>
+    <rect x="30" y="30" width="140" height="140" rx="70" fill="none" stroke="var(--s-bg-2)" stroke-width="20"/>
+    <path d="M 100 30 A 70 70 0 0 1 170 100" fill="none" stroke="var(--s-deco)" stroke-width="20" stroke-linecap="round"/>
+    <circle cx="100" cy="100" r="24" fill="var(--s-bg-3)"/>
+    <rect x="40" y="180" width="120" height="16" rx="8" fill="var(--s-bg-2)"/>
+  </g>
+
+  <!-- Accent Elements -->
+  <circle cx="680" cy="220" r="15" fill="var(--s-deco)"/>
+  <circle cx="150" cy="580" r="25" fill="var(--s-bg-3)"/>
+  <rect x="620" y="160" width="40" height="40" rx="10" fill="var(--s-deco)" transform="rotate(25 640 180)"/>
+  <circle cx="120" cy="380" r="15" fill="var(--s-bg-2)"/>
+</svg>
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <circle cx="160" cy="160" r="64" fill="var(--s-bg-3)"/>
+        <circle cx="352" cy="112" r="48" fill="var(--s-bg-2)"/>
+        <circle cx="112" cy="352" r="48" fill="var(--s-bg)"/>
+        <path d="M 224 224 L 400 352 C 430 376 430 416 400 440 C 370 464 330 464 300 440 L 124 316 Z" fill="var(--s-deco)"/>
+        <circle cx="350" cy="400" r="16" fill="var(--s-bg)"/>
+    </g>
+</svg>
@@ -0,0 +1,49 @@
+<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="var(--s-bg)" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="glass" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg)" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="var(--s-bg-2)" stop-opacity="0.3" />
+    </linearGradient>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="25" stdDeviation="30" flood-opacity="0.1" />
+    </filter>
+  </defs>
+  
+  <rect x="0" y="0" width="800" height="800" fill="url(#glow)" />
+  
+  <!-- Base Device Layer -->
+  <g transform="translate(150, 200) rotate(-10)" filter="url(#shadow)">
+    <rect width="500" height="400" rx="40" fill="url(#glass)" stroke="var(--s-bg-3)" stroke-width="4"/>
+    <rect x="30" y="30" width="440" height="340" rx="24" fill="var(--s-bg)"/>
+    
+    <!-- UI elements representing customization -->
+    <rect x="50" y="50" width="200" height="30" rx="15" fill="var(--s-bg-2)" />
+    <!-- Content Cards -->
+    <rect x="50" y="110" width="180" height="120" rx="20" fill="var(--s-deco)" opacity="0.8" />
+    <rect x="250" y="110" width="120" height="120" rx="20" fill="var(--s-bg-3)" />
+    <rect x="390" y="110" width="60" height="120" rx="20" fill="var(--s-bg-2)" />
+    <!-- Bottom Dashboard elements -->
+    <circle cx="100" cy="290" r="40" fill="var(--s-bg-3)" />
+    <rect x="160" y="270" width="290" height="20" rx="10" fill="var(--s-bg-2)" />
+    <rect x="160" y="310" width="150" height="20" rx="10" fill="var(--s-deco)" opacity="0.5" />
+  </g>
+
+  <!-- Floating Customized Panels -->
+  <g transform="translate(500, 480) rotate(15)" filter="url(#shadow)">
+    <rect width="200" height="150" rx="20" fill="url(#glass)" stroke="var(--s-deco)" stroke-width="4"/>
+    <circle cx="100" cy="75" r="30" fill="var(--s-deco)" />
+  </g>
+  <g transform="translate(100, 520) rotate(-5)" filter="url(#shadow)">
+    <rect width="220" height="80" rx="40" fill="var(--s-bg-3)"/>
+    <circle cx="40" cy="40" r="20" fill="var(--s-bg)" />
+    <rect x="80" y="30" width="100" height="20" rx="10" fill="var(--s-bg)" />
+  </g>
+  
+  <path d="M 650 150 L 670 150 M 660 140 L 660 160" stroke="var(--s-deco)" stroke-width="4" stroke-linecap="round"/>
+  <path d="M 120 280 L 140 280 M 130 270 L 130 290" stroke="var(--s-bg-3)" stroke-width="4" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+
+    <g>
+        <circle cx="256" cy="256" r="80" fill="var(--s-deco)"/>
+        <circle cx="256" cy="64" r="48" fill="var(--s-bg)"/>
+        <circle cx="256" cy="448" r="48" fill="var(--s-bg-2)"/>
+        <circle cx="64" cy="256" r="48" fill="var(--s-bg-3)"/>
+        <circle cx="448" cy="256" r="48" fill="var(--s-bg)"/>
+        <path d="M 256 112 L 256 176" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 256 400 L 256 336" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 112 256 L 176 256" stroke="var(--s-deco)" stroke-width="24"/>
+        <path d="M 400 256 L 336 256" stroke="var(--s-deco)" stroke-width="24"/>
+    </g>
+</svg>
@@ -0,0 +1,67 @@
+<svg viewBox="-500 -500 1000 1000" xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feDropShadow dx="0" dy="20" stdDeviation="25" flood-color="var(--s-bg-3)" flood-opacity="0.25" />
+    </filter>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--s-bg-2)" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="var(--s-bg-3)" stop-opacity="0.9"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Orbital patterns -->
+  <g opacity="0.6" stroke="var(--s-bg)" stroke-width="4" fill="none">
+    <ellipse cx="0" cy="0" rx="350" ry="150" transform="rotate(-25)" stroke-dasharray="25 10 5 10" />
+    <ellipse cx="0" cy="0" rx="400" ry="180" transform="rotate(25)" stroke-dasharray="10 20" stroke-width="8"/>
+  </g>
+
+  <!-- Central Hub (Spark Store) -->
+  <g filter="url(#shadow)">
+    <!-- Base aura -->
+    <circle cx="0" cy="0" r="110" fill="url(#grad1)"/>
+    <!-- Overlapping geometry -->
+    <circle cx="0" cy="0" r="70" fill="var(--s-deco)" opacity="0.4"/>
+    <rect x="-35" y="-35" width="70" height="70" rx="15" fill="var(--s-bg)" transform="rotate(45)"/>
+    <circle cx="0" cy="0" r="15" fill="var(--s-bg-3)" />
+  </g>
+
+  <!-- Outer orbiting nodes -->
+  <!-- Node 1: UOS / Deepin (Diamond-like) -->
+  <g transform="translate(180, -260) rotate(-25)" filter="url(#shadow)">
+     <rect x="-45" y="-45" width="90" height="90" rx="20" transform="rotate(45)" fill="var(--s-bg-2)"/>
+     <rect x="-25" y="-25" width="50" height="50" rx="10" transform="rotate(45)" fill="var(--s-deco)" opacity="0.5"/>
+  </g>
+  <path d="M 60 -80 L 140 -200" stroke="var(--s-deco)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 2: Kylin (Hexagon) -->
+  <g transform="translate(-280, 100) rotate(15)" filter="url(#shadow)">
+     <path d="M 0 -60 L 52 -30 L 52 30 L 0 60 L -52 30 L -52 -30 Z" fill="var(--s-bg-3)"/>
+     <circle cx="0" cy="0" r="25" fill="var(--s-bg)"/>
+  </g>
+  <path d="M -90 30 L -210 75" stroke="var(--s-bg-3)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 3: Fangde (Tech Container) -->
+  <g transform="translate(300, 180) rotate(-10)" filter="url(#shadow)">
+     <rect x="-60" y="-50" width="120" height="100" rx="25" fill="var(--s-bg)"/>
+     <rect x="-35" y="-25" width="70" height="50" rx="15" fill="var(--s-bg-2)"/>
+     <circle cx="-45" cy="-35" r="5" fill="var(--s-deco)"/>
+     <circle cx="45" cy="35" r="5" fill="var(--s-deco)"/>
+  </g>
+  <path d="M 80 50 L 230 140" stroke="var(--s-bg)" stroke-width="5" stroke-dasharray="8,8" opacity="0.7"/>
+
+  <!-- Node 4: Small satellite -->
+  <g transform="translate(-150, -180)" filter="url(#shadow)">
+    <circle cx="0" cy="0" r="30" fill="var(--s-deco)" opacity="0.8"/>
+  </g>
+  <path d="M -60 -60 L -120 -150" stroke="var(--s-deco)" stroke-width="3" stroke-dasharray="5,5" opacity="0.5"/>
+
+
+  <!-- Floating particles -->
+  <g filter="url(#shadow)">
+    <circle cx="360" cy="-60" r="20" fill="var(--s-bg)" opacity="0.6"/>
+    <circle cx="-60" cy="280" r="15" fill="var(--s-bg-3)" opacity="0.8"/>
+    <rect x="200" y="-50" width="15" height="15" rx="4" fill="var(--s-deco)" opacity="0.5"/>
+    <rect x="-100" y="150" width="20" height="20" rx="5" fill="var(--s-bg-2)" transform="rotate(30)"/>
+  </g>
+</svg>