feat(about): 添加安全产品矩阵展示和流程图优化

新增安全产品矩阵卡片组件，包含5种产品展示及样式
优化流程图布局，添加内容区块和底部说明区域
添加相关SVG图标资源

app/assets/svg/about/card-icon1.svg

@@ -0,0 +1,61 @@
+<svg width="82" height="108" viewBox="0 0 82 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-0.00017643" y="-6.45703" width="81.9613" height="113.839"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_1491_4573_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_dddd_1491_4573)" data-figma-bg-blur-radius="9">
+<rect x="13.9805" y="2.54297" width="54" height="54" rx="15" fill="url(#paint0_linear_1491_4573)" fill-opacity="0.4"/>
+<rect x="14.9805" y="3.54297" width="52" height="52" rx="14" stroke="url(#paint1_linear_1491_4573)" stroke-width="2"/>
+<g filter="url(#filter1_d_1491_4573)">
+<mask id="path-3-outside-1_1491_4573" maskUnits="userSpaceOnUse" x="27.7148" y="15.9297" width="27" height="27" fill="black">
+<rect fill="white" x="27.7148" y="15.9297" width="27" height="27"/>
+<path d="M52.2482 29.1964C52.2482 35.4188 47.2039 40.463 40.9815 40.463C34.7591 40.463 29.7148 35.4188 29.7148 29.1964M52.2482 29.1964C52.2482 22.9739 47.2039 17.9297 40.9815 17.9297C34.7591 17.9297 29.7148 22.9739 29.7148 29.1964M52.2482 29.1964H29.7148H52.2482Z"/>
+</mask>
+<path d="M52.2482 29.1964H50.2482C50.2482 34.3142 46.0993 38.463 40.9815 38.463V40.463V42.463C48.3085 42.463 54.2482 36.5233 54.2482 29.1964H52.2482ZM40.9815 40.463V38.463C35.8637 38.463 31.7148 34.3142 31.7148 29.1964H29.7148H27.7148C27.7148 36.5233 33.6545 42.463 40.9815 42.463V40.463ZM52.2482 29.1964H54.2482C54.2482 21.8694 48.3085 15.9297 40.9815 15.9297V17.9297V19.9297C46.0993 19.9297 50.2482 24.0785 50.2482 29.1964H52.2482ZM40.9815 17.9297V15.9297C33.6545 15.9297 27.7148 21.8694 27.7148 29.1964H29.7148H31.7148C31.7148 24.0785 35.8637 19.9297 40.9815 19.9297V17.9297ZM52.2482 29.1964V27.1964H29.7148V29.1964V31.1964H52.2482V29.1964Z" fill="white" mask="url(#path-3-outside-1_1491_4573)"/>
+<path d="M40.9795 16.9297C41.9565 16.9297 42.7752 17.4486 43.4062 18.1426C44.037 18.8363 44.5596 19.7845 44.9775 20.8711C45.8159 23.051 46.3135 25.9947 46.3135 29.1963C46.3135 32.3981 45.816 35.3425 44.9775 37.5225C44.5596 38.6089 44.0369 39.5564 43.4062 40.25C42.7752 40.944 41.9565 41.4629 40.9795 41.4629C40.0027 41.4628 39.1847 40.9439 38.5537 40.25C37.923 39.5564 37.4003 38.609 36.9824 37.5225C36.144 35.3425 35.6465 32.3981 35.6465 29.1963C35.6465 25.9946 36.1441 23.051 36.9824 20.8711C37.4004 19.7844 37.9229 18.8363 38.5537 18.1426C39.1847 17.4487 40.0027 16.9298 40.9795 16.9297Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M52.248 28.6953C52.5242 28.6953 52.748 28.9192 52.748 29.1953C52.748 29.4715 52.5242 29.6953 52.248 29.6953H29.7148C29.4387 29.6953 29.2148 29.4715 29.2148 29.1953C29.2148 28.9192 29.4387 28.6953 29.7148 28.6953H52.248Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dddd_1491_4573" x="-0.00017643" y="-6.45703" width="81.9613" height="113.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.54194"/>
+<feGaussianBlur stdDeviation="2.54194"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.415686 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4573"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.89677"/>
+<feGaussianBlur stdDeviation="4.44839"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.415686 0 0 0 0 1 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1491_4573" result="effect2_dropShadow_1491_4573"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20.3355"/>
+<feGaussianBlur stdDeviation="6.35484"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.415686 0 0 0 0 1 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_1491_4573" result="effect3_dropShadow_1491_4573"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="36.8581"/>
+<feGaussianBlur stdDeviation="6.99032"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.415686 0 0 0 0 1 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_1491_4573" result="effect4_dropShadow_1491_4573"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1491_4573" result="shape"/>
+</filter>
+<clipPath id="bgblur_0_1491_4573_clip_path" transform="translate(0.00017643 6.45703)"><rect x="13.9805" y="2.54297" width="54" height="54" rx="15"/>
+</clipPath><filter id="filter1_d_1491_4573" x="23.7148" y="15.9297" width="34.5332" height="34.6133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.216346 0 0 0 0 0 0 0 0 0 0.649038 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4573"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1491_4573" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1491_4573" x1="62.1788" y1="5.3122" x2="15.1276" y2="-83.725" gradientUnits="userSpaceOnUse">
+<stop stop-color="#985CFF"/>
+<stop offset="1" stop-color="#EBDCFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1491_4573" x1="54.9805" y1="47.543" x2="28.4805" y2="12.543" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.598295" stop-color="#8F6AFF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/about/card-icon2.svg

