feat: web

app/assets/svg/products/web/icon.svg

@@ -0,0 +1,31 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1685)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1685_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1685)" stroke-width="1.04167"/>
+<g filter="url(#filter1_d_429_1685)">
+<path d="M39.0832 22.8326L31.9998 18.666L24.9165 22.8326V31.1659L31.9998 35.3327L39.0832 31.1659V22.8326Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linejoin="round"/>
+<path d="M32 26.166V29.4993" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.3335 24.5V29.5" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.6665 27.834V29.5007" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_429_1685_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><filter id="filter1_d_429_1685" x="20" y="16" width="28" height="28" 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 dx="2" dy="3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.490196 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_429_1685"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_429_1685" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_429_1685" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1685" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/products/web/icon2.svg

@@ -0,0 +1,32 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1705)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1705_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1705)" stroke-width="1.04167"/>
+<g filter="url(#filter1_d_429_1705)">
+<path d="M22.666 20.332H39.3327" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.334 20.332H37.6673V31.1654H24.334V20.332Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.916 24.5L35.166 25.75L33.916 27" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.084 27L26.834 25.75L28.084 24.5" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.666 34.5013L30.9993 31.168L34.3327 34.5013" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_429_1705_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><filter id="filter1_d_429_1705" x="17" y="17" width="28" height="28" 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.490196 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_429_1705"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_429_1705" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_429_1705" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1705" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/products/web/icon3.svg

@@ -0,0 +1,29 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1723)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1723_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1723)" stroke-width="1.04167"/>
+<g filter="url(#filter1_d_429_1723)">
+<path d="M24.5 20.8578L32.0036 18.668L39.5 20.8578V25.3487C39.5 30.0689 36.4792 34.2594 32.0011 35.7515C27.5217 34.2594 24.5 30.068 24.5 25.3466V20.8578Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linejoin="round"/>
+<path d="M28.25 26.5833L31.1667 29.5L36.1667 24.5" stroke="#7D46FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_429_1723_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><filter id="filter1_d_429_1723" x="20" y="17" width="28" height="28" 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 dx="2" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.490196 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_429_1723"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_429_1723" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_429_1723" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1723" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/products/web/icon4.svg

@@ -0,0 +1,17 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1693)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1693_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1693)" stroke-width="1.04167"/>
+<path d="M22.25 27C22.25 29.3206 23.1719 31.5462 24.8128 33.1872C26.4538 34.8281 28.6794 35.75 31 35.75C33.3206 35.75 35.5462 34.8281 37.1872 33.1872C38.8281 31.5462 39.75 29.3206 39.75 27C39.75 24.6794 38.8281 22.4538 37.1872 20.8128C35.5462 19.1719 33.3206 18.25 31 18.25C28.6794 18.25 26.4538 19.1719 24.8128 20.8128C23.1719 22.4538 22.25 24.6794 22.25 27Z" fill="white"/>
+<path d="M34.9778 23.0229C35.4198 23.4648 35.4198 23.9067 34.9778 24.3487L28.3487 30.9778C27.9067 31.4198 27.4648 31.4198 27.0229 30.9778C26.5809 30.5359 26.5809 30.0939 27.0229 29.652L33.652 23.0229C34.0939 22.5809 34.5359 22.5809 34.9778 23.0229Z" fill="#7D46FF"/>
+<defs>
+<clipPath id="bgblur_0_429_1693_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><linearGradient id="paint0_linear_429_1693" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1693" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/products/web/icon5.svg

