From 601bec1af2fbdffdc98a5469a62f8ec801edd399 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D1=83=D1=81=D0=BE=D0=B2=D0=B8=D1=87=20=D0=92=D0=B8?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=B5=D1=82=D1=82=D0=B0=20=D0=98=D0=B3=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B2=D0=BD=D0=B0?= <vrusovich@beeline.ru>
Date: Thu, 18 Dec 2025 07:42:39 +0000
Subject: [PATCH] =?UTF-8?q?VEGA-5038=20=D0=90=D0=B4=D0=B0=D0=BF=D1=82?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/.vitepress/theme/components/CustomDoc.vue |  10 +-
 .../theme/components/CustomDocFooter.vue      |  29 +-
 .../scss/components/vp-custom-block.scss      | 310 ++++++++-
 .../theme/scss/components/vp-doc.scss         | 637 +++++++++++++++---
 src/.vitepress/theme/scss/vars.scss           |  22 +-
 src/public/icons/clock.svg                    |   1 +
 src/public/icons/copy.svg                     |   1 +
 src/public/icons/info_circled.svg             |   1 +
 src/public/icons/nav_arrow_down.svg           |   1 +
 src/public/icons/nav_arrow_up.svg             |   1 +
 src/public/icons/warning_triangle.svg         |   1 +
 .../networks/how-to-setup-ipsec-vpn.md        |   2 +-
 12 files changed, 886 insertions(+), 130 deletions(-)
 create mode 100644 src/public/icons/clock.svg
 create mode 100644 src/public/icons/copy.svg
 create mode 100644 src/public/icons/info_circled.svg
 create mode 100644 src/public/icons/nav_arrow_down.svg
 create mode 100644 src/public/icons/nav_arrow_up.svg
 create mode 100644 src/public/icons/warning_triangle.svg

diff --git a/src/.vitepress/theme/components/CustomDoc.vue b/src/.vitepress/theme/components/CustomDoc.vue
index 06e1e83..a184169 100644
--- a/src/.vitepress/theme/components/CustomDoc.vue
+++ b/src/.vitepress/theme/components/CustomDoc.vue
@@ -54,10 +54,12 @@ const pageName = computed(() =>
         <div class="content-container">
           <slot name="doc-before" />
           <main class="main">
-            <Content class="vp-doc" :class="[
-                pageName,
-                theme.externalLinkIcon && 'external-link-icon-enabled'
-]" />
+            <div class="vp-doc" :class="[
+              pageName,
+              theme.externalLinkIcon && 'external-link-icon-enabled'
+            ]">
+              <Content />
+            </div>
             <SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
           </main>
           <VPDocFooter>
diff --git a/src/.vitepress/theme/components/CustomDocFooter.vue b/src/.vitepress/theme/components/CustomDocFooter.vue
index 6860e71..ec49467 100644
--- a/src/.vitepress/theme/components/CustomDocFooter.vue
+++ b/src/.vitepress/theme/components/CustomDocFooter.vue
@@ -6,6 +6,8 @@ import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/pre
 import VPIconEdit from 'vitepress/dist/client/theme-default/components/icons/VPIconEdit.vue'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
 import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
+import CustomIcon from './CustomIcon.vue'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
 
 const { theme, page, frontmatter } = useData()
 
