diff --git a/docs/.vitepress/vitepress/components/globals/parallax-home.vue b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
index a56ea7277c..832fe7a6ed 100644
--- a/docs/.vitepress/vitepress/components/globals/parallax-home.vue
+++ b/docs/.vitepress/vitepress/components/globals/parallax-home.vue
@@ -123,33 +123,16 @@ useEventListener(window, 'scroll', handleScroll)
     <div ref="jumbotronRef" class="jumbotron">
       <div class="parallax-container" :style="containerStyle">
         <div :style="cardStyle">
-          <img
-            :style="screenLayer"
-            src="/images/home/screen.svg"
-            alt="banner"
-          />
-          <img
+          <screen-svg :style="screenLayer" alt="banner" />
+          <people-svg
             :style="peopleLayer"
-            src="/images/home/people.svg"
             alt="banner"
             class="cursor-pointer"
             @click="jumpTo('/guide/quickstart.html')"
           />
-          <img
-            :style="leftLayer"
-            src="/images/home/left-layer.svg"
-            alt="banner"
-          />
-          <img
-            :style="leftBottomLayer"
-            src="/images/home/left-bottom-layer.svg"
-            alt="banner"
-          />
-          <img
-            :style="rightLayer"
-            src="/images/home/right-layer.svg"
-            alt="banner"
-          />
+          <left-layer-svg :style="leftLayer" alt="banner" />
+          <left-bottom-layer-svg :style="leftBottomLayer" alt="banner" />
+          <right-layer-svg :style="rightLayer" alt="banner" />
         </div>
       </div>
     </div>
diff --git a/docs/.vitepress/vitepress/components/home/home-cards.vue b/docs/.vitepress/vitepress/components/home/home-cards.vue
index 636c284be8..d209411965 100644
--- a/docs/.vitepress/vitepress/components/home/home-cards.vue
+++ b/docs/.vitepress/vitepress/components/home/home-cards.vue
@@ -12,7 +12,7 @@ const homeLang = computed(() => homeLocale[lang.value])
     <ul class="container">
       <li>
         <div class="card">
-          <img src="/images/guide.png" alt="" />
+          <guide-svg w="40" m="y-12" />
           <h3>{{ homeLang['3'] }}</h3>
           <p>{{ homeLang['4'] }}</p>
           <a :href="`/${lang}/guide/design.html`">{{ homeLang['5'] }}</a>
@@ -20,7 +20,7 @@ const homeLang = computed(() => homeLocale[lang.value])
       </li>
       <li>
         <div class="card">
-          <img src="/images/component.png" alt="" />
+          <component-svg w="40" m="y-12" />
           <h3>{{ homeLang['6'] }}</h3>
           <p>{{ homeLang['7'] }}</p>
           <a :href="`/${lang}/component/layout.html`">
@@ -30,7 +30,7 @@ const homeLang = computed(() => homeLocale[lang.value])
       </li>
       <li>
         <div class="card">
-          <img src="/images/resource.png" alt="" />
+          <resource-svg w="40" m="y-12" />
           <h3>{{ homeLang['8'] }}</h3>
           <p>{{ homeLang['9'] }}</p>
           <a :href="`/${lang}/resource/index.html`"> {{ homeLang['5'] }} </a>