@@ -0,0 +1,48 @@
+<svg width="82" height="108" viewBox="0 0 82 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-0.00017643" y="-6.45703" width="81.9613" height="113.839"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_1491_4583_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_dddd_1491_4583)" data-figma-bg-blur-radius="9">
+<rect x="13.9805" y="2.54297" width="54" height="54" rx="15" fill="url(#paint0_linear_1491_4583)" fill-opacity="0.4"/>
+<rect x="14.9805" y="3.54297" width="52" height="52" rx="14" stroke="url(#paint1_linear_1491_4583)" stroke-width="2"/>
+<path d="M44.2275 22.582L44.6699 22.5928C49.2048 22.8228 52.8114 26.573 52.8115 31.165C52.8115 35.9055 48.968 39.749 44.2275 39.749H37.7275C32.9872 39.7488 29.1445 35.9054 29.1445 31.165C29.1447 26.4249 32.9874 22.5822 37.7275 22.582H44.2275Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M44.7744 26.3789C45.9249 26.3789 46.8582 27.3115 46.8584 28.4619C46.8584 29.6125 45.925 30.5459 44.7744 30.5459C43.624 30.5457 42.6914 29.6124 42.6914 28.4619C42.6916 27.3116 43.6241 26.3791 44.7744 26.3789Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M44.9854 31.793C46.1358 31.793 47.0692 32.7255 47.0693 33.876C47.0693 35.0266 46.1359 35.96 44.9854 35.96C43.8349 35.9598 42.9023 35.0265 42.9023 33.876C42.9025 32.7256 43.835 31.7931 44.9854 31.793Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M39.8975 30.168C40.4496 30.1681 40.8975 30.6158 40.8975 31.168C40.8975 31.7201 40.4496 32.1678 39.8975 32.168H34.4805C33.9282 32.168 33.4805 31.7203 33.4805 31.168C33.4805 30.6157 33.9282 30.168 34.4805 30.168H39.8975Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.9805 20.332C39.9805 19.7797 40.4282 19.332 40.9805 19.332C41.5328 19.332 41.9805 19.7797 41.9805 20.332V23.582C41.9805 24.1343 41.5328 24.582 40.9805 24.582C40.4282 24.582 39.9805 24.1343 39.9805 23.582V20.332Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M36.6914 33.874V28.457C36.6914 28.1809 36.9153 27.957 37.1914 27.957C37.4675 27.957 37.6914 28.1809 37.6914 28.457V33.874L37.6816 33.9746C37.635 34.2024 37.433 34.374 37.1914 34.374C36.9154 34.374 36.6916 34.15 36.6914 33.874Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_dddd_1491_4583" x="-0.00017643" y="-6.45703" width="81.9613" height="113.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.54194"/>
+<feGaussianBlur stdDeviation="2.54194"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.588235 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4583"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.89677"/>
+<feGaussianBlur stdDeviation="4.44839"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.588235 0 0 0 0 1 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1491_4583" result="effect2_dropShadow_1491_4583"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20.3355"/>
+<feGaussianBlur stdDeviation="6.35484"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.588235 0 0 0 0 1 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_1491_4583" result="effect3_dropShadow_1491_4583"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="36.8581"/>
+<feGaussianBlur stdDeviation="6.99032"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.588235 0 0 0 0 1 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_1491_4583" result="effect4_dropShadow_1491_4583"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1491_4583" result="shape"/>
+</filter>
+<clipPath id="bgblur_0_1491_4583_clip_path" transform="translate(0.00017643 6.45703)"><rect x="13.9805" y="2.54297" width="54" height="54" rx="15"/>
+</clipPath><linearGradient id="paint0_linear_1491_4583" x1="40.9805" y1="12.043" x2="-8.97323" y2="17.7601" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4696FF"/>
+<stop offset="0.963598" stop-color="#B7D6FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1491_4583" x1="74.9805" y1="45.543" x2="21.9805" y2="8.04297" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.522614" stop-color="#4696FF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/about/card-icon3.svg

