You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/10/04 23:39:51 UTC
[apisix-website] branch master updated: feat: apisix-website
redesign, add redesigned-site sections and styles (sub-pr3) (#617)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 59a754b feat: apisix-website redesign, add redesigned-site sections and styles (sub-pr3) (#617)
59a754b is described below
commit 59a754bac8d079cc73a903aa0059d0681a1baad6
Author: Shivam Singh <57...@users.noreply.github.com>
AuthorDate: Tue Oct 5 05:09:44 2021 +0530
feat: apisix-website redesign, add redesigned-site sections and styles (sub-pr3) (#617)
---
.../src/assets/images/infographs/Architecture.svg | 366 +++----
website/src/assets/images/pluginised.png | Bin 57203 -> 169638 bytes
website/src/css/customTheme.css | 1158 +++++++++++++++-----
website/src/pages/index.js | 276 ++---
website/src/pages/sections/architecture.jsx | 87 ++
website/src/pages/sections/benefits.jsx | 386 +++++++
website/src/pages/sections/comparison.jsx | 79 ++
.../src/pages/sections/components/arrowAnim.jsx | 91 +-
.../pages/sections/components/eventPosterCard.jsx | 89 +-
.../src/pages/sections/components/heroCanvas.jsx | 387 +++----
.../src/pages/sections/components/ossCanvas.jsx | 227 ++--
website/src/pages/sections/endcta.jsx | 31 +
website/src/pages/sections/features.jsx | 210 ++++
website/src/pages/sections/heroSection.jsx | 63 ++
website/src/pages/sections/newsSection.jsx | 47 +
website/src/pages/sections/opensourcePromo.jsx | 48 +
website/src/pages/showcase/styles.scss | 58 +-
website/src/theme/DocPage/index.tsx | 37 +-
website/src/theme/DocSidebar/styles.module.css | 2 +
19 files changed, 2501 insertions(+), 1141 deletions(-)
diff --git a/website/src/assets/images/infographs/Architecture.svg b/website/src/assets/images/infographs/Architecture.svg
index cdb0740..d92cbcf 100644
--- a/website/src/assets/images/infographs/Architecture.svg
+++ b/website/src/assets/images/infographs/Architecture.svg
@@ -1,245 +1,151 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1713 996">
- <g class="architecture">
- <path fill="#E2ECFF" stroke="#343A40" d="M720 129h993v866H720z"/>
- <path fill="#E2ECFF" stroke="#343A40" d="M1 129h699v866H1z"/>
- <g>
- <g>
- <path d="M125 474l474-1v321l-472-1" fill="#FD7E14"/>
- <path d="M127 473c164 1 331 2 470-1l-470 1zm0-1c164 2 330 2 471 0H127zm472 0c2 79 1 159-2 320l2-320zm-2 1c3 80 2 159 0 319V473zm1 320c-112 0-225 1-471-1l471 1zm0-1l-471 1 471-1zm-471 0c-1-72-3-141-2-318l2 318zm0 1l-1-320 1 320z" fill="#FD7E14"/>
- <path d="M599 473h1v-1h-1v1zm0 321v1h1v-1h-1zM127 473v1-1zm470-1v-1 1zm-470 0v1-1zm471 0v1-1zm1 0h1-1zm-2 320h-1 1zm0-319h1-1zm0 319h1-1zm1 1v1-1zm-471-1v-1 1zm471 0v1-1zm-471 1v-1 1zm0-1h1-1zm-2-318h1-1zm1 319a1 1 0 001 0h-1zm0-320a1 1 0 00-1 0h1zm-1 2l474-2v-1l-474 2v1zm474-2v321h1V473h-1zm0 321l-472-2v1l472 2v-1zM127 474c164 1 331 1 470-2v-1c-139 3-306 3-470 2v1zm470-3l-470 2v1l470-2v-1zm-470 2c164 2 330 2 471 0v-1c-141 2-307 2-471 0v1zm471-1H127v1h471v-1zm1 0c2 79 1 159-3 320 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="36" letter-spacing="0em">
- <tspan x="245.5" y="520.8">Apache APISIX</tspan>
- </text>
- <g>
- <g>
- <path d="M168 546l183-2-1 67-181-2" fill="#fff"/>
- <path d="M171 545l181 2-181-2zm-1 2l180-1-180 1zm180-2c-2 20 2 43 2 65l-2-65zm0 0v65-65zm1 66c-46-2-92-2-180 0h180zm-1-2c-45-1-91 0-181 1l181-1zm-181 2v-65 65zm1-1v-64 64z" fill="#fff"/>
- <path d="M351 544zm-1 67zm-179-66v-1 1zm181 2v-1 1zm-182 0v-1 1zm180-1v1-1zm0-1h-1 1zm2 65h-1 1zm-2-65h-1 1zm0 65h1-1zm1 1v1-1zm-180 0v-1 1zm179-2v-1 1zm-181 1v-1 1zm0 1h-1 1zm0-65h-1 1zm0 64a1 1 0 001 0h-1zm2-64a1 1 0 00-1 0h1zm-3 1l183-2v-1l-183 2v1zm182-3l-1 67h1l1-67h-1zm0 66l-181-2v1l181 2v-1zm-179-65l181 2v-1l-181-2v1zm181 1l-181-2v1l181 2v-1zm-182 1h180v-1H170v1zm180-1H170v1h180v-1zm-1-1c-1 10 0 21 1 32l1 33h1l-1-33c-1-11-2-22-1-32h-1zm3 65l-2-65h-1l2 65h1zm-3-65l1 65h1l [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="24.4" letter-spacing="0em">
- <tspan x="212" y="589.9">Rate limit</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M370 544l180 3v61l-179 2" fill="#fff"/>
- <path d="M371 546c65 2 136 1 177 1l-177-1zm-1-1c45-2 91-1 180 0H370zm178-1c4 26 4 49 2 65l-2-65zm2 2l-1 62 1-62zm-1 64c-42 2-80 2-181-1l181 1zm2-1H370h181zm-183 1l3-64-3 64zm1 0v-64 64z" fill="#fff"/>
- <path d="M550 547v-1 1zm0 61v1-1zm-179-62v-1 1zm177 1v1-1zm-178-2v1-1zm180 0v1-1zm-2-1h1-1zm2 65h-1 1zm0-63h1-1zm-1 62h1-1zm0 2v1-1zm-181-1v-1 1zm183 0v-1 1zm-181 0v-1 1zm-2 1h-1 1zm3-64l-1-1 1 1zm-2 64a1 1 0 101 0h-1zm0-64a1 1 0 10-1 0h1zm1-1l180 2v-1l-180-2v1zm179 2v61h1v-61h-1zm1 61l-179 2v1l179-2v-1zm-179-62c65 2 136 2 177 2v-1c-41 0-112 0-177-2v1zm177 1l-177-2v1l177 2v-1zm-178-1c45-3 91-1 180 0v-1c-89-1-135-3-180 0v1zm180-1H370v1h180v-1zm-2-1c3 26 3 49 1 65h1c2-16 2-39-1-6 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="24.5" letter-spacing="0em">
- <tspan x="430.4" y="584.5">Auth</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M168 618l181-2 1 66-181-3" fill="#fff"/>
- <path d="M167 618c48-1 90 0 181 1l-181-1zm2-2c70 2 141 1 181 1l-181-1zm182 2c-1 16-3 32-3 62l3-62zm-2 0l-1 63 1-63zm-2 64l-180-2 180 2zm2-1c-40-1-79-2-181-1l181 1zm-181-1c0-22 3-45 2-63l-2 63zm1 0v-64 64z" fill="#fff"/>
- <path d="M349 616v-1 1zm1 66h1-1zm-183-64v1-1zm181 1v-1 1zm-179-3v-1 1zm181 1v-1 1zm1 1h-1 1zm-3 62h1-1zm1-62h1-1zm-1 63h1-1zm-1 1v-1 1zm-180-2v-1 1zm182 1v1-1zm-181-1v1-1zm0 0h1-1zm2-63h-1 1zm-2 63a1 1 0 001 0h-1zm1-64a1 1 0 00-1 0h1zm-1 2l181-2v-1l-181 2v1zm180-2l2 66h1l-2-66h-1zm2 65l-181-2v1l181 2v-1zm-183-62h181v-1H167v1zm181-1H167v1h181v-1zm-179-2c70 2 141 2 181 1v-1c-40 1-111 1-181-1v1zm181 0l-181-1v1l181 1v-1zm0 2l-2 62h1l2-62h-1zm-1 62l2-62h-1l-2 62h1zm0-62l-1 63h1l1-6 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="24" letter-spacing="0em">
- <tspan x="217" y="656.2">Security</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M370 617l183 2v61l-183 3" fill="#fff"/>
- <path d="M372 619l182-1-182 1zm-1-1c48 1 96 1 180-1l-180 1zm183 0c-2 13-3 26-4 64l4-64zm-2 0c-1 18-1 39 1 63l-1-63zm1 64c-64 0-127-1-184 1l184-1zm-2 0l-180-1 180 1zm-181-1c3-22 2-44 3-64l-3 64zm2 1c-2-25-1-51-1-64l1 64z" fill="#fff"/>
- <path d="M553 619h1v-1h-1v1zm0 61zm-181-61v-1 1zm182-1v1-1zm-183 0v-1 1zm180-1v-1 1zm3 1h-1 1zm-4 64v-1l1 1h-1zm2-64h1-1zm1 63h-1 1zm0 1v1-1zm-184 1v-1 1zm182-1v-1 1zm-180-1v-1 1zm-1 0h1-1zm3-64h-1 1zm-2 65h1-1zm0-64a1 1 0 00-1 0h1zm-1-1l183 2v-1l-183-2v1zm183 2l-1 61h1l1-61h-1zm0 60l-183 3v1l183-3v-1zm-181-60h182v-1H372v1zm182-1H372v1h182v-1zm-183 0c48 1 96 1 180-1v-1c-84 2-132 2-180 1v1zm180-2l-180 1v1l180-1v-1zm2 2c-2 13-2 26-3 63l1 1c1-38 1-51 3-64h-1zm-2 64l3-64h-1l-3 63 1 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="416.2" y="656.3">Logging</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M170 691l180 2-1 63H170" fill="#fff"/>
- <path d="M171 694c39 0 82-3 180 0H171zm-2-1c64-2 125-2 180 0H169zm182-1c-1 20-2 44 0 66v-66zm-1 0c-1 21 0 42 1 64l-1-64zm-1 65c-64-3-132-4-179 0h179zm0-1l-179-1 179 1zm-180-1v-63 63zm1 1l-1-63 1 63z" fill="#fff"/>
- <path d="M350 693h1v-1h-1v1zm-1 63zm-178-62v1-1zm180 0v-1 1zm-182-1v1-1zm180 0v-1 1zm2-1h1-1zm0 66h1-1zm-1-66h-1 1zm1 64h-1 1zm-2 1v1-1zm-179 0v1-1zm179-1v-1 1zm-179-1v1-1zm-1 0h1-1zm0-63h-1 1zm0 64a1 1 0 001 0h-1zm0-63a1 1 0 00-1 0h1zm1-1l180 1v-1l-180-1v1zm180 1l-2 63h1l2-63h-1zm-1 62H170v1h179v-1zm-178-60c39-1 82-4 180-1v-1c-98-3-141 0-180 1v1zm180-2l-180 1v1l180-1v-1zm-182 1c64-3 125-3 180-1v-1c-55-2-116-2-180 1v1zm180-2l-180 1v1l180-1v-1zm2 0c-2 20-3 44 0 66h1c-3-22-2-46 0 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23" letter-spacing="0em">
- <tspan x="185.4" y="733.4">Custom plugin</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M372 690l179-2 3 67-183-4" fill="#fff"/>
- <path d="M373 688c67 5 133 2 180 0H373zm-2 2c58-1 116-2 182 0H371zm181-2v67-67zm-1 1c2 23 1 44 0 65v-65zm1 63c-67-1-130-1-180 2l180-2zm-1 1c-41 2-83 2-180 0h180zm-180 1l2-66-2 66zm0-1v-63 63z" fill="#fff"/>
- <path d="M551 688zm3 67zm-181-67v1-1zm180 0v-1 1zm-182 2v1-1zm182 0v-1 1zm-1-2h-1 1zm0 67h1-1zm-1-66h1-1zm0 65h1-1zm1-2v-1 1zm-180 2v1-1zm179-1v1-1zm-180 0v-1 1zm0 1h1-1zm2-66h-1 1zm-2 66a1 1 0 001-1l-1 1zm0-64a1 1 0 00-1 0h1zm1 1l179-2v-1l-179 2v1zm178-3l3 67h1l-3-67h-1zm4 66l-183-3v1l183 3v-1zm-181-65c67 4 133 2 180-1v-1c-47 3-113 5-180 1v1zm180-2l-180 1v1l180-1v-1zm-182 4c58-2 116-2 182-1v-1c-66-1-124-1-182 1v1zm182-2l-182 1v1l182-1v-1zm-2-1v37l1 30h1l-1-30v-37h-1zm2 67l-1-6 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="20" letter-spacing="0em">
- <tspan x="446.2" y="726.6">... ...</tspan>
- </text>
- </g>
- </g>
- <g>
- <g>
- <path d="M177 154l368-3-2 101-364 3" fill="#FEFFBF"/>
- <path d="M177 152h367-367zm0 0l366 1-366-1zm367-1l-2 104 2-104zm-1 1l1 102-1-102zm0 101c-136 2-271 1-364 1l364-1zm1 0c-105 2-211 2-367 1l367-1zm-365 0c-3-21-3-44-2-100l2 100zm-2 1c0-22 2-43 0-101v101z" fill="#FEFFBF"/>
- <path d="M545 151h1-1zm-2 101v1-1zM177 152v-1 1zm367 0v1-1zm-367 0v1-1zm366 1v-1 1zm1-2h1-1zm-2 104h1-1zm1-103h-1 1zm1 102h-1 1zm-1-1v-1 1zm-364 1v1-1zm365-1v-1 1zm-367 1v-1 1zm2-1h1-1zm-2-100h-1 1zm-1 101a1 1 0 001 0h-1zm2-101a1 1 0 00-1 0h1zm-1 1l368-2v-1l-368 2v1zm368-3l-3 101h1l3-101h-1zm-2 101l-364 2v1l364-2v-1zM177 152c90-1 178 1 367 1v-1c-189 0-277-2-367-1v1zm367 0l-367-1v1l367 1v-1zm-367 1h366v-1H177v1zm366-1H177v1h366v-1zm1-1l-1 43-1 61h1l1-61 1-43h-1zm-1 104l2-104h-1l-2 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="28" font-weight="300" letter-spacing="0em">
- <tspan x="273.9" y="211.3">Client/Service</tspan>
- </text>
- </g>
- <path d="M363 254l-2 204m1 0l-10-29 10 29zm0 0l10-29-10 29zm-12-29c6 12 9 22 11 29 4-7 8-17 10-29m-7-174l-2 205 2-205z" stroke="#000" stroke-linecap="round"/>
- <g>
- <g>
- <path d="M826 165l270 2 2 302-275 1" fill="#FE7F80"/>
- <path d="M824 166c107-1 217-1 274 1l-274-1zm0 0c75 2 150 1 274-1l-274 1zm274 0l-1 304 1-304zm0-1c2 107 2 212 0 305V165zm-1 306c-65 0-132 3-274 0h274zm1 0c-71-2-141-1-274 0h274zm-272 1c-5-100-3-202-1-306l1 306zm-2-2V166v304z" fill="#FE7F80"/>
- <path d="M1096 167h1-1zm2 302v1-1zM824 166v1-1zm274 1v-1 1zm-274-1v1-1zm274-1v1-1zm0 1h1-1zm-1 304h-1 1zm1-305h1-1zm0 305h-1 1zm-1 1v1-1zm-274 0v-1 1zm275 0v-1 1zm-274 0v1-1zm2 1h-1 1zm-1-306h-1 1zm-1 304a1 1 0 001 0h-1zm1-304h-1 1zm1 0l270 2v-1l-270-2v1zm270 1l1 302h1l-1-302h-1zm2 302l-275 1v1l275-1v-1zM824 167h274v-1H824v1zm274-1H824v1h274v-1zm-274 1c75 2 150 1 274-1v-1c-124 2-199 3-274 1v1zm274-2l-274 1v1l274-1v-1zm0 1l-2 304h1l2-304h-1zm-1 304l2-304h-1l-2 304h1zm1-305c2 107 2 [...]
- </g>
- <g>
- <g>
- <path d="M852 189l223 1-4 64-219 1" fill="#fff"/>
- <path d="M853 189c86 3 173 2 221 1l-221-1zm0 2c59 2 116 1 220 0H853zm220 2c1 14-1 25-1 63l1-63zm-1-2v63-63zm1 65c-50-2-96-4-221-2l221 2zm0-1H853h220zm-219-2c1-23-3-48-1-64l1 64zm-2 2c1-18-1-38 1-63l-1 63z" fill="#fff"/>
- <path d="M1075 190v1-1zm-4 64h1-1zm-218-65v1-1zm221 1v1-1zm-221 1v1-1zm220 0v-1 1zm0 2h1-1zm-1 63h-1 1zm0-65h1-1zm0 63h1-1zm1 2v-1 1zm-221-2v1-1zm221 1v-1 1zm-220 0v-1 1zm1-2h-1 1zm-1-64h1-1zm-1 66a1 1 0 001 0h-1zm2-63a1 1 0 00-1 0h1zm-2-2l223 1v-1l-223-1v1zm222 0l-3 64h1l3-63-1-1zm-3 63l-219 2v1l219-2v-1zm-218-63c86 3 173 2 221 1v-1c-48 1-135 2-221-1v1zm221 0l-221-1v1l221 1v-1zm-221 2c59 1 116 1 220-1v-1c-104 2-161 2-220 1v1zm220-2l-220 1v1l220-1v-1zm0 3l-1 22-1 41h1a1083 1083 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="22.5" letter-spacing="0em">
- <tspan x="866.4" y="229.7">Apache Skywalking </tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M848 379l220-1 1 67-222-1" fill="#fff"/>
- <path d="M846 380c60 1 119 1 223-2l-223 2zm1 0c47-1 95-2 222 0H847zm223 1c-1 17-2 39 1 63l-1-63zm0-1c-1 22-2 44-1 66l1-66zm-2 65l-221-2 221 2zm1 0H847h222zm-221 0c-4-25-2-52-2-64l2 64zm-1 0l-1-66 1 66z" fill="#fff"/>
- <path d="M1068 378zm1 67v1-1zm-223-65v1-1zm223-2v1-1zm-222 2v-1 1zm222 0v-1 1zm1 1h1-1zm1 63h1-1zm-1-64h1-1zm-1 66h-1 1zm-1-1v1-1zm-221-2v1-1zm222 2v-1 1zm-222 0v-1 1zm1 0h1-1zm-2-64h-1 1zm0 64a1 1 0 001 0h-1zm0-66h-1 1zm2 1l220-1v-1l-220 1v1zm219-2l1 67h1l-1-67h-1zm2 67l-222-2v1l222 2v-1zm-223-64c60 0 119 0 223-2v-1c-104 2-163 2-223 2v1zm223-3l-223 2v1l223-2v-1zm-222 2h222v-1H847v1zm222-1H847v1h222v-1zm1 2c-2 17-2 39 1 63h1c-3-24-3-46-1-63h-1zm2 63l-1-63h-1l1 63h1zm-2-64c-2 22 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="912" y="419.5">Grafana...</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M844 282l225 2 1 66H847" fill="#fff"/>
- <path d="M847 283c48 0 95-2 221 2l-221-2zm-1 0l224 1-224-1zm222-1c0 29 4 53 2 67l-2-67zm1 1v68-68zm2 67l-224 1 224-1zm-1 1l-223 1 223-1zm-225 0l1-68-1 68zm0 0c1-24 0-51 2-68l-2 68z" fill="#fff"/>
- <path d="M1069 284zm1 66v1h1v-1h-1zm-223-67v1-1zm221 2v1-1zm-222-2v1-1zm224 1v-1 1zm-2-2h1-1zm2 67h1-1zm-1-66h1-1zm0 68h1-1zm2-1v-1 1zm-224 1v-1 1zm223 0v1-1zm-223 1v-1 1zm-2-1h-1 1zm1-68h-1 1zm-1 68a1 1 0 001 0h-1zm2-68c1 0 0 0 0 0zm-3 0l225 2v-1l-225-2v1zm224 1l2 66h1l-2-66h-1zm2 66H847v1h223v-1zm-223-66c48-1 95-2 221 2v-1c-126-4-173-3-221-2v1zm221 1l-221-2v1l221 2v-1zm-222-1h224v-1H846v1zm224-1H846v1h224v-1zm-2-1l1 39c1 11 2 21 1 28h1c1-7 0-17-1-28l-1-39h-1zm3 67l-2-67h-1l2 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="899" y="324.5">Prometheus</tspan>
- </text>
- </g>
- </g>
- <path d="M1230 340h-113m0 0c10-3 20-6 27-12l-27 12zm0 0c10 3 20 7 27 8l-27-8zm29-10l-29 9c15 7 21 9 29 11m82-12l-113 3 113-3z" stroke="#000" stroke-linecap="round"/>
- <path d="M603 614c10-5 46 17 58-28 12-44-11-196 14-241 26-45 116-25 139-30M605 616c9-5 43 14 55-31s-10-194 15-239c26-44 116-25 139-30m0-1c-12 6-19 11-29 13l29-13zm0 0c-12-4-19-4-30-7l30 7zm-28 12l28-12-28-9" stroke="#000" stroke-linecap="round"/>
- <g>
- <g>
- <path d="M37 908l183-2v63l-180-1" fill="#FEFFBF"/>
- <path d="M40 904l179 3-179-3zm-1 2h181H39zm179-1c2 24 0 53 3 63l-3-63zm1 2c2 12 1 27 1 62l-1-62zm-1 65c-36-3-72-1-180-2l180 2zm2-1c-40 2-79 1-180-2l180 2zm-183-3c3-13 4-31 2-63l-2 63zm2 2v-63 63z" fill="#FEFFBF"/>
- <path d="M220 906h1-1zm0 63h1-1zM40 904v1-1zm179 3v1-1zm-180-1v-1 1zm181 0v-1 1zm-2-1h1-1zm3 63h-1 1zm-2-61v-1l-1 1h1zm1 62h-1 1zm-2 3v-1 1zm-180-2v1-1zm182 1v-1 1zm-180-2v1-1zm-3-1h-1 1zm2-63h1-1zm0 65a1 1 0 101 0h-1zm1-63a1 1 0 00-1 0h1zm-3 1l183-1v-1l-183 1v1zm183-2v63h1v-63h-1zm0 62H40v1h180v-1zM40 905c50 1 101 0 179 3v-1c-78-3-129-2-179-3v1zm179 2l-179-3v1l179 3v-1zm-180-1h181v-1H39v1zm181-1H39v1h181v-1zm-2 0l1 37a382 382 0 001 26h1l-1-11v-15l-1-37h-1zm3 63l-2-63h-1l2 63h1zm [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="80" y="944.1">PARTNER</tspan>
- </text>
- </g>
+<g class="architecture">
+ <path fill="#E2ECFF" stroke="#343A40" d="M732 137h993v866H732zM13 137h700v866H13z"/>
+ <path d="m157 464 471-1v324l-469-1" fill="#FD7E14"/>
+ <path d="M159 463c163 2 328 2 467-1l-467 1Zm0 0h468-468Zm469-1c2 80 1 160-3 323l3-323Zm-2 1c3 80 2 160 0 322V463Zm1 323c-112 0-223 1-468-1l468 1Zm0-1H159h468Zm-468 0c-1-73-3-142-2-321l2 321Zm0 0-1-322Z" fill="#FD7E14"/>
+ <path d="M628 463v-1 1Zm0 324v1h1v-1h-1ZM159 463v1-1Zm467-1v1-1Zm-467 1v-1 1Zm468 0v-1 1Zm1-1h-1 1Zm-3 323h1-1Zm1-322h-1 1Zm0 322h1-1Zm1 1v1-1Zm-468-1v-1 1Zm468 0v1-1Zm-468 0v1-1Zm0 0h1-1Zm-2-321h1-1Zm1 321a1 1 0 0 0 1 0h-1Zm0-322a1 1 0 0 0-1 0h1Zm-1 2 471-2v-1l-471 2v1Zm470-2 1 324h1l-1-324h-1Zm1 324-469-2v1l469 2v-1ZM159 464c163 1 328 1 467-1v-1c-139 2-304 2-467 1v1Zm467-2-467 1v1l467-1v-1Zm-467 1c163 2 328 2 468 0v-1c-140 2-305 2-468 0v1Zm468-1H159v1h468v-1Zm0 0c3 80 2 160-2 323h1c4 [...]
+ <path d="m149 472 471-1v324l-469-1" fill="#FD7E14"/>
+ <path d="M151 471c163 2 328 2 467-1l-467 1Zm0 0h468-468Zm469-1c2 80 1 160-3 323l3-323Zm-2 1c3 80 2 160 0 322V471Zm1 323c-112 0-223 1-468-1l468 1Zm0-1H151h468Zm-468 0c-1-73-3-142-2-321l2 321Zm0 0-1-322Z" fill="#FD7E14"/>
+ <path d="M620 471v-1 1Zm0 324v1h1v-1h-1ZM151 471v1-1Zm467-1v1-1Zm-467 1v-1 1Zm468 0v-1 1Zm1-1h-1 1Zm-3 323h1-1Zm1-322h-1 1Zm0 322h1-1Zm1 1v1-1Zm-468-1v-1 1Zm468 0v1-1Zm-468 0v1-1Zm0 0h1-1Zm-2-321h1-1Zm1 321a1 1 0 0 0 1 0h-1Zm0-322a1 1 0 0 0-1 0h1Zm-1 2 471-2v-1l-471 2v1Zm470-2 1 324h1l-1-324h-1Zm1 324-469-2v1l469 2v-1ZM151 472c163 1 328 1 467-1v-1c-139 2-304 2-467 1v1Zm467-2-467 1v1l467-1v-1Zm-467 1c163 2 328 2 468 0v-1c-140 2-305 2-468 0v1Zm468-1H151v1h468v-1Zm0 0c3 80 2 160-2 323h1c4 [...]
+ <path d="m137 482 474-1v321l-472-1" fill="#FD7E14"/>
+ <path d="M139 481c164 1 331 2 470-1l-470 1Zm0-1c164 2 330 2 471 0H139Zm472 0c2 79 1 159-2 320l2-320Zm-2 1c3 80 2 159 0 319V481Zm1 320c-112 0-225 1-471-1l471 1Zm0-1-471 1 471-1Zm-471 0c-1-72-3-141-2-318l2 318Zm0 1-1-320Z" fill="#FD7E14"/>
+ <path d="M611 481h1v-1h-1v1Zm0 321v1h1v-1h-1ZM139 481v1-1Zm470-1v-1 1Zm-470 0v1-1Zm471 0v1-1Zm1 0h1-1Zm-2 320h-1 1Zm0-319h1-1Zm0 319h1-1Zm1 1v1-1Zm-471-1v-1 1Zm471 0v1-1Zm-471 1v-1 1Zm0-1h1-1Zm-2-318h1-1Zm1 319a1 1 0 0 0 1 0h-1Zm0-320a1 1 0 0 0-1 0h1Zm-1 2 474-2v-1l-474 2v1Zm474-2v321h1V481h-1Zm0 321-472-2v1l472 2v-1ZM139 482c164 1 331 1 470-2v-1c-139 3-306 3-470 2v1Zm470-3-470 2v1l470-2v-1Zm-470 2c164 2 330 2 471 0v-1c-141 2-307 2-471 0v1Zm471-1H139v1h471v-1Zm1 0c2 79 1 159-3 320h1c4- [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="36" letter-spacing="0em"><tspan x="258" y="529">Apache APISIX</tspan></text>
+ <path d="m180 554 183-2-1 67-181-2" fill="#fff"/>
+ <path d="m183 553 181 2-181-2Zm-1 2 180-1-180 1Zm180-2c-2 20 2 43 2 65l-2-65Zm0 0v65-65Zm1 66c-46-2-92-2-180 0h180Zm-1-2c-45-1-91 0-181 1l181-1Zm-181 2v-65 65Zm1-1v-64 64Z" fill="#fff"/>
+ <path d="M363 552Zm-1 67Zm-179-66v-1 1Zm181 2v-1 1Zm-182 0v-1 1Zm180-1v1-1Zm0-1h-1 1Zm2 65h-1 1Zm-2-65h-1 1Zm0 65h1-1Zm1 1v1-1Zm-180 0v-1 1Zm179-2v-1 1Zm-181 1v-1 1Zm0 1h-1 1Zm0-65h-1 1Zm0 64a1 1 0 0 0 1 0h-1Zm2-64a1 1 0 0 0-1 0h1Zm-3 1 183-2v-1l-183 2v1Zm182-3-1 67h1l1-67h-1Zm0 66-181-2v1l181 2v-1Zm-179-65 181 2v-1l-181-2v1Zm181 1-181-2v1l181 2v-1Zm-182 1h180v-1H182v1Zm180-1H182v1h180v-1Zm-1-1c-1 10 0 21 1 32l1 33h1l-1-33c-1-11-2-22-1-32h-1Zm3 65-2-65h-1l2 65h1Zm-3-65 1 65h1l-1-65h-1Z [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="24.4" letter-spacing="0em"><tspan x="224" y="598">Rate limit</tspan></text>
+ <path d="m382 552 180 3v61l-179 2" fill="#fff"/>
+ <path d="M383 554c65 2 136 1 177 1l-177-1Zm-1-1c45-2 91-1 180 0H382Zm178-1c4 26 4 49 2 65l-2-65Zm2 2-1 62 1-62Zm-1 64c-42 2-80 2-181-1l181 1Zm2-1H382h181Zm-183 1 3-64-3 64Zm1 0v-64 64Z" fill="#fff"/>
+ <path d="M562 555v-1 1Zm0 61v1-1Zm-179-62v-1 1Zm177 1v1-1Zm-178-2v1-1Zm180 0v1-1Zm-2-1h1-1Zm2 65h-1 1Zm0-63h1-1Zm-1 62h1-1Zm0 2v1-1Zm-181-1v-1 1Zm183 0v-1 1Zm-181 0v-1 1Zm-2 1h-1 1Zm3-64-1-1 1 1Zm-2 64a1 1 0 1 0 1 0h-1Zm0-64a1 1 0 1 0-1 0h1Zm1-1 180 2v-1l-180-2v1Zm179 2v61h1v-61h-1Zm1 61-179 2v1l179-2v-1Zm-179-62c65 2 136 2 177 2v-1c-41 0-112 0-177-2v1Zm177 1-177-2v1l177 2v-1Zm-178-1c45-3 91-1 180 0v-1c-89-1-135-3-180 0v1Zm180-1H382v1h180v-1Zm-2-1c3 26 3 49 1 65h1c2-16 2-39-1-65h-1Zm2 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="24.5" letter-spacing="0em"><tspan x="442" y="593">Auth</tspan></text>
+ <path d="m180 626 181-2 1 66-181-3" fill="#fff"/>
+ <path d="M179 626c48-1 90 0 181 1l-181-1Zm2-2c70 2 141 1 181 1l-181-1Zm182 2c-1 16-3 32-3 62l3-62Zm-2 0-1 63 1-63Zm-2 64-180-2 180 2Zm2-1c-40-1-79-2-181-1l181 1Zm-181-1c0-22 3-45 2-63l-2 63Zm1 0v-64 64Z" fill="#fff"/>
+ <path d="M361 624v-1 1Zm1 66h1-1Zm-183-64v1-1Zm181 1v-1 1Zm-179-3v-1 1Zm181 1v-1 1Zm1 1h-1 1Zm-3 62h1-1Zm1-62h1-1Zm-1 63h1-1Zm-1 1v-1 1Zm-180-2v-1 1Zm182 1v1-1Zm-181-1v1-1Zm0 0h1-1Zm2-63h-1 1Zm-2 63a1 1 0 0 0 1 0h-1Zm1-64a1 1 0 0 0-1 0h1Zm-1 2 181-2v-1l-181 2v1Zm180-2 2 66h1l-2-66h-1Zm2 65-181-2v1l181 2v-1Zm-183-62h181v-1H179v1Zm181-1H179v1h181v-1Zm-179-2c70 2 141 2 181 1v-1c-40 1-111 1-181-1v1Zm181 0-181-1v1l181 1v-1Zm0 2-2 62h1l2-62h-1Zm-1 62 2-62h-1l-2 62h1Zm0-62-1 63h1l1-63h-1Zm0 6 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="24" letter-spacing="0em"><tspan x="229" y="664">Security</tspan></text>
+ <g>
+ <path d="m382 625 183 2v61l-183 3" fill="#fff"/>
+ <path d="m384 627 182-1-182 1Zm-1-1c48 1 96 1 180-1l-180 1Zm183 0c-2 13-3 26-4 64l4-64Zm-2 0c-1 18-1 39 1 63l-1-63Zm1 64c-64 0-127-1-184 1l184-1Zm-2 0-180-1 180 1Zm-181-1c3-22 2-44 3-64l-3 64Zm2 1c-2-25-1-51-1-64l1 64Z" fill="#fff"/>
+ <path d="M565 627h1v-1h-1v1Zm0 61Zm-181-61v-1 1Zm182-1v1-1Zm-183 0v-1 1Zm180-1v-1 1Zm3 1h-1 1Zm-4 64v-1l1 1h-1Zm2-64h1-1Zm1 63h-1 1Zm0 1v1-1Zm-184 1v-1 1Zm182-1v-1 1Zm-180-1v-1 1Zm-1 0h1-1Zm3-64h-1 1Zm-2 65h1-1Zm0-64a1 1 0 0 0-1 0h1Zm-1-1 183 2v-1l-183-2v1Zm183 2-1 61h1l1-61h-1Zm0 60-183 3v1l183-3v-1Zm-181-60h182v-1H384v1Zm182-1H384v1h182v-1Zm-183 0c48 1 96 1 180-1v-1c-84 2-132 2-180 1v1Zm180-2-180 1v1l180-1v-1Zm2 2c-2 13-2 26-3 63l1 1c1-38 1-51 3-64h-1Zm-2 64 3-64h-1l-3 63 1 1Zm1-64 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="428" y="664">Logging</tspan></text>
+ </g>
+ <g>
+ <path d="m182 699 180 2-1 63H182" fill="#fff"/>
+ <path d="M183 702c39 0 82-3 180 0H183Zm-2-1c64-2 125-2 180 0H181Zm182-1c-1 20-2 44 0 66v-66Zm-1 0c-1 21 0 42 1 64l-1-64Zm-1 65c-64-3-132-4-179 0h179Zm0-1-179-1 179 1Zm-180-1v-63 63Zm1 1-1-63 1 63Z" fill="#fff"/>
+ <path d="M362 701h1v-1h-1v1Zm-1 63Zm-178-62v1-1Zm180 0v-1 1Zm-182-1v1-1Zm180 0v-1 1Zm2-1h1-1Zm0 66h1-1Zm-1-66h-1 1Zm1 64h-1 1Zm-2 1v1-1Zm-179 0v1-1Zm179-1v-1 1Zm-179-1v1-1Zm-1 0h1-1Zm0-63h-1 1Zm0 64a1 1 0 0 0 1 0h-1Zm0-63a1 1 0 0 0-1 0h1Zm1-1 180 1v-1l-180-1v1Zm180 1-2 63h1l2-63h-1Zm-1 62H182v1h179v-1Zm-178-60c39-1 82-4 180-1v-1c-98-3-141 0-180 1v1Zm180-2-180 1v1l180-1v-1Zm-182 1c64-3 125-3 180-1v-1c-55-2-116-2-180 1v1Zm180-2-180 1v1l180-1v-1Zm2 0c-2 20-3 44 0 66h1c-3-22-2-46 0-66h-1 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23" letter-spacing="0em"><tspan x="197" y="741">Custom plugin</tspan></text>
+ </g>
+ <g>
+ <path d="m384 698 179-2 3 67-183-4" fill="#fff"/>
+ <path d="M385 696c67 5 133 2 180 0H385Zm-2 2c58-1 116-2 182 0H383Zm181-2v67-67Zm-1 1c2 23 1 44 0 65v-65Zm1 63c-67-1-130-1-180 2l180-2Zm-1 1c-41 2-83 2-180 0h180Zm-180 1 2-66-2 66Zm0-1v-63 63Z" fill="#fff"/>
+ <path d="M563 696Zm3 67Zm-181-67v1-1Zm180 0v-1 1Zm-182 2v1-1Zm182 0v-1 1Zm-1-2h-1 1Zm0 67h1-1Zm-1-66h1-1Zm0 65h1-1Zm1-2v-1 1Zm-180 2v1-1Zm179-1v1-1Zm-180 0v-1 1Zm0 1h1-1Zm2-66h-1 1Zm-2 66a1 1 0 0 0 1-1l-1 1Zm0-64a1 1 0 0 0-1 0h1Zm1 1 179-2v-1l-179 2v1Zm178-3 3 67h1l-3-67h-1Zm4 66-183-3v1l183 3v-1Zm-181-65c67 4 133 2 180-1v-1c-47 3-113 5-180 1v1Zm180-2-180 1v1l180-1v-1Zm-182 4c58-2 116-2 182-1v-1c-66-1-124-1-182 1v1Zm182-2-182 1v1l182-1v-1Zm-2-1v37l1 30h1l-1-30v-37h-1Zm2 67-1-67h-1l1 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="20" letter-spacing="0em"><tspan x="458" y="735">... ...</tspan></text>
+ </g>
+ <g>
+ <path d="m189 162 368-3-2 101-364 3" fill="#FEFFBF"/>
+ <path d="M189 160h367-367Zm0 0 366 1-366-1Zm367-1-2 104 2-104Zm-1 1 1 102-1-102Zm0 101c-136 2-271 1-364 1l364-1Zm1 0c-105 2-211 2-367 1l367-1Zm-365 0c-3-21-3-44-2-100l2 100Zm-2 1c0-22 2-43 0-101v101Z" fill="#FEFFBF"/>
+ <path d="M557 159h1-1Zm-2 101v1-1ZM189 160v-1 1Zm367 0v1-1Zm-367 0v1-1Zm366 1v-1 1Zm1-2h1-1Zm-2 104h1-1Zm1-103h-1 1Zm1 102h-1 1Zm-1-1v-1 1Zm-364 1v1-1Zm365-1v-1 1Zm-367 1v-1 1Zm2-1h1-1Zm-2-100h-1 1Zm-1 101a1 1 0 0 0 1 0h-1Zm2-101a1 1 0 0 0-1 0h1Zm-1 1 368-2v-1l-368 2v1Zm368-3-3 101h1l3-101h-1Zm-2 101-364 2v1l364-2v-1ZM189 160c90-1 178 1 367 1v-1c-189 0-277-2-367-1v1Zm367 0-367-1v1l367 1v-1Zm-367 1h366v-1H189v1Zm366-1H189v1h366v-1Zm1-1-1 43-1 61h1l1-61 1-43h-1Zm-1 104 2-104h-1l-2 104h [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Maison Neue" font-size="28" font-weight="300" letter-spacing="0em"><tspan x="286" y="219">Client/Service</tspan></text>
+ </g>
+ <path d="m375 262-2 204m1 0-10-29 10 29Zm0 0 10-29-10 29Zm-12-29c6 12 9 22 11 29 4-7 8-17 10-29m-7-174-2 205 2-205Z" stroke="#000" stroke-linecap="round"/>
+ <g>
+ <path d="m838 173 270 2 2 302-275 1" fill="#FE7F80"/>
+ <path d="M836 174c107-1 217-1 274 1l-274-1Zm0 0c75 2 150 1 274-1l-274 1Zm274 0-1 304 1-304Zm0-1c2 107 2 212 0 305V173Zm-1 306c-65 0-132 3-274 0h274Zm1 0c-71-2-141-1-274 0h274Zm-272 1c-5-100-3-202-1-306l1 306Zm-2-2V174v304Z" fill="#FE7F80"/>
+ <path d="M1108 175h1-1Zm2 302v1-1ZM836 174v1-1Zm274 1v-1 1Zm-274-1v1-1Zm274-1v1-1Zm0 1h1-1Zm-1 304h-1 1Zm1-305h1-1Zm0 305h-1 1Zm-1 1v1-1Zm-274 0v-1 1Zm275 0v-1 1Zm-274 0v1-1Zm2 1h-1 1Zm-1-306h-1 1Zm-1 304a1 1 0 0 0 1 0h-1Zm1-304h-1 1Zm1 0 270 2v-1l-270-2v1Zm270 1 1 302h1l-1-302h-1Zm2 302-275 1v1l275-1v-1ZM836 175h274v-1H836v1Zm274-1H836v1h274v-1Zm-274 1c75 2 150 1 274-1v-1c-124 2-199 3-274 1v1Zm274-2-274 1v1l274-1v-1Zm0 1-2 304h1l2-304h-1Zm-1 304 2-304h-1l-2 304h1Zm1-305c2 107 2 212- [...]
+ <path d="m864 197 223 1-4 64-219 1" fill="#fff"/>
+ <path d="M865 197c86 3 173 2 221 1l-221-1Zm0 2c59 2 116 1 220 0H865Zm220 2c1 14-1 25-1 63l1-63Zm-1-2v63-63Zm1 65c-50-2-96-4-221-2l221 2Zm0-1H865h220Zm-219-2c1-23-3-48-1-64l1 64Zm-2 2c1-18-1-38 1-63l-1 63Z" fill="#fff"/>
+ <path d="M1087 198v1-1Zm-4 64h1-1Zm-218-65v1-1Zm221 1v1-1Zm-221 1v1-1Zm220 0v-1 1Zm0 2h1-1Zm-1 63h-1 1Zm0-65h1-1Zm0 63h1-1Zm1 2v-1 1Zm-221-2v1-1Zm221 1v-1 1Zm-220 0v-1 1Zm1-2h-1 1Zm-1-64h1-1Zm-1 66a1 1 0 0 0 1 0h-1Zm2-63a1 1 0 0 0-1 0h1Zm-2-2 223 1v-1l-223-1v1Zm222 0-3 64h1l3-63-1-1Zm-3 63-219 2v1l219-2v-1Zm-218-63c86 3 173 2 221 1v-1c-48 1-135 2-221-1v1Zm221 0-221-1v1l221 1v-1Zm-221 2c59 1 116 1 220-1v-1c-104 2-161 2-220 1v1Zm220-2-220 1v1l220-1v-1Zm0 3-1 22-1 41h1a1083 1083 0 0 1 2 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="22.5" letter-spacing="0em"><tspan x="878" y="238">Apache Skywalking </tspan></text>
<g>
- <g>
- <path d="M280 906l181-2 1 66H279" fill="#FEFFBF"/>
- <path d="M279 905c55 3 105 1 181-2l-181 2zm0 1h181-181zm183-2c-4 24-3 51-4 64l4-64zm-3 2c1 24 2 50 1 63l-1-63zm-1 64c-67-4-133-4-179-2l179 2zm1-1H280h179zm-181-1c2-21-1-38 3-61l-3 61zm1 1l1-64-1 64z" fill="#FEFFBF"/>
- <path d="M461 904h1v-1h-1v1zm1 66zm-183-65v1-1zm181-2v1-1zm-181 3v-1 1zm181 0v-1 1zm2-2h-1 1zm-4 64h1-1zm1-62h1-1zm1 63h-1 1zm-2 1v1-1zm-179-2v-1 1zm180 1v-1 1zm-179 0v1-1zm-2-1h1-1zm3-61h-1 1zm-3 62h1-1zm2-64h-1 1zm0 2l181-3v-1l-181 3v1zm181-3v66h1v-66h-1zm1 65H279v1h183v-1zm-183-63c55 2 105 0 181-2v-1c-76 2-126 4-181 2v1zm181-3l-181 2v1l181-2v-1zm-181 3h181v-1H279v1zm181-1H279v1h181v-1zm1-1l-2 36-1 28h1l1-28 2-36h-1zm-2 64l3-64h-1l-3 64h1zm0-62v63h1v-63h-1zm1 63v-63h-1v63h1zm-2 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="322.3" y="944.5">PRIVATE</tspan>
- </text>
+ <path d="m860 387 220-1 1 67-222-1" fill="#fff"/>
+ <path d="M858 388c60 1 119 1 223-2l-223 2Zm1 0c47-1 95-2 222 0H859Zm223 1c-1 17-2 39 1 63l-1-63Zm0-1c-1 22-2 44-1 66l1-66Zm-2 65-221-2 221 2Zm1 0H859h222Zm-221 0c-4-25-2-52-2-64l2 64Zm-1 0-1-66 1 66Z" fill="#fff"/>
+ <path d="M1080 386Zm1 67v1-1Zm-223-65v1-1Zm223-2v1-1Zm-222 2v-1 1Zm222 0v-1 1Zm1 1h1-1Zm1 63h1-1Zm-1-64h1-1Zm-1 66h-1 1Zm-1-1v1-1Zm-221-2v1-1Zm222 2v-1 1Zm-222 0v-1 1Zm1 0h1-1Zm-2-64h-1 1Zm0 64a1 1 0 0 0 1 0h-1Zm0-66h-1 1Zm2 1 220-1v-1l-220 1v1Zm219-2 1 67h1l-1-67h-1Zm2 67-222-2v1l222 2v-1Zm-223-64c60 0 119 0 223-2v-1c-104 2-163 2-223 2v1Zm223-3-223 2v1l223-2v-1Zm-222 2h222v-1H859v1Zm222-1H859v1h222v-1Zm1 2c-2 17-2 39 1 63h1c-3-24-3-46-1-63h-1Zm2 63-1-63h-1l1 63h1Zm-2-64c-2 22-2 44 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="924" y="428">Grafana...</tspan></text>
</g>
<g>
- <g>
- <path d="M503 903l180-1v65l-179-3" fill="#FEFFBF"/>
- <path d="M504 901c49 1 96 4 182 0H504zm1 1c62 0 124-2 179-1l-179 1zm182 1c-5 18-2 41-4 63l4-63zm-1-1c-2 21-1 45-2 64l2-64zm1 62c-40-1-80 2-183 3l183-3zm-2 2c-45-1-89 1-182-1l182 1zm-182 0c-1-24-1-45 2-64l-2 64zm1 0v-64 64z" fill="#FEFFBF"/>
- <path d="M683 902h1-1zm0 65h1-1zm-179-66v-1 1zm182 0v-1 1zm-181 1v-1 1zm179-1v1-1zm3 2h-1 1zm-4 63h1-1zm3-64h-1 1zm-2 64h-1 1zm3-2v1-1zm-183 3v1-1zm181-1v1-1zm-182-1v-1 1zm0 1h-1 1zm2-64h-1 1zm-1 64h1-1zm1-64l-1-1v1h1zm-2 1h180v-1H503v1zm180-1v65h1v-65h-1zm0 64l-179-3v1l179 3v-1zm-179-65c48 2 96 5 182 0v-1c-86 5-133 2-182 0v1zm182-1H504v1h182v-1zm-181 2c62 0 124-2 179 0v-1c-54-2-117 0-179 0v1zm179-1H505v1h179v-1zm2 2c-2 9-2 19-2 30l-1 33h1l1-33c0-11 0-21 2-30h-1zm-2 63l3-63h-1l-3 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="23.3" letter-spacing="0em">
- <tspan x="555.4" y="943.9">PUBLIC</tspan>
- </text>
+ <path d="m856 290 225 2 1 66H859" fill="#fff"/>
+ <path d="M859 291c48 0 95-2 221 2l-221-2Zm-1 0 224 1-224-1Zm222-1c0 29 4 53 2 67l-2-67Zm1 1v68-68Zm2 67-224 1 224-1Zm-1 1-223 1 223-1Zm-225 0 1-68-1 68Zm0 0c1-24 0-51 2-68l-2 68Z" fill="#fff"/>
+ <path d="M1081 292Zm1 66v1h1v-1h-1Zm-223-67v1-1Zm221 2v1-1Zm-222-2v1-1Zm224 1v-1 1Zm-2-2h1-1Zm2 67h1-1Zm-1-66h1-1Zm0 68h1-1Zm2-1v-1 1Zm-224 1v-1 1Zm223 0v1-1Zm-223 1v-1 1Zm-2-1h-1 1Zm1-68h-1 1Zm-1 68a1 1 0 0 0 1 0h-1Zm2-68c1 0 0 0 0 0Zm-3 0 225 2v-1l-225-2v1Zm224 1 2 66h1l-2-66h-1Zm2 66H859v1h223v-1Zm-223-66c48-1 95-2 221 2v-1c-126-4-173-3-221-2v1Zm221 1-221-2v1l221 2v-1Zm-222-1h224v-1H858v1Zm224-1H858v1h224v-1Zm-2-1 1 39c1 11 2 21 1 28h1c1-7 0-17-1-28l-1-39h-1Zm3 67-2-67h-1l2 67h1 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="911" y="333">Prometheus</tspan></text>
</g>
- <path d="M358 797c-4 9 13 51-24 60s-161-14-198-6-21 45-25 54m246-109c-4 10 13 53-24 62s-161-14-198-6-19 46-24 54m1 0c-5-8-8-19-11-28l11 28zm0 0c1-8 5-19 9-28l-9 28zm-11-28c3 12 9 21 11 27 3-5 5-15 9-27" stroke="#000" stroke-linecap="round"/>
- <path d="M357 796c5 9-8 50 31 59 38 9 165-12 202-4 37 7 17 41 20 50M355 794c5 10-4 52 35 62 40 10 165-12 202-4s15 41 18 50m0 1l-6-28 6 28zm0 0l12-26-12 26zm-6-28l6 27c4-8 9-15 12-25" stroke="#000" stroke-linecap="round"/>
- <path d="M357 804v99m2 1c-5-11-10-20-13-30l13 30zm0 0l7-30-7 30zm-13-29c6 10 9 20 12 28l9-28m-8-73v100-100z" stroke="#000" stroke-linecap="round"/>
- <path d="M1337 378l4 207m-1 1c-2-10-8-22-9-30l9 30zm0 0c6-10 6-22 12-30l-12 30zm-10-29l12 28c4-17 6-23 9-29m-13-177v205-205z" stroke="#000" stroke-linecap="round"/>
+ </g>
+ <path d="M1242 348h-113m0 0c10-3 20-6 27-12l-27 12Zm0 0c10 3 20 7 27 8l-27-8Zm29-10-29 9c15 7 21 9 29 11m82-12-113 3 113-3ZM615 622c10-5 46 17 58-28 12-44-11-196 14-241 26-45 116-25 139-30M617 624c9-5 43 14 55-31s-10-194 15-239c26-44 116-25 139-30m0-1c-12 6-19 11-29 13l29-13Zm0 0c-12-4-19-4-30-7l30 7Zm-28 12 28-12-28-9" stroke="#000" stroke-linecap="round"/>
+ <g>
+ <path d="m49 916 183-2v63l-180-1" fill="#FEFFBF"/>
+ <path d="m52 912 179 3-179-3Zm-1 2h181H51Zm179-1c2 24 0 53 3 63l-3-63Zm1 2c2 12 1 27 1 62l-1-62Zm-1 65c-36-3-72-1-180-2l180 2Zm2-1c-40 2-79 1-180-2l180 2Zm-183-3c3-13 4-31 2-63l-2 63Zm2 2v-63 63Z" fill="#FEFFBF"/>
+ <path d="M232 914h1-1Zm0 63h1-1ZM52 912v1-1Zm179 3v1-1Zm-180-1v-1 1Zm181 0v-1 1Zm-2-1h1-1Zm3 63h-1 1Zm-2-61v-1l-1 1h1Zm1 62h-1 1Zm-2 3v-1 1Zm-180-2v1-1Zm182 1v-1 1Zm-180-2v1-1Zm-3-1h-1 1Zm2-63h1-1Zm0 65a1 1 0 1 0 1 0h-1Zm1-63a1 1 0 0 0-1 0h1Zm-3 1 183-1v-1l-183 1v1Zm183-2v63h1v-63h-1Zm0 62H52v1h180v-1ZM52 913c50 1 101 0 179 3v-1c-78-3-129-2-179-3v1Zm179 2-179-3v1l179 3v-1Zm-180-1h181v-1H51v1Zm181-1H51v1h181v-1Zm-2 0 1 37a382 382 0 0 0 1 26h1l-1-11v-15l-1-37h-1Zm3 63-2-63h-1l2 63h1Zm- [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="92" y="952">PARTNER</tspan></text>
+ </g>
+ <g>
+ <path d="m292 914 181-2 1 66H291" fill="#FEFFBF"/>
+ <path d="M291 913c55 3 105 1 181-2l-181 2Zm0 1h181-181Zm183-2c-4 24-3 51-4 64l4-64Zm-3 2c1 24 2 50 1 63l-1-63Zm-1 64c-67-4-133-4-179-2l179 2Zm1-1H292h179Zm-181-1c2-21-1-38 3-61l-3 61Zm1 1 1-64-1 64Z" fill="#FEFFBF"/>
+ <path d="M473 912h1v-1h-1v1Zm1 66Zm-183-65v1-1Zm181-2v1-1Zm-181 3v-1 1Zm181 0v-1 1Zm2-2h-1 1Zm-4 64h1-1Zm1-62h1-1Zm1 63h-1 1Zm-2 1v1-1Zm-179-2v-1 1Zm180 1v-1 1Zm-179 0v1-1Zm-2-1h1-1Zm3-61h-1 1Zm-3 62h1-1Zm2-64h-1 1Zm0 2 181-3v-1l-181 3v1Zm181-3v66h1v-66h-1Zm1 65H291v1h183v-1Zm-183-63c55 2 105 0 181-2v-1c-76 2-126 4-181 2v1Zm181-3-181 2v1l181-2v-1Zm-181 3h181v-1H291v1Zm181-1H291v1h181v-1Zm1-1-2 36-1 28h1l1-28 2-36h-1Zm-2 64 3-64h-1l-3 64h1Zm0-62v63h1v-63h-1Zm1 63v-63h-1v63h1Zm-2 1c-67 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="334" y="953">PRIVATE</tspan></text>
+ </g>
+ <g>
+ <path d="m515 911 180-1v65l-179-3" fill="#FEFFBF"/>
+ <path d="M516 909c49 1 96 4 182 0H516Zm1 1c62 0 124-2 179-1l-179 1Zm182 1c-5 18-2 41-4 63l4-63Zm-1-1c-2 21-1 45-2 64l2-64Zm1 62c-40-1-80 2-183 3l183-3Zm-2 2c-45-1-89 1-182-1l182 1Zm-182 0c-1-24-1-45 2-64l-2 64Zm1 0v-64 64Z" fill="#FEFFBF"/>
+ <path d="M695 910h1-1Zm0 65h1-1Zm-179-66v-1 1Zm182 0v-1 1Zm-181 1v-1 1Zm179-1v1-1Zm3 2h-1 1Zm-4 63h1-1Zm3-64h-1 1Zm-2 64h-1 1Zm3-2v1-1Zm-183 3v1-1Zm181-1v1-1Zm-182-1v-1 1Zm0 1h-1 1Zm2-64h-1 1Zm-1 64h1-1Zm1-64-1-1v1h1Zm-2 1h180v-1H515v1Zm180-1v65h1v-65h-1Zm0 64-179-3v1l179 3v-1Zm-179-65c48 2 96 5 182 0v-1c-86 5-133 2-182 0v1Zm182-1H516v1h182v-1Zm-181 2c62 0 124-2 179 0v-1c-54-2-117 0-179 0v1Zm179-1H517v1h179v-1Zm2 2c-2 9-2 19-2 30l-1 33h1l1-33c0-11 0-21 2-30h-1Zm-2 63 3-63h-1l-3 63h1Z [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="23.3" letter-spacing="0em"><tspan x="567" y="952">PUBLIC</tspan></text>
+ </g>
+ <path d="M370 805c-4 9 13 51-24 60s-161-14-198-6-21 45-25 54m246-109c-4 10 13 53-24 62s-161-14-198-6-19 46-24 54m1 0c-5-8-8-19-11-28l11 28Zm0 0c1-8 5-19 9-28l-9 28Zm-11-28c3 12 9 21 11 27 3-5 5-15 9-27" stroke="#000" stroke-linecap="round"/>
+ <path d="M369 804c5 9-8 50 31 59 38 9 165-12 202-4 37 7 17 41 20 50M367 802c5 10-4 52 35 62 40 10 165-12 202-4s15 41 18 50m0 1-6-28 6 28Zm0 0 12-26-12 26Zm-6-28 6 27c4-8 9-15 12-25M369 812v99m2 1c-5-11-10-20-13-30l13 30Zm0 0 7-30-7 30Zm-13-29c6 10 9 20 12 28l9-28m-8-73v100-100ZM1348 386l5 303m-1 1c-3-15-9-32-9-44l9 44Zm0 0c6-15 6-32 12-44l-12 44Zm-10-43 11 41 10-42m-13-259v300-300Z" stroke="#000" stroke-linecap="round"/>
+ <g>
+ <path d="m1152 707 519 1-2 103h-520" fill="#FE7F80"/>
+ <path d="M1150 709h520-520Zm1-1c198 1 397 2 519 0h-519Zm517 2c2 37 4 80 2 100l-2-100Zm1-1c1 37 2 76 1 101l-1-101Zm0 101h-518 518Zm1 0c-166-2-332-1-519 1l519-1Zm-520-1c2-23 1-48 2-101l-2 101Zm0 2 1-103-1 103Z" fill="#FE7F80"/>
+ <path d="M1671 708h1-1Zm-2 103v1-1Zm-519-102v1-1Zm520 0v1-1Zm-519-1v1-1Zm519 0v1-1Zm-2 2h1-1Zm2 100h-1 1Zm-1-101h1-1Zm1 101h-1 1Zm-1 0v-1 1Zm-518 0v1-1Zm519 0v1-1Zm-519 1v-1 1Zm-1-2h-1 1Zm2-101h1-1Zm-3 103 1 1v-1h-1Zm3-103-1-1v1h1Zm0 0 519 1v-1l-519-1v1Zm519 0-3 103h1l3-103h-1Zm-2 103h-520v1h520v-1Zm-519-101c151-1 300-2 520 0v-1c-220-2-369-1-520 0v1Zm520-1h-520v1h520v-1Zm-519 0h519v-1h-519v1Zm519-1h-519v1h519v-1Zm-2 2c1 37 3 80 1 100h1c2-20 0-63-1-100h-1Zm2 100-1-100h-1l1 100h1Zm-1-1 [...]
+ <path d="M1174 728h136v62l-135-1" fill="#fff"/>
+ <path d="M1176 729h134-134Zm-2 0c53 1 105 3 136 0h-136Zm133 2c3 11 2 26 3 58l-3-58Zm1 0v60-60Zm1 61c-30 2-58 0-133-3l133 3Zm-1-2c-32 2-66 1-133 0h133Zm-133 1v-60 60Zm-1 0v-61 61Z" fill="#fff"/>
+ <path d="M1310 728Zm0 62h1-1Zm-134-61v-1 1Zm134 0v-1 1Zm-136 0v1-1Zm136 0v-1 1Zm-3 2h1-1Zm3 58h-1 1Zm-2-58h1-1Zm0 60h1-1Zm1 1v1-1Zm-133-3v-1 1Zm132 1v-1 1Zm-133 0v-1 1Zm0 1h1-1Zm0-60h1-1Zm-1 60h1-1Zm0-61h-1 1Zm0-1h136v-1h-136v1Zm135-1 1 62h1l-1-62h-1Zm1 61-135-1v1l135 1v-1Zm-134-60c31 1 63 2 134 0v-1c-71 2-103 1-134 0v1Zm134-1h-134v1h134v-1Zm-136 2c53 1 105 2 136-1v-1c-31 3-83 2-136 1v1Zm136-2-136 1v1l136-1v-1Zm-3 3 2 21v37h1v-37l-2-21h-1Zm3 58-2-58h-1l2 58h1Zm-2-58v60h1v-60h-1Zm1 60 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="24.4" letter-spacing="0em"><tspan x="1216" y="769">etcd</tspan></text>
<g>
- <g>
- <path d="M1140 598l519 1-2 103h-520" fill="#FE7F80"/>
- <path d="M1138 600h520-520zm1-1c198 1 397 2 519 0h-519zm517 2c2 37 4 80 2 100l-2-100zm1-1c1 37 2 76 1 101l-1-101zm0 101h-518 518zm1 0c-166-2-332-1-519 1l519-1zm-520-1c2-23 1-48 2-101l-2 101zm0 2l1-103-1 103z" fill="#FE7F80"/>
- <path d="M1659 599h1-1zm-2 103v1-1zm-519-102v1-1zm520 0v1-1zm-519-1v1-1zm519 0v1-1zm-2 2h1-1zm2 100h-1 1zm-1-101h1-1zm1 101h-1 1zm-1 0v-1 1zm-518 0v1-1zm519 0v1-1zm-519 1v-1 1zm-1-2h-1 1zm2-101h1-1zm-3 103l1 1v-1h-1zm3-103l-1-1v1h1zm0 0l519 1v-1l-519-1v1zm519 0l-3 103h1l3-103h-1zm-2 103h-520v1h520v-1zm-519-101c151-1 300-2 520 0v-1c-220-2-369-1-520 0v1zm520-1h-520v1h520v-1zm-519 0h519v-1h-519v1zm519-1h-519v1h519v-1zm-2 2c1 37 3 80 1 100h1c2-20 0-63-1-100h-1zm2 100l-1-100h-1l1 100h [...]
- </g>
- <g>
- <g>
- <path d="M1162 619h136v62l-135-1" fill="#fff"/>
- <path d="M1164 620h134-134zm-2 0c53 1 105 3 136 0h-136zm133 2c3 11 2 26 3 58l-3-58zm1 0v60-60zm1 61c-30 2-58 0-133-3l133 3zm-1-2c-32 2-66 1-133 0h133zm-133 1v-60 60zm-1 0v-61 61z" fill="#fff"/>
- <path d="M1298 619zm0 62h1-1zm-134-61v-1 1zm134 0v-1 1zm-136 0v1-1zm136 0v-1 1zm-3 2h1-1zm3 58h-1 1zm-2-58h1-1zm0 60h1-1zm1 1v1-1zm-133-3v-1 1zm132 1v-1 1zm-133 0v-1 1zm0 1h1-1zm0-60h1-1zm-1 60h1-1zm0-61h-1 1zm0-1h136v-1h-136v1zm135-1l1 62h1l-1-62h-1zm1 61l-135-1v1l135 1v-1zm-134-60c31 1 63 2 134 0v-1c-71 2-103 1-134 0v1zm134-1h-134v1h134v-1zm-136 2c53 1 105 2 136-1v-1c-31 3-83 2-136 1v1zm136-2l-136 1v1l136-1v-1zm-3 3l2 21v37h1v-21-16l-2-21h-1zm3 58l-2-58h-1l2 58h1zm-2-58v60h1v [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="24.4" letter-spacing="0em">
- <tspan x="1204" y="659.9">etcd</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M1328 622l135-1v59h-131" fill="#fff"/>
- <path d="M1330 622c50-1 97 0 133-3l-133 3zm-1-2h136-136zm135 1c2 14-1 24 1 60l-1-60zm0-1c2 13 1 26 0 63v-63zm2 62c-41 1-82-2-137 1l137-1zm-1 0h-136 136zm-134-1v-60 60zm-1 0l-1-60 1 60z" fill="#fff"/>
- <path d="M1463 621h1-1zm0 59v1-1zm-133-58v1-1zm133-3v1-1zm-134 1v1-1zm136 0v1-1zm-1 1h-1 1zm1 60h1-1zm-1-61h1-1zm0 63h-1 1zm2-1v1-1zm-137 1v1-1zm136-1v1-1zm-136 0v1-1zm2-1h-1 1zm0-60h1-1zm-1 60h1-1zm-1-60h-1 1zm-1 2l135-1v-1l-135 1v1zm135-2l-1 59h1l1-59h-1zm0 59h-131v1h131v-1zm-133-57c50-2 97 0 133-3v-1c-37 3-83 1-133 3v1zm133-4l-133 3v1l133-3v-1zm-134 2h136v-1h-136v1zm136-1h-136v1h136v-1zm-2 1l1 22 1 38h1l-1-38-1-22h-1zm3 60l-2-60h-1l2 60h1zm-2-61c1 13 1 26-1 63h1c2-37 2-50 1- [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="24" letter-spacing="0em">
- <tspan x="1376" y="659.2">etcd</tspan>
- </text>
- </g>
- <g>
- <g>
- <path d="M1500 619l133 4v60l-135-1" fill="#fff"/>
- <path d="M1500 620c46-2 88-2 133 2l-133-2zm0 0c26 0 54-1 135 1l-135-1zm135-1c-3 19-1 33 1 61l-1-61zm-1 2c-1 16 1 34 1 60l-1-60zm2 59c-56 1-106 0-138 3l138-3zm-1 1c-52-1-103 0-135 1l135-1zm-134 2c-3-22-1-46-1-63l1 63zm-2-1l1-62-1 62z" fill="#fff"/>
- <path d="M1633 623v-1 1zm0 60zm-133-63v-1 1zm133 2v-1 1zm-133-2v-1 1zm135 1v1-1zm0-2h-1 1zm1 61h1-1zm-2-59h-1 1zm1 60h1-1zm1-1v-1 1zm-138 3v-1 1zm137-2v-1 1zm-135 1v1-1zm1 1h-1 1zm-1-63h1-1zm-2 62l1 1v-1h-1zm3-62h-1 1zm-1 0l133 3v-1l-133-3v1zm132 3v60h1v-60h-1zm1 59l-135-1v1l135 1v-1zm-133-62c46-1 88-1 133 2v-1c-45-3-87-3-133-2v1zm133 1l-133-2v1l133 2v-1zm-133-1c26 1 54-1 135 2v-1c-81-3-109-1-135-2v1zm135 1l-135-2v1l135 2v-1zm-1-2c-2 19-1 33 2 61h1c-3-28-4-42-2-61h-1zm3 61l-2-6 [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="22.3" letter-spacing="0em">
- <tspan x="1545" y="657.6">etcd</tspan>
- </text>
- </g>
+ <path d="m1340 731 135-1v59h-131" fill="#fff"/>
+ <path d="M1342 731c50-1 97 0 133-3l-133 3Zm-1-2h136-136Zm135 1c2 14-1 24 1 60l-1-60Zm0-1c2 13 1 26 0 63v-63Zm2 62c-41 1-82-2-137 1l137-1Zm-1 0h-136 136Zm-134-1v-60 60Zm-1 0-1-60 1 60Z" fill="#fff"/>
+ <path d="M1475 730h1-1Zm0 59v1-1Zm-133-58v1-1Zm133-3v1-1Zm-134 1v1-1Zm136 0v1-1Zm-1 1h-1 1Zm1 60h1-1Zm-1-61h1-1Zm0 63h-1 1Zm2-1v1-1Zm-137 1v1-1Zm136-1v1-1Zm-136 0v1-1Zm2-1h-1 1Zm0-60h1-1Zm-1 60h1-1Zm-1-60h-1 1Zm-1 2 135-1v-1l-135 1v1Zm135-2-1 59h1l1-59h-1Zm0 59h-131v1h131v-1Zm-133-57c50-2 97 0 133-3v-1c-37 3-83 1-133 3v1Zm133-4-133 3v1l133-3v-1Zm-134 2h136v-1h-136v1Zm136-1h-136v1h136v-1Zm-2 1 1 22 1 38h1l-1-38-1-22h-1Zm3 60-2-60h-1l2 60h1Zm-2-61c1 13 1 26-1 63h1c2-37 2-50 1-63h-1Zm [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="24" letter-spacing="0em"><tspan x="1388" y="768">etcd</tspan></text>
</g>
- <path d="M1127 657l-513-2m1-2c7 4 15 10 26 11l-26-11zm0 0c7-1 15-3 26-10l-26 10zm27 12c-11-4-21-6-29-10l29-10m486 9H612h516z" stroke="#000" stroke-linecap="round"/>
<g>
- <g fill="#2864A7">
- <path d="M1003 1h364l2 77-365-3"/>
- <path d="M1001 3h367-367zm1-1h366-366zm366-1c1 24 1 50-1 75l1-75zm0 1c1 22 1 45-1 75l1-75zm0 73c-119 2-237 1-365 2l365-2zm0 2c-128-2-254-2-367-1l367 1zm-367 0c0-21 0-41 2-73l-2 73zm1-1c0-27 1-54-1-74l1 74z"/>
- <path d="M1367 1h1-1zm2 77zM1001 3V2v1zm367 0V2v1zm-366-1V1v1zm366 0V1v1zm0-1h-1 1zm-1 75h1-1zm1-74h1-1zm-1 75h-1 1zm1-2v1-1zm-365 2v-1 1zm365 0v-1 1zm-367-1v-1 1zm0 1h-1 1zm2-73h1-1zm-1 72h1-1zm0-74l-1-1v1h1zm1-1l364 1V1l-364-1v1zm364 0l1 77h1l-1-77h-1zm2 76l-365-3v1l365 3v-1zM1001 3h367V2h-367v1zm367-1h-367v1h367V2zm-366 0c128 2 258 1 366 0V1c-108 1-238 2-366 0v1zm366-1h-366v1h366V1zm-1 0c2 24 2 50 0 75h1c2-25 2-51 0-75h-1zm1 75V1h-1v75h1zm0-74c1 22 1 44-2 75h1c3-30 3-53 2-75h- [...]
- </g>
- <text fill="#fff" style="white-space:pre" font-size="28" letter-spacing="0em">
- <tspan x="1070" y="48.1">Control Plane (CP)</tspan>
- </text>
+ <path d="m1512 728 133 4v60l-135-1" fill="#fff"/>
+ <path d="M1512 729c46-2 88-2 133 2l-133-2Zm0 0c26 0 54-1 135 1l-135-1Zm135-1c-3 19-1 33 1 61l-1-61Zm-1 2c-1 16 1 34 1 60l-1-60Zm2 59c-56 1-106 0-138 3l138-3Zm-1 1c-52-1-103 0-135 1l135-1Zm-134 2c-3-22-1-46-1-63l1 63Zm-2-1 1-62-1 62Z" fill="#fff"/>
+ <path d="M1645 732v-1 1Zm0 60Zm-133-63v-1 1Zm133 2v-1 1Zm-133-2v-1 1Zm135 1v1-1Zm0-2h-1 1Zm1 61h1-1Zm-2-59h-1 1Zm1 60h1-1Zm1-1v-1 1Zm-138 3v-1 1Zm137-2v-1 1Zm-135 1v1-1Zm1 1h-1 1Zm-1-63h1-1Zm-2 62 1 1v-1h-1Zm3-62h-1 1Zm-1 0 133 3v-1l-133-3v1Zm132 3v60h1v-60h-1Zm1 59-135-1v1l135 1v-1Zm-133-62c46-1 88-1 133 2v-1c-45-3-87-3-133-2v1Zm133 1-133-2v1l133 2v-1Zm-133-1c26 1 54-1 135 2v-1c-81-3-109-1-135-2v1Zm135 1-135-2v1l135 2v-1Zm-1-2c-2 19-1 33 2 61h1c-3-28-4-42-2-61h-1Zm3 61-2-61h-1l2 6 [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="22.3" letter-spacing="0em"><tspan x="1557" y="767">etcd</tspan></text>
</g>
- <g>
- <g>
- <path d="M1240 260l225-2v105l-226-1" fill="#FE7F80"/>
- <path d="M1242 259c72-1 145 4 223 3l-223-3zm-2 0l225 1-225-1zm223 2c2 36 2 74 2 105l-2-105zm0-2c0 39 0 75 2 104l-2-104zm1 104c-73-3-148-1-224 0h224zm1 1l-225 1 225-1zm-224-2c0-30-1-67 1-101l-1 101zm0 3c0-39 1-74-1-106l1 106z" fill="#FE7F80"/>
- <path d="M1465 258v-1 1zm0 105zm-223-104v-1 1zm223 3v1-1zm-225-3v1-1zm225 1v1-1zm-2 1h-1 1zm2 105h1-1zm-2-107h1-1zm2 104h-1 1zm-1 0v-1 1zm-224 0v1-1zm225 1v1-1zm-225 1v1-1zm1-3h1-1zm1-101h-1 1zm-1 104v1l1-1h-1zm-1-106v-1l-1 1h1zm0 2l225-2v-1l-225 2v1zm224-3v105h1V258h-1zm1 104h-226v1h226v-1zm-223-103l109 2 114 2v-1l-114-2-109-2v1zm223 3l-223-4v1l223 4v-1zm-225-2l225 1v-1l-225-1v1zm225 0l-225-1v1l225 1v-1zm-3 1c3 36 2 74 3 105h1c-1-31 0-69-3-105h-1zm4 105l-3-105h-1l3 105h1zm-3-107 [...]
- </g>
- <g>
- <g>
- <path d="M1272 314l162-1 4 39-165-1" fill="#fff"/>
- <path d="M1272 311c42 4 82 2 166 3l-166-3zm1 1l164 1-164-1zm163-1c2 9 0 18 2 39l-2-39zm1 2v39-39zm1 37c-39 2-73 2-165 2l165-2zm-1 2c-41-1-81-2-163 0h163zm-163 0l1-41-1 41zm0-1l-1-37 1 37z" fill="#fff"/>
- <path d="M1434 313h1v-1h-1v1zm4 39v1h1v-1h-1zm-166-41v1-1zm166 3v-1 1zm-165-2v-1 1zm164 1v1-1zm-1-2h-1 1zm2 39h1-1zm-1-37h1-1zm0 39h-1 1zm1-2v-1 1zm-165 2v-1 1zm164 0v-1 1zm-163 0v-1 1zm0 0h1-1zm1-41h-1 1zm-1 40h1-1zm0-37l-1-1v1h1zm-2 0l162-1v-1l-162 1v1zm162-1l4 39h1l-4-39h-1zm4 39l-165-1v1l165 1v-1zm-166-40c42 3 82 1 166 2v-1c-84-1-124 1-166-2v1zm166 1l-166-2v1l166 2v-1zm-165-1l164 2v-1l-164-2v1zm164 1l-164-2v1l164 2v-1zm-2-2l1 15 2 24h1l-2-24-1-15h-1zm4 39l-3-39h-1l3 39h1zm- [...]
- </g>
- <text fill="#000" style="white-space:pre" font-size="22.3" letter-spacing="0em">
- <tspan x="1291.4" y="338.7">Manager API</tspan>
- </text>
- </g>
- <text fill="#000" style="white-space:pre" font-size="22.3" letter-spacing="0em">
- <tspan x="1298" y="297.6">Dashboard</tspan>
- </text>
+ </g>
+ <path d="m1138 765-513-1m1-2c7 4 15 9 26 11l-26-11Zm0 0c8-1 15-3 26-10l-26 10Zm27 12c-11-4-21-6-28-10 8-2 18-7 28-11m486 10H623h516Z" stroke="#000" stroke-linecap="round"/>
+ <g>
+ <g fill="#2864A7">
+ <path d="M1015 9h364l2 77-365-3"/>
+ <path d="M1013 11h367-367Zm1-1h366-366Zm366-1c1 24 1 50-1 75l1-75Zm0 1c1 22 1 45-1 75l1-75Zm0 73c-119 2-237 1-365 2l365-2Zm0 2c-128-2-254-2-367-1l367 1Zm-367 0c0-21 0-41 2-73l-2 73Zm1-1c0-27 1-54-1-74l1 74Z"/>
+ <path d="M1379 9h1-1Zm2 77Zm-368-75v-1 1Zm367 0v-1 1Zm-366-1V9v1Zm366 0V9v1Zm0-1h-1 1Zm-1 75h1-1Zm1-74h1-1Zm-1 75h-1 1Zm1-2v1-1Zm-365 2v-1 1Zm365 0v-1 1Zm-367-1v-1 1Zm0 1h-1 1Zm2-73h1-1Zm-1 72h1-1Zm0-74-1-1v1h1Zm1-1 364 1V9l-364-1v1Zm364 0 1 77h1l-1-77h-1Zm2 76-365-3v1l365 3v-1Zm-368-74h367v-1h-367v1Zm367-1h-367v1h367v-1Zm-366 0c128 2 258 1 366 0V9c-108 1-238 2-366 0v1Zm366-1h-366v1h366V9Zm-1 0c2 24 2 50 0 75h1c2-25 2-51 0-75h-1Zm1 75V9h-1v75h1Zm0-74c1 22 1 44-2 75h1c3-30 3-53 2-75 [...]
</g>
- <path d="M1340 209l4 41m0 0c-3-2-9-4-9-6l9 6zm0 0l11-6-11 6zm-10-6l11 6c4-4 7-5 10-6m-13-35v41-41z" stroke="#000" stroke-linecap="round"/>
+ <text fill="#fff" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="28" letter-spacing="0em"><tspan x="1082" y="56">Control Plane (CP)</tspan></text>
+ </g>
+ <g>
+ <path d="m1252 268 225-2v105l-226-1" fill="#FE7F80"/>
+ <path d="M1254 267c72-1 145 4 223 3l-223-3Zm-2 0 225 1-225-1Zm223 2c2 36 2 74 2 105l-2-105Zm0-2c0 39 0 75 2 104l-2-104Zm1 104c-73-3-148-1-224 0h224Zm1 1-225 1 225-1Zm-224-2c0-30-1-67 1-101l-1 101Zm0 3c0-39 1-74-1-106l1 106Z" fill="#FE7F80"/>
+ <path d="M1477 266v-1 1Zm0 105Zm-223-104v-1 1Zm223 3v1-1Zm-225-3v1-1Zm225 1v1-1Zm-2 1h-1 1Zm2 105h1-1Zm-2-107h1-1Zm2 104h-1 1Zm-1 0v-1 1Zm-224 0v1-1Zm225 1v1-1Zm-225 1v1-1Zm1-3h1-1Zm1-101h-1 1Zm-1 104v1l1-1h-1Zm-1-106v-1l-1 1h1Zm0 2 225-2v-1l-225 2v1Zm224-3v105h1V266h-1Zm1 104h-226v1h226v-1Zm-223-103 109 2 114 2v-1l-114-2-109-2v1Zm223 3-223-4v1l223 4v-1Zm-225-2 225 1v-1l-225-1v1Zm225 0-225-1v1l225 1v-1Zm-3 1c3 36 2 74 3 105h1c-1-31 0-69-3-105h-1Zm4 105-3-105h-1l3 105h1Zm-3-107c-1 39 [...]
<g>
- <path d="M1346 160l3 2 2 3v6l-1 3-2 2-3 2a11 11 0 01-6 0l-3-2-2-2-2-3a10 10 0 011-6l2-3 2-2a9 9 0 016-1l3 1v1-1zm-2-1l3 2 2 2 2 2a10 10 0 010 7 9 9 0 01-4 5l-3 1h-3l-3-1-3-1-2-3-1-3a9 9 0 011-6 10 10 0 015-4l3-1h3v1" fill="#fff"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1342 184h17v1l-1 3-1 2v2l-1 1-1 2-1 1-2 2-1 1h-2l-2 1-1 1h-6l-4-1h-1l-2-1-1-1-2-1-2-3-1-3-1-2v-1l-1-3v-1h17" fill="#fff"/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M1342 184h17v1l-1 3a22 22 0 01-3 7l-3 2-3 2a14 14 0 01-7 2h-4l-3-1-3-2-3-3-2-3-1-3-1-3v-1-1h17zm0 0h17v1a21 21 0 01-4 10l-3 3-3 1-3 2h-4a23 23 0 01-7-2l-3-1-3-3-2-3-1-3-1-3v-1-1h17" fill="#fff"/>
- <path d="M1346 160l-1-1 1 1zm3 2zm2 3v-1 1zm0 3h1-1zm0 3h1-1zm-1 3zm-2 2v1-1zm-3 2zm-3 0v1-1zm-3 0zm-3-2zm-2-2h-1 1zm-2-3zm1-6zm2-3v1-1zm2-2v1-1zm3-1v1-1zm3 0h1-1zm3 1zm0 1h1-1zm-2-2h-1l1 1v-1zm3 2v-1 1zm2 2zm2 2zm0 4h1-1zm0 3h-1 1zm-2 3h1-1zm-2 2zm-3 1zm-3 0v1-1zm-3-1zm-3-1zm-2-3v1-1zm-1-3h1-1zm0-3h1-1zm1-3zm2-2h1-1zm3-2v-1 1zm3-1zm3 0v1-1zm-1 0l1 1-1-1zm-1 24l-1 1h1v-1zm8 1v1-1zm9 0v1-1zm0 0h-1 1zm0 0zm0 1v1-1zm-1 3zm-1 2h1-1zm0 2zm-1 1zm-1 2zm-1 1v1-1zm-2 2zm-1 1zm-2 0v1-1zm-2 1 [...]
+ <path d="m1284 322 162-1 4 39-165-1" fill="#fff"/>
+ <path d="M1284 319c42 4 82 2 166 3l-166-3Zm1 1 164 1-164-1Zm163-1c2 9 0 18 2 39l-2-39Zm1 2v39-39Zm1 37c-39 2-73 2-165 2l165-2Zm-1 2c-41-1-81-2-163 0h163Zm-163 0 1-41-1 41Zm0-1-1-37 1 37Z" fill="#fff"/>
+ <path d="M1446 321h1v-1h-1v1Zm4 39v1h1v-1h-1Zm-166-41v1-1Zm166 3v-1 1Zm-165-2v-1 1Zm164 1v1-1Zm-1-2h-1 1Zm2 39h1-1Zm-1-37h1-1Zm0 39h-1 1Zm1-2v-1 1Zm-165 2v-1 1Zm164 0v-1 1Zm-163 0v-1 1Zm0 0h1-1Zm1-41h-1 1Zm-1 40h1-1Zm0-37-1-1v1h1Zm-2 0 162-1v-1l-162 1v1Zm162-1 4 39h1l-4-39h-1Zm4 39-165-1v1l165 1v-1Zm-166-40c42 3 82 1 166 2v-1c-84-1-124 1-166-2v1Zm166 1-166-2v1l166 2v-1Zm-165-1 164 2v-1l-164-2v1Zm164 1-164-2v1l164 2v-1Zm-2-2 1 15 2 24h1l-2-24-1-15h-1Zm4 39-3-39h-1l3 39h1Zm-2-37v19l- [...]
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="22.3" letter-spacing="0em"><tspan x="1303" y="347">Manager API</tspan></text>
</g>
- <g>
- <g fill="#2864A7">
- <path d="M172 4l366 2-3 74-364-2"/>
- <path d="M170 6h367-367zm1-1h366-366zm366 1c-2 25-2 48-2 72l2-72zm0-1v75V5zm0 74c-113 1-223 3-367 1l367-1zm0 1H171h366zm-366 1c-2-25-2-47-2-74l2 74zm0 0V6v75z"/>
- <path d="M538 6h1-1zm-3 74v1h1v-1h-1zM170 6v1-1zm367 0V5v1zM171 5v1-1zm366 0v1-1zm0 1h1-1zm-2 72h-1 1zm2-73h-1 1zm0 75h-1 1zm0-1v1-1zm-367 1v1-1zm367 0v-1 1zm-366 0v-1 1zm0 1v1l1-1h-1zm-2-74h1-1zm1 74a1 1 0 001 0h-1zm1-75h-1 1zm1-1l366 2V6L172 4v1zm366 1l-3 74h1l3-74h-1zm-3 74l-364-2v1l364 2v-1zM170 7c111 1 222-1 367-1V5C392 5 281 7 170 6v1zm367-2L170 6v1l367-1V5zM171 6c83-2 166-1 366 0V5C337 4 254 3 171 5v1zm366-1H171v1h366V5zm0 1l-3 72h1l3-72h-1zm-2 72l3-72h-1l-3 72h1zm1-73v75h [...]
- </g>
- <text fill="#fff" style="white-space:pre" font-size="28" letter-spacing="0em">
- <tspan x="260.4" y="52.1">Data Plane (DP)</tspan>
- </text>
+ <text fill="#000" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="22.3" letter-spacing="0em"><tspan x="1310" y="306">Dashboard</tspan></text>
+ </g>
+ <path d="m1352 217 4 41m0 0c-3-2-9-4-9-6l9 6Zm0 0 11-6-11 6Zm-10-6 11 6c4-4 7-5 10-6m-13-35v41-41Z" stroke="#000" stroke-linecap="round"/>
+ <g>
+ <path d="m1358 168 3 2 2 3v6l-1 3-2 2-3 2a11 11 0 0 1-6 0l-3-2-2-2-2-3a10 10 0 0 1 1-6l2-3 2-2a9 9 0 0 1 6-1l3 1v1-1Zm-2-1 3 2 2 2 2 2a10 10 0 0 1 0 7 9 9 0 0 1-4 5l-3 1h-3l-3-1-3-1-2-3-1-3a9 9 0 0 1 1-6 10 10 0 0 1 5-4l3-1h3v1" fill="#fff"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1354 192h17v1l-1 3-1 2v2l-1 1-1 2-1 1-2 2-1 1h-2l-2 1-1 1h-6l-4-1h-1l-2-1-1-1-2-1-2-3-1-3-1-2v-1l-1-3v-1h17" fill="#fff"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1354 192h17v1l-1 3a22 22 0 0 1-3 7l-3 2-3 2a14 14 0 0 1-7 2h-4l-3-1-3-2-3-3-2-3-1-3-1-3v-2h17Zm0 0h17v1a21 21 0 0 1-4 10l-3 3-3 1-3 2h-4a23 23 0 0 1-7-2l-3-1-3-3-2-3-1-3-1-3v-2h17" fill="#fff"/>
+ <path d="m1358 168-1-1 1 1Zm3 2Zm2 3v-1 1Zm0 3h1-1Zm0 3h1-1Zm-1 3Zm-2 2v1-1Zm-3 2Zm-3 0v1-1Zm-3 0Zm-3-2Zm-2-2h-1 1Zm-2-3Zm1-6Zm2-3v1-1Zm2-2v1-1Zm3-1v1-1Zm3 0h1-1Zm3 1Zm0 1h1-1Zm-2-2h-1l1 1v-1Zm3 2v-1 1Zm2 2Zm2 2Zm0 4h1-1Zm0 3h-1 1Zm-2 3h1-1Zm-2 2Zm-3 1Zm-3 0v1-1Zm-3-1Zm-3-1Zm-2-3v1-1Zm-1-3h1-1Zm0-3h1-1Zm1-3Zm2-2h1-1Zm3-2v-1 1Zm3-1Zm3 0v1-1Zm-1 0 1 1-1-1Zm-1 24-1 1h1v-1Zm8 1v1-1Zm9 0v1-1Zm0 0h-1 1Zm0 0Zm0 1v1-1Zm-1 3Zm-1 2h1-1Zm0 2Zm-1 1Zm-1 2Zm-1 1v1-1Zm-2 2Zm-1 1Zm-2 0v1-1Zm-2 1Zm-1 [...]
+ </g>
+ <g>
+ <g fill="#2864A7">
+ <path d="m184 12 366 2-3 74-364-2"/>
+ <path d="M182 14h367-367Zm1-1h366-366Zm366 1c-2 25-2 48-2 72l2-72Zm0-1v75-75Zm0 74c-113 1-223 3-367 1l367-1Zm0 1H183h366Zm-366 1c-2-25-2-47-2-74l2 74Zm0 0V14v75Z"/>
+ <path d="M550 14h1-1Zm-3 74v1h1v-1h-1ZM182 14v1-1Zm367 0v-1 1Zm-366-1v1-1Zm366 0v1-1Zm0 1h1-1Zm-2 72h-1 1Zm2-73h-1 1Zm0 75h-1 1Zm0-1v1-1Zm-367 1v1-1Zm367 0v-1 1Zm-366 0v-1 1Zm0 1v1l1-1h-1Zm-2-74h1-1Zm1 74a1 1 0 0 0 1 0h-1Zm1-75h-1 1Zm1-1 366 2v-1l-366-2v1Zm366 1-3 74h1l3-74h-1Zm-3 74-364-2v1l364 2v-1ZM182 15c111 1 222-1 367-1v-1c-145 0-256 2-367 1v1Zm367-2-367 1v1l367-1v-1Zm-366 1c83-2 166-1 366 0v-1c-200-1-283-2-366 0v1Zm366-1H183v1h366v-1Zm0 1-3 72h1l3-72h-1Zm-2 72 3-72h-1l-3 72h [...]
</g>
+ <text fill="#fff" xml:space="preserve" style="white-space:pre" font-family="Roboto" font-size="28" letter-spacing="0em"><tspan x="272" y="60">Data Plane (DP)</tspan></text>
</g>
+</g>
</svg>
diff --git a/website/src/assets/images/pluginised.png b/website/src/assets/images/pluginised.png
index 1aa7320..7520b9d 100644
Binary files a/website/src/assets/images/pluginised.png and b/website/src/assets/images/pluginised.png differ
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index c18d864..79e8e94 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -52,8 +52,47 @@ html[data-theme="dark"] {
--color-downloads-dropdown-items: #4c4e50;
}
-body {
- font-family: "Inter", sans-serif;
+@font-face {
+ font-family: 'MaisonNeue-Medium';
+ src: local('MaisonNeue-Medium'), url(../fonts/MaisonNeue-Medium.otf) format('opentype');
+ font-display: swap;
+}
+@font-face {
+ font-family: 'MaisonNeue-Bold';
+ src: local('MaisonNeue-Bold'), url(../fonts/MaisonNeue-Bold.otf) format('opentype');
+ font-display: swap;
+}
+@font-face {
+ font-family: 'MaisonNeue-Light';
+ src: local('MaisonNeue-Light'), url(../fonts/MaisonNeue-Light.otf) format('opentype');
+ font-display: swap;
+}
+@font-face {
+ font-family: 'MaisonNeue-Demi';
+ src: local('MaisonNeue-Demi'), url(../fonts/MaisonNeue-Demi.otf) format('opentype');
+ font-display: swap;
+}
+@font-face {
+ font-family: 'MaisonNeue-ExtraBold';
+ src: local('MaisonNeue-ExtraBold'), url(../fonts/MaisonNeue-ExtraBold.otf) format('opentype');
+ font-display: swap;
+}
+
+::-webkit-scrollbar {
+ width: 5px;
+}
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+ background: #888;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+body, h1, h2, h3 {
+ font-family: MaisonNeue-Medium, sans-serif;
}
div.inner {
@@ -100,76 +139,9 @@ header h2 {
height: 30px;
}
-/* home splash */
-.home-splash {
- margin-top: 0px;
- margin-bottom: -50px;
-}
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
- .home-splash {
- margin-top: -20px;
- margin-bottom: -50px;
- }
-}
-
-.home-splash .title {
- font-size: 5rem;
- font-weight: 800;
- color: var(--color-title);
-}
-@media only screen and (min-device-width: 376px) and (max-device-width: 736px) {
- .home-splash .title {
- font-size: 3.52rem;
- }
-}
-
-@media only screen and (min-device-width: 320px) and (max-width: 375px) {
- .home-splash .title {
- font-size: 3rem;
- }
-}
-
-.home-splash .title.slogan .feature-word {
- color: var(--ifm-color-primary);
-}
-
-.home-splash .title.slogan .feature-word span {
- display: inline-block;
-}
-
-.home-splash .subtitle {
- color: var(--color-subtitle);
- opacity: 0.58;
- font-size: 1.2rem;
- width: 65%;
-}
-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
- .home-splash .subtitle {
- color: var(--ifm-color-dark);
- opacity: 0.58;
- font-size: 1.2rem;
- width: 100%;
- margin-top: 30px;
- }
-}
-
-.home-splash .button-wrapper {
- margin-top: 28px;
-}
-
-/* showcase */
-.product-showcase-title {
- color: var(--color-primary);
- font-size: 60px;
- font-weight: bold;
-}
-
.showcase {
padding-left: 0;
padding-right: 0;
- margin-left: 0;
- margin-right: 0;
- margin-bottom: 70px;
}
.showcase .container {
padding-left: 0;
@@ -235,171 +207,590 @@ header h2 {
}
}
-/* events section */
-.events-section .events-container {
+/* button */
+.button {
+ margin: 0 10px;
+ padding: 12px 24px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 10px;
+ border: none;
+ background: #fee2e2;
+ color: #ef4444;
+ transition: all 0.3s;
+}
+.button:hover {
+ background: #fecaca;
+ color: #ef4444;
+}
+.button.github {
+ background: var(--color-github-button);
+ color: white;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+.button.github .github-logo {
+ height: 24px;
+ margin: 0 12px 1px 0px;
+}
+.button.github:hover {
+ background: var(--color-github-button-hover);
+}
+.button-wrapper {
+ margin: 0 -10px;
+}
+.button.secondary {
+ background: #f3f4f6;
+ color: #1f2937;
+ border: 1px solid #d1d5db;
+ box-sizing: border-box;
+ margin-bottom: 15px;
+}
+.button.secondary:hover {
+ background: #e5e7eb;
+}
+@media only screen and (max-width: 414px) {
+ .button {
+ margin: 0;
+ }
+ .button.secondary,
+ .button.github {
+ width: 100%;
+ }
+ .button-wrapper {
+ margin: 0;
+ }
+}
+a {
+ color: inherit;
+ cursor: pointer;
+}
+a:hover {
+ color: var(--color-primary);
+}
+.markdown a {
+ color: var(--color-primary);
+}
+
+.arrow-btn {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1002;
+}
+
+/*Hero section*/
+.hide-title, .hide-subtitle, .hide-ctas {
+ opacity: 0;
+}
+
+.hero-sec-wrap{
+ display: flex;
+ background: #f4f4f4ad;
+ height: 100vh;
+}
+
+.homeCanvas-overlay {
+ position: absolute;
+ width: 50vw;
+ height: 100vh;
+ background: #FFFFFF;
+ top: -1px;
+ right: 0px;
+}
+
+.homeCanvas{
+ width: 50vw;
+ height: 100vh;
+}
+
+.hero-text {
+ height: 100%;
display: flex;
- overflow: hidden;
flex-wrap: wrap;
- width: 100%;
- margin: 16px 0;
+ align-content: center;
+ width: 50%;
+ padding: 0 0 0 6vw;
+}
+
+.hero-title {
+ font-family: MaisonNeue-Bold;
+ color: #121212;
+ width: 42vw;
+ font-size: 4.2rem;
+ letter-spacing: 0.2px;
+ margin: 0;
}
-.events-section .event-item {
+
+.hero-subtitle {
+ z-index: 100;
+ font-size: 1.1rem;
+ font-family: MaisonNeue-Light;
+ position: relative;
+ color: #615D5D;
+ line-height: 30px;
+ letter-spacing: 0.2px;
+ margin: 25px 0;
+ padding-right: 20px;
+}
+
+.hero-ctas {
display: flex;
- flex-direction: column;
- justify-content: space-between;
- text-align: left;
- border: 1px solid var(--color-border);
- margin: 8px;
- padding: 8px 18px;
- border-radius: 6px;
- flex: 1;
- cursor: pointer;
+ align-items: center;
+}
+
+.btn {
+ background: #030c16;
+ border-style: solid;
+ border-width: 1px;
+ border: none;
+ color: white;
+ padding: 5px 20px 5px 20px;
+ border-radius: 20px;
+ font-size: 1rem;
+ text-decoration: none;
+ margin: 0 10px 0px 0;
transition: all 0.3s;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+}
+.btn:hover {
+ background: #9b9b9b;
+ color: white;
text-decoration: none;
- min-width: 256px;
}
-@media (max-width: 574px) {
- .events-section .event-item .event-read-button {
- display: none;
- }
+
+.btn-docs{
+ display: flex;
}
-.events-section .event-item .event-title {
- font-weight: 500;
- color: var(--color-subtitle);
- opacity: 0.88;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
+.btn-docs:hover{
+ text-decoration: none;
+ color: #9b9b9b;
+}
+
+/*Architecture section*/
+.hldesign{
+ height: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.hldesign-graphic{
+ width: 60%;
+ height: auto;
+}
+
+.Architecture_svg__architecture {
+ font-family: MaisonNeue-Medium;
+}
+
+.arch {
+ background: linear-gradient(180deg, #E2ECFF 15%, #FFF 90%);
+ position: relative;
+ z-index: 1;
+ padding: 50px 0;
overflow: hidden;
- transition: all 0.3s;
}
-.events-section .event-item .event-publish-time {
- color: var(--color-subtitle);
- opacity: 0.58;
- font-size: 12px;
+
+.arch-card-caption{
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ color: #615D5D;
}
-.events-section .event-item .event-read-button {
- margin-top: 16px;
- font-weight: 500;
- color: var(--color-subtitle);
- opacity: 0.58;
- font-size: 12px;
- transition: all 0.3s;
+
+.arch-card-border {
+ z-index: -10;
+ position: absolute;
+ width: 66%;
+ height: 100%;
+ border-style: solid;
+ top: 15px;
+ left: 17%;
+ border-color: white;
+ background: white;
+ filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
}
-.events-section .event-item .event-read-button svg {
- height: 8px;
- margin-left: 1px;
- transition: all 0.3s;
+
+.arch-head, .compare-head, .testimonials-head, .docs-promo-head, .oss-promo-head {
+ font-size: 2.4rem;
+ position: relative;
+ left: 16.8%;
+ width: 83.2%;
}
-.events-section .event-item:hover .event-title {
- color: var(--ifm-color-primary);
+
+.arch-subtitle, .compare-subtitle, .testimonials-subtitle, .docs-promo-subtitle, .oss-promo-subtitle {
+ font-size: 1.13rem;
+ position: relative;
+ left: 16.8%;
+ width: 70%;
+ color: #615D5D;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light;
+ font-weight: 700;
}
-.events-section .event-item:hover .event-read-button {
- opacity: 0.88;
+
+.arch-card-caption > p{
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light;
+ font-weight: 700;
+ text-align: center;
+ position: relative;
+ bottom: -15px;
+ font-size: 1rem;
}
-.events-section .event-item:hover {
- border-color: rgb(231, 231, 231);
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+.add-left-margin{
+ position: relative;
+ left: 16.8%;
}
-.events-section .events-view-all-button {
- margin-top: 8px;
- font-size: 14px;
+
+/*Features section*/
+.feat-head {
+ font-size: 2.4rem;
+ width: 75%;
}
-/* learn how */
-.learn-how {
+.feat-container-d {
+ display: block;
width: 100%;
- border-radius: 16px;
- background: var(--color-secondary-bg);
+ height: 300vh;
+ display: flex;
}
-.learn-how .container {
- margin-top: 36px;
- padding-bottom: 30px;
+
+.feat-container-m {
+ display: none;
+}
+
+.feat-head-desc{
+ font-size: 1.4rem;
+ color: #363130;
+ opacity: 0.5;
+ position: relative;
+ left: 17%;
+ margin: 0;
+ line-height: 1.8;
+ width: fit-content;
}
-.learn-how .hero__title {
+
+.feat-desc{
+ margin: 10px 0;
+ font-size: 1.13rem;
+ color: #615D5D;
font-weight: 700;
- color: var(--color-subtitle);
- opacity: 0.84;
- font-size: 2.2rem;
- margin-bottom: 10px;
+ font-family: MaisonNeue-Light;
+ width: 65%;
+ left: 17%;
}
-.learn-how .hero__subtitle {
- color: var(--color-secondary-text);
+
+.add-left-margin-feat{
+ position: absolute;
+ left: 34%;
}
-/* button */
-.button {
- margin: 0 10px;
- padding: 12px 24px;
- font-size: 18px;
- font-weight: 600;
+.i-text{
+ font-family: MaisonNeue-Demi;
+ font-size: 2rem;
+ padding: 0 0 200px 0;
+}
+
+.text-div{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.i-text-desc{
+ font-size: 1.13rem;
+ color: #615D5D;
+ font-weight: 700;
+ font-family: MaisonNeue-Light;
+}
+
+.i-image {
+ opacity: 1;
+ width: auto;
+ height: 90%;
border-radius: 10px;
- border: none;
- background: #fee2e2;
- color: #ef4444;
- transition: all 0.3s;
+ max-width: 200%;
+ max-height: 100%;
+ filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
}
-.button:hover {
- background: #fecaca;
- color: #ef4444;
+
+.n-image{
+ opacity: 0;
+ width: auto;
+ height: 90%;
+ border-radius: 10px;
+ max-height: 100%;
+ max-width: 200%;
+ filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
+}
+
+.i-image-col{
+ opacity: 1;
+ width: 100%;
+ height: auto;
+ max-height: 100%;
+ max-width: 100%;
+ margin: 0 0 20px 0;
+ filter: drop-shadow(0px 4px 10px rgb(0,0,0,0.25));
+}
+
+.imagePosition{
+ position: absolute;
+ bottom: 10px;
+ left: 30px;
+}
+
+.i-text-col {
+ font-family: MaisonNeue-Demi;
+ font-size: 2rem;
+ top: 0;
+}
+
+.i-text-desc-col {
+ font-size: 0.95rem;
+ color: #615D5D;
+ font-weight: 700;
+ font-family: MaisonNeue-Light;
+ width: 80%;
+}
+
+.hiddenDiv-col{
+ opacity: 0;
+}
+
+/*benefits section*/
+.row-benefit{
+ margin: 100px 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: fit-content;
+}
+
+.benefit{
+ background: #fff8f6;
+ padding: 50px 0;
+}
+
+.benefit-infograph{
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/*Comparison table section*/
+.compare {
+ padding: 50px 0;
+}
+
+.table tbody td:nth-child(even) {
+ background: rgba(14,30,37,.02);
+}
+
+.table tbody tr:nth-child(odd) {
+ background: rgba(14,30,37,.02);
+}
+
+.table thead {
+ font-size: 1.13rem;
+}
+
+.table {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px rgba(255,255,255,.1),0 2px 4px 0 rgba(14,30,37,.12);
+ color: rgba(14,30,37,.87);
+ font-size: 1.13rem;
+ margin: 1em auto;
+ border-collapse: collapse;
+ max-width: 100%;
+ overflow-x: auto;
+ table-layout: fixed;
+ width: 66.4%;
+ font-family: MaisonNeue-Light;
+ display: table;
+}
+
+.table td, .table th {
+ font-weight: 700;
+ min-width: 11.089em;
+ padding: .85rem 1rem;
+ text-align: center;
+}
+
+.table-head {
+ font-weight: 900;
+ font-family: MaisonNeue-Demi;
+ font-size: 1.25rem;
+}
+
+.table tbody th {
+ font-weight: 700;
+}
+
+.table td:first-child, .table th:first-child {
+ text-align: left;
+}
+
+/*opensource and docs promotion*/
+.docs-promo{
+ display: flex;
+ padding: 100px 0;
+ background: #fff8f6;
+ justify-content: center;
+}
+
+.docs-promo-text {
+ display: flex;
+ justify-content: center;
+ flex-flow: column;
+}
+
+.docs-promo-video {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50%;
+}
+
+.docs-promo-video>iframe {
+ width: 500px;
+ height: 288px;
+}
+
+.oss-promo {
+ display: flex;
+ padding: 50px 0;
+ flex-flow: row-reverse;
+ color: black;
+ background: #fff8f6;
+}
+
+.oss-promo-text {
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ background: #121010;
+ color: white;
+}
+
+.oss-promo-infograph {
+ background: #0a0a0a;
+ width: 50%;
+ height: 100%;
+}
+
+.oss-promo-cta {
+ background: #080808;
+ display: flex;
+ width: fit-content;
+ font-size: 0.95rem;
+ border-style: solid;
+ border-radius: 32px;
+ border-width: 1.75px;
+ padding: 5px 12px;
+ transition: background 0.5s;
+}
+.oss-promo-cta:hover {
+ background: #9b9b9b;
+ color: #080808;
+ border-style: solid;
}
-.button.github {
- background: var(--color-github-button);
- color: white;
- display: inline-flex;
- align-items: center;
+.oss-promo-cta>a:hover {
+ color: #080808;
+}
+
+/*Events and newsletter*/
+.event-card-container {
+ display: flex;
justify-content: center;
- border: 1px solid #101827;
- padding: 11px 23px;
- margin-bottom: 1rem;
+ align-items: center;
+ width: 100%;
}
-.button.github .github-logo {
- height: 24px;
- margin: 0 12px 1px 0px;
+
+.event-card {
+ border-style: solid;
+ border-color: #fff;
+ box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.10);
+ font-size: 0.95rem;
+ font-family: MaisonNeue-Light;
+ font-weight: 700;
+ padding: 20px ;
+ width: 230px;
+ height: 200px;
+ margin: 0 20px;
+ border-radius: 10px;
+ position: relative;
}
-.button.github:hover {
- background: var(--color-github-button-hover);
+
+.event-card-title {
+ position: absolute;
+ top: 25px;
}
-.button-wrapper {
- margin: 0 -10px;
+.event-card-time {
+ position: absolute;
+ top: 50%;
}
-.button.secondary {
- background: #f3f4f6;
- color: #1f2937;
- border: 1px solid #d1d5db;
- padding: 11px 23px;
- margin-bottom: 1rem;
+.event-card-read {
+ position: absolute;
+ bottom: 25px;
}
-.button.secondary:hover {
- background: #e5e7eb;
+
+.newsletter {
+ display: flex;
+ font-weight: 700;
+ font-family: MaisonNeue-Light;
+ font-size: 0.95rem;
+ color: #615D5D;
+ letter-spacing: 0.2px;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin: 25px 0;
}
-@media only screen and (max-width: 414px) {
- .button {
- margin: 0;
- }
- .button.secondary,
- .button.github {
- width: 100%;
- }
- .button-wrapper {
- margin: 0;
- }
+
+.news-button {
+ border: none;
+ padding: 5px 30px;
+ border-style: solid;
+ border-radius: 20px;
+ background: #030c16;
+ color: white;
+ margin: 0;
+ text-decoration: none;
+ transition: all 0.3s;
}
-a {
- color: inherit;
- cursor: pointer;
+.news-button:hover {
+ background: #9b9b9b;
+ color: white;
+ text-decoration: none;
}
-a:hover {
- color: var(--color-primary);
+
+.endcta-text {
+ text-align: center;
+ font-size: 3.5rem;
+ font-family: MaisonNeue-ExtraBold;
}
-.markdown a {
- color: var(--color-primary);
+
+.endcta-btns {
+ display: flex;
+ justify-content: center;
+ padding-bottom: 2rem;
+}
+
+.rocket {
+ width: 6vw;
+ height: auto;
+ transform: rotate(45deg);
}
/* footer */
-.footer {
- margin-top: 2rem;
+.footer__title {
+ /* margin-top: 2rem; */
+ font-family: MaisonNeue-Medium !important;
}
.footer__links .footer__title {
font-weight: 700;
@@ -438,42 +829,6 @@ a:hover {
opacity: 0.88;
}
-/*
- Animations
-*/
-
-/* feature-word-text */
-.feature-word-text-enter,
-.feature-word-text-appear {
- opacity: 0;
- transform: translateX(-24px);
-}
-
-.feature-word-text-enter-active,
-.feature-word-text-appear-active {
- opacity: 1;
- transform: translateX(0);
- transition: all 300ms;
-}
-
-.feature-word-text-enter-done {
- opacity: 1;
-}
-
-.feature-word-text-exit {
- transform: translateX(24px);
- opacity: 1;
-}
-
-.feature-word-text-exit-active {
- opacity: 0;
- transition: opacity 300ms;
-}
-
-.feature-word-text-exit-done {
- opacity: 0;
-}
-
/* help page */
.help-page .cards {
margin-top: 38px;
@@ -541,75 +896,10 @@ a:hover {
display: flex;
}
-/*contribution section*/
-.contribution {
- justify-content: center;
- margin-bottom: 100px;
-}
-
-.center-elem {
- display: flex;
- justify-content: center;
-}
-
-.contribution-text {
- color: var(--color-primary);
- text-align: center;
-}
-
-.contribution-link {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.contribution-logo {
- vertical-align: middle;
- margin: 0 12px 1px 0px;
- height: 24px;
-}
-
.team-githubLogo {
height: 24px;
}
-/*newsletter section*/
-
-.center-elem {
- display: flex;
- justify-content: center;
-}
-
-.news-logo {
- margin-bottom: 20px;
-}
-
-.news-button {
- border: #111827;
- padding: 5px 30px;
- border-style: solid;
- border-radius: 9px;
- background: var(--color-github-button);
- color: white;
- margin: 4px;
- text-decoration: none;
- transition: all 0.3s;
-}
-.news-button:hover {
- background: var(--color-github-button-hover);
- color: white;
- text-decoration: none;
-}
-
-.news-logo-svg {
- height: 42px;
-}
-
-.news-text {
- color: var(--color-primary);
- text-align: center;
-}
-
.downloads-subtitle {
color: var(--color-downloads-subtitle);
}
@@ -659,7 +949,7 @@ a:hover {
}
.pic-wrapper {
- width: 440px;
+ width: 350px;
position: fixed;
display: flex;
right: 0;
@@ -679,11 +969,13 @@ a:hover {
position: absolute;
z-index: 1000;
top: 10px;
- right: 25px;
+ right: 10px;
+ padding: 5px;
font-weight: 900;
color: rgb(135, 151, 172);
font-size: 16px;
outline: none;
+ border-radius: 100px;
border: 1px solid transparent;
}
@@ -693,13 +985,13 @@ a:hover {
.pic-wrapper-close svg {
width: 10px;
- height: 15px;
+ height: 10px;
display: inherit;
}
@media only screen and (max-width: 440px) {
.pic-wrapper {
- width: 100%;
+ width: 70%;
}
}
@@ -738,7 +1030,6 @@ a:hover {
}
/*Sidebar Section*/
-
.sidebar-link{
color: #d0312d;
}
@@ -746,3 +1037,272 @@ a:hover {
.sidebar-link :hover {
color: #ffb3b3;
}
+
+/* Mobile-phones and tablet styles */
+@media only screen and (min-width: 300px) and (max-width: 1100px) {
+ body {
+ overflow-x: hidden !important;
+ }
+
+ .hero-sec-wrap{
+ display: block;
+ height: fit-content;
+ }
+
+ .homeCanvas-overlay {
+ position: absolute;
+ width: 100vw;
+ height: 50vh;
+ background: #EBE6DC;
+ top: -1px;
+ right: 0px;
+ }
+
+ .hero-text {
+ height: 50%;
+ width: 100%;
+ padding: 5rem 0 0 6vw;
+ }
+
+ .hero-title {
+ width: 100vw;
+ font-size: 3.4rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.05rem;
+ line-height: 28px;
+ margin: 25px 0 24px 0;
+ padding-right: 20px;
+ }
+
+ .add-margin {
+ margin: 30px 0;
+ }
+
+ .homeCanvas{
+ width: 100vw;
+ height: 50vh;
+ }
+
+ .hldesign-graphic{
+ width: 100%;
+ }
+
+ .arch-scale-svg {
+ display: none;
+ }
+
+ .arch-card-border {
+ width: 100%;
+ left: 0;
+ top: 10px;
+ }
+
+ .arch-head, .compare-head, .testimonials-head, .docs-promo-head, .oss-promo-head {
+ left: 7%;
+ width: 83%;
+ }
+
+ .arch-subtitle, .compare-subtitle, .testimonials-subtitle, .docs-promo-subtitle, .oss-promo-subtitle {
+ left: 7%;
+ width: 85%;
+ }
+
+ .add-left-margin{
+ position: relative;
+ left: 7%;
+ }
+
+ .add-left-margin-feat{
+ position: absolute;
+ left: 7%;
+ }
+
+ .bottom-pos {
+ bottom: 34%;
+ }
+
+ .feat-head {
+ font-size: 2.13rem;
+ width: 84%;
+ }
+
+ .feat-head-desc{
+ left: 7%;
+ }
+
+ .feat-desc{
+ width: 83%;
+ left: 7%;
+ }
+
+ .feat-container-d {
+ display: none;
+ }
+ .feat-container-m {
+ display: block;
+ }
+
+ .benefit{
+ background: #fff8f6;
+ padding: 50px 0;
+ height: 100vh;
+ }
+
+ .row-benefit {
+ margin: 0 0px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: column-reverse;
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ }
+
+ .benefit-infograph{
+ width: 100%;
+ padding: 0 0 60px 0;
+ }
+
+ .row-reverse{
+ flex-flow: column;
+ }
+
+ .row-hidden{
+ opacity: 0;
+ }
+
+ .table {
+ width: 100%;
+ display: block;
+ }
+
+ .docs-promo {
+ flex-flow: column-reverse;
+ padding: 50px 0;
+ }
+
+ .docs-promo-video {
+ width: 100%;
+ }
+
+ .docs-promo-video>video {
+ padding: 0 26px 35px 26px;
+ width: 100%;
+ height: auto;
+ }
+
+ .oss-promo {
+ flex-flow: column;
+ background: #121010;
+ padding: 50px 0 0 0;
+
+ }
+
+ .oss-promo-text {
+ width: 100%;
+ }
+
+ .oss-promo-infograph {
+ width: 100%;
+ margin-top: 30px;
+ }
+
+ .event-card {
+ margin: 0 20px 20px 20px;
+ }
+
+ .event-card-container {
+ flex-flow: column;
+ }
+
+ .newsletter>p {
+ text-align: center;
+ }
+
+ .endcta-text {
+ font-size: 2.4rem;
+ }
+
+ .navbar {
+ transform: none !important;
+ }
+
+ .rocket {
+ width: 12vw;
+ height: auto;
+ transform: rotate(45deg);
+ }
+}
+
+@media only screen and (min-height: 500px) and (max-height: 670px) {
+ .benefit-infograph {
+ width: 70%;
+ padding: 0 0 60px 0;
+ }
+}
+
+.react-toggle {
+ display: none;
+}
+
+.bottom-pos {
+ bottom: 34%;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
+ .feat-container-d {
+ display: none;
+ }
+ .feat-container-m {
+ display: block;
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
+ .hero-title {
+ font-size: 2.95rem;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .endcta-text {
+ font-size: 2.0rem;
+ }
+
+ .arch-head, .compare-head, .testimonials-head, .docs-promo-head, .oss-promo-head {
+ left: 7%;
+ width: 93%;
+ }
+
+ .benefit .feat-desc {
+ font-size: 0.85rem;
+ }
+
+ .oss-promo-infograph {
+ overflow: hidden;
+ }
+}
+
+@media (min-width: 1600px) and (max-width: 2080px) {
+ .hero-title {
+ width: 40vw;
+ font-size: 5.2rem;
+ }
+
+ .hero-subtitle {
+ width: 40vw;
+ }
+
+ .bottom-pos {
+ bottom: 38%;
+ }
+
+ .arch-scale-svg {
+ transform: scale(1.2);
+ }
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 7f72807..ec203d2 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,77 +1,81 @@
-const React = require("react");
-import Link from "@docusaurus/Link";
+import React, { useState, useEffect, useLayoutEffect } from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import useBaseUrl from "@docusaurus/useBaseUrl";
import Layout from "@theme/Layout";
-import GitHubLogo from "../assets/icons/github-logo.svg";
-import { useState, useEffect } from "react";
-import { CSSTransition } from "react-transition-group";
-import ChevronRight from "../assets/icons/chevron-right.svg";
+import useThemeContext from '@theme/hooks/useThemeContext';
-const HomeSplash = () => {
- const [featureWordIndex, setFeatureWordIndex] = useState(0);
- const featureWords = ["Dynamic", "Real-Time", "Performant"];
+import HeroSection from "./sections/heroSection";
+import Architecture from "./sections/architecture";
+import Features from "./sections/features";
+import Benefits from "./sections/benefits";
+import Comparison from "./sections/comparison";
+import OpensourcePromo from "./sections/opensourcePromo";
+import NewsSection from "./sections/newsSection";
+import EndCTA from "./sections/endcta";
+import EventPosterCard from "./sections/components/eventPosterCard";
- const [isShow, setIsShow] = useState(true);
+const useWindowSize = () => {
+ const [size, setSize] = useState([0, 0]);
+ useLayoutEffect(() => {
+ function updateSize() {
+ setSize([window.innerWidth, window.innerHeight]);
+ }
+ window.addEventListener('resize', updateSize);
+ updateSize();
+ return () => window.removeEventListener('resize', updateSize);
+ }, []);
+ return size;
+}
- const changeFeatureWordIndex = (index) => {
- setIsShow(false);
- setFeatureWordIndex(index);
- setIsShow(true);
- };
-
- useEffect(() => {
- const timer = setInterval(() => {
- if (featureWordIndex >= featureWords.length - 1) {
- changeFeatureWordIndex(0);
- } else {
- changeFeatureWordIndex(featureWordIndex + 1);
- }
- }, 3600);
- return () => clearInterval(timer);
- }, [featureWordIndex]);
+const Showcase = () => {
+ const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+
+ useEffect(() => {
+ if(isDarkTheme) {
+ setLightTheme(true);
+ }
+ }, [])
+
+ const { siteConfig } = useDocusaurusContext();
+ if (!(siteConfig.customFields.showcases || []).length) {
+ return null;
+ }
+ const showcases = siteConfig.customFields.showcases.map((user) => (
+ <a href={user.infoLink} key={user.infoLink} target="_blank">
+ <img className="user-logo" src={'https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/static/img/' + user.image} alt={user.caption} />
+ </a>
+ ));
+ const middleIndex = (showcases.length / 2).toFixed(0);
return (
- <div className="hero home-splash">
+ <div className="hero text--center showcase">
<div className="container">
- <div className="inner">
- <div className="padding-vert--md">
- <h1 className="title slogan">
- A
- <span className="feature-word">
- <CSSTransition
- in={isShow}
- timeout={2000}
- classNames="feature-word-text"
- appear={true}
- >
- <span>{featureWords[featureWordIndex]}</span>
- </CSSTransition>
- </span>
- <span className="hide-on-mobile"> </span>Cloud-Native API
- Gateway
- </h1>
- <div className="subtitle">
- Provides rich traffic management features such as load balancing,
- dynamic upstream, canary release, circuit breaking,
- authentication, observability, and more. Based on the Nginx
- library and etcd.
- </div>
+ <p>
+ A wide variety of Companies and Organizations use APISIX for Research, Production and Commercial products
+ <br />
+ <a
+ href="https://github.com/apache/apisix/blob/master/powered-by.md"
+ target="_blank"
+ rel="noopener"
+ >
+ <u>Add your company</u>
+ </a>
+ </p>
+ <div className="user-logos">
+ <div className="logo-row">
+ <span className="user-logos-container">
+ <section>
+ <span>{showcases.slice(0, middleIndex)}</span>
+ <span>{showcases.slice(0, middleIndex)}</span>
+ </section>
+ </span>
</div>
- <div className="pluginWrapper button-wrapper">
- <Link
- to="https://github.com/apache/apisix"
- className="button button--outline button--primary github"
- >
- <GitHubLogo className="github-logo" />
- View on GitHub
- </Link>
- <Link
- to={useBaseUrl("downloads")}
- className="button button--outline button--primary secondary"
- >
- Downloads
- </Link>
+ <div className="logo-row">
+ <span className="user-logos-container">
+ <section>
+ <span>{showcases.slice(middleIndex, showcases.length)}</span>
+ <span>{showcases.slice(middleIndex, showcases.length)}</span>
+ </section>
+ </span>
</div>
</div>
</div>
@@ -79,140 +83,22 @@ const HomeSplash = () => {
);
};
-const LearnHow = () => (
- <div className="hero">
- <div className="learn-how">
- <div className="container">
- <div className="row">
- <div className="col col--7">
- <p className="hero__title">
- <small>Description</small>
- </p>
- <p className="hero__subtitle">
- <small>
- Cloud-native microservices API gateway, delivering the ultimate
- performance, security, open source and scalable platform for all
- your APIs and microservices. Apache APISIX is based on Nginx and
- etcd. Compared with traditional API gateways, APISIX has dynamic
- routing and plug-in hot loading, which is especially suitable
- for API management under micro-service system.
- </small>
- </p>
- </div>
- <div className="col">
- <img
- className="image"
- src="https://user-images.githubusercontent.com/40708551/114740649-a9bf2200-9d67-11eb-8e1d-1409fb5c18c2.png"
- align="right"
- alt="apisix-description"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
-);
-
-const EventsSection = () => {
- const { siteConfig } = useDocusaurusContext();
- const events = (siteConfig.customFields.events || [])
- .slice(0, 4)
- .map((event) => {
- const publishTime = event.fileName.slice(0, 10);
- const splittedFileName = event.fileName.split("-");
- const url = `/blog/${splittedFileName
- .slice(0, 3)
- .join("/")}/${splittedFileName.slice(3).join("-")}`;
- return (
- <a className="event-item" key={event.title} href={url} target="_blank">
- <div>
- <div className="event-title">{event.title}</div>
- <div className="event-publish-time">{publishTime}</div>
- </div>
- <div className="event-read-button">
- Read <ChevronRight />
- </div>
- </a>
- );
- });
- return (
- <div className="hero text--center events-section">
- <div className="container">
- <div>
- <h1 className="color-primary">Events</h1>
- </div>
- <div className="events-view-all-button">
- <a href="blog/tags/Events" target="_blank">
- <u>View All Events</u>
- </a>
- </div>
- <div className="events-container">{events}</div>
- </div>
- </div>
- );
-};
-
-const ContributionSection = () => {
-
- return (
- <div className="contribution">
- <div className="center-elem contribution-text">
- <h2>Make your first contribution to Apache APISIX®</h2>
- </div>
- <div className="center-elem">
- <p>Find a good first issue to get you started !</p>
- </div>
- <div className="contribution-link">
- <Link
- to="/docs/general/contributor-guide#good-first-issues"
- >
- <GitHubLogo className="contribution-logo" />
- Good First Issues
- </Link>
- </div>
- </div>
- );
-};
-
-const NewsletterSection = () => {
+const Index = (props) => {
- return (
- <div className="newsletter">
- <div className="center-elem news-logo">
- <svg className="news-logo-svg" width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F" />
- <path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)" />
- <path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)" />
- <defs>
- <linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
- <stop offset="0.536111" stopColor="#FC0A04" />
- <stop offset="1" stopColor="#CF0500" stopOpacity="0.77" />
- </linearGradient>
- <linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
- <stop offset="0.473466" stopColor="#E2423E" />
- <stop offset="1" stopColor="#E2423E" stopOpacity="0.77" />
- </linearGradient>
- </defs>
- </svg>
- </div>
- <div className="center-elem news-text">
- <h2>Stay up to date about all Apache APISIX® News</h2>
- </div>
- <div className="center-elem">
- <a className="news-button" href="/docs/general/subscribe-guide">Subscribe</a>
- </div>
- </div>
- );
-};
+ const [screenWidth, screenHeight] = useWindowSize();
-const Index = (props) => {
return (
<Layout>
- <HomeSplash />
- <LearnHow />
- <EventsSection />
- <ContributionSection />
- <NewsletterSection />
+ <HeroSection />
+ <Showcase />
+ <Architecture screenWidth={screenWidth} screenHeight={screenHeight}/>
+ <Features screenWidth={screenWidth} screenHeight={screenHeight}/>
+ <Benefits screenWidth={screenWidth} screenHeight={screenHeight}/>
+ <Comparison />
+ <OpensourcePromo />
+ <NewsSection />
+ <EndCTA />
+ <EventPosterCard />
</Layout>
);
};
diff --git a/website/src/pages/sections/architecture.jsx b/website/src/pages/sections/architecture.jsx
new file mode 100644
index 0000000..abcc2f9
--- /dev/null
+++ b/website/src/pages/sections/architecture.jsx
@@ -0,0 +1,87 @@
+import React, { useEffect } from "react";
+import gsap from "gsap";
+
+import "../../css/customTheme.css";
+import HLDesign from "../../assets/images/infographs/Architecture.svg";
+import Pattern from "../../assets/images/PatternGrouped.svg";
+
+const Architecture = (props) => {
+ const screenWidth = props.screenWidth;
+
+ useEffect(() => {
+ let strokePaths = []
+ for (let i=1; i<28; i++) {
+ strokePaths.push(".PatternGrouped_svg__p"+i);
+ }
+
+ let tlStroke = gsap.timeline({
+ paused: true,
+ defaults: {
+ ease: "power2.inOut",
+ yoyo: true,
+ repeat: -1,
+ },
+ });
+
+ tlStroke.fromTo(strokePaths, {
+ strokeDashoffset: 10000
+ }, {
+ strokeDashoffset: 0,
+ duration: 5,
+ stagger: 0.3,
+ ease: "power2.inOut",
+ stroke: "red",
+ });
+
+ let observer = new IntersectionObserver(onIntersection, {
+ root: null,
+ threshold: 0.4,
+ })
+
+ function onIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tlStroke.paused(false);
+ } else {
+ tlStroke.paused(true);
+ }
+ }
+ );
+ }
+
+ observer.observe( document.querySelector('.arch'));
+
+ return () => {
+ tlStroke.pause(0).kill(true);
+ observer.disconnect();
+ }
+ }, []);
+
+ return (
+ <>
+ <div className="arch">
+ <div style={{position: "absolute", display: "flex", justifyContent: "center", alignItems: "center", height: "120vh"}}>
+ <Pattern className="arch-scale-svg" style={{width: "100vw", strokeWidth: "3", zIndex: "-10", opacity: "0.25", strokeDasharray: "10000"}}/>
+ </div>
+ <div>
+ <h3 className="arch-head">Building for large-scale, high value systems</h3>
+ </div>
+ <div className="arch-subtitle">
+ <p>Apache APISIX lets you build Cloud-Native Microservices API gateways, delivering the ultimate performance, security, open source and scalable platform for all your APIs and microservices.</p>
+ </div>
+ <div className="arch-card" style={{position: "relative"}}>
+ <div className="hldesign">
+ <HLDesign className="hldesign-graphic"/>
+ </div>
+ <div className="arch-card-caption">
+ <p style={{width: screenWidth >=768 ? "50%" : "90%"}}>Apache APISIX is based on Nginx and etcd. Compared with traditional API gateways, APISIX has dynamic routing and hot-loading plugins</p>
+ </div>
+ <div className="arch-card-border">
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Architecture;
diff --git a/website/src/pages/sections/benefits.jsx b/website/src/pages/sections/benefits.jsx
new file mode 100644
index 0000000..ad429e4
--- /dev/null
+++ b/website/src/pages/sections/benefits.jsx
@@ -0,0 +1,386 @@
+import React, { useRef, useEffect, useState } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import "../../css/customTheme.css";
+
+import Performance from "../../assets/images/infographs/performance.svg";
+import Security from "../../assets/images/infographs/security.svg";
+import Scale from "../../assets/images/infographs/scale.svg";
+import Dynamic from "../../assets/images/infographs/dynamic.svg";
+import Multiplatform from "../../assets/images/infographs/multiplatform.svg";
+
+const Benefits = (props) => {
+ const triggerDiv = useRef(null);
+ const performance = useRef(null);
+ const security = useRef(null);
+ const scale = useRef(null);
+ const dynamic = useRef(null);
+ const multiplatform = useRef(null);
+
+ gsap.registerPlugin(ScrollTrigger);
+
+ const screenWidth = props.screenWidth;
+
+ useEffect(() => {
+ let tweenTls = [];
+ let observers = [];
+
+ for (let i=0; i<5; i++) {
+ tweenTls.push(gsap.timeline({
+ paused: true,
+ yoyo: true,
+ yoyoEase: "power3.out",
+ repeat: -1,
+ defaults: {
+ yoyo: true,
+ ease: "power3.inOut",
+ yoyoEase: "power3.out"
+ },
+ }));
+ }
+
+ let circles = [];
+ let links = [];
+ const colors = ["#FE7F80", "white", "red"];
+ const pathColors = ["#FE7F80", "black"];
+
+ for (let i=1; i<28; i++) {
+ circles.push(".scale_svg__cir"+i);
+ links.push(".scale_svg__n"+i);
+ }
+
+ // Performance anim
+ tweenTls[0].fromTo(".performance_svg__network",{
+ strokeDashoffset: 1000,
+ stroke: "black"
+ },{
+ strokeDashoffset: 0,
+ duration: 1,
+ strokeWidth: 5,
+ stroke: "orange",
+ ease: "power2.in",
+ yoyoEase: "power2.out",
+ repeat: -1,
+ })
+ .fromTo(".performance_svg__lightning",{
+ fill: "orange",
+ }, {
+ fill: "red",
+ duration: 1,
+ repeat: -1,
+ },"-=1");
+
+ // Security anim
+ tweenTls[1].fromTo([".security_svg__malWarn-square", ".security_svg__malConn"],{
+ fill: "#FA5252",
+ },{
+ fill: "yellow",
+ duration: 0.5,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ for (let i = 1; i < 4; i++) {
+ tweenTls[1].fromTo(".security_svg__conn"+i, {
+ strokeWidth: 4,
+ strokeDasharray: 25,
+ strokeDashoffset: 200,
+ }, {
+ strokeDashoffset: 0,
+ duration: 2.5,
+ repeat: -1,
+ ease: "linear",
+ yoyoEase: "linear",
+ })
+ }
+
+ // Scaling anim
+ for (let i = 0; i < 27; i++) {
+ tweenTls[2].fromTo(circles[i],{
+ fill: gsap.utils.random(colors),
+ },{
+ fill: gsap.utils.random(colors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ tweenTls[2].fromTo(links[i],{
+ stroke: gsap.utils.random(pathColors),
+ },{
+ stroke: gsap.utils.random(pathColors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ })
+ }
+
+ // Dynamic anim
+ tweenTls[3].repeatDelay(1.5);
+ tweenTls[3].fromTo([".dynamic_svg__rcard"],{
+ x: -400,
+ opacity: 0,
+ },{
+ opacity: 1,
+ x: 0,
+ ease: "sin.inOut",
+ duration: 1.5,
+ })
+ .fromTo(".dynamic_svg__arrow", {
+ opacity: 0,
+ }, {
+ opacity: 1,
+ ease: "power3.out",
+ duration: 0.5,
+ })
+ .fromTo(".dynamic_svg__lightning", {
+ opacity: 0,
+ y: 10,
+ }, {
+ opacity: 1,
+ y: 0,
+ duration: 1,
+ ease: "power2.inOut",
+ });
+
+ // Multiplatform anim
+ for(let i = 1; i < 4; i++) {
+ tweenTls[4].fromTo(".multiplatform_svg__server-port"+i,{
+ fill: "#60E0F2",
+ },{
+ fill: "#ffdc21",
+ duration: 0.5,
+ });
+ }
+
+ let standloneObserver = new IntersectionObserver(onIntersection, {
+ root: null,
+ threshold: 0.4,
+ })
+
+ let rot = 0;
+ const tweenArrow = gsap.fromTo(".multiplatform_svg__arrows",
+ {
+ rotation: rot,
+ },{
+ rotation: -360+rot,
+ transformOrigin:"50% 50%",
+ ease: "power3.inOut",
+ duration: 3,
+ repeat: -1,
+ paused: true,
+ onComplete: () => {
+ rot -= 360;
+ }
+ });
+ const tweenFloat = gsap.fromTo(".multiplatform_svg__lightning",{
+ y: -2.5,
+ },{
+ y: 5,
+ duration: 1,
+ ease: "linear",
+ repeat: -1,
+ yoyo: true,
+ paused: true,
+ yoyoEase: "linear",
+ });
+
+ function onIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tweenArrow.paused(false);
+ tweenFloat.paused(false);
+ } else {
+ tweenArrow.paused(true);
+ tweenFloat.paused(true);
+ }
+ });
+ }
+
+ standloneObserver.observe(multiplatform.current);
+
+ const elems = [performance.current, security.current, scale.current, dynamic.current, multiplatform.current];
+ for (let i=0; i<5; i++) {
+ observers.push(new IntersectionObserver((entries, opts)=>{
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ tweenTls[i].paused(false);
+ } else {
+ tweenTls[i].paused(true);
+ }
+ }
+ );
+ }, {
+ root: null,
+ threshold: .2
+ }));
+ }
+
+ observers.forEach((it, index)=>{
+ it.observe(elems[index]);
+ });
+
+ return () => {
+ observers.forEach((it, index)=>{
+ it.disconnect();
+ });
+ tweenTls.forEach((it, index)=>{
+ it.pause(0).kill(true);
+ });
+ }
+ }, [])
+
+ useEffect(() => {
+ ScrollTrigger.saveStyles([
+ performance.current,
+ security.current,
+ scale.current,
+ dynamic.current,
+ multiplatform.current,
+ ]);
+
+ ScrollTrigger.matchMedia({
+ "(max-width: 1100px)": () => {
+ const tl = gsap.timeline({
+ defaults: {
+ ease: "linear"
+ },
+ scrollTrigger: {
+ id: 'benefits-scrolltrigger',
+ trigger: triggerDiv.current,
+ start: "top top",
+ pin: triggerDiv.current,
+ scrub: 1,
+ end: "+=500%"
+ }
+ });
+ tl.fromTo(performance.current,{
+ opacity: 1,
+ },{
+ opacity: 0,
+ })
+ .fromTo(security.current,{
+ opacity: 0,
+ },{
+ opacity: 1,
+ })
+ .to(security.current,{
+ opacity: 0,
+ })
+ .fromTo(scale.current,{
+ opacity: 0,
+ }, {
+ opacity: 1
+ })
+ .to(scale.current,{
+ opacity: 0,
+ })
+ .fromTo(dynamic.current,{
+ opacity: 0,
+ }, {
+ opacity: 1
+ })
+ .to(dynamic.current,{
+ opacity: 0,
+ })
+ .fromTo(multiplatform.current,{
+ opacity: 0,
+ }, {
+ opacity: 1,
+ });
+ },
+ "(min-width: 1101px)": () => {
+ const tl = gsap.timeline();
+ tl.to(performance.current,{
+ opacity: 1,
+ })
+ .to(security.current,{
+ opacity: 1,
+ })
+ .to(scale.current,{
+ opacity: 1,
+ })
+ .to(dynamic.current,{
+ opacity: 1,
+ })
+ .to(multiplatform.current,{
+ opacity: 1,
+ });
+ }
+ });
+ },[]);
+
+ return (
+ <>
+ <div ref={triggerDiv} className="benefit" style={{ position: "relative"}}>
+ <div ref={performance} className="row-benefit" >
+ <div style={{width: screenWidth > 768 ? "50%" : "100%"}}>
+ <h3 className="feat-head-desc">Performance</h3>
+ <h1 className="feat-head add-left-margin">Ultimate performance </h1>
+ <p className="feat-desc add-left-margin">
+ Apache APISIX uses radixtree-route-matching and etcd under the hood to provide you the ability to create high speed synchronized systems. From routing to built-in plugins, all these are designed and implemented to be uber performant with the minimum latency possible.
+ </p>
+ </div>
+ <div className="benefit-infograph">
+ <Performance style={{width: screenWidth >=768 ? "35%" : "40%"}}/>
+ </div>
+ </div>
+
+ <div ref={security} className="row-benefit row-reverse row-hidden" >
+ <div className="benefit-infograph">
+ <Security style={{width: screenWidth >=768 ? "75%" : "100%", position: "relative", left: screenWidth >=768 ? "3%" : "0"}}/>
+ </div>
+ <div style={{width: screenWidth > 768 ? "50%" : "100%"}}>
+ <h3 className="feat-head-desc">Security</h3>
+ <h1 className="feat-head add-left-margin">Shield against the malicious</h1>
+ <p className="feat-desc add-left-margin">
+ Apache APISIX provides multiple security plugins for identity authentication and interface verification, putting stability and security first. For more information, check <Link style={{color: "#e8433e"}} to={useBaseUrl("docs/apisix/plugins/cors/")}>here</Link>.
+ </p>
+ </div>
+ </div>
+
+ <div ref={scale} className="row-benefit row-hidden" >
+ <div style={{width: screenWidth > 768 ? "50%" : "100%"}}>
+ <h3 className="feat-head-desc">Scalability and availability</h3>
+ <h1 className="feat-head add-left-margin">Scales with your users</h1>
+ <p className="feat-desc add-left-margin">
+ Apache APISIX provides the ability to write your own custom plugins, use custom Load Balancing Algorithms during the balancer phase for scaling and custom Routing algorithms for fine control on routing.
+ </p>
+ </div>
+ <div className="benefit-infograph">
+ <Scale style={{width: screenWidth >=768 ? "50%": "60%"}}/>
+ </div>
+ </div>
+
+ <div ref={dynamic} className="row-benefit row-reverse row-hidden" >
+ <div className="benefit-infograph">
+ <Dynamic style={{width: screenWidth >=768 ? "50%" : "70%"}}/>
+ </div>
+ <div style={{width: screenWidth > 768 ? "50%" : "100%"}}>
+ <h3 className="feat-head-desc">Fully dynamic</h3>
+ <h1 className="feat-head add-left-margin">Save dev-time, design what matters </h1>
+ <p className="feat-desc add-left-margin">
+ Apache APISIX provides Hot updates and Hot plugins, which continuosly update configurations without restarts, saving development time and stress. Health checks, circuit breakers and many more features keep the system balanced at all times.
+ </p>
+ </div>
+ </div>
+
+ <div ref={multiplatform} className="row-benefit row-hidden" >
+ <div style={{width: screenWidth > 768 ? "50%" : "100%"}}>
+ <h3 className="feat-head-desc">Multi-platform and protocol</h3>
+ <h1 className="feat-head add-left-margin">Create once, run anywhere</h1>
+ <p className="feat-desc add-left-margin">
+ Platform agnostic, no vendor lock-in, Apache APISIX can run from bare-metal to kubernetes. It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo, MQTT proxy and multiple platforms including ARM64, don’t worry about the lock-in of the infra technology.
+ </p>
+ </div>
+ <div className="benefit-infograph">
+ <Multiplatform style={{width: screenWidth >=768 ? "50%" : "80%"}}/>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Benefits;
diff --git a/website/src/pages/sections/comparison.jsx b/website/src/pages/sections/comparison.jsx
new file mode 100644
index 0000000..11ef8e1
--- /dev/null
+++ b/website/src/pages/sections/comparison.jsx
@@ -0,0 +1,79 @@
+import React from "react";
+
+import "../../css/customTheme.css";
+import Cross from "../../assets/icons/cross.svg";
+import Tick from "../../assets/icons/tick.svg";
+
+const Comparison = () => {
+ return (
+ <>
+ <div className="compare">
+ <div>
+ <h3 className="compare-head">Among the best, and always improving</h3>
+ </div>
+ <div className="compare-subtitle">
+ <p>Apache APISIX is opensource and ever evolving. Here’s a general comparison of APISIX with other options in this API Gateway ecosystem.</p>
+ </div>
+ <div>
+ <table className="table">
+ <thead>
+ <tr className="table-head">
+ <th scope="col" style={{fontWeight: "900"}}>Feature</th>
+ <th scope="col" style={{background: "#FF90A3"}}>
+ APISIX
+ </th>
+ <th scope="col" style={{background: "#EBEBEB"}}>
+ Other API Gateways
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">Single-core CPU, QPS (enable limit-count and prometheus plugins)</th>
+ <td>18000</td>
+ <td>~1700</td>
+ </tr>
+ <tr>
+ <th scope="row">Latency</th>
+ <td>0.2 ms</td>
+ <td>2 ms</td>
+ </tr>
+ <tr>
+ <th scope="row">Dubbo, MQTT, Tengine and REST API to gRPC transcoding</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ <tr>
+ <th scope="row">Configuration rollback</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ <tr>
+ <th scope="row">Custom Load Balancing and routing</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ <tr>
+ <th scope="row">Plug-in hot loading</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ <tr>
+ <th scope="row">Dashboard</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ <tr>
+ <th scope="row">Support any Nginx variable as routing condition</th>
+ <td><Tick /></td>
+ <td><Cross /></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Comparison;
diff --git a/website/src/pages/sections/components/arrowAnim.jsx b/website/src/pages/sections/components/arrowAnim.jsx
index a008e77..df7a7bc 100644
--- a/website/src/pages/sections/components/arrowAnim.jsx
+++ b/website/src/pages/sections/components/arrowAnim.jsx
@@ -2,54 +2,55 @@ import React, { useRef } from "react";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import gsap from "gsap"
+
import "../../../css/customTheme.css";
-function ArrowAnim() {
- const endpathRef1 = useRef(null);
- const endpathRef2 = useRef(null);
+const ArrowAnim = () => {
+ const endpathRef1 = useRef(null);
+ const endpathRef2 = useRef(null);
- function mouseOver() {
- gsap.to([endpathRef2.current],{
- strokeDashoffset: 970,
- duration: 0.4
- });
- gsap.to([endpathRef1.current],{
- stroke: "#9b9b9b",
- duration: 0.4
- });
- gsap.to([endpathRef2.current],{
- stroke: "#9b9b9b",
- duration: 0.4
- });
- }
-
- function mouseOut() {
- gsap.to([endpathRef2.current],{
- strokeDashoffset: 1002,
- duration: 0.4
- });
- gsap.to([endpathRef1.current],{
- stroke: "black",
- duration: 0.4
- });
- gsap.to([endpathRef2.current],{
- stroke: "black",
- duration: 0.4
- });
- }
+ function mouseOver() {
+ gsap.to([endpathRef2.current],{
+ strokeDashoffset: 970,
+ duration: 0.4
+ });
+ gsap.to([endpathRef1.current],{
+ stroke: "#9b9b9b",
+ duration: 0.4
+ });
+ gsap.to([endpathRef2.current],{
+ stroke: "#9b9b9b",
+ duration: 0.4
+ });
+ }
- return (
- <>
- <Link
- to={useBaseUrl("docs")} onMouseOver={mouseOver} onMouseLeave={mouseOut} className="btn-docs">
- Go to docs...
- <svg width="15" strokeWidth="3" height="25" viewBox="0 0 43 32" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path ref={endpathRef1} d="M27.5 1L42.5 16L27.5 31" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
- <path ref={endpathRef2} className="arrow-btn" d="M42.5 16H0.5" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
- </svg>
- </Link>
- </>
- );
+ function mouseOut() {
+ gsap.to([endpathRef2.current],{
+ strokeDashoffset: 1002,
+ duration: 0.4
+ });
+ gsap.to([endpathRef1.current],{
+ stroke: "black",
+ duration: 0.4
+ });
+ gsap.to([endpathRef2.current],{
+ stroke: "black",
+ duration: 0.4
+ });
}
+
+ return (
+ <>
+ <Link
+ to={useBaseUrl("docs")} onMouseOver={mouseOver} onMouseLeave={mouseOut} className="btn-docs">
+ Go to docs...
+ <svg width="15" strokeWidth="3" height="25" viewBox="0 0 43 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path ref={endpathRef1} d="M27.5 1L42.5 16L27.5 31" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+ <path ref={endpathRef2} className="arrow-btn" d="M42.5 16H0.5" stroke="black" strokeLinecap="round" strokeLinejoin="round"/>
+ </svg>
+ </Link>
+ </>
+ );
+}
- export default ArrowAnim;
+export default ArrowAnim;
diff --git a/website/src/pages/sections/components/eventPosterCard.jsx b/website/src/pages/sections/components/eventPosterCard.jsx
index a34a422..f98f63a 100644
--- a/website/src/pages/sections/components/eventPosterCard.jsx
+++ b/website/src/pages/sections/components/eventPosterCard.jsx
@@ -1,57 +1,58 @@
import React, { useState, useRef, useEffect } from "react";
import gsap from "gsap"
+
import "../../../css/customTheme.css";
const EventPosterCard = () => {
- const [display, setDisplay] = useState(true);
- const picRef = useRef(null);
+ const [display, setDisplay] = useState(true);
+ const picRef = useRef(null);
- useEffect(() => {
- gsap.fromTo(picRef.current, {
- x: 500,
- opacity: 0
- }, {
- x: 0,
- opacity: 1,
- delay: 3.0,
- });
- }, []);
+ useEffect(() => {
+ gsap.fromTo(picRef.current, {
+ x: 500,
+ opacity: 0
+ }, {
+ x: 0,
+ opacity: 1,
+ delay: 3.0,
+ });
+ }, []);
- useEffect(() => {
- if (!localStorage.getItem('SHOW_EVENT_ENTRY')) {
- setDisplay(true);
- };
- }, []);
-
- const onClose = () => {
- gsap.to(picRef.current, {
- x: 500,
- opacity: 0,
- onComplete: ()=>{
- setDisplay(false);
- }
- });
- if (typeof window !== 'undefined') {
- localStorage.setItem('SHOW_EVENT_ENTRY', 'true');
- }
+ useEffect(() => {
+ if (!localStorage.getItem('SHOW_EVENT_ENTRY')) {
+ setDisplay(true);
};
+ }, []);
- if (!display) {
- return null;
+ const onClose = () => {
+ gsap.to(picRef.current, {
+ x: 500,
+ opacity: 0,
+ onComplete: ()=>{
+ setDisplay(false);
+ }
+ });
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('SHOW_EVENT_ENTRY', 'true');
}
+ };
- return (
- <div ref={picRef} className="pic-wrapper">
- <button className="pic-wrapper-close" onClick={onClose}>
- <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" className="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
- <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
- </svg>
- </button>
- <a href="/events/2021/08/21/shanghai-meetup" onClick={onClose}>
- <img src="/img/meetup-card.jpg" alt="" />
- </a>
- </div>
- )
+ if (!display) {
+ return null;
}
- export default EventPosterCard;
+ return (
+ <div ref={picRef} className="pic-wrapper">
+ <button className="pic-wrapper-close" onClick={onClose}>
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" className="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
+ <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
+ </svg>
+ </button>
+ <a href="/events/2021/08/21/shanghai-meetup" onClick={onClose}>
+ <img src="/img/meetup-card.jpg" alt="" />
+ </a>
+ </div>
+ );
+}
+
+export default EventPosterCard;
diff --git a/website/src/pages/sections/components/heroCanvas.jsx b/website/src/pages/sections/components/heroCanvas.jsx
index 15e1fc6..6c47ae2 100644
--- a/website/src/pages/sections/components/heroCanvas.jsx
+++ b/website/src/pages/sections/components/heroCanvas.jsx
@@ -1,227 +1,236 @@
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
import gsap from "gsap"
+
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
import "../../../css/customTheme.css";
import vertex from '!!raw-loader!../../../shaders/vertex.vert';
import fragment from '!!raw-loader!../../../shaders/fragment.frag';
-function HeroCanvas() {
- const canvasRef = useRef(0);
- const overlayRef = useRef(0);
+const HeroCanvas = () => {
+ const canvasRef = useRef(0);
+ const overlayRef = useRef(0);
- let canvasHeight, canvasWidth, screenWidth, screenHeight, controls;
- let isLoaded = false, isRendering = false, animationFrame;
+ let canvasHeight, canvasWidth, screenWidth, screenHeight, controls;
+ let isLoaded = false, isRendering = false, animationFrame;
- useEffect(() => {
-
- screenWidth = window.innerWidth;
- screenHeight = window.innerHeight;
+ useEffect(() => {
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
- let mouse = {x: 0.5, y: 0.5};
- let fragMouse = {x: 0.5, y: 0.5};
+ let mouse = {x: 0.5, y: 0.5};
+ let fragMouse = {x: 0.5, y: 0.5};
- let camera, mesh, scene, renderer, material, geometry;
+ let camera, mesh, scene, renderer, material, geometry;
- window.addEventListener('resize', onWindowResize, false);
-
- if (screenWidth > 800) {
- canvasHeight = screenHeight;
- canvasWidth = screenWidth / 2;
- } else {
- canvasHeight = screenHeight / 2;
- canvasWidth = screenWidth;
- }
-
- canvasRef.current.width = canvasWidth;
- canvasRef.current.height = canvasHeight;
-
- canvasRef.current.addEventListener("mousemove", function (event) {
-
- let ctx = {
- x: (event.clientX),
- y: (event.clientY)
- };
-
- const canvasOffset = {
- left: canvasRef.current.getBoundingClientRect().x,
- top: canvasRef.current.getBoundingClientRect().y
- };
-
- ctx.x = ((ctx.x - canvasOffset.left) / canvasWidth);
- ctx.y = ((ctx.y - canvasOffset.top) / canvasHeight);
-
- gsap.to(mouse, 2, {
- x: ctx.x * (canvasWidth / canvasHeight) - (canvasWidth / canvasHeight) / 2,
- y: (1.0 - ctx.y) - 0.5,
- onUpdate: ()=>{
- material.uniforms.u_mouse.value.x = mouse.x;
- material.uniforms.u_mouse.value.y = mouse.y;
- }
- });
-
- gsap.to(fragMouse, 2, {
- x: ctx.x,
- y: (1.0 - ctx.y),
- onUpdate: ()=>{
- material.uniforms.u_fragMouse.value.x = fragMouse.x;
- material.uniforms.u_fragMouse.value.y = fragMouse.y;
- }
- });
- });
+ window.addEventListener('resize', onWindowResize, false);
- function getRandom(a, b) {
- return a + (b - a) * Math.random();
+ if (screenWidth > 1100) {
+ canvasHeight = screenHeight;
+ canvasWidth = screenWidth / 2;
+ } else {
+ canvasHeight = screenHeight / 2;
+ canvasWidth = screenWidth;
+ }
+
+ canvasRef.current.width = canvasWidth;
+ canvasRef.current.height = canvasHeight;
+
+ canvasRef.current.addEventListener("mousemove", function (event) {
+
+ let ctx = {
+ x: (event.clientX),
+ y: (event.clientY)
+ };
+
+ const canvasOffset = {
+ left: canvasRef.current.getBoundingClientRect().x,
+ top: canvasRef.current.getBoundingClientRect().y
+ };
+
+ ctx.x = ((ctx.x - canvasOffset.left) / canvasWidth);
+ ctx.y = ((ctx.y - canvasOffset.top) / canvasHeight);
+
+ gsap.to(mouse, 2, {
+ x: ctx.x * (canvasWidth / canvasHeight) - (canvasWidth / canvasHeight) / 2,
+ y: (1.0 - ctx.y) - 0.5,
+ onUpdate: ()=>{
+ material.uniforms.u_mouse.value.x = mouse.x;
+ material.uniforms.u_mouse.value.y = mouse.y;
}
+ });
- let canvasObserver = new IntersectionObserver(onCanvasIntersection, {
- root: null,
- threshold: 0.01,
- });
+ gsap.to(fragMouse, 2, {
+ x: ctx.x,
+ y: (1.0 - ctx.y),
+ onUpdate: ()=>{
+ material.uniforms.u_fragMouse.value.x = fragMouse.x;
+ material.uniforms.u_fragMouse.value.y = fragMouse.y;
+ }
+ });
+ });
+
+ function getRandom(a, b) {
+ return a + (b - a) * Math.random();
+ }
+
+ let canvasObserver = new IntersectionObserver(onCanvasIntersection, {
+ root: null,
+ threshold: 0.01,
+ });
- init(canvasWidth, canvasHeight);
+ init(canvasWidth, canvasHeight);
- function onCanvasIntersection(entries, opts){
- entries.forEach( entry => {
- if (entry.isIntersecting && isLoaded) {
- if (isLoaded && !isRendering) {
- animate();
- } else {
- console.log("Loading")
- }
- } else {
- if (animationFrame) {
- cancelAnimationFrame(animationFrame);
- isRendering = false;
- }
- }
+ function onCanvasIntersection(entries, opts){
+ entries.forEach( entry => {
+ if (entry.isIntersecting && isLoaded) {
+ if (isLoaded && !isRendering) {
+ animate();
+ } else {
+ console.log("Loading")
}
- );
- }
+ } else {
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ isRendering = false;
+ }
+ }
+ }
+ );
+ }
- canvasObserver.observe(canvasRef.current);
+ canvasObserver.observe(canvasRef.current);
- function init(width, height) {
- const ctx = canvasRef.current;
-
- renderer = new THREE.WebGLRenderer({canvas: ctx});
- renderer.autoClearColor = false;
+ function init(width, height) {
+ const ctx = canvasRef.current;
+
+ renderer = new THREE.WebGLRenderer({canvas: ctx});
+ renderer.autoClearColor = false;
- camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
- controls = new OrbitControls( camera, renderer.domElement );
-
- controls.enableZoom = false;
- controls.enablePan = false;
- controls.enabled = false;
+ camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
+ controls = new OrbitControls( camera, renderer.domElement );
+
+ controls.enableZoom = false;
+ controls.enablePan = false;
+ controls.enabled = false;
- geometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
+ geometry = new THREE.PlaneBufferGeometry(width / height, 1, 250, 250);
- let count = geometry.attributes.position.count;
- let arrSize = new THREE.BufferAttribute(new Float32Array(count), 1);
+ let count = geometry.attributes.position.count;
+ let arrSize = new THREE.BufferAttribute(new Float32Array(count), 1);
- for (let i = 0; i < arrSize.count; i++) {
- arrSize.array[i] = getRandom(0, 1)
- }
- geometry.setAttribute("aSize", arrSize, 1);
+ for (let i = 0; i < arrSize.count; i++) {
+ arrSize.array[i] = getRandom(0, 1)
+ }
+ geometry.setAttribute("aSize", arrSize, 1);
- geometry.scale(2.0, 1.0, 1.0);
+ geometry.scale(2.0, 1.0, 1.0);
- scene = new THREE.Scene();
- renderer.setSize(canvasWidth, canvasHeight);
-
- let uniforms = {
- u_time: {
- type: "f",
- value: 1.0
- },
- u_resolution: {
- type: "v2",
- value: new THREE.Vector2()
- },
- u_mouse: {
- type: "v2",
- value: new THREE.Vector2(0.5, 0.5)
- },
- u_fragMouse: {
- type: "v2",
- value: new THREE.Vector2(0.5, 0.5)
- },
- };
+ scene = new THREE.Scene();
+ renderer.setSize(canvasWidth, canvasHeight);
- scene.background = new THREE.Color('red');
+ let uniforms = {
+ u_time: {
+ type: "f",
+ value: 1.0
+ },
+ u_resolution: {
+ type: "v2",
+ value: new THREE.Vector2()
+ },
+ u_mouse: {
+ type: "v2",
+ value: new THREE.Vector2(0.5, 0.5)
+ },
+ u_fragMouse: {
+ type: "v2",
+ value: new THREE.Vector2(0.5, 0.5)
+ },
+ };
- camera.position.z = 5;
- controls.update();
-
- material = new THREE.ShaderMaterial({
- uniforms: uniforms,
- vertexShader: vertex,
- fragmentShader: fragment,
- wireframe: true,
- side: THREE.DoubleSide
- });
-
- mesh = new THREE.Points(geometry, material);
-
- let backGeometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
- let bgMaterial = new THREE.MeshBasicMaterial({color: 0x121212, wireframe: false});
- let background = new THREE.Mesh(backGeometry, bgMaterial);
-
- backGeometry.scale(50,50,1);
- background.position.set(10,10,-10);
- background.rotation.set(Math.PI/2,0,0);
-
- scene.add(mesh);
- scene.add(background);
-
- camera.position.set( 0.16430412417444037, -1.5202138879420155, 0.20892968987792318); // Tested and checked
- controls.update();
-
- renderer.setPixelRatio(window.devicePixelRatio);
- onWindowResize();
-
- isLoaded = true;
- }
+ scene.background = new THREE.Color('red');
- function onWindowResize(event) {
- screenHeight = window.innerHeight;
- screenWidth = window.innerWidth;
+ camera.position.z = 5;
+ controls.update();
+
+ material = new THREE.ShaderMaterial({
+ uniforms: uniforms,
+ vertexShader: vertex,
+ fragmentShader: fragment,
+ wireframe: true,
+ side: THREE.DoubleSide
+ });
+
+ mesh = new THREE.Points(geometry, material);
+
+ let backGeometry = new THREE.PlaneBufferGeometry(width / height, 1, 200, 200);
+ let bgMaterial = new THREE.MeshBasicMaterial({color: 0x121212, wireframe: false});
+ let background = new THREE.Mesh(backGeometry, bgMaterial);
+
+ backGeometry.scale(50,50,1);
+ background.position.set(10,10,-10);
+ background.rotation.set(Math.PI/2,0,0);
- renderer.setSize(canvasWidth, canvasHeight);
- material.uniforms.u_resolution.value.x = renderer.domElement.width;
- material.uniforms.u_resolution.value.y = renderer.domElement.height;
- }
+ scene.add(mesh);
+ scene.add(background);
+
+ camera.position.set( 0.16430412417444037, -1.5202138879420155, 0.20892968987792318); // Tested and checked
+ controls.update();
+
+ renderer.setPixelRatio(window.devicePixelRatio);
+ onWindowResize();
+
+ isLoaded = true;
+ }
- function animate() {
- animationFrame = requestAnimationFrame(animate);
- material.uniforms.u_time.value += 0.05;
- controls.update();
- renderer.render(scene, camera);
- isRendering = true;
- }
+ function onWindowResize(event) {
+ screenHeight = window.innerHeight;
+ screenWidth = window.innerWidth;
- return ()=>{
- renderer.dispose();
- canvasObserver.disconnect();
+ if (screenWidth > 1100) {
+ canvasHeight = screenHeight;
+ canvasWidth = screenWidth / 2;
+ } else {
+ canvasHeight = screenHeight / 2;
+ canvasWidth = screenWidth;
}
- }, []);
-
-
- useEffect(() => {
- gsap.to(overlayRef.current,{
- height: 0,
- delay: window.innerWidth >= 768 ? 0 : 0.3,
- duration: 2.1,
- ease: "Expo.easeInOut"
- });
- }, [])
+
+ renderer.setSize(canvasWidth, canvasHeight);
+ material.uniforms.u_resolution.value.x = renderer.domElement.width;
+ material.uniforms.u_resolution.value.y = renderer.domElement.height;
+ }
+
+ function animate() {
+ animationFrame = requestAnimationFrame(animate);
+ material.uniforms.u_time.value += 0.05;
+ controls.update();
+ renderer.render(scene, camera);
+ isRendering = true;
+ }
+
+ return ()=>{
+ scene.remove.apply(scene, scene.children);
+ canvasObserver.disconnect();
+ }
+ }, []);
- return (
- <div style={{position: "relative"}}>
- <canvas ref={canvasRef} className="homeCanvas"></canvas>
- <div ref={overlayRef} className="homeCanvas-overlay"></div>
- </div>
- );
+
+ useEffect(() => {
+ gsap.to(overlayRef.current,{
+ height: 0,
+ delay: window.innerWidth >= 768 ? 0 : 0.3,
+ duration: 2.1,
+ ease: "Expo.easeInOut"
+ });
+ }, [])
+
+ return (
+ <div className="hero-infograph" style={{position: "relative"}}>
+ <canvas ref={canvasRef} className="homeCanvas"></canvas>
+ <div ref={overlayRef} className="homeCanvas-overlay"></div>
+ </div>
+ );
}
export default HeroCanvas;
diff --git a/website/src/pages/sections/components/ossCanvas.jsx b/website/src/pages/sections/components/ossCanvas.jsx
index 8d2aca6..2375944 100644
--- a/website/src/pages/sections/components/ossCanvas.jsx
+++ b/website/src/pages/sections/components/ossCanvas.jsx
@@ -1,129 +1,138 @@
import React, { useRef, useEffect, useState } from "react";
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+
import "../../../css/customTheme.css";
-function OssCanvas() {
- const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' && window.innerWidth);
- const [screenHeight, setScreenHeight] = useState(typeof window !== 'undefined' && window.innerWidth);
+const OssCanvas = () => {
+ let screenWidth, screenHeight;
- const canvasRef = useRef(null);
+ const canvasRef = useRef(null);
- let canvasHeight, canvasWidth;
+ let canvasHeight, canvasWidth;
+
+ useEffect(() => {
+ let camera, scene, renderer, material, mesh;
- useEffect(() => {
-
- let camera, scene, renderer, material, mesh;
-
- window.addEventListener('resize', onWindowResize, false);
-
- let controls;
- let isLoaded = false, isRendering = false, animationFrame;
-
- if (screenWidth > 800) {
- canvasHeight = 500;
- canvasWidth = screenWidth/2;
- } else {
- canvasHeight = 500
- canvasWidth = screenWidth;
- }
+ screenWidth = window.innerWidth;
+ screenHeight = window.innerHeight;
+ window.addEventListener('resize', onWindowResize, false);
+
+ let controls;
+ let isLoaded = false, isRendering = false, animationFrame;
+
+ if (screenWidth > 1100) {
+ canvasHeight = 500;
+ canvasWidth = screenWidth/2;
+ } else {
+ canvasHeight = 500
+ canvasWidth = screenWidth;
+ }
+
+ function onWindowResize(event) {
+ screenHeight = window.innerHeight;
+ screenWidth = window.innerWidth;
+
+ if (screenWidth > 1100) {
+ canvasHeight = 500;
+ canvasWidth = screenWidth/2;
+ } else {
+ canvasHeight = 500
+ canvasWidth = screenWidth;
+ }
+
+ renderer.setSize(canvasWidth, canvasHeight);
+ }
+
+ let ossCanvasObserver = new IntersectionObserver(onOssCanvasIntersection, {
+ root: null,
+ threshold: 0.01,
+ });
- function onWindowResize(event) {
- setScreenHeight(window.innerHeight);
- setScreenWidth(window.innerWidth);
- renderer.setSize(canvasWidth, canvasHeight);
- }
+ function init(width, height) {
+ const ctx = canvasRef.current;
+ renderer = new THREE.WebGLRenderer({canvas: ctx});
+
+ camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
- let ossCanvasObserver = new IntersectionObserver(onOssCanvasIntersection, {
- root: null,
- threshold: 0.01,
- });
-
- function init(width, height) {
-
- const ctx = canvasRef.current;
- renderer = new THREE.WebGLRenderer({canvas: ctx});
-
- camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
-
- controls = new OrbitControls( camera, renderer.domElement );
- controls.enableZoom = false;
-
- const radius = window.innerWidth > 768 ? 5 : 4.5;
- const detail = 8;
-
- const geometry = new THREE.IcosahedronGeometry(radius, detail);
-
- camera.position.z = 2;
- camera.position.x = 3;
-
- controls.update();
-
- scene = new THREE.Scene();
- renderer.setSize(canvasWidth, canvasHeight);
-
- scene.background = new THREE.Color(0x000000);
-
- material = new THREE.MeshNormalMaterial({wireframe: false, flatShading: true});
-
- mesh = new THREE.Mesh(geometry, material);
-
- scene.add(mesh);
- mesh.position.set(3, 0, -9.5);
-
- controls.target.copy(mesh.position)
-
- controls.update();
- renderer.setPixelRatio(window.devicePixelRatio);
-
- onWindowResize();
-
- isLoaded = true;
- }
+ controls = new OrbitControls( camera, renderer.domElement );
+ controls.enableZoom = false;
+
+ const radius = window.innerWidth > 768 ? 5 : 4.5;
+ const detail = 8;
+
+ const geometry = new THREE.IcosahedronGeometry(radius, detail);
+
+ camera.position.z = 2;
+ camera.position.x = 3;
- function animate() {
- animationFrame = requestAnimationFrame(animate);
+ controls.update();
+
+ scene = new THREE.Scene();
+ renderer.setSize(canvasWidth, canvasHeight);
+
+ scene.background = new THREE.Color(0x000000);
- mesh.rotation.x += 0.005;
- mesh.rotation.y += 0.005;
+ material = new THREE.MeshNormalMaterial({wireframe: false, flatShading: true});
- controls.update();
-
- renderer.render(scene, camera);
- isRendering = true;
- }
+ mesh = new THREE.Mesh(geometry, material);
- init(canvasWidth, canvasHeight);
-
- function onOssCanvasIntersection(entries, opts){
- entries.forEach(entry => {
- if (entry.isIntersecting && isLoaded) {
- if (isLoaded && !isRendering) {
- animate();
- } else {
- console.log("Loading")
- }
- } else {
- if (animationFrame) {
- cancelAnimationFrame(animationFrame);
- isRendering = false;
- }
- }
- }
- );
- }
+ scene.add(mesh);
+ mesh.position.set(3, 0, -9.5);
+
+ controls.target.copy(mesh.position)
+
+ controls.update();
+ renderer.setPixelRatio(window.devicePixelRatio);
+
+ onWindowResize();
+
+ isLoaded = true;
+ }
- ossCanvasObserver.observe(canvasRef.current);
+ function animate() {
+ animationFrame = requestAnimationFrame(animate);
- return () => {
- renderer.dispose();
- ossCanvasObserver.disconnect();
- }
- }, []);
+ mesh.rotation.x += 0.005;
+ mesh.rotation.y += 0.005;
- return (
- <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} className="ossCanvas"></canvas>
- );
+ controls.update();
+
+ renderer.render(scene, camera);
+ isRendering = true;
+ }
+
+ init(canvasWidth, canvasHeight);
+
+ function onOssCanvasIntersection(entries, opts){
+ entries.forEach(entry => {
+ if (entry.isIntersecting && isLoaded) {
+ if (isLoaded && !isRendering) {
+ animate();
+ } else {
+ console.log("Loading")
+ }
+ } else {
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ isRendering = false;
+ }
+ }
+ }
+ );
+ }
+
+ ossCanvasObserver.observe(canvasRef.current);
+
+ return () => {
+ scene.remove.apply(scene, scene.children);
+ ossCanvasObserver.disconnect();
+ }
+ }, []);
+
+ return (
+ <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} className="ossCanvas"></canvas>
+ );
}
export default OssCanvas;
diff --git a/website/src/pages/sections/endcta.jsx b/website/src/pages/sections/endcta.jsx
new file mode 100644
index 0000000..a856472
--- /dev/null
+++ b/website/src/pages/sections/endcta.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import "../../css/customTheme.css";
+import ArrowAnim from "./components/arrowAnim";
+import Rocket from "../../assets/images/rocket.gif";
+
+const EndCTA = () => {
+ return (
+ <>
+ <div className="endcta" style={{padding: "50px 0", background: "#FF90A3", margin: "0 0 -32px 0"}}>
+ <div className="endcta-text">
+ <p style={{display: "flex", justifyContent: "center", alignItems: "center", whiteSpace: "pre"}}>Try <span style={{color: "#E8433E"}}>APISIX</span> today <img className="rocket" src={Rocket} alt="Rocket"/></p>
+ </div>
+ <div className="endcta-btns">
+ <div className="hero-ctas">
+ <Link
+ to={useBaseUrl("downloads")}
+ className="btn btn-download">
+ Downloads
+ </Link>
+ <ArrowAnim />
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default EndCTA;
diff --git a/website/src/pages/sections/features.jsx b/website/src/pages/sections/features.jsx
new file mode 100644
index 0000000..d2e9c43
--- /dev/null
+++ b/website/src/pages/sections/features.jsx
@@ -0,0 +1,210 @@
+import React, { useState, useRef, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import "../../css/customTheme.css";
+import Dashboard from "../../assets/images/apisix-dashboard.png";
+import Snippet from "../../assets/images/code-sample.png";
+import Plugin from "../../assets/images/pluginised.png";
+import ArrowAnim from "./components/arrowAnim";
+
+const Features = () => {
+ const dashboardDiv = useRef(null);
+ const userfDiv = useRef(null);
+ const pluginDiv = useRef(null);
+ const triggerDiv = useRef(null);
+ const triggerDivCol = useRef(null);
+ const pinDiv = useRef(null);
+ const img1 = useRef(null);
+ const img1col = useRef(null);
+ const img2 = useRef(null);
+ const img2col = useRef(null);
+ const img3 = useRef(null);
+ const img3col = useRef(null);
+ const featPin = useRef(null);
+
+ gsap.registerPlugin(ScrollTrigger);
+
+ const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' && window.innerWidth);
+ const [screenHeight, setScreenHeight] = useState(typeof window !== 'undefined' && window.innerWidth);
+
+ useEffect(()=>{
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ window.addEventListener('resize', resizeEvent, false);
+
+ function resizeEvent(event) {
+ setScreenHeight(window.innerHeight);
+ setScreenWidth(window.innerWidth);
+ }
+
+ return () => {
+ window.removeEventListener('resize', resizeEvent);
+ }
+ }, [])
+
+ useEffect(() => {
+ const value = window.innerHeight*2;
+
+ let tl;
+ let observers = [];
+
+ if(screenWidth > 1100) {
+ tl = gsap.timeline({
+ defaults: {
+ ease: "linear"
+ },
+ scrollTrigger: {
+ id: "feat",
+ trigger: triggerDiv.current,
+ start: "top top",
+ pin: pinDiv.current,
+ scrub: 1.5,
+ end: value+"px"
+ }
+ });
+
+ tl.to(img1.current,{
+ opacity: 0,
+ })
+ .to(img2.current,{
+ opacity: 1,
+ })
+ .to(img2.current,{
+ opacity: 0,
+ })
+ .to(img3.current,{
+ opacity: 1,
+ });
+ } else {
+ // Mobile
+
+ const elems = [img1col.current, img2col.current, img3col.current]
+ for (let i=1; i<4; i++) {
+ observers.push(new IntersectionObserver((entries, opts)=>{
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ observers[i-1].disconnect();
+ gsap.fromTo(elems[i-1],{
+ opacity: 0,
+ y: 90,
+ }, {
+ opacity: 1,
+ y: 0,
+ duration: 0.5,
+ ease: "power3.out",
+ yoyo: true,
+ yoyoEase: "power3.inOut",
+ });
+ }
+ }
+ );
+ }, {
+ root: null,
+ threshold: .2
+ }));
+ }
+
+ observers.forEach((it, index)=>{
+ it.observe(elems[index]);
+ });
+ }
+ });
+
+ return (
+ <>
+ <div ref={featPin} className="feat-top" style={{padding: "50px 0"}}>
+ <h3 className="feat-head-desc">Why APISIX ?</h3>
+ <h1 className="feat-head add-left-margin">Reduce time fighting bugs, focus on designing world-class systems</h1>
+ <p className="feat-desc add-left-margin">
+ Apache APISIX is the first Open source API gateway, with a built-in low-code Dashboard offering a powerful and flexible interface for developers to use
+ </p>
+ </div>
+ <div className="feat-container-d" ref={triggerDiv}>
+ {/* Desktop */}
+ <div className="left-pane" style={{width: "50%", height: "100%"}}>
+ <div ref={dashboardDiv} style={{position: "relative"}}>
+ <div className="text-div" style={{height: "100vh"}}>
+ <h2 className="i-text add-left-margin-feat">Easy-to-use dashboard</h2>
+ <p className="i-text-desc add-left-margin-feat">
+ The Apache APISIX Dashboard is designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface. It’s opensource and ever evolving, feel free to contribute.
+ </p>
+ <div className="hero-ctas add-left-margin-feat bottom-pos">
+ <Link
+ to={useBaseUrl("downloads")}
+ className="btn btn-download">
+ Downloads
+ </Link>
+ <ArrowAnim />
+ </div>
+ </div>
+ </div>
+
+ <div ref={userfDiv} style={{position: "relative"}}>
+ <div className="text-div" style={{height: "100vh"}}>
+ <h2 className="i-text add-left-margin-feat">User flexible</h2>
+ <p className="i-text-desc add-left-margin-feat">
+ The Apache APISIX dashboard is flexible to User demand, providing option to create custom modules through code matching your requirements, alongside the existing no-code toolchain.
+ </p>
+ </div>
+ </div>
+
+ <div ref={pluginDiv} style={{position: "relative"}}>
+ <div className="text-div" style={{height: "100vh"}}>
+ <h2 className="i-text add-left-margin-feat">Pluginised workflow</h2>
+ <p className="i-text-desc add-left-margin-feat">
+ No need to reinvent the wheel again and again. Use inbuilt plugins to create high performance systems in tight deadlines. For something custom, there is option of building custom plugins.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div ref={pinDiv} className="right-pane" style={{width: "50%", height: "100vh", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center"}}>
+ <img ref={img1} className="i-image imagePosition" src={Dashboard} loading="lazy" alt="apisix-dashboard"/>
+ <img ref={img2} className="n-image imagePosition" src={Snippet} loading="lazy" alt="code-snippet"/>
+ <img ref={img3} className="n-image imagePosition" src={Plugin} loading="lazy" alt="plugin-workflow"/>
+ </div>
+ </div>
+ <div className="feat-container-m" ref={triggerDivCol} style={{width: "100%"}}>
+ {/* Mobile */}
+ <div ref={img1col} className="hiddenDiv-col" style={{height: "fit-content", padding: "0 0 40px 0"}}>
+ <div style={{position: "relative", height: "100%"}}>
+ <h2 className="add-left-margin" style={{width: "fit-content"}}>Easy-to-use dashboard</h2>
+ <img className="i-image-col" src={Dashboard} alt=""/>
+ <p className="i-text-desc-col add-left-margin">
+ The Apache APISIX Dashboard is designed to make it as easy as possible for users to operate Apache APISIX through a frontend interface. It’s opensource and ever evolving, feel free to contribute.
+ </p>
+ <div className="hero-ctas add-left-margin" style={{width: "fit-content"}}>
+ <Link
+ to={useBaseUrl("downloads")}
+ className="btn btn-download">
+ Downloads
+ </Link>
+ <ArrowAnim />
+ </div>
+ </div>
+ </div>
+
+ <div ref={img2col} className="hiddenDiv-col" style={{height: "fit-content", padding: "20px 0"}}>
+ <h2 className="add-left-margin" style={{width: "fit-content"}}>User flexible</h2>
+ <img className="i-image-col" src={Snippet} alt=""/>
+ <p className="i-text-desc-col add-left-margin">
+ The Apache APISIX dashboard is flexible to User demand, providing option to create custom modules through code matching your requirements, alongside the existing no-code toolchain.
+ </p>
+ </div>
+
+ <div ref={img3col} className="hiddenDiv-col" style={{height: "fit-content", padding: "20px 0"}}>
+ <h2 className="add-left-margin" style={{width: "fit-content"}}>Pluginised workflow</h2>
+ <img className="i-image-col" src={Plugin} alt=""/>
+ <p className="i-text-desc-col add-left-margin">
+ No need to reinvent the wheel again and again. Use inbuilt plugins to create high performance systems in tight deadlines. For something custom, there is option of building custom plugins.
+ </p>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Features;
diff --git a/website/src/pages/sections/heroSection.jsx b/website/src/pages/sections/heroSection.jsx
new file mode 100644
index 0000000..ae4b96d
--- /dev/null
+++ b/website/src/pages/sections/heroSection.jsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import gsap from "gsap"
+
+import "../../css/customTheme.css";
+import HeroCanvas from "./components/heroCanvas"
+import ArrowAnim from "./components/arrowAnim";
+
+const HeroSection = (props) => {
+ const titleRef = useRef(0)
+ const subtitleRef = useRef(0)
+ const ctaRef = useRef(0)
+ const canRef = useRef(0)
+
+ useEffect(() => {
+ let tl = gsap.timeline({
+ defaults: {
+ delay: window.innerWidth >= 768 ? 1.5 : 0.01,
+ duration: 0.5,
+ ease: "Expo.easeInOut"
+ },
+ });
+
+ tl.fromTo([titleRef.current, subtitleRef.current, ctaRef.current],{
+ opacity: 0,
+ y: 10
+ },{
+ opacity: 1,
+ y: 0,
+ stagger: 0.3
+ });
+
+ return () => {
+ tl.pause(0).kill(true);
+ }
+ }, [])
+
+ return (
+ <>
+ <div className="hero-sec-wrap" style={{width: "100%"}}>
+ <div className="hero-text">
+ <h2 ref={titleRef} className="hero-title hide-title"><span>Effortless and smooth</span> <span style={{color: "#E8433E"}}>API Traffic</span> management.</h2>
+ <h3 ref={subtitleRef} className="hero-subtitle hide-subtitle">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, and more...</h3>
+ <div ref={ctaRef} className="hero-ctas hide-ctas">
+ <Link
+ to={useBaseUrl("downloads")}
+ className="btn btn-download">
+ Downloads
+ </Link>
+ <ArrowAnim />
+ </div>
+ </div>
+ <div ref={canRef} className="add-margin">
+ <HeroCanvas></HeroCanvas>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default HeroSection;
+
\ No newline at end of file
diff --git a/website/src/pages/sections/newsSection.jsx b/website/src/pages/sections/newsSection.jsx
new file mode 100644
index 0000000..0ef8c5b
--- /dev/null
+++ b/website/src/pages/sections/newsSection.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+import "../../css/customTheme.css";
+import ChevronRight from "../../assets/icons/chevron-right.svg";
+
+const NewsSection = () => {
+ const { siteConfig } = useDocusaurusContext();
+ const events = (siteConfig.customFields.events || [])
+ .slice(0, 4)
+ .map((event) => {
+ const publishTime = event.fileName.slice(0, 10);
+ const splittedFileName = event.fileName.split("-");
+ const url = `/events/${splittedFileName
+ .slice(0, 3)
+ .join("/")}/${splittedFileName.slice(3).join("-")}`;
+ return (
+ <div className="event-card" key={event.title}>
+ <a className="event-item" href={url} target="_blank">
+ <div className="event-card-title">{event.title}</div>
+ <div className="event-card-time">{publishTime}</div>
+ <div className="event-card-read">
+ Read <ChevronRight style={{width: "6px"}}/>
+ </div>
+ </a>
+ </div>
+ );
+ });
+
+ return (
+ <>
+ <div className="news" style={{padding: "50px 0"}}>
+ <div>
+ <h3 className="docs-promo-head" style={{width: "100%", textAlign: "center", left: "0"}}>Stay updated about APISIX</h3>
+ <p className="docs-promo-subtitle" style={{width: "100%", textAlign: "center", left: "0"}}>Some Recent events</p>
+ <div className="event-card-container">{events}</div>
+ </div>
+ <div className="newsletter">
+ <p>Stay up to date about all Apache APISIX™ News, subscribe to our <a hred="%">newsletter.</a></p>
+ <a className="news-button" href="/docs/general/subscribe-guide">Subscribe</a>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default NewsSection;
diff --git a/website/src/pages/sections/opensourcePromo.jsx b/website/src/pages/sections/opensourcePromo.jsx
new file mode 100644
index 0000000..1e81fe4
--- /dev/null
+++ b/website/src/pages/sections/opensourcePromo.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+import OssCanvas from "./components/ossCanvas"
+
+import "../../css/customTheme.css";
+import GitHub from "../../assets/icons/github-logo.svg";
+import YtPromo from "../../assets/videos/apisix.mp4";
+
+const OpensourcePromo = (props) => {
+ return (
+ <>
+ <div className="ossPromotion">
+ <div className="docs-promo">
+ <div className="docs-promo-text">
+ <h3 className="docs-promo-head">Learn from developers</h3>
+ <div className="docs-promo-subtitle">
+ <p>Want to learn Apache APISIX usage, but don’t know where to start. Check out our <Link style={{color: "#e8433e"}} to={useBaseUrl("docs")}>docs.</Link></p>
+ <p>Like visual information, check out our <a style={{color: "#e8433e"}} href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g">Youtube channel</a> for detailed tutorials. Subscribe for more.</p>
+ </div>
+ </div>
+ <div className="docs-promo-video">
+ <video preload="none" src={YtPromo} loading="lazy" autoPlay={true} poster="" muted={true} loop={true} width="70%" height="auto" controls></video>
+ </div>
+ </div>
+
+ <div className="oss-promo">
+ <div className="oss-promo-text">
+ <h3 className="oss-promo-head">Be a part of building APISIX</h3>
+ <div className="oss-promo-subtitle" style={{color: "rgb(199, 199, 199)"}}>
+ <p>Apache APISIX is opensource and ever-growing. Contributors are always welcome. Reach out to us on GitHub</p>
+ <div className="oss-promo-cta">
+ <GitHub style={{width: "20px", margin: "0 10px 0 0"}} />
+ <a href="https://github.com/apache/apisix" style={{textDecoration: "none"}}>Check us out</a>
+ </div>
+ </div>
+ </div>
+ <div className="oss-promo-infograph">
+ <OssCanvas/>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default OpensourcePromo;
diff --git a/website/src/pages/showcase/styles.scss b/website/src/pages/showcase/styles.scss
index c61b24f..dd66811 100644
--- a/website/src/pages/showcase/styles.scss
+++ b/website/src/pages/showcase/styles.scss
@@ -1,41 +1,41 @@
.showcase {
- .header {
- padding-top: 0;
+ .header {
+ padding-top: 0;
- .title {
- color: var(--color-primary);
- font-size: 50px;
- font-weight: bold;
- }
-
- .tips {
- font-size: 18px;
- }
+ .title {
+ color: var(--color-primary);
+ font-size: 50px;
+ font-weight: bold;
}
- .content {
- width: 100%;
- padding: 50px 200px;
- display: flex;
- flex-wrap: wrap;
+ .tips {
+ font-size: 18px;
}
+ }
- .user-card {
- padding: 30px 10px;
+ .content {
+ width: 100%;
+ padding: 50px 200px;
+ display: flex;
+ flex-wrap: wrap;
+ }
- .logo {
- max-width: 100px;
- max-height: 40px;
- }
- }
+ .user-card {
+ padding: 30px 10px;
- .row {
- margin: 0;
+ .logo {
+ max-width: 100px;
+ max-height: 40px;
}
+ }
- @media (max-width: 1200px) {
- .content {
- padding: 50px 50px;
- }
+ .row {
+ margin: 0;
+ }
+
+ @media (max-width: 1200px) {
+ .content {
+ padding: 50px 50px;
}
+ }
}
diff --git a/website/src/theme/DocPage/index.tsx b/website/src/theme/DocPage/index.tsx
index ea70823..f5eacad 100644
--- a/website/src/theme/DocPage/index.tsx
+++ b/website/src/theme/DocPage/index.tsx
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import React, {ReactNode, useState, useCallback} from 'react';
+import React, {ReactNode, useState, useCallback, useEffect} from 'react';
import {MDXProvider} from '@mdx-js/react';
import renderRoutes from '@docusaurus/renderRoutes';
@@ -46,6 +46,41 @@ function DocPageContent({
const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
const [hiddenSidebar, setHiddenSidebar] = useState(false);
+
+ useEffect(() => {
+ document.querySelector(".react-toggle").style.display = "block";
+ const currentPage = currentDocRoute.path.split("/")[2] || "";
+ switch (currentPage) {
+ case "general":
+ document.querySelectorAll(".navbar__link")[0].innerText = "General";
+ break;
+ case "apisix":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX®";
+ break;
+ case "dashboard":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Dashboard";
+ break;
+ case "ingress-controller":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Ingress Controller";
+ break;
+ case "helm-chart":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Helm Chart";
+ break;
+ case "docker":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Docker";
+ break;
+ case "java-plugin-runner":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Java Plugin Runner";
+ break;
+ case "go-plugin-runner":
+ document.querySelectorAll(".navbar__link")[0].innerText = "Apache APISIX® Go Plugin Runner";
+ break;
+ }
+ return () => {
+ document.querySelector(".react-toggle").style.display = "none";
+ }
+ }, []);
+
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false);
diff --git a/website/src/theme/DocSidebar/styles.module.css b/website/src/theme/DocSidebar/styles.module.css
index 190eeb3..a498825 100644
--- a/website/src/theme/DocSidebar/styles.module.css
+++ b/website/src/theme/DocSidebar/styles.module.css
@@ -59,6 +59,8 @@
.collapseSidebarButton {
display: block !important;
+ width: 100%;
+ margin: 0;
background-color: var(--ifm-button-background-color);
height: 40px;
position: sticky;