diff --git a/docs/.vitepress/vitepress/components/home/svg/component-svg.vue b/docs/.vitepress/vitepress/components/home/svg/component-svg.vue
new file mode 100644
index 0000000000..441774e8e1
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/component-svg.vue
@@ -0,0 +1,83 @@
+<template>
+  <svg
+    class="component-svg"
+    width="160"
+    height="120"
+    viewBox="0 0 160 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="80" cy="60" r="60" fill="var(--component-c-0)" />
+    <path
+      d="M37 23C37 20.7909 38.7909 19 41 19H101C103.209 19 105 20.7909 105 23V97C105 99.2091 103.209 101 101 101H45C40.5817 101 37 97.4183 37 93V23Z"
+      fill="var(--component-c-1)"
+    />
+    <path
+      d="M112.048 91H49.0484C49.8484 95.4 46.715 99.5 45.0484 101H107.548C114.348 100.6 113.382 94.1667 112.048 91Z"
+      fill="var(--component-c-2)"
+    />
+    <path
+      d="M121.5 5.5L114.883 19.2063C114.791 19.3981 115.022 19.5824 115.188 19.4494L127 10L121.5 5.5Z"
+      fill="#FFACAD"
+    />
+    <path
+      d="M121.68 21.3628L115.49 27.0342C115.145 27.3502 115.385 27.9246 115.852 27.9022L124.153 27.5051C124.496 27.4887 124.721 27.1389 124.593 26.8199L122.482 21.5456C122.352 21.2211 121.938 21.1266 121.68 21.3628Z"
+      fill="#FFD6D2"
+    />
+    <path
+      d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V32H37V22Z"
+      fill="#0077CE"
+    />
+    <path
+      d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V30H37V22Z"
+      fill="#20A0FF"
+    />
+    <circle cx="44" cy="25" r="2" fill="#0077CE" />
+    <circle cx="51" cy="25" r="2" fill="#0077CE" />
+    <circle cx="60" cy="25" r="2" fill="#0077CE" />
+    <rect x="45" y="38" width="14" height="4" fill="var(--component-c-3)" />
+    <rect x="45" y="55" width="14" height="4" fill="var(--component-c-3)" />
+    <rect x="45" y="45" width="50" height="4" fill="var(--component-c-4)" />
+    <rect x="45" y="62" width="50" height="4" fill="var(--component-c-4)" />
+    <rect x="61" y="75" width="20" height="6" rx="3" fill="#20A0FF" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M87 42C85.8954 42 85 42.8954 85 44V69C85 70.1046 85.8954 71 87 71H96.6154L98 75.5H100.5L99.15 71H132C133.105 71 134 70.1046 134 69V44C134 42.8954 133.105 42 132 42H87Z"
+      fill="var(--component-c-5)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M89 42C87.8954 42 87 42.8954 87 44V69C87 70.1046 87.8954 71 89 71H98.6154L100 75.5L104.154 71H134C135.105 71 136 70.1046 136 69V44C136 42.8954 135.105 42 134 42H89Z"
+      fill="var(--component-c-6)"
+    />
+    <path
+      d="M103.391 61.7402L94.2305 57.1895V56.4473L103.391 51.3984V53.0879L96.584 56.75V56.7988L103.391 60.0605V61.7402ZM114.943 47.873L107.688 65.5098H105.9L113.156 47.873H114.943ZM126.789 57.1699L117.629 61.7207V60.041L124.445 56.8086V56.7402L117.629 53.0781V51.3887L126.789 56.4277V57.1699Z"
+      fill="var(--component-c-7)"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.component-svg {
+  --component-c-0: #eff5fd;
+  --component-c-1: white;
+  --component-c-2: #d9edfe;
+  --component-c-3: var(--component-c-2);
+  --component-c-4: var(--component-c-2);
+  --component-c-5: #6496dc;
+  --component-c-6: #80a8e1;
+  --component-c-7: #dff2ff;
+}
+.dark .component-svg {
+  --component-c-0: #272b31;
+  --component-c-1: #273751;
+  --component-c-2: #394c68;
+  --component-c-3: #20a0ff;
+  --component-c-4: #384692;
+  --component-c-5: #263346;
+  --component-c-6: #3a5a88;
+  --component-c-7: white;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/guide-svg.vue b/docs/.vitepress/vitepress/components/home/svg/guide-svg.vue
new file mode 100644
index 0000000000..0f6f2c32ab
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/guide-svg.vue
@@ -0,0 +1,55 @@
+<template>
+  <svg
+    class="guide-svg"
+    width="160"
+    height="120"
+    viewBox="0 0 160 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="80" cy="60" r="60" fill="var(--guide-c-0)" />
+    <rect x="47" y="55" width="66" height="46" rx="4" fill="#0077CE" />
+    <path
+      d="M53 19C53 16.7909 54.7909 15 57 15H96L106.054 26.8815C106.665 27.6037 107 28.5191 107 29.4652V61C107 63.2091 105.209 65 103 65H57C54.7909 65 53 63.2091 53 61V19Z"
+      fill="var(--guide-c-1)"
+    />
+    <path
+      d="M96 15L107 28L-nan -nanL107 28H100C97.7909 28 96 26.2091 96 24V15Z"
+      fill="var(--guide-c-2)"
+    />
+    <path
+      d="M47 64C47 61.7909 48.7909 60 51 60H92.0279C93.543 60 94.928 59.144 95.6056 57.7889L95.8944 57.2111C96.572 55.856 97.957 55 99.4721 55H109C111.209 55 113 56.7909 113 59V95C113 97.2091 111.209 99 109 99H51C48.7909 99 47 97.2091 47 95V64Z"
+      fill="#20A0FF"
+    />
+    <path
+      d="M63.0527 85H58.1719V75.9238H62.8477V76.9668H59.3438V79.873H62.5898V80.9102H59.3438V83.9629H63.0527V85ZM64.6172 85V75.4082H65.7656V85H64.6172ZM73.1016 82.0527H68.5664C68.5859 82.7441 68.7754 83.2793 69.1348 83.6582C69.4941 84.0332 69.9961 84.2207 70.6406 84.2207C71.3672 84.2207 72.0332 83.9883 72.6387 83.5234V84.5488C72.0684 84.9512 71.3125 85.1523 70.3711 85.1523C69.4336 85.1523 68.7012 84.8555 68.1738 84.2617C67.6504 83.668 67.3887 82.8438 67.3887 81.7891C67.3887 80.7969 67.6758 79.9785 68.25 79.334C68.8281 78.6895 69.5449 78.3672 70.4004 78.3672C71.248 78.3672 71.9102 78.6406 72.3867 79.1875C72.8633 79.7305 73.1016 80.4922 73.1016 81.4727V82.0527ZM71.9531 81.1328C71.9492 80.5469 71.8105 80.0938 71.5371 79.7734C71.2637 79.4531 70.8789 79.293 70.3828 79.293C69.9258 79.293 69.5293 79.4629 69.1934 79.8027C68.8613 80.1426 68.6523 80.5859 68.5664 81.1328H71.9531ZM83.959 85H82.8105V81.2793C82.8105 80.5762 82.7012 80.0742 82.4824 79.7734C82.2637 79.4688 81.9043 79.3164 81.4043 79.3164C80.9824 79.3164 80.6211 79.5137 80.3203 79.9082C80.0195 80.3027 79.8691 80.7695 79.8691 81.3086V85H78.7207V81.1621C78.7207 79.9316 78.2461 79.3164 77.2969 79.3164C76.8594 79.3164 76.4961 79.5039 76.207 79.8789C75.9219 80.2539 75.7793 80.7324 75.7793 81.3145V85H74.6309V78.5195H75.7793V79.5449H75.8027C76.2637 78.7598 76.9375 78.3672 77.8242 78.3672C78.2578 78.3672 78.6406 78.4863 78.9727 78.7246C79.3047 78.9629 79.5352 79.2852 79.6641 79.6914C80.1445 78.8086 80.8633 78.3672 81.8203 78.3672C83.2461 78.3672 83.959 79.2461 83.959 81.0039V85ZM91.1602 82.0527H86.625C86.6445 82.7441 86.834 83.2793 87.1934 83.6582C87.5527 84.0332 88.0547 84.2207 88.6992 84.2207C89.4258 84.2207 90.0918 83.9883 90.6973 83.5234V84.5488C90.127 84.9512 89.3711 85.1523 88.4297 85.1523C87.4922 85.1523 86.7598 84.8555 86.2324 84.2617C85.709 83.668 85.4473 82.8438 85.4473 81.7891C85.4473 80.7969 85.7344 79.9785 86.3086 79.334C86.8867 78.6895 87.6035 78.3672 88.459 78.3672C89.3066 78.3672 89.9688 78.6406 90.4453 79.1875C90.9219 79.7305 91.1602 80.4922 91.1602 81.4727V82.0527ZM90.0117 81.1328C90.0078 80.5469 89.8691 80.0938 89.5957 79.7734C89.3223 79.4531 88.9375 79.293 88.4414 79.293C87.9844 79.293 87.5879 79.4629 87.252 79.8027C86.9199 80.1426 86.7109 80.5859 86.625 81.1328H90.0117ZM98.168 85H97.0254V81.3145C97.0254 79.9824 96.5391 79.3164 95.5664 79.3164C95.0625 79.3164 94.6484 79.5039 94.3242 79.8789C94 80.2539 93.8379 80.7285 93.8379 81.3027V85H92.6895V78.5195H93.8379V79.5918H93.8613C94.3496 78.7754 95.0586 78.3672 95.9883 78.3672C96.6992 78.3672 97.2402 78.5957 97.6113 79.0527C97.9824 79.5059 98.168 80.168 98.168 81.0391V85ZM103.195 84.9355C102.945 85.0723 102.607 85.1406 102.182 85.1406C101.021 85.1406 100.441 84.498 100.441 83.2129V79.4688H99.3281V78.5195H100.441V76.9609L101.584 76.5977V78.5195H103.195V79.4688H101.584V83.0078C101.584 83.4336 101.656 83.7383 101.801 83.9219C101.945 84.1055 102.186 84.1973 102.521 84.1973C102.779 84.1973 103.004 84.125 103.195 83.9805V84.9355Z"
+      fill="#0077CE"
+    />
+    <rect x="58" y="23" width="28" height="4" fill="#20A0FF" />
+    <rect x="58" y="46" width="24" height="4" fill="var(--guide-c-3)" />
+    <rect x="58" y="37" width="44" height="4" fill="var(--guide-c-3)" />
+    <path
+      d="M123.142 15.4872L124.536 10.4687C124.808 9.49219 126.192 9.49219 126.464 10.4687L127.858 15.4872C127.947 15.8078 128.189 16.0631 128.505 16.1683L134.154 18.0513C135.066 18.3552 135.066 19.6448 134.154 19.9487L128.505 21.8317C128.189 21.9369 127.947 22.1922 127.858 22.5128L126.464 27.5313C126.192 28.5078 124.808 28.5078 124.536 27.5313L123.142 22.5128C123.053 22.1922 122.811 21.9369 122.495 21.8317L116.846 19.9487C115.934 19.6448 115.934 18.3552 116.846 18.0513L122.495 16.1683C122.811 16.0631 123.053 15.8078 123.142 15.4872Z"
+      fill="#FFACAD"
+    />
+    <path
+      d="M119.096 37.7612L120.443 34.3927C120.644 33.8898 121.356 33.8898 121.557 34.3927L122.905 37.7612C122.965 37.9136 123.086 38.0345 123.239 38.0954L126.607 39.4429C127.11 39.6441 127.11 40.3559 126.607 40.5571L123.239 41.9044C123.086 41.9654 122.965 42.0862 122.904 42.2387L121.557 45.6072C121.356 46.1101 120.644 46.1101 120.443 45.6072L119.096 42.2387C119.035 42.0862 118.914 41.9654 118.761 41.9044L115.393 40.5571C114.89 40.3559 114.89 39.6441 115.393 39.4429L118.761 38.0955C118.914 38.0345 119.035 37.9137 119.096 37.7612Z"
+      fill="#FFD6D2"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.guide-svg {
+  --guide-c-0: #eff5fd;
+  --guide-c-1: white;
+  --guide-c-2: #d9edfe;
+  --guide-c-3: #eff5fd;
+}
+.dark .guide-svg {
+  --guide-c-0: #272b31;
+  --guide-c-1: #273751;
+  --guide-c-2: #394c68;
+  --guide-c-3: #384962;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue b/docs/.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue
new file mode 100644
index 0000000000..31a1936e97
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue
@@ -0,0 +1,114 @@
+<template>
+  <svg
+    class="left-bottom-layer"
+    width="468"
+    height="258"
+    viewBox="0 0 468 258"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g filter="url(#filter0_dd_11237_126801)">
+      <path
+        d="M442.314 16.9005H24.9315C22.4792 16.9005 20.4912 18.8885 20.4912 21.3408V228.922C20.4912 231.375 22.4792 233.363 24.9315 233.363H442.314C444.766 233.363 446.754 231.375 446.754 228.922V21.3408C446.754 18.8885 444.766 16.9005 442.314 16.9005Z"
+        fill="var(--lbl-c-0)"
+      />
+    </g>
+    <path
+      d="M256.934 107.925C261.839 107.925 265.815 103.949 265.815 99.0449C265.815 94.1404 261.839 90.1644 256.934 90.1644C252.03 90.1644 248.054 94.1404 248.054 99.0449C248.054 103.949 252.03 107.925 256.934 107.925Z"
+      fill="#3F85ED"
+    />
+    <path
+      d="M256.934 162.318C261.839 162.318 265.815 158.342 265.815 153.437C265.815 148.533 261.839 144.557 256.934 144.557C252.03 144.557 248.054 148.533 248.054 153.437C248.054 158.342 252.03 162.318 256.934 162.318Z"
+      fill="var(--lbl-c-1)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M128.722 203.39C171.943 203.39 206.981 168.352 206.981 125.131C206.981 81.9099 171.943 46.8721 128.722 46.8721C85.5007 46.8721 50.4629 81.9099 50.4629 125.131C50.4629 168.352 85.5007 203.39 128.722 203.39ZM128.722 177.304C157.536 177.304 180.894 153.945 180.894 125.131C180.894 96.3171 157.536 72.9585 128.722 72.9585C99.9077 72.9585 76.5492 96.3171 76.5492 125.131C76.5492 153.945 99.9077 177.304 128.722 177.304Z"
+      fill="#3F85ED"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M50.4629 125.131H76.5492C76.5492 96.3171 99.9077 72.9585 128.722 72.9585V46.8721C85.5007 46.8721 50.4629 81.9099 50.4629 125.131Z"
+      fill="var(--lbl-c-2)"
+    />
+    <path
+      d="M403.461 88.4994H291.345C285.521 88.4994 280.8 93.2208 280.8 99.0449C280.8 104.869 285.521 109.59 291.345 109.59H403.461C409.285 109.59 414.007 104.869 414.007 99.0449C414.007 93.2208 409.285 88.4994 403.461 88.4994Z"
+      fill="var(--lbl-c-3)"
+    />
+    <path
+      d="M403.461 142.892H291.345C285.521 142.892 280.8 147.614 280.8 153.438C280.8 159.262 285.521 163.984 291.345 163.984H403.461C409.285 163.984 414.007 159.262 414.007 153.438C414.007 147.614 409.285 142.892 403.461 142.892Z"
+      fill="var(--lbl-c-3)"
+    />
+    <defs>
+      <filter
+        id="filter0_dd_11237_126801"
+        x="2.73027"
+        y="3.57981"
+        width="461.785"
+        height="251.984"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4.44024" />
+        <feGaussianBlur stdDeviation="8.88047" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.039009 0 0 0 0 0.13338 0 0 0 0 0.232469 0 0 0 0.08 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_11237_126801"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation="2.22012" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.133333 0 0 0 0 0.231373 0 0 0 0.04 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_11237_126801"
+          result="effect2_dropShadow_11237_126801"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_11237_126801"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.left-bottom-layer {
+  --lbl-c-0: white;
+  --lbl-c-1: #c7dbf8;
+  --lbl-c-2: #98bdf2;
+  --lbl-c-3: #e4efff;
+}
+
+.dark .left-bottom-layer {
+  --lbl-c-0: #1e2835;
+  --lbl-c-1: #58677a;
+  --lbl-c-2: #2f5790;
+  --lbl-c-3: #444f5d;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue b/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue
new file mode 100644
index 0000000000..913d8ff05a
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue
@@ -0,0 +1,51 @@
+<template>
+  <svg
+    class="left-layer-svg"
+    width="262"
+    height="173"
+    viewBox="0 0 262 173"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_11237_126796)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.66289 1.92664C3.21061 1.92664 1.22266 3.9146 1.22266 6.36687V155.114C1.22266 157.567 3.21061 159.555 5.66289 159.555H173.559L186.602 172.32L199.09 159.555H256.536C258.988 159.555 260.976 157.567 260.976 155.114V6.36688C260.976 3.9146 258.988 1.92664 256.536 1.92664H5.66289Z"
+        fill="var(--ll-c-0)"
+      />
+      <path
+        d="M80.8689 23.0177H38.1317C32.1543 23.0177 27.3086 27.8633 27.3086 33.8407C27.3086 39.8182 32.1543 44.6638 38.1317 44.6638H80.8689C86.8463 44.6638 91.692 39.8182 91.692 33.8407C91.692 27.8633 86.8463 23.0177 80.8689 23.0177Z"
+        fill="#C7DCFB"
+      />
+      <path
+        d="M230.449 64.0898H31.7488C29.2966 64.0898 27.3086 66.0778 27.3086 68.5301V81.2957C27.3086 83.748 29.2966 85.7359 31.7488 85.7359H230.449C232.902 85.7359 234.89 83.748 234.89 81.2957V68.5301C234.89 66.0778 232.902 64.0898 230.449 64.0898Z"
+        fill="#A2C5F9"
+      />
+      <path
+        d="M230.449 103.497H31.7488C29.2966 103.497 27.3086 105.485 27.3086 107.938V120.703C27.3086 123.156 29.2966 125.144 31.7488 125.144H230.449C232.902 125.144 234.89 123.156 234.89 120.703V107.938C234.89 105.485 232.902 103.497 230.449 103.497Z"
+        fill="#A2C5F9"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11237_126796">
+        <rect
+          width="261"
+          height="172"
+          fill="white"
+          transform="translate(0.491211 0.941406)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.left-layer-svg {
+  --ll-c-0: #5c97ee;
+}
+
+.dark .left-layer-svg {
+  --ll-c-0: #4372b6;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/people-svg.vue b/docs/.vitepress/vitepress/components/home/svg/people-svg.vue
new file mode 100644
index 0000000000..c3b5bbcb13
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/people-svg.vue
@@ -0,0 +1,139 @@
+<template>
+  <svg
+    class="people-svg"
+    width="344"
+    height="290"
+    viewBox="0 0 344 290"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_11237_126775)">
+      <path
+        d="M171.535 81.4944C258.413 81.4944 261.727 164.471 256.177 184.452L169.593 230.797C144.616 218.771 93.1652 192.167 87.1709 181.954C79.678 169.189 88.5584 81.4944 171.535 81.4944Z"
+        fill="#428BFB"
+      />
+      <path
+        d="M134.626 170.576C130.464 163.361 131.851 127.006 135.459 113.408C123.804 129.782 126.949 157.626 128.244 170.576C131.759 172.981 137.957 176.349 134.626 170.576Z"
+        fill="#2671E5"
+      />
+      <path
+        d="M212.727 170.576C216.89 163.361 215.502 127.006 211.895 113.408C223.55 129.782 220.405 157.626 219.11 170.576C215.595 172.981 209.397 176.349 212.727 170.576Z"
+        fill="#2671E5"
+      />
+      <path
+        d="M118.058 138.711L123.803 196.94L160.435 208.596H220.378L228.284 138.759C228.507 136.784 226.962 135.054 224.975 135.054H121.372C119.404 135.054 117.865 136.753 118.058 138.711Z"
+        fill="var(--people-c-0)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M134.995 200.325L160.99 208.596H220.933L228.839 138.759C229.062 136.784 227.517 135.054 225.53 135.054H204.665L134.995 200.325Z"
+        fill="var(--people-c-1)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M182.474 173.008C182.474 173.941 182.008 174.116 182.008 174.116C182.008 174.116 173.724 178.899 173.199 179.191C172.908 179.308 172.616 179.308 172.324 179.191C172.324 179.191 163.691 174.174 163.399 173.941C163.224 173.824 163.108 173.591 163.049 173.358C163.049 173.358 163.049 163.441 163.049 162.974C163.049 162.508 163.633 162.216 163.633 162.216L172.266 157.258C172.616 157.083 172.966 157.083 173.316 157.258C173.316 157.258 180.958 161.691 181.774 162.158C182.241 162.391 182.533 162.858 182.474 163.383C182.474 163.324 182.474 172.133 182.474 173.008ZM179.033 163.091C177.283 162.099 173.083 159.649 173.083 159.649C172.849 159.533 172.499 159.533 172.266 159.649L165.499 163.558C165.499 163.558 165.033 163.849 165.033 164.199C165.033 164.549 165.033 172.308 165.033 172.308C165.033 172.483 165.149 172.658 165.266 172.774C165.499 172.949 172.266 176.858 172.266 176.858C172.499 176.974 172.733 176.974 172.966 176.858C173.374 176.624 179.849 172.891 179.849 172.891C179.849 172.891 180.199 172.716 180.199 172.016C180.199 171.783 180.199 171.024 180.199 169.974L172.616 174.583V172.833C172.616 172.366 172.849 171.958 173.199 171.608L179.966 167.524C180.141 167.291 180.258 166.999 180.258 166.649C180.258 165.891 180.258 165.249 180.258 164.841L172.616 169.449V167.583C172.616 167.174 172.791 166.766 173.083 166.533L179.033 163.091Z"
+        fill="#409EFF"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M184.633 156.674C184.633 156.558 184.516 156.441 184.399 156.441H182.766V154.749C182.766 154.633 182.649 154.633 182.474 154.633L181.658 154.749C181.541 154.749 181.483 154.808 181.483 154.866V156.441H179.908C179.791 156.441 179.733 156.558 179.674 156.616V157.666H181.541V159.416C181.541 159.533 181.658 159.591 181.833 159.533L182.649 159.416C182.766 159.416 182.824 159.358 182.824 159.299V157.666H184.691V156.674H184.633Z"
+        fill="#409EFF"
+      />
+      <path
+        d="M342.736 261.495C342.736 279.534 266.324 289.802 172.064 289.802C77.8049 289.802 1.39258 280.644 1.39258 261.495C1.39258 242.347 77.8049 233.189 172.064 233.189C266.324 233.189 342.736 241.514 342.736 261.495Z"
+        fill="var(--people-c-9)"
+      />
+      <path
+        d="M157.382 85.9347C145.448 78.4418 140.453 59.5708 139.898 50.9678C140.176 45.4175 141.23 32.6518 143.228 25.9915C145.726 17.666 182.358 19.3311 192.348 21.8288C202.339 24.3264 200.674 33.7619 201.229 50.9678C201.784 68.1737 189.851 81.7719 186.243 85.1021C182.635 88.4323 169.315 93.4276 157.382 85.9347Z"
+        fill="var(--people-c-2)"
+      />
+      <path
+        d="M171.813 106.193C160.157 106.748 156.827 102.03 154.329 97.0352L159.602 80.9393H183.191L186.798 97.5902C185.688 100.273 181.137 105.749 171.813 106.193Z"
+        fill="var(--people-c-2)"
+      />
+      <path
+        d="M205.947 62.9009C207.612 58.7382 204.282 53.1879 200.951 53.1879C198.731 58.0906 194.902 68.0071 197.344 68.4512C200.396 69.0062 204.282 67.0636 205.947 62.9009Z"
+        fill="var(--people-c-2)"
+      />
+      <path
+        d="M137.551 62.5564C136.206 58.2795 139.947 52.9973 143.268 53.2495C145.11 58.3064 148.178 68.4844 145.709 68.7422C142.623 69.0645 138.896 66.8332 137.551 62.5564Z"
+        fill="var(--people-c-2)"
+      />
+      <path
+        d="M187.353 3.51273C178.473 -0.927495 170.98 3.79024 163.487 8.78549C159.139 8.32297 149.001 9.39603 143.229 17.3885C137.456 25.3809 137.591 46.7074 139.793 54.7659C140.59 54.1128 141.653 53.4747 143.218 53.412C143.218 52.8569 142.396 39.3122 143.229 36.8145C144.061 34.3169 144.339 29.5991 149.611 28.4891C154.884 27.379 160.712 32.3743 172.645 32.3743C184.578 32.3743 186.521 28.7666 193.181 28.2116C196.511 28.7666 199.009 30.1542 200.397 35.1494C201.507 39.1456 200.952 49.2102 200.674 53.4654C201.249 53.4654 202.727 53.2141 204.116 54.8013C204.154 54.6596 204.173 54.5544 204.195 54.4698C206.646 45.2823 203.937 25.8178 201.229 18.7761C199.009 13.0038 194.199 11.0056 192.071 10.7281C193.274 10.0806 191.794 5.73284 187.353 3.51273Z"
+        fill="var(--people-c-3)"
+      />
+      <path
+        d="M102.711 260.213C109.094 260.491 112.702 261.878 121.305 261.046L127.133 237.18L108.262 235.792C106.597 237.365 102.045 240.232 97.1615 240.232C91.0562 240.232 81.0657 242.73 73.5728 245.505C64.922 248.709 58.3094 257.161 57.4769 260.213C57.1993 261.878 59.142 264.654 64.4148 263.266C69.6876 261.878 96.329 259.936 102.711 260.213Z"
+        fill="var(--people-c-4)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M108.54 260.748C106.714 260.529 104.871 260.307 102.71 260.213C96.3277 259.936 69.6863 261.879 64.4135 263.266C64.35 263.283 64.2871 263.299 64.2246 263.314C65.514 260.776 70.1256 255.071 76.9006 251.333C84.9485 246.893 94.939 245.228 101.877 244.673C108.815 244.118 111.312 242.453 116.03 238.567L123.465 252.197L121.304 261.046C115.613 261.597 112.108 261.176 108.54 260.748Z"
+        fill="#3678D8"
+      />
+      <path
+        d="M287.536 261.324C287.023 263.891 285.039 264.654 280.876 263.266L261.172 258.548L227.593 260.491L221.488 250.223L226.483 238.567C229.998 237.827 237.583 237.18 239.804 237.18C241.191 238.567 245.354 240.494 252.292 240.788C271.995 241.62 282.264 251.888 284.484 254.386C286.704 256.883 288.091 258.548 287.536 261.324Z"
+        fill="var(--people-c-8)"
+      />
+      <path
+        d="M245.631 244.95C237.306 244.118 237.583 242.175 229.258 242.453C227.778 248.373 225.428 260.324 227.87 260.768C230.923 261.324 240.639 260.676 252.847 261.046C262.005 261.324 268.388 261.879 280.876 263.266C276.158 251.333 253.957 245.783 245.631 244.95Z"
+        fill="#3678D8"
+      />
+      <path
+        d="M174.866 214.146C162.378 210.261 147.392 201.38 127.966 192.777C125.746 191.785 109.373 184.729 96.8841 182.787C84.3959 180.844 67.4675 185.84 66.3575 201.103C65.2474 216.366 92.999 233.85 116.311 241.897C139.622 249.945 193.46 257.161 206.225 259.103C218.991 261.046 227.316 263.821 232.034 259.936C236.752 256.051 236.752 246.06 232.034 241.065C227.316 236.07 187.354 218.031 174.866 214.146Z"
+        fill="var(--people-c-5)"
+      />
+      <path
+        d="M174.31 220.806C161.822 212.666 132.405 196.94 109.649 193.055C126.522 197.939 167.372 220.251 168.76 224.692L174.31 220.806Z"
+        fill="var(--people-c-6)"
+      />
+      <path
+        d="M280.876 197.773C279.848 193.777 273.105 181.122 251.459 182.787C230.646 185.562 210.477 197.956 188.463 207.763C163.209 218.031 139.066 226.357 126.855 233.85C114.48 241.444 109.649 245.228 112.147 254.386C116.587 262.434 114.367 264.099 142.396 259.936C176.818 254.824 223.863 247.697 252.847 232.462C274.493 221.084 283.373 207.486 280.876 197.773Z"
+        fill="var(--people-c-7)"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_11237_126775">
+        <rect
+          width="343"
+          height="289"
+          fill="white"
+          transform="translate(0.491211 0.941406)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.people-svg {
+  --people-c-0: #ece6e6;
+  --people-c-1: #ddd7d7;
+  --people-c-2: #fbbda4;
+  --people-c-3: #190e02;
+  --people-c-4: #70a2eb;
+  --people-c-5: #3f3c7e;
+  --people-c-6: #504d84;
+  --people-c-7: #504d84;
+  --people-c-8: #70a2eb;
+  --people-c-9: #f1f7ff;
+}
+
+.dark .people-svg {
+  --people-c-0: #2e2929;
+  --people-c-1: #3a3838;
+  --people-c-2: #c19a8b;
+  --people-c-3: #252938;
+  --people-c-4: #42597a;
+  --people-c-5: #222045;
+  --people-c-6: #27235e;
+  --people-c-7: #29274f;
+  --people-c-8: #42597a;
+  --people-c-9: #1e1f1f;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/resource-svg.vue b/docs/.vitepress/vitepress/components/home/svg/resource-svg.vue
new file mode 100644
index 0000000000..608857477b
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/resource-svg.vue
@@ -0,0 +1,66 @@
+<template>
+  <svg
+    class="resource-svg"
+    width="160"
+    height="120"
+    viewBox="0 0 160 120"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="80" cy="60" r="60" fill="var(--resource-c-0)" />
+    <rect
+      x="32"
+      y="14"
+      width="96"
+      height="73"
+      rx="4"
+      fill="var(--resource-c-1)"
+    />
+    <rect x="38" y="20" width="84" height="56" fill="var(--resource-c-2)" />
+    <rect x="78" y="31" width="14" height="14" fill="var(--resource-c-3)" />
+    <rect x="98" y="31" width="14" height="14" fill="#FF9EA4" />
+    <rect x="78" y="51" width="14" height="14" fill="#FFCFC7" />
+    <rect x="57" y="51" width="14" height="14" fill="var(--resource-c-3)" />
+    <path d="M127.966 82H32.0339L25 95H136L127.966 82Z" fill="#20A0FF" />
+    <path
+      d="M25 95H136V97C136 98.1046 135.105 99 134 99H27C25.8954 99 25 98.1046 25 97V95Z"
+      fill="#0077CE"
+    />
+    <circle cx="37" cy="41" r="15" fill="#20A0FF" />
+    <path d="M41 35H33L29 39L37 48L45 39L41 35Z" fill="white" />
+    <rect x="6" y="39" width="12" height="4" rx="2" fill="#FFCFC7" />
+    <rect
+      x="11.8955"
+      y="22"
+      width="12"
+      height="4"
+      rx="2"
+      transform="rotate(28.2865 11.8955 22)"
+      fill="#FF9EA4"
+    />
+    <rect
+      x="23.4775"
+      y="11"
+      width="12"
+      height="4"
+      rx="2"
+      transform="rotate(60.3794 23.4775 11)"
+      fill="#FFCFC7"
+    />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.resource-svg {
+  --resource-c-0: #eff5fd;
+  --resource-c-1: #d9edfe;
+  --resource-c-2: white;
+  --resource-c-3: #eff5fd;
+}
+.dark .resource-svg {
+  --resource-c-0: #272b31;
+  --resource-c-1: #3b6a92;
+  --resource-c-2: #273751;
+  --resource-c-3: #3a5a88;
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/right-layer-svg.vue b/docs/.vitepress/vitepress/components/home/svg/right-layer-svg.vue
new file mode 100644
index 0000000000..0e6811999b
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/right-layer-svg.vue
@@ -0,0 +1,55 @@
+<template>
+  <svg
+    class="right-layer"
+    width="474"
+    height="328"
+    viewBox="0 0 474 328"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M25.1434 17.0806C22.6911 17.0806 20.7031 19.0686 20.7031 21.5209V285.714C20.7031 288.167 22.6911 290.155 25.1434 290.155H155.576L168.619 302.92L181.107 290.155H448.076C450.529 290.155 452.517 288.167 452.517 285.714V21.5209C452.517 19.0686 450.529 17.0806 448.076 17.0806H25.1434Z"
+      fill="var(--rl-c-0)"
+    />
+    <path
+      d="M203.307 211.895H143.364C131.409 211.895 121.718 221.745 121.718 233.895V233.895C121.718 246.046 131.409 255.895 143.364 255.895H203.307C215.261 255.895 224.953 246.046 224.953 233.895V233.895C224.953 221.745 215.261 211.895 203.307 211.895Z"
+      fill="var(--rl-c-1)"
+    />
+    <path
+      d="M329.299 211.895H269.356C257.401 211.895 247.71 221.745 247.71 233.895V233.895C247.71 246.046 257.401 255.895 269.356 255.895H329.299C341.254 255.895 350.945 246.046 350.945 233.895V233.895C350.945 221.745 341.254 211.895 329.299 211.895Z"
+      fill="#3F85ED"
+    />
+    <path
+      d="M409.223 108.105H63.9949C61.5426 108.105 59.5547 110.093 59.5547 112.546V125.311C59.5547 127.764 61.5426 129.752 63.9949 129.752H409.223C411.676 129.752 413.664 127.764 413.664 125.311V112.546C413.664 110.093 411.676 108.105 409.223 108.105Z"
+      fill="var(--rl-c-1)"
+    />
+    <path
+      d="M353.166 149.177H120.054C117.601 149.177 115.613 151.165 115.613 153.618V166.383C115.613 168.836 117.601 170.823 120.054 170.823H353.166C355.618 170.823 357.606 168.836 357.606 166.383V153.618C357.606 151.165 355.618 149.177 353.166 149.177Z"
+      fill="var(--rl-c-1)"
+    />
+    <path
+      d="M318.754 49.8273H156.685C154.233 49.8273 152.245 51.8034 152.245 54.2411V77.4135C152.245 79.8511 154.233 81.8273 156.685 81.8273H318.754C321.206 81.8273 323.194 79.8511 323.194 77.4135V54.2411C323.194 51.8034 321.206 49.8273 318.754 49.8273Z"
+      fill="#91BEFF"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.right-layer {
+  --rl-c-0: white;
+  --rl-c-1: #e4efff;
+
+  filter: drop-shadow(0px 0px 6px rgba(10, 34, 59, 0.04))
+    drop-shadow(0px 6px 20px rgba(10, 34, 59, 0.08));
+}
+
+.dark .right-layer {
+  --rl-c-0: #1e2835;
+  --rl-c-1: #444f5d;
+
+  filter: drop-shadow(0px 0px 6px rgba(6, 15, 26, 0.24))
+    drop-shadow(0px 6px 20px rgba(6, 15, 26, 0.48));
+}
+</style>
diff --git a/docs/.vitepress/vitepress/components/home/svg/screen-svg.vue b/docs/.vitepress/vitepress/components/home/svg/screen-svg.vue
new file mode 100644
index 0000000000..d89c147baf
--- /dev/null
+++ b/docs/.vitepress/vitepress/components/home/svg/screen-svg.vue
@@ -0,0 +1,146 @@
+<template>
+  <svg
+    class="screen-svg"
+    width="1163"
+    height="728"
+    viewBox="0 0 1163 728"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1152 0H8C3.58172 0 0 3.58172 0 8V720C0 724.418 3.58173 728 8 728H1152C1156.42 728 1160 724.418 1160 720V8C1160 3.58172 1156.42 0 1152 0Z"
+      fill="var(--screen-c-0)"
+    />
+    <path
+      d="M1152 0H8C3.58172 0 0 3.58172 0 8V64H1160V8C1160 3.58172 1156.42 0 1152 0Z"
+      fill="#3F85ED"
+    />
+    <path
+      d="M56 40C60.4183 40 64 36.4183 64 32C64 27.5817 60.4183 24 56 24C51.5817 24 48 27.5817 48 32C48 36.4183 51.5817 40 56 40Z"
+      fill="#FD873B"
+    />
+    <path
+      d="M88 40C92.4183 40 96 36.4183 96 32C96 27.5817 92.4183 24 88 24C83.5817 24 80 27.5817 80 32C80 36.4183 83.5817 40 88 40Z"
+      fill="#FFCD8A"
+    />
+    <path
+      d="M120 40C124.418 40 128 36.4183 128 32C128 27.5817 124.418 24 120 24C115.582 24 112 27.5817 112 32C112 36.4183 115.582 40 120 40Z"
+      fill="#91DD9D"
+    />
+    <path
+      d="M503.394 16H200.606C191.435 16 184 23.1634 184 32C184 40.8366 191.435 48 200.606 48H503.394C512.565 48 520 40.8366 520 32C520 23.1634 512.565 16 503.394 16Z"
+      fill="var(--screen-c-1)"
+    />
+    <path
+      d="M291.571 112H52.4286C49.9827 112 48 113.989 48 116.442V675.558C48 678.011 49.9827 680 52.4286 680H291.571C294.017 680 296 678.011 296 675.558V116.442C296 113.989 294.017 112 291.571 112Z"
+      fill="var(--screen-c-2)"
+    />
+    <path
+      d="M251.52 144H92.48C90.0058 144 88 145.976 88 148.414V171.586C88 174.024 90.0058 176 92.48 176H251.52C253.994 176 256 174.024 256 171.586V148.414C256 145.976 253.994 144 251.52 144Z"
+      fill="var(--screen-c-3)"
+    />
+    <path
+      d="M251.52 200H92.48C90.0058 200 88 201.976 88 204.414V227.586C88 230.024 90.0058 232 92.48 232H251.52C253.994 232 256 230.024 256 227.586V204.414C256 201.976 253.994 200 251.52 200Z"
+      fill="var(--screen-c-3)"
+    />
+    <path
+      d="M251.52 256H92.48C90.0058 256 88 257.976 88 260.414V283.586C88 286.024 90.0058 288 92.48 288H251.52C253.994 288 256 286.024 256 283.586V260.414C256 257.976 253.994 256 251.52 256Z"
+      fill="var(--screen-c-3)"
+    />
+    <path
+      d="M251.52 312H92.48C90.0058 312 88 313.976 88 316.414V339.586C88 342.024 90.0058 344 92.48 344H251.52C253.994 344 256 342.024 256 339.586V316.414C256 313.976 253.994 312 251.52 312Z"
+      fill="var(--screen-c-3)"
+    />
+    <path
+      d="M251.52 368H92.48C90.0058 368 88 369.976 88 372.414V395.586C88 398.024 90.0058 400 92.48 400H251.52C253.994 400 256 398.024 256 395.586V372.414C256 369.976 253.994 368 251.52 368Z"
+      fill="var(--screen-c-3)"
+    />
+    <path
+      d="M1107.55 112H336.448C333.991 112 332 114.075 332 116.635V253.365C332 255.925 333.991 258 336.448 258H1107.55C1110.01 258 1112 255.925 1112 253.365V116.635C1112 114.075 1110.01 112 1107.55 112Z"
+      fill="var(--screen-c-2)"
+    />
+    <path
+      d="M751.574 144H474.426C471.981 144 470 145.976 470 148.414V171.586C470 174.024 471.981 176 474.426 176H751.574C754.019 176 756 174.024 756 171.586V148.414C756 145.976 754.019 144 751.574 144Z"
+      fill="var(--screen-c-5)"
+    />
+    <path
+      d="M919.516 194H474.484C472.008 194 470 195.976 470 198.414V221.586C470 224.024 472.008 226 474.484 226H919.516C921.992 226 924 224.024 924 221.586V198.414C924 195.976 921.992 194 919.516 194Z"
+      fill="var(--screen-c-6)"
+    />
+    <path
+      d="M1067.39 194H952.614C950.066 194 948 195.976 948 198.414V221.586C948 224.024 950.066 226 952.614 226H1067.39C1069.93 226 1072 224.024 1072 221.586V198.414C1072 195.976 1069.93 194 1067.39 194Z"
+      fill="var(--screen-c-6)"
+    />
+    <path
+      d="M441.568 144H368.432C365.984 144 364 145.984 364 148.432V221.568C364 224.016 365.984 226 368.432 226H441.568C444.016 226 446 224.016 446 221.568V148.432C446 145.984 444.016 144 441.568 144Z"
+      fill="#3F85ED"
+    />
+    <path
+      d="M1107 282H335C332.791 282 331 283.791 331 286V676C331 678.209 332.791 680 335 680H1107C1109.21 680 1111 678.209 1111 676V286C1111 283.791 1109.21 282 1107 282Z"
+      fill="var(--screen-c-2)"
+    />
+    <path
+      d="M1015.7 672.14V444.023"
+      stroke="var(--screen-c-4)"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M817.559 672.14V444.023"
+      stroke="var(--screen-c-4)"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M619.413 672.14V444.023"
+      stroke="var(--screen-c-4)"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M421.268 672.14V444.023"
+      stroke="var(--screen-c-4)"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M354.386 544.206C369.65 570.57 382.138 592.494 419.047 591.384C461.229 590.115 469.25 538.656 519.23 538.656C579.173 538.656 628.571 613.585 708.495 602.484C805.903 588.955 804.515 362.434 846.975 362.434C896.928 362.434 846.975 555.307 949.933 575.01C997.09 584.035 1069.26 554.844 1089.24 538.656"
+      stroke="var(--screen-c-4)"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M358.271 504.799C390.186 524.503 408.224 525.058 426.54 522.005C454.569 517.333 488.148 465.114 528.666 459.564C579.451 452.607 605.26 490.258 663.538 480.655C718.399 471.616 760.113 367.707 843.09 380.472C920.794 392.427 913.58 530.608 954.374 540.043C977.13 545.307 989.063 516.732 1021.53 521.45C1047.51 525.224 1075.28 560.764 1085.91 578.063"
+      stroke="#75ADFF"
+      stroke-width="8.88047"
+      stroke-linecap="round"
+    />
+    <path
+      d="M421 533C426.523 533 431 528.523 431 523C431 517.477 426.523 513 421 513C415.477 513 411 517.477 411 523C411 528.523 415.477 533 421 533Z"
+      fill="#E4EFFF"
+      stroke="#75ADFF"
+      stroke-width="4.99526"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.screen-svg {
+  --screen-c-0: #e4efff;
+  --screen-c-1: #c7deff;
+  --screen-c-2: white;
+  --screen-c-3: #eff5ff;
+  --screen-c-4: var(--screen-c-3);
+  --screen-c-5: #bdd8ff;
+  --screen-c-6: #eff5ff;
+}
+.dark .screen-svg {
+  --screen-c-0: #0d1014;
+  --screen-c-1: #7fabee;
+  --screen-c-2: #14181e;
+  --screen-c-3: #303c4b;
+  --screen-c-4: #1d242c;
+  --screen-c-5: #5f7ca5;
+  --screen-c-6: #313c4b;
+}
+</style>
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 6264d749ff..e3a9dfba5a 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -56,6 +56,7 @@ declare module '@vue/runtime-core' {
     ColumnOffset: typeof import('./examples/layout/column-offset.vue')['default']
     ColumnSpacing: typeof import('./examples/layout/column-spacing.vue')['default']
     CommandEvent: typeof import('./examples/dropdown/command-event.vue')['default']
+    ComponentSvg: typeof import('./.vitepress/vitepress/components/home/svg/component-svg.vue')['default']
     ConfigurableRows: typeof import('./examples/skeleton/configurable-rows.vue')['default']
     Confirm: typeof import('./examples/message-box/confirm.vue')['default']
     ConsistencySvg: typeof import('./.vitepress/vitepress/components/globals/design/consistency-svg.vue')['default']
@@ -156,6 +157,7 @@ declare module '@vue/runtime-core' {
     Group: typeof import('./examples/button/group.vue')['default']
     Grouping: typeof import('./examples/checkbox/grouping.vue')['default']
     GroupingHeader: typeof import('./examples/table/grouping-header.vue')['default']
+    GuideSvg: typeof import('./.vitepress/vitepress/components/home/svg/guide-svg.vue')['default']
     Header: typeof import('./examples/calendar/header.vue')['default']
     HideExtraTags: typeof import('./examples/select-v2/hide-extra-tags.vue')['default']
     HomeCards: typeof import('./.vitepress/vitepress/components/home/home-cards.vue')['default']
@@ -191,6 +193,8 @@ declare module '@vue/runtime-core' {
     LayoutHmf: typeof import('./examples/container/layout-hmf.vue')['default']
     Lazy: typeof import('./examples/tree-select/lazy.vue')['default']
     LazyLoad: typeof import('./examples/image/lazy-load.vue')['default']
+    LeftBottomLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-bottom-layer-svg.vue')['default']
+    LeftLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/left-layer-svg.vue')['default']
     LengthLimiting: typeof import('./examples/input/length-limiting.vue')['default']
     Light: typeof import('./.vitepress/vitepress/components/icons/light.vue')['default']
     Limitation: typeof import('./examples/checkbox/limitation.vue')['default']
@@ -231,6 +235,7 @@ declare module '@vue/runtime-core' {
     Panel: typeof import('./examples/cascader/panel.vue')['default']
     ParallaxHome: typeof import('./.vitepress/vitepress/components/globals/parallax-home.vue')['default']
     Password: typeof import('./examples/input/password.vue')['default']
+    PeopleSvg: typeof import('./.vitepress/vitepress/components/home/svg/people-svg.vue')['default']
     PhotoWall: typeof import('./examples/upload/photo-wall.vue')['default']
     Placeholder: typeof import('./examples/image/placeholder.vue')['default']
     Playground: typeof import('./.vitepress/vitepress/components/icons/playground.vue')['default']
@@ -251,13 +256,16 @@ declare module '@vue/runtime-core' {
     RenderingWithData: typeof import('./examples/skeleton/rendering-with-data.vue')['default']
     RenderToRoot: typeof import('./examples/tooltip-v2/render-to-root.vue')['default']
     Resource: typeof import('./.vitepress/vitepress/components/globals/resource.vue')['default']
+    ResourceSvg: typeof import('./.vitepress/vitepress/components/home/svg/resource-svg.vue')['default']
     ResponsiveLayout: typeof import('./examples/layout/responsive-layout.vue')['default']
     RichContent: typeof import('./examples/tooltip/rich-content.vue')['default']
+    RightLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/right-layer-svg.vue')['default']
     Rounded: typeof import('./examples/tag/rounded.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RowClass: typeof import('./examples/table-v2/row-class.vue')['default']
     RowspanAndColspan: typeof import('./examples/table/rowspan-and-colspan.vue')['default']
+    ScreenSvg: typeof import('./.vitepress/vitepress/components/home/svg/screen-svg.vue')['default']
     SecondaryColors: typeof import('./.vitepress/vitepress/components/globals/secondary-colors.vue')['default']
     Selectable: typeof import('./examples/tree/selectable.vue')['default']
     Shadow: typeof import('./examples/border/shadow.vue')['default']
diff --git a/docs/public/images/Axure-Components.svg b/docs/public/images/Axure-Components.svg
deleted file mode 100644
index 74a555b46f..0000000000
--- a/docs/public/images/Axure-Components.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="110px" height="87px" viewBox="0 0 110 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>Axure Components_icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Axure-Components_icon">
-            <g id="sitemap">
-                <g id="Group">
-                    <path d="M87.2413867,49.517832 L56.8966406,49.517832 L56.8966406,41.9316992 L53.1035742,41.9316992 L53.1035742,49.517832 L22.7586133,49.517832 C21.71125,49.517832 20.8619727,50.3671094 20.8619727,51.4144727 L20.8619727,60.8972461 L24.6550391,60.8972461 L24.6550391,53.3111133 L53.1033594,53.3111133 L53.1033594,60.8972461 L56.8964258,60.8972461 L56.8964258,53.3111133 L85.3447461,53.3111133 L85.3447461,60.8972461 L89.1378125,60.8972461 L89.1378125,51.4142578 C89.1380273,50.3668945 88.28875,49.517832 87.2413867,49.517832 L87.2413867,49.517832 Z" id="Shape" fill="#DEEBFD"></path>
-                    <path d="M104.310293,0 L5.68970703,0 C2.54740234,0 0,2.54014599 0,5.673764 L0,81.3260218 C0,84.4596398 2.54740234,87 5.68970703,87 L104.310293,87 C107.452598,87 110,84.4596398 110,81.3260218 L110,5.673764 C110,2.54014599 107.452598,0 104.310293,0 L104.310293,0 Z M106.206934,81.5516797 C106.206934,82.599043 105.357656,83.4483203 104.310293,83.4483203 L5.68970703,83.4483203 C4.64234375,83.4483203 3.79306641,82.599043 3.79306641,81.5516797 L3.79306641,13.2758398 C3.79306641,12.2284766 4.64234375,11.3791992 5.68970703,11.3791992 L104.310293,11.3791992 C105.357656,11.3791992 106.206934,12.2284766 106.206934,13.2758398 L106.206934,81.5516797 L106.206934,81.5516797 Z" id="Shape" fill="#F2F8FE"></path>
-                </g>
-                <circle id="Oval" fill="#DDEAFC" cx="5.68970703" cy="5.89703125" r="1.89664062"></circle>
-                <circle id="Oval" fill="#DDEAFC" cx="11.3794141" cy="5.89703125" r="1.89664062"></circle>
-                <circle id="Oval" fill="#DDEAFC" cx="17.0689062" cy="5.89703125" r="1.89664062"></circle>
-                <path d="M34.2899219,43.828125 C33.1585547,43.828125 32.2413867,42.910957 32.2413867,41.7795898 L32.2413867,19.3249805 C32.2413867,18.1936133 33.1585547,17.2764453 34.2899219,17.2764453 L75.7100781,17.2764453 C76.8414453,17.2764453 77.7586133,18.1936133 77.7586133,19.3249805 L77.7586133,41.7795898 C77.7586133,42.910957 76.8414453,43.828125 75.7100781,43.828125 L34.2899219,43.828125 Z" id="Shape" fill="#20A0FF"></path>
-                <path d="M66.9534766,77.9661523 L43.0465234,77.9661523 C42.3162695,77.9661523 41.7241602,77.3742578 41.7241602,76.6437891 L41.7241602,60.3227539 C41.7241602,59.5922852 42.3160547,59.0003906 43.0465234,59.0003906 L66.9536914,59.0003906 C67.6841602,59.0003906 68.2760547,59.5922852 68.2760547,60.3227539 L68.2760547,76.6437891 C68.2758398,77.374043 67.6839453,77.9661523 66.9534766,77.9661523 L66.9534766,77.9661523 Z" id="Shape" fill="#FFD6D2"></path>
-                <g id="Group" transform="translate(35.878906, 21.054688)" fill="#2198F0">
-                    <path d="M36.19,11.3940234 L2.0521875,11.3940234 C1.00482422,11.3940234 0.155546875,10.5447461 0.155546875,9.49738281 L0.155546875,9.49738281 C0.155546875,8.45001953 1.00482422,7.60074219 2.0521875,7.60074219 L36.1902148,7.60074219 C37.2375781,7.60074219 38.0868555,8.45001953 38.0868555,9.49738281 L38.0868555,9.49738281 C38.0866406,10.5449609 37.2373633,11.3940234 36.19,11.3940234 L36.19,11.3940234 Z" id="Shape"></path>
-                    <path d="M32.3969336,3.80789063 L5.84525391,3.80789063 C4.79789062,3.80789063 3.94861328,2.95861328 3.94861328,1.91125 L3.94861328,1.91125 C3.94861328,0.863886719 4.79789062,0.014609375 5.84525391,0.014609375 L32.3969336,0.014609375 C33.4442969,0.014609375 34.2935742,0.863886719 34.2935742,1.91125 L34.2935742,1.91125 C34.2935742,2.95882813 33.4442969,3.80789063 32.3969336,3.80789063 L32.3969336,3.80789063 Z" id="Shape"></path>
-                    <path d="M24.8108008,18.9803711 L13.4313867,18.9803711 C12.3840234,18.9803711 11.5347461,18.1310938 11.5347461,17.0837305 L11.5347461,17.0837305 C11.5347461,16.0363672 12.3840234,15.1870898 13.4313867,15.1870898 L24.8108008,15.1870898 C25.8581641,15.1870898 26.7074414,16.0363672 26.7074414,17.0837305 L26.7074414,17.0837305 C26.7072266,18.1310938 25.8581641,18.9803711 24.8108008,18.9803711 L24.8108008,18.9803711 Z" id="Shape"></path>
-                </g>
-                <g id="Group" transform="translate(45.332031, 62.734375)" fill="#FFACAD">
-                    <path d="M13.4610352,11.4384961 L5.87490234,11.4384961 C4.82753906,11.4384961 3.97826172,10.5892188 3.97826172,9.54185547 L3.97826172,9.54185547 C3.97826172,8.49449219 4.82753906,7.64521484 5.87490234,7.64521484 L13.4610352,7.64521484 C14.5083984,7.64521484 15.3576758,8.49449219 15.3576758,9.54185547 L15.3576758,9.54185547 C15.3576758,10.5894336 14.5083984,11.4384961 13.4610352,11.4384961 L13.4610352,11.4384961 Z" id="Shape"></path>
-                    <path d="M17.2541016,3.85236328 L2.08183594,3.85236328 C1.03447266,3.85236328 0.185195313,3.00308594 0.185195313,1.95572266 L0.185195313,1.95572266 C0.185195313,0.908359375 1.03447266,0.0590820312 2.08183594,0.0590820312 L17.2543164,0.0590820312 C18.3016797,0.0590820312 19.150957,0.908359375 19.150957,1.95572266 L19.150957,1.95572266 C19.1507422,3.00308594 18.3014648,3.85236328 17.2541016,3.85236328 L17.2541016,3.85236328 Z" id="Shape"></path>
-                </g>
-                <path d="M99.1948633,77.9661523 L75.2879102,77.9661523 C74.5574414,77.9661523 73.9655469,77.3742578 73.9655469,76.6437891 L73.9655469,60.3227539 C73.9655469,59.5922852 74.5574414,59.0003906 75.2879102,59.0003906 L99.1950781,59.0003906 C99.9255469,59.0003906 100.517441,59.5922852 100.517441,60.3227539 L100.517441,76.6437891 C100.517227,77.374043 99.925332,77.9661523 99.1948633,77.9661523 L99.1948633,77.9661523 Z" id="Shape" fill="#F2F8FE"></path>
-                <g id="Group" transform="translate(77.558594, 62.734375)" fill="#DEEBF8">
-                    <path d="M13.4758594,11.4384961 L5.88972656,11.4384961 C4.84236328,11.4384961 3.99308594,10.5892188 3.99308594,9.54185547 L3.99308594,9.54185547 C3.99308594,8.49449219 4.84236328,7.64521484 5.88972656,7.64521484 L13.4758594,7.64521484 C14.5232227,7.64521484 15.3725,8.49449219 15.3725,9.54185547 L15.3725,9.54185547 C15.3725,10.5894336 14.5232227,11.4384961 13.4758594,11.4384961 L13.4758594,11.4384961 Z" id="Shape"></path>
-                    <path d="M17.2689258,3.85236328 L2.09644531,3.85236328 C1.04908203,3.85236328 0.199804688,3.00308594 0.199804688,1.95572266 L0.199804688,1.95572266 C0.199804688,0.908359375 1.04908203,0.0590820312 2.09644531,0.0590820312 L17.2689258,0.0590820312 C18.3162891,0.0590820312 19.1655664,0.908359375 19.1655664,1.95572266 L19.1655664,1.95572266 C19.1655664,3.00308594 18.3162891,3.85236328 17.2689258,3.85236328 L17.2689258,3.85236328 Z" id="Shape"></path>
-                </g>
-                <path d="M34.7120898,77.9661523 L10.8051367,77.9661523 C10.0748828,77.9661523 9.48277344,77.3742578 9.48277344,76.6437891 L9.48277344,60.3227539 C9.48277344,59.5922852 10.074668,59.0003906 10.8051367,59.0003906 L34.7123047,59.0003906 C35.4425586,59.0003906 36.034668,59.5922852 36.034668,60.3227539 L36.034668,76.6437891 C36.0344531,77.374043 35.4425586,77.9661523 34.7120898,77.9661523 L34.7120898,77.9661523 Z" id="Shape" fill="#80A8E1"></path>
-                <g id="Group" transform="translate(13.105469, 62.734375)" fill="#6496DC">
-                    <path d="M13.4462109,11.4384961 L5.86007813,11.4384961 C4.81271484,11.4384961 3.9634375,10.5892188 3.9634375,9.54185547 L3.9634375,9.54185547 C3.9634375,8.49449219 4.81271484,7.64521484 5.86007813,7.64521484 L13.4462109,7.64521484 C14.4935742,7.64521484 15.3428516,8.49449219 15.3428516,9.54185547 L15.3428516,9.54185547 C15.3428516,10.5894336 14.4935742,11.4384961 13.4462109,11.4384961 L13.4462109,11.4384961 Z" id="Shape"></path>
-                    <path d="M17.2392773,3.85236328 L2.06701172,3.85236328 C1.01964844,3.85236328 0.170371094,3.00308594 0.170371094,1.95572266 L0.170371094,1.95572266 C0.170371094,0.908359375 1.01964844,0.0590820312 2.06701172,0.0590820312 L17.2394922,0.0590820312 C18.2868555,0.0590820312 19.1361328,0.908359375 19.1361328,1.95572266 L19.1361328,1.95572266 C19.135918,3.00308594 18.2866406,3.85236328 17.2392773,3.85236328 L17.2392773,3.85236328 Z" id="Shape"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/docs/public/images/Sketch-Template.svg b/docs/public/images/Sketch-Template.svg
deleted file mode 100644
index 065b2ad4b3..0000000000
--- a/docs/public/images/Sketch-Template.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="88px" height="77px" viewBox="0 0 88 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>Sketch Template_icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Sketch-Template_icon">
-            <g id="Group-25">
-                <g id="browser">
-                    <g id="Group" transform="translate(0.042735, 6.772269)" fill="#C9E1FB" opacity="0.23880597">
-                        <path d="M3.20088476,28.5057337 L44.1701391,28.5057337 C45.9105265,28.5057337 47.3217575,27.1026312 47.3217575,25.3722682 L47.3217575,0.305608725 C47.3217575,2.03597172 45.9105265,3.43907426 44.1701391,3.43907426 L3.20088476,3.43907426 C1.46049739,3.43907426 0.0492663503,2.03597172 0.0492663503,0.305608725 L0.0492663503,25.3722682 C0.0492663503,27.1029861 1.46014038,28.5057337 3.20088476,28.5057337 L3.20088476,28.5057337 Z" id="Shape"></path>
-                        <path d="M59.9271601,28.5057337 L78.8361566,28.5057337 C80.576544,28.5057337 81.987775,27.1026312 81.987775,25.3722682 L81.987775,0.305608725 C81.987775,2.03597172 80.576544,3.43907426 78.8361566,3.43907426 L59.9271601,3.43907426 C58.1867728,3.43907426 56.7755417,2.03597172 56.7755417,0.305608725 L56.7755417,25.3722682 C56.7755417,27.1029861 58.1867728,28.5057337 59.9271601,28.5057337 L59.9271601,28.5057337 Z" id="Shape"></path>
-                    </g>
-                    <path d="M3.24361929,10.2116986 L44.2128736,10.2116986 C45.953261,10.2116986 47.364492,8.80859603 47.364492,7.07823304 L47.364492,3.94476751 C47.364492,2.21440451 45.953261,0.811301969 44.2128736,0.811301969 L3.24361929,0.811301969 C1.50323191,0.811301969 0.0920008764,2.21440451 0.0920008764,3.94476751 L0.0920008764,7.07823304 C0.0920008764,8.80859603 1.50287491,10.2116986 3.24361929,10.2116986 L3.24361929,10.2116986 Z" id="Shape" fill="#FFD6D2"></path>
-                    <path d="M59.9698947,10.2116986 L78.8788911,10.2116986 C80.6192785,10.2116986 82.0305096,8.80859603 82.0305096,7.07823304 L82.0305096,3.94476751 C82.0305096,2.21440451 80.6192785,0.811301969 78.8788911,0.811301969 L59.9698947,0.811301969 C58.2295073,0.811301969 56.8182763,2.21440451 56.8182763,3.94476751 L56.8182763,7.07823304 C56.8182763,8.80859603 58.2295073,10.2116986 59.9698947,10.2116986 L59.9698947,10.2116986 Z" id="Shape" fill="#20A0FF"></path>
-                    <g id="Group" transform="translate(6.111778, 44.396572)" fill="#C9E1FB" opacity="0.23880597">
-                        <path d="M3.63949659,28.4815974 C3.63949659,30.2119604 2.13657137,31.6150629 0.283103013,31.6150629 L62.5667088,31.6150629 C64.4201772,31.6150629 65.9231024,30.2119604 65.9231024,28.4815974 L65.9231024,3.41493792 C65.9231024,1.68457492 64.4201772,0.28147238 62.5667088,0.28147238 L0.283103013,0.28147238 C2.13657137,0.28147238 3.63949659,1.68457492 3.63949659,3.41493792 L3.63949659,28.4815974 Z" id="Shape"></path>
-                    </g>
-                    <path d="M3.24361929,76.0112803 L6.3952377,76.0112803 C8.13562508,76.0112803 9.54685611,74.6081778 9.54685611,72.8778148 L9.54685611,47.8111553 C9.54685611,46.265021 8.42013066,44.9801712 6.93862628,44.7241059 C6.76209851,44.6935946 6.58053368,44.6776898 6.3952377,44.6776898 L3.24361929,44.6776898 C1.50323191,44.6776898 0.0920008764,46.0807923 0.0920008764,47.8111553 L0.0920008764,72.8778148 C0.0920008764,74.6081778 1.50287491,76.0112803 3.24361929,76.0112803 L3.24361929,76.0112803 Z" id="Shape" fill="#20A0FF"></path>
-                </g>
-                <g id="diamond" transform="translate(53.000000, 45.000000)">
-                    <polygon id="Shape" fill="#AFC8EB" points="24.1753264 8.86069795 17.1851852 28.8357025 34.3703704 8.86069795"></polygon>
-                    <g id="Group">
-                        <polygon id="Shape" fill="#80A8E1" points="7.1111088 0.0481841797 0 8.86069795 10.195044 8.86069795"></polygon>
-                        <polygon id="Shape" fill="#80A8E1" points="24.1753264 8.86069795 34.3703704 8.86069795 27.2592616 0.0481841797"></polygon>
-                        <polygon id="Shape" fill="#AFC8EA" points="24.1753264 8.86069795 17.1851852 0.0481841797 10.195044 8.86069795"></polygon>
-                    </g>
-                    <polygon id="Shape" fill="#6496DC" points="17.1851852 0.0481841797 7.1111088 0.0481841797 10.195044 8.86069795"></polygon>
-                    <polygon id="Shape" fill="#93B8EE" points="27.2592616 0.0481841797 17.1851852 0.0481841797 24.1753264 8.86069795"></polygon>
-                    <polygon id="Shape" fill="#80A8E1" points="10.195044 8.86069795 17.1851852 28.8357025 24.1753264 8.86069795"></polygon>
-                    <polygon id="Shape" fill="#6496DC" points="0 8.86069795 17.1851852 28.8357025 10.195044 8.86069795"></polygon>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/docs/public/images/component.png b/docs/public/images/component.png
deleted file mode 100644
index ebd183078e..0000000000
Binary files a/docs/public/images/component.png and /dev/null differ
diff --git a/docs/public/images/consistency.png b/docs/public/images/consistency.png
deleted file mode 100644
index 8d26fd6c44..0000000000
Binary files a/docs/public/images/consistency.png and /dev/null differ
diff --git a/docs/public/images/controllability.png b/docs/public/images/controllability.png
deleted file mode 100644
index f9fc9d4ab9..0000000000
Binary files a/docs/public/images/controllability.png and /dev/null differ
diff --git a/docs/public/images/efficiency.png b/docs/public/images/efficiency.png
deleted file mode 100644
index d0f913097f..0000000000
Binary files a/docs/public/images/efficiency.png and /dev/null differ
diff --git a/docs/public/images/feedback.png b/docs/public/images/feedback.png
deleted file mode 100644
index 6f530859e9..0000000000
Binary files a/docs/public/images/feedback.png and /dev/null differ
diff --git a/docs/public/images/figma.png b/docs/public/images/figma.png
deleted file mode 100644
index bd6cc19d1e..0000000000
Binary files a/docs/public/images/figma.png and /dev/null differ
diff --git a/docs/public/images/guide.png b/docs/public/images/guide.png
deleted file mode 100644
index 78748298c4..0000000000
Binary files a/docs/public/images/guide.png and /dev/null differ
diff --git a/docs/public/images/home/left-layer.svg b/docs/public/images/home/left-layer.svg
deleted file mode 100644
index 2e087d24ff..0000000000
--- a/docs/public/images/home/left-layer.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="261" height="172" viewBox="0 0 261 172" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.17153 0.985229C2.71925 0.985229 0.731293 2.97319 0.731293 5.42546V154.173C0.731293 156.626 2.71925 158.614 5.17153 158.614L173.068 158.614L186.111 171.379L198.599 158.614L256.045 158.614C258.497 158.614 260.485 156.626 260.485 154.173V5.42547C260.485 2.97319 258.497 0.985229 256.045 0.985229H5.17153Z" fill="#5C97EE"/>
-<rect x="26.8177" y="22.0763" width="64.3834" height="21.6461" rx="10.8231" fill="#C7DCFB"/>
-<rect x="26.8177" y="63.1485" width="207.581" height="21.6461" rx="4.44024" fill="#A2C5F9"/>
-<rect x="26.8177" y="102.556" width="207.581" height="21.6461" rx="4.44024" fill="#A2C5F9"/>
-</svg>
diff --git a/docs/public/images/home/people.svg b/docs/public/images/home/people.svg
deleted file mode 100644
index 804563b33c..0000000000
--- a/docs/public/images/home/people.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg width="343" height="289" viewBox="0 0 343 289" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M171.044 80.553C257.922 80.553 261.236 163.53 255.686 183.511L169.102 229.856C144.125 217.83 92.674 191.226 86.6797 181.013C79.1868 168.248 88.0672 80.553 171.044 80.553Z" fill="#428BFB"/>
-<path d="M134.134 169.635C129.972 162.42 131.359 126.065 134.967 112.467C123.312 128.841 126.457 156.685 127.752 169.635C131.267 172.04 137.465 175.408 134.134 169.635Z" fill="#2671E5"/>
-<path d="M212.236 169.635C216.399 162.42 215.011 126.065 211.404 112.467C223.059 128.841 219.914 156.685 218.619 169.635C215.104 172.04 208.906 175.408 212.236 169.635Z" fill="#2671E5"/>
-<path d="M117.567 137.77L123.312 195.999L159.944 207.655H219.887L227.793 137.818C228.016 135.843 226.471 134.113 224.484 134.113H120.881C118.913 134.113 117.374 135.812 117.567 137.77Z" fill="#ECE6E6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M134.504 199.384L160.499 207.655H220.442L228.348 137.818C228.571 135.843 227.026 134.113 225.039 134.113H204.174L134.504 199.384Z" fill="#DDD7D7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M181.983 172.067C181.983 173 181.517 173.175 181.517 173.175C181.517 173.175 173.233 177.958 172.708 178.25C172.417 178.367 172.125 178.367 171.833 178.25C171.833 178.25 163.2 173.233 162.908 173C162.733 172.883 162.617 172.65 162.558 172.417C162.558 172.417 162.558 162.5 162.558 162.033C162.558 161.567 163.142 161.275 163.142 161.275L171.775 156.317C172.125 156.142 172.475 156.142 172.825 156.317C172.825 156.317 180.467 160.75 181.283 161.217C181.75 161.45 182.042 161.917 181.983 162.442C181.983 162.383 181.983 171.192 181.983 172.067ZM178.542 162.15C176.792 161.158 172.592 158.708 172.592 158.708C172.358 158.592 172.008 158.592 171.775 158.708L165.008 162.617C165.008 162.617 164.542 162.908 164.542 163.258C164.542 163.608 164.542 171.367 164.542 171.367C164.542 171.542 164.658 171.717 164.775 171.833C165.008 172.008 171.775 175.917 171.775 175.917C172.008 176.033 172.242 176.033 172.475 175.917C172.883 175.683 179.358 171.95 179.358 171.95C179.358 171.95 179.708 171.775 179.708 171.075C179.708 170.842 179.708 170.083 179.708 169.033L172.125 173.642V171.892C172.125 171.425 172.358 171.017 172.708 170.667L179.475 166.583C179.65 166.35 179.767 166.058 179.767 165.708C179.767 164.95 179.767 164.308 179.767 163.9L172.125 168.508V166.642C172.125 166.233 172.3 165.825 172.592 165.592L178.542 162.15Z" fill="#409EFF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184.142 155.733C184.142 155.617 184.025 155.5 183.908 155.5H182.275V153.808C182.275 153.692 182.158 153.692 181.983 153.692L181.167 153.808C181.05 153.808 180.992 153.867 180.992 153.925V155.5H179.417C179.3 155.5 179.242 155.617 179.183 155.675V156.725H181.05V158.475C181.05 158.592 181.167 158.65 181.342 158.592L182.158 158.475C182.275 158.475 182.333 158.417 182.333 158.358V156.725H184.2V155.733H184.142Z" fill="#409EFF"/>
-<path opacity="0.6" d="M342.245 260.554C342.245 278.593 265.833 288.861 171.573 288.861C77.3139 288.861 0.901611 279.703 0.901611 260.554C0.901611 241.406 77.3139 232.248 171.573 232.248C265.833 232.248 342.245 240.573 342.245 260.554Z" fill="#F1F7FF"/>
-<path d="M156.891 84.9933C144.957 77.5004 139.962 58.6294 139.407 50.0264C139.685 44.4761 140.739 31.7104 142.737 25.0501C145.235 16.7246 181.867 18.3897 191.857 20.8874C201.848 23.385 200.183 32.8205 200.738 50.0264C201.293 67.2323 189.36 80.8305 185.752 84.1607C182.144 87.4909 168.824 92.4862 156.891 84.9933Z" fill="#FBBDA4"/>
-<path d="M171.322 105.252C159.666 105.807 156.336 101.089 153.838 96.0938L159.111 79.9979H182.7L186.307 96.6488C185.197 99.3315 180.646 104.808 171.322 105.252Z" fill="#FBBDA4"/>
-<path d="M205.456 61.9595C207.121 57.7968 203.791 52.2465 200.46 52.2465C198.24 57.1492 194.411 67.0657 196.853 67.5098C199.905 68.0648 203.791 66.1222 205.456 61.9595Z" fill="#FBBDA4"/>
-<path d="M137.059 61.615C135.714 57.3381 139.455 52.0559 142.776 52.3081C144.618 57.365 147.686 67.543 145.217 67.8008C142.131 68.1231 138.404 65.8918 137.059 61.615Z" fill="#FBBDA4"/>
-<path d="M186.862 2.57136C177.982 -1.86887 170.489 2.84886 162.996 7.84412C158.648 7.3816 148.51 8.45466 142.738 16.4471C136.965 24.4395 137.1 45.766 139.302 53.8245C140.099 53.1714 141.162 52.5333 142.727 52.4706C142.727 51.9155 141.905 38.3708 142.738 35.8731C143.57 33.3755 143.848 28.6577 149.12 27.5477C154.393 26.4376 160.221 31.4329 172.154 31.4329C184.087 31.4329 186.03 27.8252 192.69 27.2702C196.02 27.8252 198.518 29.2128 199.906 34.208C201.016 38.2042 200.461 48.2688 200.183 52.524C200.758 52.524 202.236 52.2727 203.625 53.8599C203.663 53.7182 203.682 53.613 203.704 53.5284C206.155 44.3409 203.446 24.8764 200.738 17.8347C198.518 12.0624 193.708 10.0642 191.58 9.78673C192.783 9.1392 191.303 4.79147 186.862 2.57136Z" fill="#190E02"/>
-<path opacity="0.6" d="M102.22 259.272C108.603 259.55 112.211 260.937 120.814 260.105L126.642 236.239L107.771 234.851C106.106 236.424 101.554 239.291 96.6701 239.291C90.5648 239.291 80.5743 241.789 73.0814 244.564C64.4306 247.768 57.818 256.22 56.9855 259.272C56.7079 260.937 58.6506 263.713 63.9234 262.325C69.1962 260.937 95.8376 258.995 102.22 259.272Z" fill="#70A2EB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M108.049 259.807C106.223 259.588 104.38 259.366 102.219 259.272C95.8366 258.995 69.1952 260.938 63.9224 262.325C63.8589 262.342 63.796 262.358 63.7335 262.373C65.0229 259.835 69.6345 254.13 76.4095 250.392C84.4574 245.952 94.4479 244.287 101.386 243.732C108.324 243.177 110.821 241.512 115.539 237.626L122.974 251.256L120.813 260.105C115.122 260.656 111.617 260.235 108.049 259.807Z" fill="#3678D8"/>
-<path d="M287.045 260.383C286.532 262.95 284.548 263.713 280.385 262.325L260.681 257.607L227.102 259.55L220.997 249.282L225.992 237.626C229.507 236.886 237.092 236.239 239.313 236.239C240.7 237.626 244.863 239.553 251.801 239.847C271.504 240.679 281.773 250.947 283.993 253.445C286.213 255.942 287.6 257.607 287.045 260.383Z" fill="#70A2EB"/>
-<path d="M245.14 244.009C236.815 243.177 237.092 241.234 228.767 241.512C227.287 247.432 224.937 259.383 227.379 259.827C230.432 260.383 240.148 259.735 252.356 260.105C261.514 260.383 267.897 260.938 280.385 262.325C275.667 250.392 253.466 244.842 245.14 244.009Z" fill="#3678D8"/>
-<path d="M174.374 213.205C161.886 209.32 146.9 200.439 127.474 191.836C125.254 190.844 108.881 183.788 96.3925 181.846C83.9043 179.903 66.9759 184.899 65.8659 200.162C64.7558 215.425 92.5074 232.909 115.819 240.956C139.13 249.004 192.968 256.22 205.733 258.162C218.499 260.105 226.824 262.88 231.542 258.995C236.26 255.11 236.26 245.119 231.542 240.124C226.824 235.129 186.862 217.09 174.374 213.205Z" fill="#3F3C7E"/>
-<path d="M173.819 219.865C161.331 211.725 131.914 195.999 109.158 192.114C126.031 196.998 166.881 219.31 168.269 223.751L173.819 219.865Z" fill="#302B7A"/>
-<path d="M280.385 196.832C279.357 192.836 272.614 180.181 250.968 181.846C230.155 184.621 209.986 197.015 187.972 206.822C162.718 217.09 138.575 225.416 126.364 232.909C113.989 240.503 109.158 244.287 111.656 253.445C116.096 261.493 113.876 263.158 141.905 258.995C176.327 253.883 223.372 246.756 252.356 231.521C274.002 220.143 282.882 206.545 280.385 196.832Z" fill="#504D84"/>
-</svg>
diff --git a/docs/public/images/home/right-layer.svg b/docs/public/images/home/right-layer.svg
deleted file mode 100644
index 96d6358f1a..0000000000
--- a/docs/public/images/home/right-layer.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="473" height="327" viewBox="0 0 473 327" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_dd_6407_141432)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.6518 16.1391C22.1995 16.1391 20.2115 18.1271 20.2115 20.5794V284.773C20.2115 287.226 22.1995 289.214 24.6518 289.214H155.084L168.127 301.979L180.615 289.214H447.584C450.037 289.214 452.025 287.226 452.025 284.773V20.5794C452.025 18.1271 450.037 16.1391 447.584 16.1391H24.6518Z" fill="white"/>
-</g>
-<rect x="121.227" y="210.954" width="103.235" height="43.2923" rx="21.6461" fill="#E4EFFF"/>
-<rect x="247.219" y="210.954" width="103.235" height="43.2923" rx="21.6461" fill="#3F85ED"/>
-<rect x="59.0637" y="107.164" width="354.109" height="21.6461" rx="4.44024" fill="#E4EFFF"/>
-<rect x="115.122" y="148.236" width="241.993" height="21.6461" rx="4.44024" fill="#E4EFFF"/>
-<rect x="151.754" y="48.8859" width="170.949" height="32.1917" rx="4.44024" fill="#91BEFF"/>
-<defs>
-<filter id="filter0_dd_6407_141432" x="0.230488" y="0.598305" width="471.775" height="325.802" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="2.22012" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6407_141432"/>
-<feOffset dy="4.44024"/>
-<feGaussianBlur stdDeviation="8.88047"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.039009 0 0 0 0 0.13338 0 0 0 0 0.232469 0 0 0 0.12 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6407_141432"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="2.22012"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.133333 0 0 0 0 0.231373 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_6407_141432" result="effect2_dropShadow_6407_141432"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6407_141432" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/docs/public/images/home/screen.svg b/docs/public/images/home/screen.svg
deleted file mode 100644
index 5506d9fc3c..0000000000
--- a/docs/public/images/home/screen.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<svg width="1163" height="728" viewBox="0 0 1163 728" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_6407_141381)">
-<rect x="0.50882" y="0.0586548" width="1161.12" height="727.089" fill="#E4EFFF"/>
-<rect x="0.50882" y="0.0586548" width="1161.12" height="66.6035" fill="#3F85ED"/>
-<circle cx="58.787" cy="31.6954" r="7.77041" fill="#FD873B"/>
-<circle cx="93.1988" cy="31.6954" r="7.77041" fill="#FFCD8A"/>
-<circle cx="127.611" cy="31.6954" r="7.77041" fill="#91DD9D"/>
-<rect x="183.114" y="16.1545" width="336.903" height="33.3018" rx="16.6509" fill="#C7DEFF"/>
-<rect x="50.4616" y="112.175" width="248.653" height="567.795" rx="4.44024" fill="white"/>
-<rect opacity="0.6" x="91.5338" y="136.596" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect opacity="0.6" x="91.5338" y="194.319" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect opacity="0.6" x="91.5338" y="252.042" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect opacity="0.6" x="91.5338" y="309.765" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect opacity="0.6" x="91.5338" y="367.488" width="166.509" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect x="332.972" y="112.175" width="778.706" height="139.867" rx="4.44024" fill="white"/>
-<rect opacity="0.6" x="473.394" y="140.481" width="286.95" height="32.1917" rx="4.44024" fill="#91BEFF"/>
-<rect opacity="0.6" x="473.394" y="194.319" width="449.574" height="32.1917" rx="4.44024" fill="#E4EFFF"/>
-<rect opacity="0.6" x="949.609" y="194.319" width="119.331" height="32.1917" rx="4.44024" fill="#E2EDFE"/>
-<rect x="366.828" y="140.481" width="82.1444" height="82.1444" rx="4.44024" fill="#3F85ED"/>
-<rect x="331.862" y="284.234" width="779.261" height="395.736" fill="white"/>
-<path d="M1016.21 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
-<path d="M818.067 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
-<path d="M619.922 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
-<path d="M421.776 672.199V444.082" stroke="#EDF6FF" stroke-width="8.88047" stroke-linecap="round"/>
-<path d="M354.895 544.265C370.159 570.629 382.647 592.553 419.556 591.443C461.738 590.174 469.759 538.715 519.739 538.715C579.682 538.715 629.08 613.644 709.004 602.543C806.412 589.014 805.024 362.493 847.484 362.493C897.437 362.493 847.484 555.366 950.442 575.069C997.599 584.094 1069.77 554.903 1089.75 538.715" stroke="#E4EFFF" stroke-width="8.88047" stroke-linecap="round"/>
-<path d="M358.78 504.858C390.695 524.562 408.733 525.117 427.049 522.064C455.078 517.392 488.657 465.173 529.175 459.623C579.96 452.666 605.769 490.317 664.047 480.714C718.908 471.675 760.622 367.766 843.599 380.531C921.303 392.486 914.088 530.667 954.882 540.102C977.638 545.366 989.572 516.791 1022.04 521.509C1048.02 525.283 1075.79 560.823 1086.42 578.122" stroke="#75ADFF" stroke-width="8.88047" stroke-linecap="round"/>
-<circle cx="419.556" cy="522.896" r="9.71302" fill="#E4EFFF" stroke="#75ADFF" stroke-width="4.99526"/>
-</g>
-<defs>
-<clipPath id="clip0_6407_141381">
-<rect x="0.50882" y="0.0586548" width="1161.68" height="727.089" rx="2.22012" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/docs/public/images/icon-check.png b/docs/public/images/icon-check.png
deleted file mode 100644
index 37663f8273..0000000000
Binary files a/docs/public/images/icon-check.png and /dev/null differ
diff --git a/docs/public/images/icon-copy.png b/docs/public/images/icon-copy.png
deleted file mode 100644
index 3837bf3f80..0000000000
Binary files a/docs/public/images/icon-copy.png and /dev/null differ
diff --git a/docs/public/images/icon-download.png b/docs/public/images/icon-download.png
deleted file mode 100644
index 4a81a05efd..0000000000
Binary files a/docs/public/images/icon-download.png and /dev/null differ
diff --git a/docs/public/images/icon-edit.png b/docs/public/images/icon-edit.png
deleted file mode 100644
index 050f7028c1..0000000000
Binary files a/docs/public/images/icon-edit.png and /dev/null differ
diff --git a/docs/public/images/icon-upload.svg b/docs/public/images/icon-upload.svg
deleted file mode 100644
index 269ef59b40..0000000000
--- a/docs/public/images/icon-upload.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
-    <title>icon_upload</title>
-    <desc>Created with Sketch.</desc>
-    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="element-theme" transform="translate(-207.000000, -662.000000)" fill="#909399">
-            <g id="section" transform="translate(70.000000, 511.000000)">
-                <g id="card" transform="translate(0.000000, 60.000000)">
-                    <g id="btn" transform="translate(108.000000, 91.000000)">
-                        <g id="icon-upload" transform="translate(29.000000, 0.000000)">
-                            <path d="M13,-0.000600000001 L3.015,9.9854 L4.429,11.3984 L12,3.8284 L12,20.4854 L14.001,20.4854 L14.001,3.8284 L21.572,11.3984 L22.986,9.9854 L14.415,1.4144 L13,-0.000600000001 Z M13,2.8284 L13.158,2.9844 L12.843,2.9844 L13,2.8284 Z M24.001,19.9854 L24.001,23.9854 L2,23.9854 L2,19.9854 L0,19.9854 L0,25.9854 L26.001,25.9854 L26.001,19.9854 L24.001,19.9854 Z" id="icon_upload"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/docs/public/images/resource.png b/docs/public/images/resource.png
deleted file mode 100644
index 99756867a7..0000000000
Binary files a/docs/public/images/resource.png and /dev/null differ
diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss
index b4cba43be8..b45e62552d 100644
--- a/packages/theme-chalk/src/timeline-item.scss
+++ b/packages/theme-chalk/src/timeline-item.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;