@@ -0,0 +1,48 @@
+<svg width="82" height="108" viewBox="0 0 82 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-0.00017643" y="-6.45703" width="81.9613" height="113.839"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_1491_4599_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_dddd_1491_4599)" data-figma-bg-blur-radius="9">
+<rect x="13.9805" y="2.54297" width="54" height="54" rx="15" fill="url(#paint0_linear_1491_4599)" fill-opacity="0.6"/>
+<rect x="14.9805" y="3.54297" width="52" height="52" rx="14" stroke="url(#paint1_linear_1491_4599)" stroke-width="2"/>
+<path d="M51.8112 18.707H30.1445V27.3737H51.8112V18.707Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M51.8112 31.707H30.1445V40.3737H51.8112V31.707Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
+<path d="M35.0195 21.957H33.9362C33.637 21.957 33.3945 22.1995 33.3945 22.4987V23.582C33.3945 23.8812 33.637 24.1237 33.9362 24.1237H35.0195C35.3187 24.1237 35.5612 23.8812 35.5612 23.582V22.4987C35.5612 22.1995 35.3187 21.957 35.0195 21.957Z" fill="white"/>
+<path d="M35.0195 34.957H33.9362C33.637 34.957 33.3945 35.1995 33.3945 35.4987V36.582C33.3945 36.8812 33.637 37.1237 33.9362 37.1237H35.0195C35.3187 37.1237 35.5612 36.8812 35.5612 36.582V35.4987C35.5612 35.1995 35.3187 34.957 35.0195 34.957Z" fill="white"/>
+<path d="M39.3555 21.957H38.2721C37.973 21.957 37.7305 22.1995 37.7305 22.4987V23.582C37.7305 23.8812 37.973 24.1237 38.2721 24.1237H39.3555C39.6546 24.1237 39.8971 23.8812 39.8971 23.582V22.4987C39.8971 22.1995 39.6546 21.957 39.3555 21.957Z" fill="white"/>
+<path d="M39.3555 34.957H38.2721C37.973 34.957 37.7305 35.1995 37.7305 35.4987V36.582C37.7305 36.8812 37.973 37.1237 38.2721 37.1237H39.3555C39.6546 37.1237 39.8971 36.8812 39.8971 36.582V35.4987C39.8971 35.1995 39.6546 34.957 39.3555 34.957Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_dddd_1491_4599" x="-0.00017643" y="-6.45703" width="81.9613" height="113.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.54194"/>
+<feGaussianBlur stdDeviation="2.54194"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.709804 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4599"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.89677"/>
+<feGaussianBlur stdDeviation="4.44839"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.709804 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1491_4599" result="effect2_dropShadow_1491_4599"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20.3355"/>
+<feGaussianBlur stdDeviation="6.35484"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.709804 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_1491_4599" result="effect3_dropShadow_1491_4599"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="36.8581"/>
+<feGaussianBlur stdDeviation="6.99032"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.709804 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_1491_4599" result="effect4_dropShadow_1491_4599"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1491_4599" result="shape"/>
+</filter>
+<clipPath id="bgblur_0_1491_4599_clip_path" transform="translate(0.00017643 6.45703)"><rect x="13.9805" y="2.54297" width="54" height="54" rx="15"/>
+</clipPath><linearGradient id="paint0_linear_1491_4599" x1="62.1788" y1="5.31221" x2="-22.9545" y2="16.7784" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B546FF"/>
+<stop offset="1" stop-color="#EBDCFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1491_4599" x1="43.8813" y1="56.543" x2="13.9805" y2="18.043" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.522614" stop-color="#B546FF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/about/card-icon4.svg