@@ -0,0 +1,28 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1714)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1714_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1714)" stroke-width="1.04167"/>
+<g filter="url(#filter1_d_429_1714)">
+<path d="M22.75 32.7963V33.5913C22.75 34.7863 23.2438 36.25 24.4438 36.25H38.5638C39.7563 36.25 40.25 34.7863 40.25 33.5913V32.7963C40.25 33.9888 39.4988 34.305 38.305 34.305H24.695C23.4937 34.305 22.75 33.99 22.75 32.7963ZM22.75 20.4362V30.41C22.75 31.6025 23.4937 32.3612 24.695 32.3612H38.3062C39.5 32.3612 40.2513 31.6025 40.2513 30.41V20.4362C40.25 19.2425 39.7563 18.75 38.5638 18.75H37.0688V20.555C37.5463 20.835 37.865 21.3425 37.865 21.9313C37.865 22.8075 37.1488 23.5237 36.2738 23.5237C35.3988 23.5237 34.6825 22.8088 34.6825 21.9313C34.6825 21.3425 35 20.835 35.4775 20.555V18.75H27.5225V20.555C27.9987 20.835 28.3175 21.3425 28.3175 21.9313C28.3175 22.8075 27.6013 23.5237 26.7263 23.5237C25.8513 23.5237 25.135 22.8088 25.135 21.9313C25.135 21.3425 25.4525 20.835 25.93 20.555V18.75H24.4425C23.2438 18.75 22.75 19.2425 22.75 20.4362Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="bgblur_0_429_1714_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><filter id="filter1_d_429_1714" x="18.75" y="18.75" width="25.5015" height="25.5" 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.490196 0 0 0 0 0.27451 0 0 0 0 1 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_429_1714"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_429_1714" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_429_1714" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1714" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/assets/svg/products/web/icon6.svg