@@ -43,14 +45,14 @@ const showFooter = computed(() => {
     <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
       <div class="pager">
         <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
-          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
+          <CustomIcon class="desc-prev" :icon="Icons.ArrowRight" />
           <span class="title" v-html="control.prev.text"></span>
         </VPLink>
       </div>
       <div class="pager">
         <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
-          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
           <span class="title" v-html="control.next.text"></span>
+          <CustomIcon class="desc-next" :icon="Icons.ArrowRight" />
         </VPLink>
       </div>
     </nav>
@@ -59,7 +61,7 @@ const showFooter = computed(() => {
 
 <style lang="scss" scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 40px;
 }
 
 .edit-info {
@@ -98,8 +100,6 @@ const showFooter = computed(() => {
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
   display: grid;
   grid-row-gap: 8px;
 }
@@ -115,10 +115,19 @@ const showFooter = computed(() => {
   display: block;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  padding: 11px 16px 13px;
+  padding: 10px 16px 10px 12px;
   width: 100%;
   height: 100%;
   transition: border-color 0.25s;
+  display: flex;
+  gap: 8px;
+  
+  color: #1a73e8;
+
+  &.next {
+    padding: 10px 12px 10px 16px;
+    justify-content: flex-end;
+  }
 }
 
 .pager-link:hover {
@@ -136,6 +145,14 @@ const showFooter = computed(() => {
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
+
+  &-next {
+    rotate: -270deg;
+  }
+
+  &-prev {
+    rotate: -90deg;
+  }
 }
 
 .title {
diff --git a/src/.vitepress/theme/scss/components/vp-custom-block.scss b/src/.vitepress/theme/scss/components/vp-custom-block.scss
index 230ad52..efce54e 100644
--- a/src/.vitepress/theme/scss/components/vp-custom-block.scss
+++ b/src/.vitepress/theme/scss/components/vp-custom-block.scss
@@ -1,11 +1,303 @@
-.custom-block {
-    padding: 24px;
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
 
-    &-title {
-        font-size: 18px;
-        line-height: 22px;
-        font-weight: 500;
-        letter-spacing: .2px;
-        margin-bottom: 12px;
+.custom-block {
+  padding: 24px;
+    
+  &-title {
+    font-size: 17px !important;
+    line-height: 22px !important;
+    font-weight: 700 !important;
+    letter-spacing: .2px !important;
+    margin-bottom: 12px;
+  }
+
+  &.tip a {
+    color: #1a73e8;
+
+    &:hover {
+      color: #1a73e8;
     }
-}
\ No newline at end of file
+  }
+}
+
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 24px 24px 24px 64px;
+  line-height: 24px;
+  font-size: var(--vp-custom-block-font-size);
+  color: var(--vp-c-text-2);
+
+  &.custom-block.details {
+    padding: 0px;
+  }
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.info a:hover,
+.custom-block.info a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.note {
+  border-color: var(--vp-custom-block-note-border);
+  color: var(--vp-custom-block-note-text);
+  background-color: var(--vp-custom-block-note-bg);
+}
+
+.custom-block.note a,
+.custom-block.note code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.note code {
+  background-color: var(--vp-custom-block-note-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-clock);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--vp-c-tip-1);
+}
+
+.custom-block.tip a:hover,
+.custom-block.tip a:hover > code {
+  color: var(--vp-c-tip-2);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.important {
+  border-color: var(--vp-custom-block-important-border);
+  color: var(--vp-custom-block-important-text);
+  background-color: var(--vp-custom-block-important-bg);
+}
+
+.custom-block.important a,
+.custom-block.important code {
+  color: var(--vp-c-important-1);
+}
+
+.custom-block.important a:hover,
+.custom-block.important a:hover > code {
+  color: var(--vp-c-important-2);
+}
+
+.custom-block.important code {
+  background-color: var(--vp-custom-block-important-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-info-circled);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.warning a,
+.custom-block.warning code {
+  color: $color-text-link;
+}
+
+.custom-block.warning a:hover,
+.custom-block.warning a:hover > code {
+  color: $color-text-link;
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-warning-triangle);
+    content: '';
+    position: absolute;
+    left: 24px;
+  }
+}
+
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--vp-c-danger-1);
+}
+
+.custom-block.danger a:hover,
+.custom-block.danger a:hover > code {
+  color: var(--vp-c-danger-2);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.caution {
+  border-color: var(--vp-custom-block-caution-border);
+  color: var(--vp-custom-block-caution-text);
+  background-color: var(--vp-custom-block-caution-bg);
+}
+
+.custom-block.caution a,
+.custom-block.caution code {
+  color: var(--vp-c-caution-1);
+}
+
+.custom-block.caution a:hover,
+.custom-block.caution a:hover > code {
+  color: var(--vp-c-caution-2);
+}
+
+.custom-block.caution code {
+  background-color: var(--vp-custom-block-caution-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: transparent;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+
+  pre {
+    border: none !important;
+    
+  }
+
+  div {
+    margin: 0 !important;
+  }
+
+  &:open {
+    &.custom-block.details summary {
+      background-color: $color-background-base-hover;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+
+      &::before {
+        background-image: var(--vp-icon-nav-arrow-up);
+      }
+    }
+  }
+}
+
+.custom-block.details a {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.details a:hover,
+.custom-block.details a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0;
+  padding: 24px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  font-size: 19px;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  display: block;
+
+  &::before {
+    position: absolute;
+    right: 24px;
+    content: '';
+    background-image: var(--vp-icon-nav-arrow-down);
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.custom-block.details summary + p {
+  margin: 0;
+  padding: 24px;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.75;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--vp-custom-block-font-size);
+  color: inherit;
+}
+
+
diff --git a/src/.vitepress/theme/scss/components/vp-doc.scss b/src/.vitepress/theme/scss/components/vp-doc.scss
index e87cd0c..15f7c61 100644
--- a/src/.vitepress/theme/scss/components/vp-doc.scss
+++ b/src/.vitepress/theme/scss/components/vp-doc.scss
@@ -1,135 +1,566 @@
 @use "@beeline/design-tokens/scss/tokens/globals/colors";
 @use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;
 
 @mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
-    font-size: $fontSize;
-    font-weight: $fontWeight;
-    line-height: $lineHeight;
-    letter-spacing: $letterSpacing;
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+  line-height: $lineHeight;
+  letter-spacing: $letterSpacing;
 }
 
 @mixin generate-numbered-list-styles($start, $end) {
-    @for $counter from $start through $end {
-        $counter-name: list + ' ' + ($counter - 1);
-        ol[start*="#{$counter}"] {
-            list-style-type: none;
-            counter-reset: $counter-name;
-        }
+  @for $counter from $start through $end {
+    $counter-name: list + ' ' + ($counter - 1);
+    ol[start*="#{$counter}"] {
+      list-style-type: none;
+      counter-reset: $counter-name;
     }
+  }
 }
 
 .vp-doc {
-    font-size: 17px;
+  font-size: 17px;
 
-    // Titles
-    h1 {
-        @include font_style(44px, 500, 46px, 0.3px);
-        margin-bottom: 24px;
-    }
+  // Titles
+  h1 {
+    @include font_style(44px, 500, 56px, 0.3px);
+    margin-bottom: 24px;
+  }
 
-    h2 {
-        @include font_style(34px, 400, 36px, 0.3px);
-        margin-bottom: 12px;
-    }
+  h2 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin: 40px 0 24px;
+  }
 
-    h3 {
-        @include font_style(26px, 500, 32px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h3 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    h4 {
-        @include font_style(20px, 700, 28px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h4 {
+    @include font_style(20px, 700, 28px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    h5 {
-        @include font_style(17px, 500, 22px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h5 {
+    @include font_style(17px, 500, 22px, 0.2px);
+    margin-bottom: 12px;
+  }
 
-    // Text
-    ol {
-        list-style-type: none;
-        counter-reset: list;
-        margin: 0 0 0 50px;
-        padding: 0 0 5px 0;
-        font-size: 16px;
+  // Text
+  ol {
+    list-style-type: none;
+    counter-reset: list;
+    margin: 0 0 0 50px;
+    padding: 0;
+    font-size: 15px;
   
-        & > * + * {
-            margin-top: 50px;
-        }
+    & > * + * {
+      margin-top: 50px;
+    }
+  }
+
+  @include generate-numbered-list-styles(2, 50);
+
+  ol li {
+    position: relative;
+    padding: 8px 0 0 0;
+    line-height: 18px;
+  }
+
+  li + li {
+    margin-top: 30px;
+  }
+
+  ul li {
+    padding-bottom: 0;
+    padding-top: 0;
+    margin-top: 8px;
+    @include font_style(15px, 400, 18px, 0.2px);
+  }
+  
+  ol li:nth-last-of-type(n+2)::after {
+    content: '';
+    border-left: 1px solid rgb(201, 197, 197);
+    position: absolute;
+    line-height: 100%;
+    left: -30px;
+    top: 43px;
+    bottom: -25px;
+  }
+
+  ol li::before {
+    content: counter(list);
+    counter-increment: list;
+    display: inline-flex;
+    position: absolute;
+    top: 0;
+    left: -48px;
+    width: 35px;
+    height: 35px;
+    background-color: colors.$color-background-brand;
+    color: themes.$color-text-active;
+    @include font_style(15px, 400, 18px, 0.2px);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ul li:nth-last-of-type(n):after {
+    content: none;
+  }
+
+  ol ul li::before {
+    counter-increment: list;
+    content: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ol li:last-child {
+    margin-bottom: 40px;
+  }
+
+  ul li:last-child {
+    margin-bottom: 20px;
+  }
+
+  ol li p {
+    margin-top: 0;
+  }
+
+  p {
+    @include font_style(15px, 400, 18px, 0.2px);
+    margin: 24px 0;
+  }
+
+  // Links
+  a {
+    color: #1a73e8;
+    text-decoration: none;
+
+    &:hover, &:focus-visible, &:focus, &:active {
+      color: #1a73e8;
     }
 
-    @include generate-numbered-list-styles(2, 50);
-
-    ol li {
-        position: relative;
-        padding: 5px 0 0 0;
-        line-height: 1.4;
+    &:visited {
+      color: #7e00ed;
     }
+  }
+}
 
-    li + li {
-        margin-top: 34px;
+// Tabs
+.plugin-tabs {
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  background-color: revert-layer !important;
+
+  &--tab {
+    border-bottom: 1px solid transparent;
+  }
+
+  &--content { 
+    padding: 24px !important;
+  
+    .language- {
+      border: none;
+      padding: 0px !important;
+      overflow-y: hidden !important;
+      overflow-x: hidden !important;
     }
+  }
+}
 
-    ul li {
-        padding-bottom: 0;
-        padding-top: 0;
-        margin-top: 8px;
-    }
-    
-    ol li::before {
-        content: counter(list);
-        counter-increment: list;
-        display: inline-flex;
-        position: absolute;
-        top: 0;
-        left: -48px;
-        width: 35px;
-        height: 35px;
-        background-color: colors.$color-background-brand;
-        color: themes.$color-text-active;
-        text-align: center;
-        line-height: 25px;
-        font-size: 16px;
-        border-radius: 50%;
-        justify-content: center;
-        align-items: center;
-    }
+// Code
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}
 
-    ul li:nth-last-of-type(n):after {
-        content: none;
-    }
+.vp-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  background-color: var(--vp-code-bg);
+  transition:
+    color 0.25s,
+    background-color 0.5s;
+}
 
-    ol ul li::before {
-        counter-increment: list;
-        content: none;
-        margin: 0;
-        padding: 0;
-    }
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
 
-    ol li:last-child, ul li:last-child {
-        margin-bottom: 40px;
-    }
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
 
-    ol li p {
-        margin-top: 0;
-    }
+.vp-doc h1 > code,
+.vp-doc h2 > code,
+.vp-doc h3 > code {
+  font-size: 0.9em;
+}
 
-    p {
-        line-height: 22px;
-    }
+.vp-doc div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px -24px;
+  background-color: transparent;
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
 
-    // Links
-    a {
-        color: #1a73e8;
+@media (min-width: 640px) {
+  .vp-doc div[class*='language-'],
+  .vp-block {
+    border-radius: 12px;
+    margin: 16px 0;
+  }
+}
 
-        &:hover, &:focus-visible, &:focus, &:active {
-            color: #1a73e8;
-        }
+@media (max-width: 639px) {
+  .vp-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
 
-        &:visited {
-            color: #7e00ed;
-        }
-    }
-}
\ No newline at end of file
+.vp-doc div[class*='language-'] + div[class*='language-'],
+.vp-doc div[class$='-api'] + div[class*='language-'],
+.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.vp-doc [class*='language-'] pre,
+.vp-doc [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.vp-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 24px;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+}
+
+.vp-doc [class*='language-'] code {
+  display: block;
+  padding: 0px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+  transition: color 0.5s;
+}
+
+.vp-doc [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.vp-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition:
+    border-color 0.5s,
+    color 0.5s;
+}
+
+.vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: none;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  opacity: 1;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] > button.copy:hover,
+.vp-doc [class*='language-'] > button.copy.copied {
+  border: none;
+  background-color: transparent;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied,
+.vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  background-color: transparent;
+  background-image: none;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  /*rtl:ignore*/
+  border-right: 0;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  white-space: nowrap;
+  content: '';
+}
+
+.vp-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition:
+    color 0.4s,
+    opacity 0.4s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+// Banner
+.vp-doc .custom-block {
+  margin: 40px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 18px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+  border-radius: 12px;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+// Table
+.vp-doc table {
+  display: block;
+  border-collapse: collapse;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  // width: 100%;
+  margin: 24px 0;
+}
+
+.vp-doc tr {
+  border-top: hidden;
+  transition: background-color 0.5s;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc th,
+.vp-doc td {
+  padding: 18px 16px;
+  padding: 18px 16px;
+  width: 100vh;
+  background-color: var(--vp-c-bg);
+  border: none;
+}
+
+.vp-doc tbody tr {
+  border-top: 1px solid $color-border;
+
+  &:last-child{
+    border-bottom: hidden;
+  }
+}
+
+.vp-doc th {
+  @include font_style(15px, 500, 20px, 0.2px);
+  color: $color-text-active;
+  background-color: var(--vp-c-bg);
+  border-top: 1px solid $color-border;
+}
+
+.vp-doc td {
+  @include font_style(15px, 400, 18px, 0.2px);
+  padding: 18px 16px;
+  background-color: var(--vp-c-bg);
+  border-right: hidden;
+  border-left: hidden;
+  color: $color-text-active;
+}
+
+// Block
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 40px 0;
+  border-radius: 12px;
+
+  &.vp-doc .custom-block {
+    margin: 0;
+    border: none;
+  }
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
diff --git a/src/.vitepress/theme/scss/vars.scss b/src/.vitepress/theme/scss/vars.scss
index ab23abc..31c07c8 100644
--- a/src/.vitepress/theme/scss/vars.scss
+++ b/src/.vitepress/theme/scss/vars.scss
@@ -111,7 +111,7 @@
 
 :root {
   --vp-font-family-base: 'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --vp-font-family-mono: 'Roboto Mono', monospace;
+  --vp-font-family-mono: 'JetBrains Mono', monospace;
 
   // Code
   // --vp-code-font-size: ;
@@ -183,16 +183,18 @@
   --vp-custom-block-code-font-size: 17px;
   --vp-custom-block-tip-border: transparent;
   --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: #f1f1f3;
+  --vp-custom-block-tip-bg: #f9f9f9;
   --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-warning-bg: #fff4e1;
-  --vp-custom-block-danger-bg: #ffecef;
+  --vp-custom-block-warning-bg: #e3f2ff;
+  --vp-custom-block-warning-icon: #1a73e8;
+  --vp-custom-block-danger-bg: #fff4e1;
+  --vp-custom-block-danger-icon: #ff9419;
 }
 
 .dark {
-  --vp-custom-block-warning-bg: #3d392a;
+  --vp-custom-block-warning-bg: #132338;
   --vp-custom-block-tip-bg: #36383c;
-  --vp-custom-block-danger-bg: #371313;
+  --vp-custom-block-danger-bg: #3d392a;
 }
 
 /**
@@ -204,5 +206,11 @@
 }
 
 :root {
+  --vp-icon-copy: url('../../../public/icons/copy.svg');
+  --vp-icon-clock: url('../../../public/icons/clock.svg');
+  --vp-icon-info-circled: url('../../../public/icons/info_circled.svg');
+  --vp-icon-warning-triangle: url('../../../public/icons/warning_triangle.svg');
+  --vp-icon-nav-arrow-down: url('../../../public/icons/nav_arrow_down.svg');
+  --vp-icon-nav-arrow-up: url('../../../public/icons/nav_arrow_up.svg');
   --vp-sidebar-width: 320px;
-}
\ No newline at end of file
+}
diff --git a/src/public/icons/clock.svg b/src/public/icons/clock.svg
new file mode 100644
index 0000000..6eca64f
--- /dev/null
+++ b/src/public/icons/clock.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.164 1.280 C 8.407 1.511,5.917 2.733,4.056 4.768 C 0.808 8.319,0.331 13.626,2.894 17.705 C 4.604 20.429,7.414 22.228,10.640 22.665 C 11.247 22.747,12.633 22.758,13.220 22.685 C 15.814 22.362,18.039 21.238,19.844 19.338 C 22.249 16.807,23.262 13.117,22.495 9.684 C 21.506 5.258,17.875 1.930,13.391 1.342 C 12.804 1.265,11.708 1.235,11.164 1.280 M12.992 2.802 C 14.034 2.915,15.102 3.227,16.060 3.699 C 18.938 5.114,20.862 7.872,21.202 11.070 C 21.262 11.631,21.231 12.869,21.143 13.417 C 20.834 15.352,19.950 17.095,18.569 18.494 C 17.813 19.259,17.035 19.820,16.060 20.300 C 12.202 22.200,7.549 21.173,4.821 17.820 C 3.712 16.458,2.991 14.732,2.802 12.992 C 2.748 12.493,2.748 11.507,2.802 11.008 C 2.988 9.301,3.702 7.571,4.779 6.220 C 5.100 5.818,5.759 5.161,6.200 4.805 C 7.555 3.710,9.254 2.996,10.960 2.804 C 11.400 2.755,12.544 2.754,12.992 2.802 M11.740 5.300 C 11.540 5.371,11.339 5.585,11.283 5.786 C 11.223 6.004,11.224 12.001,11.285 12.219 C 11.341 12.423,11.577 12.659,11.781 12.715 C 12.004 12.777,17.996 12.777,18.219 12.715 C 18.432 12.656,18.660 12.422,18.719 12.202 C 18.827 11.802,18.599 11.390,18.209 11.282 C 18.113 11.255,17.109 11.240,15.410 11.240 L 12.760 11.240 12.760 8.590 C 12.760 6.780,12.746 5.890,12.715 5.781 C 12.635 5.493,12.285 5.236,11.980 5.242 C 11.936 5.243,11.828 5.269,11.740 5.300 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
\ No newline at end of file
diff --git a/src/public/icons/copy.svg b/src/public/icons/copy.svg
new file mode 100644
index 0000000..7dcba83
--- /dev/null
+++ b/src/public/icons/copy.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.277 3.294 C 3.867 3.406,3.553 3.676,3.364 4.078 L 3.260 4.300 3.260 9.500 L 3.260 14.700 3.365 14.925 C 3.514 15.241,3.725 15.458,4.033 15.610 L 4.298 15.740 6.267 15.752 L 8.236 15.764 8.248 17.732 L 8.260 19.700 8.365 19.925 C 8.514 20.241,8.725 20.458,9.033 20.610 L 9.298 20.740 14.500 20.740 L 19.702 20.740 19.967 20.610 C 20.275 20.458,20.486 20.241,20.635 19.925 L 20.740 19.700 20.740 14.500 L 20.740 9.300 20.634 9.073 C 20.484 8.754,20.247 8.513,19.950 8.375 L 19.700 8.260 17.732 8.248 L 15.764 8.236 15.752 6.268 L 15.740 4.300 15.634 4.073 C 15.484 3.754,15.247 3.513,14.950 3.375 L 14.700 3.260 9.580 3.252 C 5.607 3.246,4.419 3.256,4.277 3.294 M14.240 6.499 L 14.240 8.237 11.770 8.249 L 9.300 8.260 9.075 8.365 C 8.759 8.514,8.542 8.725,8.390 9.033 L 8.260 9.298 8.249 11.769 L 8.237 14.240 6.499 14.240 L 4.760 14.240 4.760 9.500 L 4.760 4.760 9.500 4.760 L 14.240 4.760 14.240 6.499 M19.240 14.500 L 19.240 19.240 14.500 19.240 L 9.760 19.240 9.760 14.500 L 9.760 9.760 14.500 9.760 L 19.240 9.760 19.240 14.500 " stroke="none" fill-rule="evenodd" fill="rgba(25, 28, 52, 0.7)"></path></svg>
\ No newline at end of file
diff --git a/src/public/icons/info_circled.svg b/src/public/icons/info_circled.svg
new file mode 100644
index 0000000..0423599
--- /dev/null
+++ b/src/public/icons/info_circled.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="rgb(26, 115, 232)" xmlns="http://www.w3.org/2000/svg"><path d="M11.360 1.265 C 9.727 1.403,8.426 1.757,7.127 2.418 C 2.743 4.648,0.464 9.535,1.524 14.429 C 2.035 16.786,3.511 19.075,5.472 20.551 C 6.984 21.689,8.581 22.352,10.560 22.665 C 11.147 22.757,12.886 22.757,13.480 22.663 C 16.062 22.258,18.197 21.125,19.948 19.231 C 21.260 17.812,22.172 15.993,22.539 14.060 C 22.802 12.680,22.794 11.152,22.518 9.811 C 21.989 7.240,20.388 4.798,18.216 3.251 C 16.755 2.210,14.862 1.480,13.217 1.323 C 12.753 1.278,11.620 1.243,11.360 1.265 M13.142 2.822 C 14.244 2.966,15.085 3.223,16.090 3.725 C 17.514 4.435,18.595 5.362,19.536 6.678 C 19.884 7.166,20.076 7.496,20.383 8.139 C 20.760 8.929,20.969 9.584,21.146 10.540 C 21.259 11.149,21.249 12.831,21.130 13.500 C 20.766 15.526,19.952 17.089,18.501 18.542 C 17.652 19.392,16.850 19.952,15.806 20.423 C 13.274 21.564,10.578 21.550,8.063 20.382 C 6.267 19.549,4.652 17.975,3.751 16.182 C 3.108 14.902,2.809 13.689,2.772 12.220 C 2.750 11.334,2.801 10.786,2.985 9.960 C 3.284 8.616,3.959 7.212,4.808 6.168 C 6.036 4.660,7.867 3.498,9.765 3.023 C 10.791 2.766,12.108 2.688,13.142 2.822 M11.767 6.829 C 11.612 6.858,11.333 7.159,11.281 7.353 C 11.194 7.679,11.360 8.055,11.652 8.196 C 12.159 8.442,12.723 8.112,12.726 7.568 C 12.728 7.039,12.319 6.723,11.767 6.829 M11.720 10.864 C 11.550 10.938,11.414 11.060,11.326 11.220 C 11.267 11.327,11.259 11.604,11.248 13.840 C 11.241 15.215,11.246 16.434,11.260 16.548 C 11.289 16.786,11.404 16.979,11.592 17.106 C 12.018 17.393,12.607 17.149,12.716 16.640 C 12.775 16.368,12.775 11.654,12.717 11.401 C 12.610 10.938,12.137 10.683,11.720 10.864 " stroke="none" fill-rule="evenodd"></path></svg>
diff --git a/src/public/icons/nav_arrow_down.svg b/src/public/icons/nav_arrow_down.svg
new file mode 100644
index 0000000..b8ec6d4
--- /dev/null
+++ b/src/public/icons/nav_arrow_down.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.740 8.300 C 5.326 8.447,5.131 8.963,5.341 9.359 C 5.370 9.414,6.795 10.858,8.507 12.567 C 11.334 15.389,11.636 15.678,11.796 15.720 C 11.985 15.770,12.194 15.747,12.359 15.659 C 12.414 15.630,13.858 14.205,15.567 12.493 C 18.375 9.679,18.678 9.363,18.720 9.205 C 18.870 8.634,18.366 8.130,17.795 8.280 C 17.637 8.322,17.346 8.600,14.810 11.133 L 12.000 13.939 9.190 11.133 C 6.772 8.718,6.358 8.320,6.220 8.283 C 6.014 8.228,5.936 8.231,5.740 8.300 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
\ No newline at end of file
diff --git a/src/public/icons/nav_arrow_up.svg b/src/public/icons/nav_arrow_up.svg
new file mode 100644
index 0000000..5bfb7c5
--- /dev/null
+++ b/src/public/icons/nav_arrow_up.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.742 8.298 C 11.618 8.344,10.899 9.041,8.455 11.488 C 5.625 14.320,5.322 14.637,5.280 14.795 C 5.130 15.366,5.634 15.870,6.205 15.720 C 6.363 15.678,6.654 15.400,9.190 12.867 L 12.000 10.061 14.810 12.867 C 17.346 15.400,17.637 15.678,17.795 15.720 C 18.366 15.870,18.870 15.366,18.720 14.795 C 18.678 14.637,18.375 14.321,15.567 11.507 C 13.858 9.795,12.411 8.369,12.351 8.337 C 12.184 8.248,11.921 8.232,11.742 8.298 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>
\ No newline at end of file
diff --git a/src/public/icons/warning_triangle.svg b/src/public/icons/warning_triangle.svg
new file mode 100644
index 0000000..1422c5f
--- /dev/null
+++ b/src/public/icons/warning_triangle.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="rgb(255, 148, 25)" xmlns="http://www.w3.org/2000/svg"><path d="M11.289 2.361 C 11.128 2.403,10.867 2.505,10.709 2.589 C 10.403 2.749,9.945 3.150,9.761 3.419 C 9.701 3.507,7.808 6.784,5.556 10.700 C 2.401 16.186,1.433 17.898,1.343 18.160 C 1.236 18.467,1.225 18.548,1.226 19.000 C 1.227 19.431,1.241 19.544,1.332 19.820 C 1.594 20.612,2.220 21.285,2.954 21.563 C 3.483 21.763,3.212 21.757,12.000 21.757 C 20.809 21.757,20.515 21.764,21.056 21.559 C 21.629 21.342,22.222 20.794,22.502 20.221 C 22.714 19.787,22.779 19.489,22.776 18.960 C 22.774 18.559,22.759 18.456,22.657 18.160 C 22.566 17.896,21.623 16.227,18.444 10.700 C 16.192 6.784,14.299 3.507,14.239 3.419 C 14.055 3.150,13.597 2.749,13.292 2.589 C 12.708 2.282,11.928 2.193,11.289 2.361 M12.546 3.894 C 12.653 3.948,12.806 4.062,12.887 4.147 C 13.045 4.311,21.133 18.340,21.232 18.620 C 21.306 18.831,21.278 19.332,21.182 19.520 C 21.056 19.766,20.855 19.979,20.635 20.101 L 20.420 20.220 12.000 20.220 L 3.580 20.220 3.365 20.101 C 3.145 19.979,2.944 19.766,2.818 19.520 C 2.722 19.332,2.694 18.831,2.768 18.620 C 2.867 18.340,10.955 4.311,11.113 4.147 C 11.266 3.986,11.496 3.849,11.700 3.795 C 11.916 3.738,12.336 3.787,12.546 3.894 M11.740 8.300 C 11.540 8.371,11.339 8.585,11.283 8.786 C 11.226 8.993,11.224 13.002,11.282 13.209 C 11.390 13.599,11.802 13.827,12.202 13.719 C 12.422 13.660,12.656 13.432,12.715 13.219 C 12.777 12.999,12.777 9.001,12.715 8.781 C 12.635 8.493,12.285 8.236,11.980 8.242 C 11.936 8.243,11.828 8.269,11.740 8.300 M11.787 16.281 C 11.283 16.432,11.090 17.080,11.429 17.484 C 11.788 17.910,12.448 17.813,12.684 17.300 C 12.948 16.729,12.394 16.099,11.787 16.281 " stroke="none" fill-rule="evenodd" fill="rgb(255, 148, 25)"></path></svg>
\ No newline at end of file
diff --git a/src/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md b/src/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md
index 3f8a6cb..b455b4f 100644
--- a/src/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md
+++ b/src/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md
@@ -4,7 +4,7 @@
 
 ## Перед началом работы
 
-- Изучите [типы сетевых адаптеров виртуального дата центра](./about-adapters.md) и определите подходящий для вашего сценария.
+- Изучите [типы сетевых адаптеров виртуального дата центра](about.md#сетевые-адаптеры) и определите подходящий для вашего сценария.
 - [Создайте локальную сеть](./create-network.md) в виртуальном дата-центре и [подключите ее к шлюзу](./connect-to-edge-gateway.md).
 - [Сгенерируйте и сохраните ключ PSK для аутентификации](./create-psk.md).
 - Согласуйте параметры шифрования и аутентификации IKE и IPSec, которые будут использоваться на обеих сторонах туннеля.