@@ -0,0 +1,45 @@
+<svg width="82" height="108" viewBox="0 0 82 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-0.00017643" y="-6.45703" width="81.9613" height="113.839"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_1491_4609_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_dddd_1491_4609)" data-figma-bg-blur-radius="9">
+<rect x="13.9805" y="2.54297" width="54" height="54" rx="15" fill="url(#paint0_linear_1491_4609)" fill-opacity="0.4"/>
+<rect x="14.9805" y="3.54297" width="52" height="52" rx="14" stroke="url(#paint1_linear_1491_4609)" stroke-width="2"/>
+<path d="M33.3175 34.2852C31.3571 34.8733 30.1445 35.6858 30.1445 36.5832C30.1445 38.3782 34.9948 39.8332 40.9779 39.8332C46.961 39.8332 51.8112 38.3782 51.8112 36.5832C51.8112 35.6858 50.5986 34.8733 48.6382 34.2852" stroke="white" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.9831 35.4987C40.9831 35.4987 48.0247 30.8967 48.0247 25.5763C48.0247 21.7825 44.8721 18.707 40.9831 18.707C37.0941 18.707 33.9414 21.7825 33.9414 25.5763C33.9414 30.8967 40.9831 35.4987 40.9831 35.4987Z" stroke="white" stroke-width="2.16667" stroke-linejoin="round"/>
+<path d="M40.9779 28.4596C42.4736 28.4596 43.6862 27.2471 43.6862 25.7513C43.6862 24.2555 42.4736 23.043 40.9779 23.043C39.4821 23.043 38.2695 24.2555 38.2695 25.7513C38.2695 27.2471 39.4821 28.4596 40.9779 28.4596Z" stroke="white" stroke-width="2.16667" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_dddd_1491_4609" x="-0.00017643" y="-6.45703" width="81.9613" height="113.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.54194"/>
+<feGaussianBlur stdDeviation="2.54194"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0588235 0 0 0 0 0.701961 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4609"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.89677"/>
+<feGaussianBlur stdDeviation="4.44839"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0588235 0 0 0 0 0.701961 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1491_4609" result="effect2_dropShadow_1491_4609"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20.3355"/>
+<feGaussianBlur stdDeviation="6.35484"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0588235 0 0 0 0 0.701961 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_1491_4609" result="effect3_dropShadow_1491_4609"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="36.8581"/>
+<feGaussianBlur stdDeviation="6.99032"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0569127 0 0 0 0 0.701923 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_1491_4609" result="effect4_dropShadow_1491_4609"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1491_4609" result="shape"/>
+</filter>
+<clipPath id="bgblur_0_1491_4609_clip_path" transform="translate(0.00017643 6.45703)"><rect x="13.9805" y="2.54297" width="54" height="54" rx="15"/>
+</clipPath><linearGradient id="paint0_linear_1491_4609" x1="62.1788" y1="5.3122" x2="-35.5614" y2="-17.1449" gradientUnits="userSpaceOnUse">
+<stop offset="0.160529" stop-color="#4655FF"/>
+<stop offset="1" stop-color="#DCDEFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1491_4609" x1="53.9805" y1="47.543" x2="18.4805" y2="15.543" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.522614" stop-color="#4655FF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/about/card-icon5.svg