@@ -0,0 +1,18 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.082 4.27972L10.6812 7.60251C5.29467 9.04582 2.94349 13.1158 4.38608 18.4997L7.70325 30.8795C9.14981 36.2781 13.221 38.6273 18.6075 37.184L30.9935 33.8652C36.3801 32.4218 38.7312 28.3518 37.2886 22.968L33.9675 10.5734C32.5397 5.18556 28.4685 2.83641 23.082 4.27972Z" fill="url(#paint0_linear_429_1732)"/>
+<foreignObject x="10.4168" y="6.24935" width="41.6668" height="45.8333"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2.08px);clip-path:url(#bgblur_0_429_1732_clip_path);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="4.16667" d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z" fill="#7D46FF" fill-opacity="0.5" stroke="url(#paint1_linear_429_1732)" stroke-width="1.04167"/>
+<path d="M39.0059 25.1315C38.2769 23.4032 36.9724 21.9804 35.3138 21.1044C33.6552 20.2285 31.7446 19.9534 29.9063 20.3258C28.0679 20.6983 26.415 21.6953 25.2281 23.1477C24.0412 24.6001 23.3934 26.4185 23.3945 28.2942C23.3945 28.4496 23.4563 28.5986 23.5661 28.7085C23.676 28.8184 23.8251 28.8801 23.9805 28.8801H39.0586C39.214 28.8801 39.363 28.8184 39.4729 28.7085C39.5828 28.5986 39.6445 28.4496 39.6445 28.2942C39.6466 27.2077 39.4294 26.132 39.0059 25.1315Z" fill="white"/>
+<path d="M31.5193 20.9236C31.3639 20.9236 31.2148 20.8619 31.105 20.752C30.9951 20.6421 30.9333 20.4931 30.9333 20.3377V19.5C30.9333 19.3446 30.9951 19.1956 31.105 19.0857C31.2148 18.9758 31.3639 18.9141 31.5193 18.9141C31.6747 18.9141 31.8237 18.9758 31.9336 19.0857C32.0435 19.1956 32.1052 19.3446 32.1052 19.5V20.3377C32.1052 20.4931 32.0435 20.6421 31.9336 20.752C31.8237 20.8619 31.6747 20.9236 31.5193 20.9236ZM30.2611 35.1641C29.7955 35.1641 29.3472 34.9878 29.0063 34.6708C28.6654 34.3537 28.4571 33.9194 28.4234 33.4551C28.4179 33.3783 28.4275 33.3012 28.4518 33.2282C28.4761 33.1552 28.5145 33.0877 28.5649 33.0295C28.6153 32.9713 28.6766 32.9236 28.7454 32.8892C28.8142 32.8547 28.8891 32.8341 28.9659 32.8286C29.0426 32.8231 29.1197 32.8328 29.1927 32.857C29.2657 32.8813 29.3333 32.9197 29.3914 32.9701C29.4496 33.0205 29.4973 33.0818 29.5318 33.1506C29.5662 33.2194 29.5868 33.2943 29.5923 33.3711C29.6048 33.5383 29.6795 33.6948 29.8017 33.8097C29.9239 33.9246 30.0846 33.9896 30.2523 33.9918C30.42 33.994 30.5825 33.9333 30.7076 33.8216C30.8328 33.71 30.9116 33.5555 30.9285 33.3887L30.9318 33.3096V28.2955C30.9318 28.1401 30.9935 27.9911 31.1034 27.8812C31.2133 27.7713 31.3623 27.7096 31.5177 27.7096C31.6731 27.7096 31.8222 27.7713 31.932 27.8812C32.0419 27.9911 32.1037 28.1401 32.1037 28.2955V33.3457L32.0994 33.4512C32.0994 33.4592 32.0994 33.4674 32.0978 33.4754C32.0592 33.9358 31.849 34.3648 31.509 34.6776C31.169 34.9903 30.7239 35.164 30.2619 35.1641H30.2611Z" fill="white"/>
+<path d="M34 22.2109C34.7274 22.439 36.1723 23.2148 36.9294 24.6466" stroke="#7D46FF" stroke-linecap="round"/>
+<defs>
+<clipPath id="bgblur_0_429_1732_clip_path" transform="translate(-10.4168 -6.24935)"><path d="M20.1392 10.9365H42.3608C45.1454 10.9365 47.396 13.1971 47.396 15.9883V36.457C47.396 39.2482 45.1454 41.5088 42.3608 41.5088H40.9722C39.3728 41.5088 37.8121 42.1442 36.6753 43.2959L33.5112 46.4639C32.2702 47.7051 30.2484 47.7051 29.0073 46.4639H29.0063L25.8413 43.2939C24.7053 42.144 23.1644 41.5088 21.5464 41.5088H20.1392C17.3546 41.5088 15.104 39.2482 15.104 36.457V15.9883C15.104 13.1971 17.3546 10.9365 20.1392 10.9365Z"/>
+</clipPath><linearGradient id="paint0_linear_429_1732" x1="6.04666" y1="24.697" x2="43.1896" y2="15.7541" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A39DFF"/>
+<stop offset="1" stop-color="#7D46FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_429_1732" x1="16.8057" y1="12.6219" x2="47.7041" y2="41.5258" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#7D46FF" stop-opacity="0.2"/>
+</linearGradient>
+</defs>
+</svg>

app/components/PlansSection.vue

@@ -220,7 +220,7 @@
           font-size: 14px;
           font-weight: 400;
           line-height: 20px;
-          color: #ffffff;
+          color: rgba(255, 255, 255, 0.6);
 
           &::before {
             content: "";
@@ -238,11 +238,11 @@
           }
 
           &::after {
+            content: "✓";
             position: absolute;
             left: 4px;
             top: 50%;
             transform: translateY(-50%);
-            content: "✓";
             color: #fff;
             font-size: 10px;
             font-weight: bold;

app/components/home/ProductTabs.vue

@@ -162,8 +162,7 @@ const currentLayout = computed(() => {
 .product-cards-wrapper {
   width: 100%;
   max-width: 1200px;
-  margin: 81px auto 0;
-  padding: 0 20px;
+  margin: 20px auto 0;
   box-sizing: border-box;
 }
 

app/components/products/Card.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="card-container">
-    <NuxtImg class="card-bg-img" src="/images/products/bg2.jpg" alt="背景图" />
+    <NuxtImg class="card-bg-img" src="/images/products/sdk-bg2.jpg" alt="背景图" />
     <div class="card-box">
       <div v-mouse-glow class="card-item card1">
         <div class="card-title">
           <div class="title-wrapper">
-            <img src="~/assets/svg/products/lock.svg" alt="加密锁" />
+            <img src="~/assets/svg/products/sdk/lock.svg" alt="加密锁" />
             <h3>全链加密</h3>
           </div>
           <div class="stat-text">
@@ -26,7 +26,7 @@
       <div v-mouse-glow class="card-item card2">
         <div class="card-title">
           <div class="title-wrapper">
-            <img src="~/assets/svg/products/security.svg" alt="加密锁" />
+            <img src="~/assets/svg/products/sdk/security.svg" alt="加密锁" />
             <h3>DDoS 防护</h3>
           </div>
           <div class="stat-text">
@@ -37,7 +37,7 @@
       <div v-mouse-glow class="card-item card3">
         <div class="card-title">
           <div class="title-wrapper">
-            <img src="~/assets/svg/products/acceleration.svg" alt="加密锁" />
+            <img src="~/assets/svg/products/sdk/acceleration.svg" alt="加密锁" />
             <h3>智能加速</h3>
           </div>
           <div class="stat-text">

app/components/products/SecurityServicesSuite.vue

@@ -0,0 +1,7 @@
+<template>
+
+</template>
+<script setup>
+
+</script>
+<style lang="scss" scoped></style>

app/pages/pc/products/sdk.vue

@@ -48,7 +48,7 @@ const onVideoLoaded = () => {
 }
 
 useHead(() => ({
-  title: '产品中心 - DDAC',
+  title: 'SDK安全加固',
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
     { name: 'description', content: '一体化解决游戏安全问题' },
@@ -71,7 +71,7 @@ useHead(() => ({
     width: 927px;
     height: auto;
     aspect-ratio: 103/62;
-    background-image: url('/images/products/bg.png');
+    background-image: url('/images/products/sdk-bg.png');
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;

app/pages/pc/products/web.vue

@@ -21,6 +21,38 @@
         <p>让科技为您的业务发光发亮，CDN功能助力您的网站顺畅、高效、安全地运作，
           同时提供数据防范和预防技术，让您的网站免于遭受恶意攻击</p>
       </div>
+      <div class="cdn-content">
+        <div class="cdn-item">
+          <div class="item-text">
+            <h3>CDN内容分发</h3>
+            <p>
+              加速您的网站，最速达优化性能。CDN内容分发网络遍布五大洲，我们的CDN将使您的网站前所未有的更流畅，提升您的用户体验，而我们的数据中心则提供商业的资讯管理和保护，确保您的数据平安无误。
+            </p>
+          </div>
+          <NuxtPicture width="541" height="626" class="item-img" src="/images/products/cdn.png" alt="cdn分发" />
+        </div>
+        <div class="cdn-item">
+          <NuxtPicture width="500" height="692" class="item-img" src="/images/products/678yun.png" alt="678云盾" />
+          <div class="item-text">
+            <h3>网站保护</h3>
+            <p>
+              使用678云盾高防CDN网站保护，网站攻击将无处遁形!我们的专业服务团队利用最佳技术和技巧为您提供安全性和可靠性保护，确保您的业务安全运营，稳步前进。
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="cdn-bg">
+      <NuxtPicture src="/images/products/web-bg.png" width="100%" height="auto" alt="背景图" />
+    </section>
+    <section class="cdn-cards">
+      <div class="card-item" v-for="(card, index) in cards" :key="index">
+        <div class="item-title">
+          <img :src="card.icon" alt="icon" />
+          <h4>{{ card.title }}</h4>
+        </div>
+        <div class="item-text">{{ card.text }}</div>
+      </div>
     </section>
   </div>
 </template>
@@ -28,6 +60,53 @@
 definePageMeta({
   layout: 'pc'
 })
+useHead(() => ({
+  title: 'WEB安全加速',
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
+    { name: 'description', content: '智能路由/动态优化/实时处理' },
+    { name: 'keywords', content: 'CDN分发|网站保护' }
+  ]
+}))
+import icon1 from '~/assets/svg/products/web/icon.svg'
+import icon2 from '~/assets/svg/products/web/icon2.svg'
+import icon3 from '~/assets/svg/products/web/icon3.svg'
+import icon4 from '~/assets/svg/products/web/icon4.svg'
+import icon5 from '~/assets/svg/products/web/icon5.svg'
+import icon6 from '~/assets/svg/products/web/icon6.svg'
+
+const cards = [
+  {
+    icon: icon1,
+    title: 'Anycast',
+    text: '通过单一IP地址在全球范围内提供所有内容，并确保低延迟的访问体验。',
+  },
+  {
+    icon: icon2,
+    title: 'HTTP/2',
+    text: '除了支持HTTP/1.0和HTTP/1.1外，还支持更加高效的HTTP/2协议，进一步提升性能。',
+  },
+  {
+    icon: icon3,
+    title: 'HTTPS',
+    text: '提供自定义SSL/TLS证书，确保使用您选定的域名以保障内容的安全性。',
+  },
+  {
+    icon: icon4,
+    title: '失效操作',
+    text: '缓存内容删除仅需几分钟，快速响应并更新内容。',
+  },
+  {
+    icon: icon5,
+    title: '日志记录',
+    text: '与Stackdriver Logging集成，为您提供每次缓存命中与未命中的详细日志信息。',
+  },
+  {
+    icon: icon6,
+    title: '安全',
+    text: '多维度拦截（国家、URL、IP）、请求和带宽限制、CC保护。',
+  }
+]
 
 </script>
 <style lang="scss" scoped>
@@ -138,6 +217,7 @@ definePageMeta({
     }
 
     p {
+      width: 842px;
       color: #E2D9FF;
       text-align: center;
       font-size: 24px;
@@ -146,5 +226,176 @@ definePageMeta({
       line-height: 36px;
     }
   }
+
+  .cdn-content {
+    display: grid;
+    width: 100%;
+    max-width: 1200px;
+    position: relative;
+    margin: 0 auto;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(3, 1fr);
+    gap: 20px 100px;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 520px;
+      height: 520px;
+      border-radius: 50%;
+      background: rgba(137, 87, 255, 0.50);
+      filter: blur(250px);
+    }
+
+    &::before {
+      top: 12%;
+      left: -40%;
+    }
+
+    &::after {
+      right: -12%;
+      bottom: 20%;
+    }
+
+    .cdn-item {
+      display: contents;
+    }
+
+    // First Item
+    .cdn-item:nth-child(1) {
+      .item-text {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+        align-self: flex-end;
+      }
+
+      .item-img {
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
+      }
+    }
+
+    // Second Item
+    .cdn-item:nth-child(2) {
+      .item-img {
+        grid-column: 1 / 2;
+        grid-row: 2 / 4;
+      }
+
+      .item-text {
+        grid-column: 2 / 3;
+        grid-row: 3 / 4;
+        align-self: flex-start;
+      }
+    }
+
+    .item-text {
+      display: flex;
+      flex-direction: column;
+      gap: 36px;
+
+      h3 {
+        font-size: 40px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 40px;
+        background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      p {
+        width: 100%;
+        color: #E2D9FF;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 36px;
+      }
+    }
+  }
+}
+
+.cdn-bg {
+  width: 100%;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: "678CDN 特性";
+    bottom: 42px;
+    left: 50%;
+    transform: translate(-50%);
+    background: linear-gradient(90deg, #B8AFFF 20.05%, #C597FF 101.05%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 45px;
+  }
+
+  :deep(img) {
+    width: 100%;
+    height: auto;
+    display: block;
+    object-fit: cover;
+  }
+}
+
+.cdn-cards {
+  padding: 30px 0 50px 0;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 35px 30px;
+
+  .card-item {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 35px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    background: rgba(255, 255, 255, 0.10);
+
+    &:hover {
+      border: 1px solid #9162FF;
+      background: linear-gradient(129deg, rgba(122, 55, 255, 0.30) 16.95%, rgba(175, 70, 255, 0.30) 98.61%);
+    }
+
+    .item-title {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+
+      img {
+        width: 50px;
+        height: 50px;
+      }
+
+      h4 {
+        color: #FFF;
+        font-size: 34px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 36px;
+      }
+    }
+
+    .item-text {
+      width: 100%;
+      color: rgba(255, 255, 255, 0.60);
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 30px;
+    }
+  }
 }
 </style>