@@ -0,0 +1,47 @@
+<svg width="82" height="108" viewBox="0 0 82 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<foreignObject x="-0.00017643" y="-6.45703" width="81.9613" height="113.839"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.5px);clip-path:url(#bgblur_0_1491_4619_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_dddd_1491_4619)" data-figma-bg-blur-radius="9">
+<rect x="13.9805" y="2.54297" width="54" height="54" rx="15" fill="url(#paint0_linear_1491_4619)" fill-opacity="0.4"/>
+<rect x="14.9805" y="3.54297" width="52" height="52" rx="14" stroke="url(#paint1_linear_1491_4619)" stroke-width="2"/>
+<path d="M50.7279 20.8789H31.2279C30.6296 20.8789 30.1445 21.3639 30.1445 21.9622V37.1289C30.1445 37.7272 30.6296 38.2122 31.2279 38.2122H50.7279C51.3262 38.2122 51.8112 37.7272 51.8112 37.1289V21.9622C51.8112 21.3639 51.3262 20.8789 50.7279 20.8789Z" stroke="white" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.1445 21.9622C30.1445 21.3639 30.6296 20.8789 31.2279 20.8789H50.7279C51.3262 20.8789 51.8112 21.3639 51.8112 21.9622V25.2122H30.1445V21.9622Z" stroke="white" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.5247 29.0039L40.4414 34.9622" stroke="white" stroke-width="2.16667" stroke-linecap="round"/>
+<path d="M44.7695 29.0039L48.0195 31.7122L44.7695 34.9622" stroke="white" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.1914 29.0039L33.9414 31.7122L37.1914 34.9622" stroke="white" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_dddd_1491_4619" x="-0.00017643" y="-6.45703" width="81.9613" height="113.839" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2.54194"/>
+<feGaussianBlur stdDeviation="2.54194"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.054902 0 0 0 0 0.482353 0 0 0 0 0.74902 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1491_4619"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.89677"/>
+<feGaussianBlur stdDeviation="4.44839"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.054902 0 0 0 0 0.482353 0 0 0 0 0.74902 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1491_4619" result="effect2_dropShadow_1491_4619"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="20.3355"/>
+<feGaussianBlur stdDeviation="6.35484"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.054902 0 0 0 0 0.482353 0 0 0 0 0.74902 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow_1491_4619" result="effect3_dropShadow_1491_4619"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="36.8581"/>
+<feGaussianBlur stdDeviation="6.99032"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0540865 0 0 0 0 0.483233 0 0 0 0 0.75 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="effect3_dropShadow_1491_4619" result="effect4_dropShadow_1491_4619"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_1491_4619" result="shape"/>
+</filter>
+<clipPath id="bgblur_0_1491_4619_clip_path" transform="translate(0.00017643 6.45703)"><rect x="13.9805" y="2.54297" width="54" height="54" rx="15"/>
+</clipPath><linearGradient id="paint0_linear_1491_4619" x1="62.1788" y1="5.3122" x2="-7.95834" y2="-28.228" gradientUnits="userSpaceOnUse">
+<stop stop-color="#46ECFF"/>
+<stop offset="1" stop-color="#DCF9FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1491_4619" x1="53.4805" y1="54.043" x2="19.4805" y2="20.043" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.522614" stop-color="#46ECFF"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

app/components/about/Flowchart.vue

@@ -19,6 +19,23 @@
           <div class="flow-text">终端设备/SDK</div>
         </div>
       </div>
+      <div class="flow-content-con">
+        <div class="con-item">高仿IP</div>
+        <div class="con-item">CDN</div>
+        <div class="con-item">游戏盾</div>
+      </div>
+      <div class="flow-content-right">
+        <div class="right-item">扛攻击，让业务稳如山。</div>
+        <div class="right-item">就近分发内容，让用户访问快人一步。</div>
+        <div class="right-item">端上智能调度+加密隧道/大陆加速:</div>
+      </div>
+    </div>
+    <div class="flow-bottom">
+      <div class="btm-left">高防服务器</div>
+      <div class="btm-con">
+        <span>互联网基础设施</span><span>高防DNSSSL节点池</span>
+      </div>
+      <div class="btm-right">源站服务器</div>
     </div>
   </section>
 </template>
@@ -27,9 +44,8 @@
 <style lang="scss" scoped>
 .about-flow {
   width: 1200px;
-  margin: 0 auto;
+  margin: 72px auto 0;
   box-sizing: border-box;
-  height: 500px;
 
   .flow-title {
     position: relative;
@@ -37,7 +53,6 @@
     border: 2px solid #8B74FF;
     background: rgba(63, 51, 125, 0.30);
     color: #FFF;
-    margin-bottom: 77px;
 
     .flow-title-text {
       display: flex;
@@ -75,8 +90,8 @@
       transform: translateX(-50%);
       width: 0;
       height: 0;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
       border-top: 12px solid #8B74FF;
     }
   }
@@ -87,7 +102,6 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    justify-content: space-between;
 
     .flow-content-left {
       display: flex;
@@ -139,7 +153,209 @@
         }
       }
 
+    }
+
+    .left-sdk {
+
+      .flow-text {
+        &::before {
+          right: -56px;
+          width: 56px;
+
+        }
+
+        &::after {
+          right: -56px;
+        }
+      }
+    }
+
+    .flow-content-con {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 58px;
+      width: 376px;
+      height: 345px;
+      box-sizing: border-box;
+      border-radius: 10px;
+      border: 2px solid #8B74FF;
+      margin: 77px 80px 47px 56px;
+      background: rgba(63, 51, 125, 0.30);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: -47px;
+        transform: translateX(-50%);
+        width: 1px;
+        height: 47px;
+        background: #8B74FF;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        bottom: -47px;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 12px solid #8B74FF;
+      }
+
+      .con-item {
+        color: #FFF;
+        font-size: 20px;
+        font-weight: 400;
+        display: flex;
+        height: 55px;
+        width: 217px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 8px;
+        border: 1px solid #A39DFF;
+        background: #3F337D;
+      }
+    }
+
+    .flow-content-right {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+      align-items: center;
+
+      .right-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 20px;
+        box-sizing: border-box;
+        width: 332px;
+        height: 89px;
+        border-radius: 16px;
+        border: 1px solid #A39DFF;
+        background: #3F337D;
+        color: #FFF;
+        font-size: 20px;
+        font-weight: 400;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -65px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 65px;
+          height: 1px;
+          background: #8B74FF;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: -65px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 0;
+          height: 0;
+          border-top: 8px solid transparent;
+          border-bottom: 8px solid transparent;
+          border-right: 12px solid #8B74FF;
+        }
+      }
+    }
+  }
+
+  .flow-bottom {
+    display: flex;
+    gap: 80px;
+    color: #FFF;
+    font-size: 20px;
+
+    .btm-left,
+    .btm-con,
+    .btm-right {
+      border: 1px solid #A39DFF;
+      background: #3F337D;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 16px;
+
+    }
+
+    .btm-left {
+      position: relative;
+      margin-left: 84px;
+      width: 243px;
+      height: 89px;
 
+      &::before {
+        content: '';
+        position: absolute;
+        right: -80px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 65px;
+        height: 1px;
+        background: #8B74FF;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: -22px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-right: 12px solid #8B74FF;
+      }
+    }
+
+    .btm-con {
+      width: 376px;
+      height: 89px;
+      gap: 12px;
+    }
+
+    .btm-right {
+      position: relative;
+      width: 332px;
+      height: 89px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -80px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 65px;
+        height: 1px;
+        background: #8B74FF;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: -22px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-left: 12px solid #8B74FF;
+      }
     }
   }
 }

app/components/about/MatrixCard.vue

@@ -0,0 +1,131 @@
+<template>
+  <section class="matrix-card">
+    <div class="card-wrapper" v-for="item in cards" :key="item.icon">
+      <img class="item-icon" :src="item.icon" alt="icon">
+      <div class="card-bg"></div>
+      <div class="card-content">
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.text }}</p>
+        <span :style="{ color: item.color }">{{ item.desc }}</span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import cardIcon1 from '@/assets/svg/about/card-icon1.svg'
+import cardIcon2 from '@/assets/svg/about/card-icon2.svg'
+import cardIcon3 from '@/assets/svg/about/card-icon3.svg'
+import cardIcon4 from '@/assets/svg/about/card-icon4.svg'
+import cardIcon5 from '@/assets/svg/about/card-icon5.svg'
+
+const cards = [
+  {
+    title: 'CDN加速',
+    icon: cardIcon1,
+    text: '球加速节点分发，降低延迟提升用户访问体验。',
+    desc: '全球200+节点',
+    color: '#A39DFF'
+  },
+  {
+    title: '游戏盾',
+    icon: cardIcon2,
+    text: '专为游戏业务定制，智能调度抗DDoS，隐藏源站。',
+    desc: 'T级防御能力',
+    color: '#4696FF'
+  },
+  {
+    title: '高防服务器',
+    icon: cardIcon3,
+    text: '物理级高防机房，大带宽大防御，稳定业务运行。',
+    desc: '单节点500G+',
+    color: '#B546FF'
+  },
+  {
+    title: '高防IP',
+    icon: cardIcon4,
+    text: '弹性IP防护，精准流量清洗，零影响转发正常业务。',
+    desc: '弹性扩展1T+',
+    color: '#616EFF'
+  },
+  {
+    title: 'SDK防护',
+    icon: cardIcon5,
+    text: '端侧安全加固，链路加密通信，防篡改防抓包。',
+    desc: '端到端加密',
+    color: '#46ECFF'
+
+  }
+]
+
+
+</script>
+
+<style lang="scss" scoped>
+.matrix-card {
+  margin: 100px auto 0;
+  max-width: 1200px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 25px;
+
+  .card-wrapper {
+    position: relative;
+    width: 220px;
+    height: 180px;
+    padding-top: 32px;
+
+    .item-icon {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 10;
+    }
+
+    .card-bg {
+      position: absolute;
+      left: 0;
+      top: 24px;
+      width: 220px;
+      height: 180px;
+      border-radius: 20px;
+      border: 1px solid rgba(64, 64, 64, 0.50);
+      background: rgba(255, 255, 255, 0.10);
+      box-shadow: -20px 68px 20px 0 rgba(0, 0, 0, 0.00), -13px 43px 18px 0 rgba(0, 0, 0, 0.01), -7px 24px 15px 0 rgba(0, 0, 0, 0.04), -3px 11px 11px 0 rgba(0, 0, 0, 0.07), -1px 3px 6px 0 rgba(0, 0, 0, 0.08);
+      backdrop-filter: blur(12.5px);
+      transition: all 0.3s ease;
+      z-index: 1;
+    }
+
+    &:hover .card-bg {
+      top: 0;
+      height: 228px;
+      transform: translateY(-24px);
+    }
+
+    .card-content {
+      position: relative;
+      z-index: 2;
+      padding: 30px 14px 0;
+      font-weight: 400;
+
+      h3 {
+        margin: 0 0 12px 0;
+        font-size: 18px;
+        font-weight: 500;
+        color: #fff;
+      }
+
+      p {
+        margin: 0 0 10px 0;
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      span {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

app/pages/web/about.vue

@@ -22,10 +22,18 @@
       <p>环境下的风险抵御与运营保障水平</p>
     </section>
     <Flowchart />
+    <section class="about-matrix">
+      <h2>驱动业务持续稳定运行的全域安</h2>
+      <h2>全产品矩阵</h2>
+      <p>以全球节点、智能调度与多层防护为底座，构建覆盖业务接入、传输、抗攻击与终端安全的全</p>
+      <p>链路产品体系，为企业提供可扩展、可进化的稳态安全能力。</p>
+    </section>
+    <MatrixCard />
   </section>
 </template>
 <script setup>
 import Flowchart from '~/components/about/Flowchart.vue';
+import MatrixCard from '~/components/about/MatrixCard.vue';
 
 </script>
 <style lang="scss" scoped>
@@ -125,5 +133,29 @@ import Flowchart from '~/components/about/Flowchart.vue';
     }
   }
 
+  .about-matrix {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #FFF;
+    margin-top: 160px;
+
+    h2 {
+      font-size: 45px;
+      font-weight: 700;
+      line-height: 60px;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 36px;
+
+      &:first-of-type {
+        margin-top: 32px;
+      }
+    }
+  }
 }
 </style>