Обновление названий сервисов

VEGA-6267: добавление автоматического обновления шрифтов дизайн-системы и отключение темной темы

See merge request common/vega/beecloud-docs!78

.gitignore

@@ -14,3 +14,7 @@ src/.vuepress/.cache
 src/.vuepress/.temp
 src/.vitepress/cache
 packages-list.json
+/.vale
+/.vscode
+/.vale.ini
+/.markdownlint.json

.gitlab-ci.yml

@@ -12,6 +12,5 @@ variables:
   IMAGE_NAME: docs-portal
 
 include: 
-  - ci/develop.yml
-  - "ci/rules.yml"
+  - ci/*.yml
   - "ci/deploy/*.inc.yml"

VERSION

@@ -1 +1 @@
-0.0.2
+0.0.2-fix1

ci/build-image.yml

@@ -1,34 +1,4 @@
-develop:npm:
-  image: harbor.vimpelcom.ru/dockerhub/library/node:lts
-  stage: build
-  cache:
-    - key:
-        files:
-          - package.json
-      paths:
-        - node_modules/
-  rules:
-    - !reference [.build-npm-rules, rules]
-  variables:
-    PRODUCT: "$PRODUCT_PROD"
-  script:
-    - export PRODUCT_VERSION=$(node -p "require('./package.json').version")
-    - echo PRODUCT_VERSION="$PRODUCT_VERSION" >> .env
-    - echo PRODUCT="$PRODUCT_PROD" >> .env
-    - npm install
-    - npm run build
-    - export VITE_NEW_VERSION="true"
-    - echo "$DMZ_DIST_DIR"
-    - ./node_modules/.bin/vitepress build src --outDir "$DMZ_DIST_DIR"
-  artifacts:
-    paths:
-      - "$DIST_DIR"
-      - "$DMZ_DIST_DIR"
-    reports:
-      dotenv: .env
-    expire_in: 1h
-
-build-image-npm:
+build-image:
   image: harbor.vimpelcom.ru/dockerhub/library/docker:20.10.11-dind
   stage: package
   rules:
@@ -46,7 +16,7 @@ build-image-npm:
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:$PRODUCT_VERSION
     - docker push ${CONTAINER_REGISTRY}/${PRODUCT_DMZ}/${IMAGE_NAME}:latest
   needs:
-    - job: develop:npm
+    - job: build:npm
       artifacts: true
       optional: true
   artifacts:

ci/build-npm.yml

@@ -0,0 +1,29 @@
+build:npm:
+  image: harbor.vimpelcom.ru/dockerhub/library/node:lts
+  stage: build
+  cache:
+    - key:
+        files:
+          - package.json
+      paths:
+        - node_modules/
+  rules:
+    - !reference [.build-npm-rules, rules]
+  variables:
+    PRODUCT: "$PRODUCT_PROD"
+  script:
+    - export PRODUCT_VERSION=$(node -p "require('./package.json').version")
+    - echo PRODUCT_VERSION="$PRODUCT_VERSION" >> .env
+    - echo PRODUCT="$PRODUCT_PROD" >> .env
+    - npm install
+    - npm run build
+    - export VITE_NEW_VERSION="true"
+    - echo "$DMZ_DIST_DIR"
+    - ./node_modules/.bin/vitepress build src --outDir "$DMZ_DIST_DIR"
+  artifacts:
+    paths:
+      - "$DIST_DIR"
+      - "$DMZ_DIST_DIR"
+    reports:
+      dotenv: .env
+    expire_in: 1h

ci/deploy/deploy-cloud.inc.yml

@@ -1,11 +1,39 @@
-deploy-cloud:
+deploy-test-stand:
   stage: deploy
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
+  variables:
+    stand: cloud-stand.vega-dev.cloud.vimpelcom.ru
   rules:
-    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
-      when: never
     - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
       when: never
-    - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "feature/ci")
+    - if: $CI_PIPELINE_SOURCE == "push"
       when: manual
-  extends:
-    - .deploy-template
+  before_script:
+    - |
+      sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
+      apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
+      rm -rf /var/cache/apk/*
+    - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - chmod 600 ~/.ssh/id_rsa
+    - >
+      echo "stand: ${stand}"
+      ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+  script:
+    - >
+      echo -e "Connect to ${stand}..." &&
+      scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
+      ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
+      export PRODUCT=$PRODUCT &&
+      export PRODUCT_VERSION=$PRODUCT_VERSION &&
+      export IMAGE_NAME=$IMAGE_NAME &&
+      chmod 700 ~/deploy.sh &&
+      ~/deploy.sh ${IMAGE_NAME} &&
+      rm -f ~/deploy.sh"
+  needs:
+    - job: build-image
+      optional: true

ci/deploy/deploy-dmz.inc.yml

@@ -0,0 +1,40 @@
+deploy-prod:
+  stage: deploy
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
+  variables:
+    stand: beecloud-docs.beecloud-docs.cloud.vimpelcom.ru
+  rules:
+    - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
+      when: never
+    - if: $CI_PIPELINE_SOURCE == "push"
+      when: manual
+  before_script:
+    - |
+      sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
+      apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
+      rm -rf /var/cache/apk/*
+    - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - chmod 600 ~/.ssh/id_rsa
+    - >
+      echo "stand: ${stand}"
+      ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+    - PRODUCT="$PRODUCT_DMZ"
+  script:
+    - >
+      echo -e "Connect to ${stand}..." &&
+      scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
+      ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
+      export PRODUCT=$PRODUCT &&
+      export PRODUCT_VERSION=$PRODUCT_VERSION &&
+      export IMAGE_NAME=$IMAGE_NAME &&
+      chmod 700 ~/deploy.sh &&
+      ~/deploy.sh ${IMAGE_NAME} &&
+      rm -f ~/deploy.sh"
+  needs:
+    - job: build-image
+      optional: true

ci/deploy/deploy-template.inc.yml

@@ -23,7 +23,7 @@
 # - git push origin HEAD:$CI_COMMIT_REF_NAME -o ci.skip
 
 .deploy-template:
-  image: harbor.vimpelcom.ru/dockerhub/library/alpine
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
   before_script:
     - |
       sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
@@ -69,5 +69,5 @@
         rm -f ~/deploy.sh"
       done
   needs:
-    - job: build-image-npm
+    - job: build-image
       optional: true

ci/rules.yml

@@ -2,7 +2,4 @@
   rules:
     - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
       when: never
-    - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "feature/ci")
-      exists:
-        - .npmrc
-        - ./*/.npmrc
+    - if: $CI_PIPELINE_SOURCE == "push"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
-  "version": "0.6.1",
-  "description": "Vega docs portal",
+  "version": "0.6.5-main",
+  "description": "Beeline Cloud docs",
   "main": "index.js",
   "scripts": {
     "dev": "vitepress dev src",
@@ -15,16 +15,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@beeline/design-tokens": "^1.31.0",
-    "vue": "3.4.7"
+    "@beeline/design-tokens": "^1.31.6",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@docsearch/css": "3.3.0",
-    "@types/node": "20.10.7",
-    "@vitejs/plugin-vue": "4.3.4",
-    "sass": "1.69.7",
-    "typescript": "^5.8.3",
-    "vitepress": "1.0.0-rc.40",
-    "vitepress-plugin-tabs": "0.5.0"
+    "@docsearch/css": "4.1.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sass": "^1.70.0",
+    "typescript": "^5.9.3",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitepress": "^1.6.4",
+    "vitepress-plugin-tabs": "^0.7.3"
   }
-}
+}

scripts/build-cloud-stand.ps1

@@ -0,0 +1,22 @@
+#ps
+
+# Configs
+$Env:CONTAINER_REGISTRY = "harbor.vimpelcom.ru"
+$Env:PRODUCT            = "vega/cloud"
+$Env:IMAGE_NAME         = "docs"
+$Env:PRODUCT_VERSION    = "0.6.2" # node -p "require('./package.json').version" 
+$Env:PKG_NAME           = "vega-portal" # node -p "require('./package.json').name"
+
+# VITE VARS
+
+Remove-Item -Recurse -Force dist
+
+# Write-Output "Version: " node -p "require('./package.json').version"
+git pull
+Write-Output " Компиляция:" $env:PKG_NAME'@'$env:PRODUCT_VERSION
+npm install
+npm run build
+
+docker build -f ./build.Dockerfile -t $env:CONTAINER_REGISTRY/$env:PRODUCT/$env:IMAGE_NAME':'$env:PRODUCT_VERSION .
+docker image list | FINDSTR "$env:PRODUCT/$env:IMAGE_NAME"
+docker push $env:CONTAINER_REGISTRY/$env:PRODUCT/$env:IMAGE_NAME':'$env:PRODUCT_VERSION

src/.vitepress/config.mts

@@ -1,6 +1,9 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
 import { overrideComponents } from './override-components'
+import { resolve } from 'node:path'
+import { fileURLToPath, URL } from 'node:url'
 
 const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -42,10 +45,12 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Beeline Cloud",
+  srcDir: ".",
+  title: " ",
   description: "Документация Beeline Cloud",
   head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
   base: typeof new_version !== 'undefined' ? '/' : '/docs/',
+  appearance: false,
   markdown: {
     config(md) {
       md.use(tabsMarkdownPlugin)
@@ -53,8 +58,31 @@ export default defineConfig({
   },
   vite: {
     resolve: {
-      alias: overrideComponents(),
-    }
+      alias: [
+        ...overrideComponents(),
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./theme', import.meta.url))
+        },
+      ],
+    },
+    plugins: [
+      viteStaticCopy({
+        targets: [
+          {
+            src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
+            dest: 'assets',
+          },
+        ],
+      }),
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
   },
   locales: {
     root: {
@@ -63,7 +91,11 @@ export default defineConfig({
     }
   },
   themeConfig: {
-    logo: '/favicon.svg',
+    logo: {
+      light: '/img/logo-cloud.svg',
+      dark: '/img/logo-cloud.svg',
+      alt: '',
+    },
     search: {
       provider: 'local',
       options: {
@@ -75,14 +107,8 @@ export default defineConfig({
                 buttonAriaLabel: 'Поиск'
               },
               modal: {
-                noResultsText: 'Нет результатов для',
+                noResultsText: 'По вашему запросу ничего не найдено',
                 resetButtonTitle: 'Сбросить',
-                displayDetails: 'Показать расширенный список',
-                footer: {
-                  selectText: 'Выбрать',
-                  closeText: 'Закрыть',
-                  navigateText: 'Перейти',
-                }
               }
             }
           }
@@ -91,151 +117,263 @@ export default defineConfig({
     },
     // https://vitepress.dev/reference/default-theme-config
     // nav: [
-    //   ],
-
-    //  socialLinks: [
-    //    { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
-    //  ],
-
-    // editLink: {
-    //   pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
-    //   text: 'Отредактируйте эту страницу на GitLab'
-    // },
+    //   {
+    //     text: 'Документация',
+    //     link: '/guide/',
+    //   },
+    //   {
+    //     text: 'API',
+    //     link: '',
+    //   },
+    //   {
+    //     text: 'Terraform',
+    //     // link: '/terraform/',
+    //     link: '',
+    //   },
+    // ],
 
     docFooter: {
       next: 'Вперед',
       prev: 'Назад'
     },
 
-    // lastUpdated: {
-    //   text: 'Обновлена',
-    //   formatOptions: {
-    //     dateStyle: 'long',
-    //   }
-    // },
-
     outline: {
       label: 'Содержание'
     },
     sidebar: {
-      '/platform/': [
-        {
-          text: 'Платформа Beeline Cloud', link: '/platform/index.md',
-          collapsed: true,
+    '/platform/': [
+      {
+        text: 'Платформа Beeline Cloud', link: '/platform/index.md',
+        collapsed: true,
           items: [
-            { text: 'Сервисы', link: '/platform/services/services.md' },
-            { text: 'Техническая поддержка', link: '/platform/support/support-overview.md' },
+            {text: 'Обзор', link: '/platform/about.md'},
+            {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'}, 
           ],
         },
       ],
-      '/start/': [
-        {
-          text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
-          collapsed: true,
-          items: [
-            { text: 'Начать работу', link: '/start/getting-started.md' },
-            { text: 'Бесплатный период', link: '/start/trial.md' },
-            { text: 'Платное использование', link: '/start/organization.md' },
-          ],
+    '/start/': [
+      {
+        text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
+      },
+      {text: 'Начать работу', link: '/start/getting-started.md'},
+      {text: 'Бесплатный период', link: '/start/trial.md'}, 
+      {text: 'Платное использование', link: '/start/organization.md'},
+    ],
+    //  '/billing/': [
+ 
+    //   ],
+    '/backups/': [
+      {
+          text: 'Резервное копирование', link: '/backups/index.md',
         },
-      ],
-      //  '/billing/': [
-
-      //   ],
+      {
+        text: 'Обзор сервиса', link: '/backups/backups-overview.md',
+        collapsed: true,
+              items: [  
+                {text: 'О сервисе', link: '/backups/about.md'},
+                {text: 'Квоты и лимиты', link: '/backups/backup-quatos.md'},
+           ]
+      },
+      {text: 'Резервное копирование виртуальных машин Beeline Cloud', link: '/backups/backup-internal-infra.md'},
+      {text: 'Резервное копирование собственной инфраструктуры в Beeline Cloud', link: '/backups/backup-external-infra.md'},
+      {text: 'Каталог резервных копий', link: '/backups/view-backups.md'},
+      
+    ],
       '/vdc/': [
         {
           text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
           collapsed: true,
-          items: [
-            { text: 'Обзор сервиса', link: '/vdc/vdc-overview.md' },
-            { text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md' },
-            {
-              text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
+              items: [  
+                { text: 'О сервисе', link: '/vdc/vdc-about.md' },
+                { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
+                { text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
+           ]
+        },
+        {
+          text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'
+        }, 
+
+        { text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md', 
               collapsed: true,
               items: [
-                { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
-                { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
-                { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md' },
-                {
-                  text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md',
+            { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
+            { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
+            { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md'},
+            ],  
+            },   
+            { text: 'Виртуальные машины', link: '/vdc/vdc-how-to/vm/vm-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Создание ВМ', link: '/vdc/vdc-how-to/vm/create-vm.md'}, 
+                {text: 'Создание vApp', link: '/vdc/vdc-how-to/vm/create-vapp.md'},
+                {text: 'Управление состоянием ВМ', link: '/vdc/vdc-how-to/vm/manage-vm.md'},
+                {text: 'Клонирование ВМ', link: '/vdc/vdc-how-to/vm/clone-vm.md'},       
+                {text: 'Изменение конфигурации ВМ', link: '/vdc/vdc-how-to/vm/edit-vm.md'},       
+                {text: 'Удаление ВМ', link: '/vdc/vdc-how-to/vm/delete-vm.md'},  
+                {text: 'Группы размещения', link: '/vdc/vdc-how-to/vm/create-affinity-rules.md'},
+                {text: 'Снимки ВМ', link: '/vdc/vdc-how-to/vm/create-snapshot.md'},
+                {text: 'VMware Tools', link: '/vdc/vdc-how-to/vm/vmware-tools.md'},
+              ],  
+            },
+            { text: 'Диски', link: '/vdc/vdc-how-to/disks/disks-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/disks/about.md'}, 
+                {text: 'Создание диска', link: '/vdc/vdc-how-to/disks/create-disk.md'},
+                {text: 'Проверка состояния диска', link: '/vdc/vdc-how-to/disks/view-disk.md'},
+                {text: 'Управление выделенными дисками', link: '/vdc/vdc-how-to/disks/attach-disk.md'},    
+                {text: 'Изменение политики хранения дисков ВМ', link: '/vdc/vdc-how-to/disks/change-storage-policy-of-vm.md'},  
+                {text: 'Редактирование параметров диска', link: '/vdc/vdc-how-to/disks/edit-disk.md'},
+                {text: 'Удаление диска', link: '/vdc/vdc-how-to/disks/delete-disk.md'},
+              ],  
+            },
+            { text: 'Сети', link: '/vdc/vdc-how-to/networks/networks-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/networks/about.md'},
+                {text: 'Настройка доступа к ВМ из интернета', link: '/vdc/vdc-how-to/networks/allow-external-connections-to-vm.md'},     
+                {text: 'Подключение ВМ в vApp к сети', link: '/vdc/vdc-how-to/networks/connect-vapp-to-network.md'},       
+                {text: 'Подключение ВМ к интернету', link: '/vdc/vdc-how-to/networks/connect-vm-to-network.md'},       
+                {text: 'Создание сети в организации и подключение к Edge Gateway', link: '/vdc/vdc-how-to/networks/create-network.md'},  
+                {text: 'Подключение сети к Edge Gateway', link: '/vdc/vdc-how-to/networks/connect-to-edge-gateway.md'},
+                {text: 'Создание Pre-Shared Key', link: '/vdc/vdc-how-to/networks/create-psk.md'},     
+                { text: 'Настройка site-to-site подключения с помощью IPSec', link: '/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md',
                   collapsed: true,
                   items: [
-                    { text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md' },
-                    { text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md' },
-                  ],
+                    {text: 'Настройка IPSec VPN', link: '/vdc/vdc-how-to/networks/ipsec/setup-ipsec-vpn.md'},
+                    {text: 'Настройка ASAv', link: '/vdc/vdc-how-to/networks/ipsec/asav.md'},     
+                    {text: 'Настройка CSR 1000v', link: '/vdc/vdc-how-to/networks/ipsec/csr1000v.md'},     
+                    {text: 'Настройка Fortigate', link: '/vdc/vdc-how-to/networks/ipsec/fortigate.md'},
+                    {text: 'Проверить сетевую связанность', link: '/vdc/vdc-how-to/networks/ipsec/check-vpn-status.md'},    
+                  ],  
                 },
-              ],
+              ],  
+            },
+            { text: 'Пользователи и роли', link: '/vdc/vdc-how-to/users/users-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Ролевая модель', link: '/vdc/vdc-how-to/users/roles.md'},
+                {text: 'Создание пользователя', link: '/vdc/vdc-how-to/users/add-user.md'},
+                {text: 'Изменение пароля пользователя', link: '/vdc/vdc-how-to/users/change-users-password.md'},
+                {text: 'Настройка квот', link: '/vdc/vdc-how-to/users/quotas.md'},            
+              ],  
+            },
+            { text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md', 
+              collapsed: true,
+              items: [
+                {text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md'},
+                {text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md'},      
+              ],  
             },
-            // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
           ],
-        },
-      ],
+
+        // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
       '/compute/': [
         {
           text: 'Виртуальные машины', link: '/compute/index.md',
+        },
+        { text: 'Обзор сервиса', link: '/compute/compute-overview-index.md' ,
+          collapsed: true,
+              items: [  
+            { text: 'Техническое описание', link: '/compute/compute-overview.md' },
+            { text: 'Квоты и лимиты', link: '/compute/compute-quatos.md' },
+           ]
+        },
+        {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'},
+        { text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
           collapsed: true,
           items: [
-            { text: 'Обзор сервиса', link: '/compute/compute-overview.md' },
-            //  {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'}, 
-            {
-              text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
-              collapsed: true,
-              items: [
                 { text: 'Создание ВМ', link: '/compute/compute-how-to/compute-servers-create.md' },
-                { text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect.md' },
+                { text: 'Создание ВМ джамп-хоста', link: '/compute/compute-how-to/compute-servers-jump-create.md' },
+                { text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect-index.md',
+                  collapsed: true,
+                  items: [
+                    { text: 'Подключение по SSH по внешнему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-public.md'},
+                    { text: 'Подключение по SSH по внутреннему IP-адресу с помощью ключевой пары', link: '/compute/compute-how-to/compute-connect-inside.md' },
+                    { text: 'Подключение по SSH по логину и паролю', link: '/compute/compute-how-to/compute-connect-pwd.md' },   
+                 ]
+                },
                 { text: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
-              ],
-            },
-            { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
-            { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
-            { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
-            {
-              text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
-              collapsed: true,
-              items: [
-                { text: 'Подключение по SSH к ВМ закрытого контура', link: '/compute/compute-guide/compute-guide-ssh-inside.md' },
-              ],
-            },
-          ],
-        },
-
-      ],
-      '/admin/': [
-        {
-          text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
+                ],
+              },
+{ text: 'Диски', link: '/compute/compute-how-to/compute-disks/compute-disk-index.md',
           collapsed: true,
           items: [
-            { text: 'Управление ключевыми парами', link: '/admin/ssh.md' },
-          ],
-        },
-      ],
-      '/yellowbe/': [
-        {
-          text: 'Дизайн-платформа Yellowbe', link: '/yellowbe/index.md',
-          collapsed: false,
-          items: [
-            {
-              text: 'Начать работу',
-              link: '/yellowbe/get-started/index.md',
-              collapsed: true,
-              items: [
-                {
-                  text: 'Разработчику',
-                  link: '/yellowbe/get-started/dev.md',
-                }, {
-                  text: 'Дизайнеру',
-                  link: '/yellowbe/get-started/design.md',
-                },
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-disks/compute-disk-about.md' },
+                { text: 'Создание диска', link: '/compute/compute-how-to/compute-disks/compute-disk-create.md' },
+                { text: 'Управление дисками', link: '/compute/compute-how-to/compute-disks/compute-disk-manage.md' },
+                { text: 'Удаление диска', link: '/compute/compute-how-to/compute-disks/compute-disk-del.md' },
               ]
             },
-            {
-                  text: 'Состав дизайн-платформы',
-                  link: '/yellowbe/about.md',
-            }
+        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-index.md', 
+          collapsed: true,
+          items: [  
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-ip/compute-ip-about.md' },
+                { text: 'Просмотр IP-адресов', link: '/compute/compute-how-to/compute-ip/compute-ip-view.md' },
+                { text: 'Создание IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-create.md' },
+                { text: 'Управление IP-адресами', link: '/compute/compute-how-to/compute-ip/compute-ip-manager.md' },
+                { text: 'Удаление IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-del.md' },
+              ]
+        },
+        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-index.md', 
+          collapsed: true,
+          items: [
+            { text: 'Обзор', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-about.md'},
+            { text: 'Создание группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-create.md'},
+            { text: 'Управление группами размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-manager.md' },   
+            { text: 'Удаление группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-del.md' },
+          ]
+        },
+        { text: 'Сети', link: '/compute/compute-how-to/compute-network/compute-network-index.md',
+          collapsed: true,
+          items: [
+            { text: 'Настройка site-to-site VPN с помощью VyOS', link: '/compute/compute-how-to/compute-network/compute-vpn-vyos.md' },
+            { text: 'Подключение ВМ закрытого контура к интернету', link: '/compute/compute-how-to/compute-network/compute-network-inside.md' },
           ],
         },
       ],
+      '/admin/': [
+      {
+        text: 'Администрирование', link: '/admin/index.md',
+      },
+      {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
+      ],
+      '/vdi/': [
+        {
+          text: 'Виртуальные рабочие столы', link: '/vdi/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdi/vdi-overview.md',
+          collapsed: true,
+              items: [  
+            { text: 'О сервисе', link: '/vdi/vdi-about.md' },
+            { text: 'Техническое описание', link: '/vdi/vdi-tech.md' },
+            { text: 'Квоты и лимиты', link: '/vdi/vdi-quatos.md' },
+            { text: 'Тарификация', link: '/vdi/vdi-tarif.md' },
+              ]
+        },
+        {
+          text: 'Заказ виртуальных рабочих столов', link: '/vdi/vdi-how-to/vdi-create.md'
+        },
+        {
+          text: 'Настройка сервиса', link: '/vdi/vdi-how-to/vdi-nastroika.md',
+          collapsed: true,
+              items: [  
+            { text: 'Настройка интеграции с Active Directory', link: '/vdi/vdi-how-to/vdi-connect-to-ad.md' },
+            { text: 'Настройка сети', link: '/vdi/vdi-how-to/vdi-interconnect.md' },
+              ]
+        },
+        // {
+       //   text: 'Gold-образ', link: '/vdi/vdi-how-to/vdi-gold.md'
+       // },
+        {
+          text: 'Подключение к виртуальному рабочему месту', link: '/vdi/vdi-how-to/vdi-connect.md'
+        }, 
+       ],    
+      },  
     },
-  },
-}
+  }
 )

src/.vitepress/matomo.ts

@@ -106,7 +106,7 @@ export default function(parameters: IParameters) {
     // window._paq elsewhere when needed, including closure scopes.
     const _paq = window._paq;
     // If user requests consent checking, do this before we actually track.
-    // Note: this doesn't work at the moment because the user has no way to set
+    // tip: this doesn't work at the moment because the user has no way to set
     // whether consent was given. Oops.
     if (requireConsent) {
       _paq.push(['requireConsent']);

src/.vitepress/override-components.ts

@@ -26,6 +26,12 @@ export const overrideComponents = () => (
             new URL('./theme/components/CustomContent.vue', import.meta.url)
           ) 
         },
+        {
+          find: /^.*\/VPHome\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/CustomHome.vue', import.meta.url)
+          ) 
+        },
         {
           find: /^.*\/VPDocFooter\.vue$/,
           replacement: fileURLToPath(
@@ -41,7 +47,7 @@ export const overrideComponents = () => (
         {
           find: /^.*\/VPFeature\.vue$/,
           replacement: fileURLToPath(
-            new URL('./theme/components/CustomFeature.vue', import.meta.url)
+            new URL('./theme/components/CustomHomeFeature.vue', import.meta.url)
           ) 
         },
         {
@@ -62,6 +68,12 @@ export const overrideComponents = () => (
             new URL('./theme/components/CustomNavBarSearchButton.vue', import.meta.url)
           ) 
         },
+        {
+          find: /^.*\/VPHomeHero\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/CustomHomeHero.vue', import.meta.url)
+          ) 
+        },
         {
           find: /^.*\/VPLocalSearchBox\.vue$/,
           replacement: fileURLToPath(

src/.vitepress/theme/components/CustomAvatar.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="[$style.CustomFeatureImage, classes]">
+    <CustomIcon :icon="icon" size="large" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
+import { computed, useCssModule } from 'vue';
+import CustomIcon from './CustomIcon.vue';
+
+const { size = 'medium' } = defineProps<{
+  icon: Icons,
+  size?: 'medium' | 'small'
+}>()
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomAvatar]: true,
+  [style.CustomAvatarSmall]: size === 'small'
+}))
+</script>
+
+<style lang="scss" module>
+@use '@beeline/design-tokens/scss/tokens/components/avatar';
+@use "@beeline/design-tokens/scss/tokens/themes";
+
+.CustomAvatar {
+  border-radius: avatar.$avatar-squircle-border-radius;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: avatar.$avatar-medium-height;
+  width: avatar.$avatar-medium-width;
+  letter-spacing: avatar.$avatar-medium-text-font-letter-spacing;
+  line-height: avatar.$avatar-medium-text-font-line-height;
+  font-size: avatar.$avatar-medium-text-font-size;
+  background-color: themes.$color-status-neutral-background;
+
+  &Small {
+    height: avatar.$avatar-small-height;
+    width: avatar.$avatar-small-width;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomButton.vue

@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
 
 interface Props {
   tag?: string
-  size?: 'medium' | 'big'
+  size?: 'medium' | 'big' | 'small'
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
@@ -51,6 +51,15 @@ const component = computed(() => {
   transition: color 0.1s, border-color 0.1s, background-color 0.1s;
 }
 
+.VPButton.small {
+  border-radius: 12px;
+  padding: 0 16px;
+  line-height: 20px;
+  height: 40px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
 .VPButton.medium {
   border-radius: 12px;
   padding: 0 20px;

src/.vitepress/theme/components/CustomContent.vue

@@ -11,49 +11,82 @@ const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <div
-    class="VPContent CustomContent"
-    id="VPContent"
-    :class="{
+  <div class="VPContent CustomContent" id="VPContent" :class="{
       'has-sidebar': hasSidebar,
       'is-home': frontmatter.layout === 'home'
-    }"
-  >
-    <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
+}">
+    <slot name="not-found" v-if="page.isNotFound">
+      <NotFound />
+    </slot>
 
     <VPPage v-else-if="frontmatter.layout === 'page'">
-      <template #page-top><slot name="page-top" /></template>
-      <template #page-bottom><slot name="page-bottom" /></template>
+      <template #page-top>
+        <slot name="page-top" />
+      </template>
+      <template #page-bottom>
+        <slot name="page-bottom" />
+      </template>
     </VPPage>
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
-      <template #home-hero-before><slot name="home-hero-before" /></template>
-      <template #home-hero-info><slot name="home-hero-info" /></template>
-      <template #home-hero-image><slot name="home-hero-image" /></template>
-      <template #home-hero-after><slot name="home-hero-after" /></template>
-      <template #home-features-before><slot name="home-features-before" /></template>
-      <template #home-features-after><slot name="home-features-after" /></template>
+      <template #home-hero-before>
+        <slot name="home-hero-before" />
+      </template>
+      <template #home-hero-info>
+        <slot name="home-hero-info" />
+      </template>
+      <template #home-hero-image>
+        <slot name="home-hero-image" />
+      </template>
+      <template #home-hero-after>
+        <slot name="home-hero-after" />
+      </template>
+      <template #home-features-before>
+        <slot name="home-features-before" />
+      </template>
+      <template #home-features-after>
+        <slot name="home-features-after" />
+      </template>
     </VPHome>
 
-    <component
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
+    <component v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" :is="frontmatter.layout" />
 
     <CustomDoc v-else>
-      <template #doc-top><slot name="doc-top" /></template>
-      <template #doc-bottom><slot name="doc-bottom" /></template>
+      <template #doc-top>
+        <slot name="doc-top" />
+      </template>
+      <template #doc-bottom>
+        <slot name="doc-bottom" />
+      </template>
 
-      <template #doc-footer-before><slot name="doc-footer-before" /></template>
-      <template #doc-before><slot name="doc-before" /></template>
-      <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-footer-before>
+        <slot name="doc-footer-before" />
+      </template>
+      <template #doc-before>
+        <slot name="doc-before" />
+      </template>
+      <template #doc-after>
+        <slot name="doc-after" />
+      </template>
 
-      <template #aside-top><slot name="aside-top" /></template>
-      <template #aside-outline-before><slot name="aside-outline-before" /></template>
-      <template #aside-outline-after><slot name="aside-outline-after" /></template>
-      <template #aside-ads-before><slot name="aside-ads-before" /></template>
-      <template #aside-ads-after><slot name="aside-ads-after" /></template>
-      <template #aside-bottom><slot name="aside-bottom" /></template>
+      <template #aside-top>
+        <slot name="aside-top" />
+      </template>
+      <template #aside-outline-before>
+        <slot name="aside-outline-before" />
+      </template>
+      <template #aside-outline-after>
+        <slot name="aside-outline-after" />
+      </template>
+      <template #aside-ads-before>
+        <slot name="aside-ads-before" />
+      </template>
+      <template #aside-ads-after>
+        <slot name="aside-ads-after" />
+      </template>
+      <template #aside-bottom>
+        <slot name="aside-bottom" />
+      </template>
     </CustomDoc>
   </div>
 </template>
@@ -82,7 +115,7 @@ const { hasSidebar } = useSidebar()
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
+    padding-left: 320px;
   }
 }
 

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>
@@ -73,58 +75,70 @@ const pageName = computed(() =>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@use '@/scss/helpers/media';
+
 .VPDoc {
   padding: 32px 24px 96px;
   width: 100%;
-}
 
-@media (min-width: 768px) {
-  .VPDoc {
+  @include media.media_min(960px) {
+    padding: 48px 32px 0;
+  }
+
+  @include media.media_max(768px) {
     padding: 48px 32px 128px;
   }
 }
 
-@media (min-width: 960px) {
-  .VPDoc {
-    padding: 48px 32px 0;
+.VPDoc:not(.has-sidebar) .container {  
+  @include media.media_min(1440px) {
+    max-width: 1104px;
   }
 
-  .VPDoc:not(.has-sidebar) .container {
-    display: flex;
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;display: flex;
     justify-content: center;
     max-width: 992px;
   }
+}
 
-  .VPDoc:not(.has-sidebar) .content {
+.VPDoc:not(.has-sidebar) .content {
+  @include media.media_min(1440px) {
+    max-width: 784px;
+  }
+
+  @include media.media_max(960px) {
     max-width: 752px;
   }
 }
 
-@media (min-width: 1280px) {
-  .VPDoc .container {
+.VPDoc .container {
+  @include media.media_min(1280px) {
     display: flex;
     justify-content: center;
   }
-
-  .VPDoc .aside {
-    display: block;
-  }
 }
 
-@media (min-width: 1440px) {
-  .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
-  }
-
-  .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+.VPDoc .aside {
+  @include media.media_min(1280px) {
+    display: block;
   }
 }
 
 .container {
   margin: 0 auto;
   width: 100%;
+
+  @include media.media_min(1280px) {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;
+  }
 }
 
 .aside {
@@ -180,20 +194,6 @@ const pageName = computed(() =>
   width: 100%;
 }
 
-@media (min-width: 960px) {
-  .content {
-    padding: 0 32px 128px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .content {
-    order: 1;
-    margin: 0;
-    min-width: 640px;
-  }
-}
-
 .content-container {
   margin: 0 auto;
 }

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 {

src/.vitepress/theme/components/CustomFeature.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
-import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
-import VPIconArrowRight from 'vitepress/dist/client/theme-default/components/icons/VPIconArrowRight.vue'
-
-defineProps<{
-  icon?: DefaultTheme.FeatureIcon
-  title: string
-  details?: string
-  link?: string
-  linkText?: string
-  rel?: string
-  target?: string
-}>()
-</script>
-
-<template>
-  <VPLink
-    class="VPFeature CustomFeature"
-    :href="link"
-    :rel="rel"
-    :target="target"
-    :no-icon="true"
-    :tag="link ? 'a' : 'div'"
-  >
-    <article class="box">
-      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
-        <VPImage
-          :image="icon"
-          :alt="icon.alt"
-          :height="icon.height || 48"
-          :width="icon.width || 48"
-        />
-      </div>
-      <VPImage
-        v-else-if="typeof icon === 'object'"
-        :image="icon"
-        :alt="icon.alt"
-        :height="icon.height || 48"
-        :width="icon.width || 48"
-      />
-      <div v-else-if="icon" class="icon" v-html="icon"></div>
-      <h2 class="title" v-html="title"></h2>
-      <p v-if="details" class="details" v-html="details"></p>
-
-      <div v-if="linkText" class="link-text">
-        <p class="link-text-value">
-          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
-        </p>
-      </div>
-    </article>
-  </VPLink>
-</template>
-
-<style scoped>
-.VPFeature {
-  display: block;
-  border: 1px solid var(--vp-c-bg-soft);
-  border-radius: 12px;
-  height: 100%;
-  background-color: var(--vp-c-bg-soft);
-  transition: border-color 0.25s, background-color 0.25s;
-}
-
-.VPFeature.link:hover {
-  border-color: var(--vp-c-brand-1);
-}
-
-.box {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  height: 100%;
-}
-
-.box > :deep(.VPImage) {
-  margin-bottom: 20px;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-  border-radius: 6px;
-  background-color: var(--vp-c-default-soft);
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
-  transition: background-color 0.25s;
-}
-
-.title {
-  line-height: 24px;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--color-text-active);
-}
-
-.details {
-  flex-grow: 1;
-  padding-top: 8px;
-  line-height: 24px;
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--color-text-inactive);
-}
-
-.link-text {
-  padding-top: 8px;
-}
-
-.link-text-value {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-}
-
-.link-text-icon {
-  display: inline-block;
-  margin-left: 6px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-</style>

src/.vitepress/theme/components/CustomHero.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { type Ref, inject } from 'vue'
+import { type Ref, inject, ref } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import CustomButton from './CustomButton.vue'
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
+import HomeHeroSearchButton from './HomeHeroSearchButton.vue'
+import VPLocalSearchBox from 'vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -14,11 +16,14 @@ defineProps<{
   name?: string
   text?: string
   tagline?: string
+  search?: boolean
   image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
 
 const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+
+const showSearch = ref(false)
 </script>
 
 <template>
@@ -27,21 +32,20 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
       <div class="main">
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
-            <span v-html="name" class="clip"></span>
+            {{ name }}
           </h1>
           <p v-if="text" v-html="text" class="text"></p>
           <p v-if="tagline" v-html="tagline" class="tagline"></p>
         </slot>
 
+        <div v-if="search" class="VPHeroSearchWrapper">
+          <VPLocalSearchBox v-if="showSearch" @close="showSearch = false" />
+          <HomeHeroSearchButton @click="showSearch = true" />
+        </div>
+
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">
-            <CustomButton
-              tag="a"
-              size="medium"
-              :theme="action.theme"
-              :text="action.text"
-              :href="action.link"
-            />
+            <CustomButton tag="a" size="medium" :theme="action.theme" :text="action.text" :href="action.link" />
           </div>
         </div>
       </div>
@@ -59,20 +63,26 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 </template>
 
 <style lang="scss" scoped>
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/mixin";
+
+$topSpacing: 40px;
+
 .VPHero {
   margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + $topSpacing) 64px 64px;
   }
 }
 
@@ -80,7 +90,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 1080px;
 }
 
 @media (min-width: 960px) {
@@ -95,46 +105,41 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   order: 2;
   flex-grow: 1;
   flex-shrink: 0;
-}
-
-.VPHero.has-image .container {
-  text-align: center;
-}
-
-@media (min-width: 960px) {
+  background-color: themes.$color-background-secondary;
+  padding: 98px 92px;
+  border-radius: sizes.$size-border-radius-x6;
+  
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: center;
   }
-}
+  
+  @media (min-width: 960px) {
+    .main {
+      order: 1;
+      width: calc((100% / 3) * 2);
+    }
 
-@media (min-width: 960px) {
-  .main {
-    order: 1;
-    width: calc((100% / 3) * 2);
+    .VPHero.has-image .main {
+      max-width: 592px;
+    }
   }
 
-  .VPHero.has-image .main {
-    max-width: 592px;
+  .name,
+  .text {
+    @include mixin.h1;
+    white-space: pre-wrap;
   }
-}
 
-.name,
-.text {
-  max-width: 392px;
-  letter-spacing: -0.4px;
-  line-height: 40px;
-  font-size: 32px;
-  font-weight: 700;
-  white-space: pre-wrap;
-}
-
-.VPHero.has-image .name,
-.VPHero.has-image .text {
-  margin: 0 auto;
-}
-
-.name {
-  color: var(--vp-home-hero-name-color);
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0 auto;
+  }
+  
+  .name {
+    color: themes.$color-text-active;
+    padding-bottom: 40px;
+    text-align: center;
+  }
 }
 
 .clip {
@@ -144,22 +149,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
-@media (min-width: 640px) {
-  .name,
-  .text {
-    max-width: 576px;
-    line-height: 56px;
-    font-size: 48px;
-  }
-}
-
 @media (min-width: 960px) {
-  .name,
-  .text {
-    line-height: 64px;
-    font-size: 56px;
-  }
-
   .VPHero.has-image .name,
   .VPHero.has-image .text {
     margin: 0;
@@ -168,7 +158,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 .tagline {
   padding-top: 8px;
-  max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
@@ -183,7 +172,6 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 @media (min-width: 640px) {
   .tagline {
     padding-top: 12px;
-    max-width: 576px;
     line-height: 32px;
     font-size: 20px;
   }

src/.vitepress/theme/components/CustomHome.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import VPHomeHero from 'vitepress/dist/client/theme-default/components/VPHomeHero.vue'
+import CustomHomeFeatures from './CustomHomeFeatures.vue';
+import CustomHomeServices from './CustomHomeServices.vue';
+</script>
+
+<template>
+  <div class="VPHome CustomHome">
+    <slot name="home-hero-before" />
+    <VPHomeHero>
+      <template #home-hero-info>
+        <slot name="home-hero-info" />
+      </template>
+      <template #home-hero-image>
+        <slot name="home-hero-image" />
+      </template>
+    </VPHomeHero>
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <CustomHomeFeatures />
+    <slot name="home-features-after" />
+
+    <CustomHomeServices />
+
+    <Content />
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  padding-bottom: 96px;
+}
+
+.VPHome :deep(.VPHomeSponsors) {
+  margin-top: 112px;
+  margin-bottom: -128px;
+}
+</style>

src/.vitepress/theme/components/CustomHomeFeature.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { computed, useCssModule } from 'vue';
+import { NAVBAR_HEIGHT } from '../constants'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
+import CustomAvatar from './CustomAvatar.vue';
+
+const { disabled, scrollTo, link, items } = defineProps<{
+  icon: string
+  title: string
+  link?: string
+  scrollTo?: string
+  disabled?: boolean
+  items?: ItemFeature[]
+}>()
+
+type ItemFeature = { 
+  title: string
+  link?: string
+}
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomFeature]: true,
+  [style.CustomFeatureDisabled]: disabled || !link && !scrollTo,
+}))
+
+const handleClick = (event: Event) => {
+  if (scrollTo) {
+    const targetElTop = document.querySelector(scrollTo)?.getBoundingClientRect().top
+
+    if (targetElTop) {
+      event.stopPropagation()
+      window.scrollTo({ behavior: 'smooth', top: targetElTop + window.scrollY - NAVBAR_HEIGHT - 32 })
+    }
+  }
+}
+</script>
+
+<template>
+  <Component :is="!disabled && link ? VPLink : 'article'"
+    :class="classes" @click="handleClick">
+    <CustomAvatar :class="$style.CustomFeatureIcon" :icon="icon as Icons" />
+  
+    <div :class="$style.CustomFeatureContent">
+     <Component :is="!disabled && link ? VPLink : 'article'" v-bind="{ ...(!disabled && link && { href: link }) }">
+        <p :class="$style.CustomFeatureTitle" :href="`/docs${link}`">
+          {{ title }}
+        </p>
+      </Component>
+      <div :class="$style.CustomFeatureContainer">
+        <div v-for="(item, i) in items" :key="i">
+          <Component
+            :is="!disabled && item.link ? VPLink : 'article'"
+            v-bind="{ ...(!disabled && item.link && { href: item.link }) }"
+            :class="{ [style.CustomFeatureDisabled]: disabled || !item.link }"
+          >
+            <p :class="$style.CustomFeatureSubtitle">{{ item.title }}</p>
+          </Component>
+        </div>
+      </div>
+    </div>
+  </Component>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomFeature {
+  $el: &;
+  border-radius: sizes.$size-border-radius-x6;
+  border: 1px solid themes.$color-border;
+  max-width: 344px;
+  padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+  
+  &WithScroll {
+    cursor: pointer;
+  }
+
+  &Icon {
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+  }
+
+  &Content {
+    display: flex;
+    flex-direction: column;
+    padding-top: sizes.$size-spacing-x4;
+    gap: sizes.$size-spacing-x6;
+  }
+
+  &Title {
+    @include mixin.h4;
+    color: themes.$color-text-active;
+
+    &:hover {
+      color: themes.$color-text-link;
+    }
+
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+  }
+
+  &Subtitle {
+    @include mixin.caption;
+
+    &:hover {
+      color: themes.$color-text-link;
+    }
+
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+
+    #{$el}WithScroll & {
+      color: themes.$color-text-active;
+    }
+  }
+
+  &Container {
+    display: flex;
+    gap: sizes.$size-spacing-x4;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomHomeFeatures.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import CustomHomeFeature from './CustomHomeFeature.vue'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div v-if="Array.isArray(frontmatter.features)" :class="$style.HomeFeatures">
+    <CustomHomeFeature v-for="feature in frontmatter.features" :key="feature.title" :title="feature.title"
+      :icon="feature.icon" :link="feature.link" :scrollTo="feature.scroll_to" :disabled="feature.disabled" :items="feature.items" />
+  </div>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+
+.HomeFeatures {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+  max-width: 1080px;
+  margin: 0 auto;
+  margin-bottom: 80px;
+}
+</style>

src/.vitepress/theme/components/CustomHomeHero.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import VPHero from 'vitepress/dist/client/theme-default/components/VPHero.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <VPHero v-if="fm.hero" class="CustomHomeHero" :name="fm.hero.name" :text="fm.hero.text" :tagline="fm.hero.tagline"
+    :search="fm.hero.search" :image="fm.hero.image" :actions="fm.hero.actions">
+    <template #home-hero-info>
+      <slot name="home-hero-info" />
+    </template>
+    <template #home-hero-image>
+      <slot name="home-hero-image" />
+    </template>
+  </VPHero>
+</template>

src/.vitepress/theme/components/CustomHomeServiceCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="$style.CustomHomeServiceCard">
+    <h3 :class="$style.CustomHomeServiceCardTitle">{{ title }}</h3>
+
+    <div :class="$style.CustomHomeServiceCardLinks">
+      <Component v-for="article in articles" :is="!article.disabled && article.link ? VPLink : 'div'"
+        v-bind="{ ...(!article.disabled && article.link && { href: article.link }) }"
+        :class="[$style.CustomHomeServiceCardLink, { [$style.CustomHomeServiceCardLinkDisabled]: article.disabled || !article.link }]">
+        <div :class="$style.CustomHomeServiceCardLinkTitle">
+          <div :class="[$style.CustomHomeServiceCardLinkTitleIcon, { [$style.CustomHomeServiceCardLinkTitleIconActive] : article.link && article.icon === 'magic' }]">
+            <CustomIcon :icon="(article.icon || 'cloud') as Icons" />
+          </div>
+          <div :class="[$style.CustomHomeServiceCardLinkTitleText, { [$style.CustomHomeServiceCardLinkTitleTextActive]: article.link }]">
+            {{ article.title }}
+          </div>
+        </div>
+        <div :class="$style.CustomHomeServiceCardLinkDescription">
+          {{ article.description }}
+        </div>
+      </Component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import CustomIcon from './CustomIcon.vue'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'
+
+export type ServiceArticle = {
+  title: string
+  description: string
+  icon: string
+  link?: string
+  disabled?: boolean
+}
+
+defineProps<{
+  title: string
+  articles: ServiceArticle[]
+}>()
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomHomeServiceCard {
+  background-color: themes.$color-background-secondary;
+  border-radius: sizes.$size-border-radius-x6;
+  padding: sizes.$size-spacing-x8 sizes.$size-spacing-x6;
+
+  &Title {
+    @include mixin.h4();
+    color: themes.$color-text-active;
+    margin-bottom: sizes.$size-spacing-x6;
+  }
+
+  &Links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: sizes.$size-spacing-x6;
+  }
+
+  &Link {
+    $iconRightSpacing: 8px;
+    $iconSize: 20px;
+    $el: &;
+
+    color: themes.$color-text-active !important;
+  
+    &Disabled {
+      color: themes.$color-text-disabled !important;
+    }
+
+    &Title {
+      margin-bottom: sizes.$size-spacing-x1;
+      display: flex;
+      align-items: center;
+
+      &Icon {
+        width: $iconSize;
+        height: $iconSize;
+        margin-right: $iconRightSpacing;
+
+        &Active {
+          color: themes.$color-text-link;
+        }
+      }
+
+      &Text {
+        @include mixin.subtitle2;
+
+        &Active:hover {
+          color: themes.$color-text-link;
+        }
+      }
+
+    }
+
+    &Description {
+      padding-left: calc($iconSize + $iconRightSpacing);
+      color: themes.$color-text-inactive;
+      @include mixin.caption;
+    }
+  }
+}
+</style>

src/.vitepress/theme/components/CustomHomeServices.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="$style.CustomHomeServices">
+    <h2 id="home-services-section-title" :class="$style.CustomHomeServicesTitle">Документация по сервисам</h2>
+
+    <div v-if="Array.isArray(frontmatter.services)" :class="$style.CustomHomeServicesList">
+      <CustomHomeServiceCard v-for="service in frontmatter.services" :key="service.title" :title="service.title"
+        :articles="service.articles" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import CustomHomeServiceCard from './CustomHomeServiceCard.vue';
+
+const { frontmatter } = useData()
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/mixin";
+
+.CustomHomeServices {
+  max-width: 1080px;
+  margin: 0 auto;
+
+  &Title {
+    @include mixin.h2;
+    text-align: center;
+    margin-bottom: 40px;
+    color: themes.$color-text-active;
+  }
+
+  &List {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x6;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <i :class="['beeline-icons', `beeline-icons-${icon}`, classes]"></i>
+</template>
+
+<script setup lang="ts">
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
+import { computed, useCssModule } from 'vue';
+
+const { size = 'medium' } = defineProps<{
+  icon: Icons,
+  size?: 'large' | 'medium' | 'small'
+}>()
+
+const style = useCssModule()
+const classes = computed(() => ({
+  [style.CustomIcon]: true,
+  [style.CustomIconLarge]: size === 'large',
+  [style.CustomIconSmall]: size === 'small'
+}))
+</script>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/components/icon";
+
+.CustomIcon {
+  font-size: icon.$icon-medium-size !important;
+  
+  &Large {
+    font-size: icon.$icon-large-size !important;
+  }
+
+  &Small {
+    font-size: icon.$icon-small-size !important;
+  }
+}
+</style>

src/.vitepress/theme/components/CustomLocalSearchBox.vue

@@ -10,7 +10,7 @@ import {
   useSessionStorage
 } from '@vueuse/core'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import Mark from 'mark.js/src/vanilla.js'
+import Mark from 'mark.js/dist/mark'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import { dataSymbol, inBrowser, useRouter } from 'vitepress'
 import {
@@ -20,6 +20,7 @@ import {
   nextTick,
   onBeforeUnmount,
   onMounted,
+  Raw,
   ref,
   shallowRef,
   watch,
@@ -32,6 +33,8 @@ import { escapeRegExp } from 'vitepress/dist/client/shared'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { LRUCache } from 'vitepress/dist/client/theme-default/support/lru'
 import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
+import CustomIcon from './CustomIcon.vue';
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';
 
 const emit = defineEmits<{
   (e: 'close'): void
@@ -132,6 +135,7 @@ watchEffect(() => {
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
 const enableNoResults = ref(false)
+const loadig = ref(true)
 
 watch(filterText, () => {
   enableNoResults.value = false
@@ -160,11 +164,7 @@ debouncedWatch(
     if (!index) return
 
     // Search
-    results.value = index
-      .search(filterTextValue)
-      .slice(0, 16) as (SearchResult & Result)[]
-    enableNoResults.value = true
-
+    retrySearch(index, filterTextValue)
     // Highlighting
     const mods = showDetailedListValue
       ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
@@ -268,6 +268,16 @@ function focusSearchInput(select = true) {
   select && searchInput.value?.select()
 }
 
+const retrySearch = (index: Raw<MiniSearch<Result>>, filter: string) => {
+  if (!index) return
+
+  results.value = index
+    .search(filter)
+    .slice(0, 16) as (SearchResult & Result)[]
+
+  enableNoResults.value = true
+}
+
 onMounted(() => {
   focusSearchInput()
 })
@@ -481,33 +491,6 @@ function formMarkRegex(terms: Set<string>) {
             class="search-input"
           />
           <div class="search-actions">
-            <button
-              v-if="!disableDetailedView"
-              class="toggle-layout-button"
-              type="button"
-              :class="{ 'detailed-list': showDetailedList }"
-              :title="$t('modal.displayDetails')"
-              @click="
-                selectedIndex > -1 && (showDetailedList = !showDetailedList)
-              "
-            >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M3 14h7v7H3zM3 3h7v7H3zm11 1h7m-7 5h7m-7 6h7m-7 5h7"
-                />
-              </svg>
-            </button>
-
             <button
               class="clear-button"
               type="reset"
@@ -515,26 +498,13 @@ function formMarkRegex(terms: Set<string>) {
               :title="$t('modal.resetButtonTitle')"
               @click="resetSearch"
             >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
-                />
-              </svg>
+              <CustomIcon :icon="Icons.Close" size="large" style="padding: 12px 0;" />
             </button>
           </div>
         </form>
 
         <ul
+          v-if="!!results.length"
           ref="resultsEl"
           :id="results?.length ? 'localsearch-list' : undefined"
           :role="results?.length ? 'listbox' : undefined"
@@ -561,29 +531,21 @@ function formMarkRegex(terms: Set<string>) {
             >
               <div>
                 <div class="titles">
-                  <span class="title-icon">#</span>
                   <span
                     v-for="(t, index) in p.titles"
                     :key="index"
                     class="title"
                   >
                     <span class="text" v-html="t" />
-                    <svg width="18" height="18" viewBox="0 0 24 24">
-                      <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m9 18l6-6l-6-6"
-                      />
-                    </svg>
+                    <span class="text"> > </span>
                   </span>
                   <span class="title main">
                     <span class="text" v-html="p.title" />
                   </span>
                 </div>
 
+                <span v-html="p.title" />
+
                 <div v-if="showDetailedList" class="excerpt-wrapper">
                   <div v-if="p.text" class="excerpt" inert>
                     <div class="vp-doc" v-html="p.text" />
@@ -594,65 +556,15 @@ function formMarkRegex(terms: Set<string>) {
               </div>
             </a>
           </li>
-          <li
-            v-if="filterText && !results.length && enableNoResults"
-            class="no-results"
-          >
-            {{ $t('modal.noResultsText') }} "<strong>{{ filterText }}</strong
-            >"
-          </li>
         </ul>
-
-        <div class="search-keyboard-shortcuts">
-          <span>
-            <kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19V5m-7 7l7-7l7 7"
-                />
-              </svg>
-            </kbd>
-            <kbd :aria-label="$t('modal.footer.navigateDownKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 5v14m7-7l-7 7l-7-7"
-                />
-              </svg>
-            </kbd>
-            {{ $t('modal.footer.navigateText') }}
-          </span>
-          <span>
-            <kbd :aria-label="$t('modal.footer.selectKeyAriaLabel')">
-              <svg width="14" height="14" viewBox="0 0 24 24">
-                <g
-                  fill="none"
-                  stroke="currentcolor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                >
-                  <path d="m9 10l-5 5l5 5" />
-                  <path d="M20 4v7a4 4 0 0 1-4 4H4" />
-                </g>
-              </svg>
-            </kbd>
-            {{ $t('modal.footer.selectText') }}
-          </span>
-          <span>
-            <kbd :aria-label="$t('modal.footer.closeKeyAriaLabel')">esc</kbd>
-            {{ $t('modal.footer.closeText') }}
-          </span>
-        </div>
+        <ul
+          v-else-if="filterText && !results.length && enableNoResults"
+          class="no-results"
+        >
+          <p class="no-results-text">
+            {{ $t('modal.noResultsText') }}
+          </p>
+        </ul>
       </div>
     </div>
   </Teleport>
@@ -675,16 +587,12 @@ function formMarkRegex(terms: Set<string>) {
 
 .shell {
   position: relative;
-  padding: 12px;
+  padding: 24px;
   margin: 64px auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
   background: var(--vp-local-search-bg);
   width: min(100vw - 60px, 900px);
   height: min-content;
-  max-height: min(100vh - 128px, 900px);
-  border-radius: 6px;
+  border-radius: 12px;
 }
 
 @media (max-width: 767px) {
@@ -698,7 +606,7 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .search-bar {
-  border: 1px solid var(--vp-c-divider);
+  border: 1px solid rgb(32, 33, 35);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -712,10 +620,6 @@ function formMarkRegex(terms: Set<string>) {
   }
 }
 
-.search-bar:focus-within {
-  border-color: var(--vp-c-brand-1);
-}
-
 .search-icon {
   margin: 8px;
 }
@@ -756,7 +660,7 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .search-actions button {
-  padding: 8px;
+  padding: 0px;
 }
 
 .search-actions button:not([disabled]):hover,
@@ -802,27 +706,31 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .results {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  padding: 8px 0;
+  max-height: min(100vh - 214px, 900px);
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
+
+  li:hover {
+    background-color: rgba(25, 28, 52, 0.08);
+  }
 }
 
 .result {
   display: flex;
   align-items: center;
   gap: 8px;
-  border-radius: 12px;
   transition: none;
-  line-height: 1rem;
-  border: solid 2px var(--vp-local-search-result-border);
   outline: none;
+  min-height: 66px;
 }
 
 .result > div {
-  margin: 12px;
+  margin: 12px 16px;
   width: 100%;
   overflow: hidden;
 }
@@ -840,6 +748,13 @@ function formMarkRegex(terms: Set<string>) {
   position: relative;
   z-index: 1001;
   padding: 2px 0;
+  font-size: 13px !important;
+  line-height: 16px !important;
+}
+
+:deep(mark) {
+  background-color: transparent;
+  color: none;
 }
 
 .title {
@@ -852,21 +767,10 @@ function formMarkRegex(terms: Set<string>) {
   font-weight: 500;
 }
 
-.title-icon {
-  opacity: 0.5;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-}
-
 .title svg {
   opacity: 0.5;
 }
 
-.result.selected {
-  --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg);
-  border-color: var(--vp-local-search-result-selected-border);
-}
-
 .excerpt-wrapper {
   position: relative;
 }
@@ -892,10 +796,7 @@ function formMarkRegex(terms: Set<string>) {
 
 .titles :deep(mark),
 .excerpt :deep(mark) {
-  background-color: var(--vp-local-search-highlight-bg);
-  color: var(--vp-local-search-highlight-text);
-  border-radius: 2px;
-  padding: 0 2px;
+  background-color: transparent;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {
@@ -932,12 +833,44 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .no-results {
-  font-size: 0.9rem;
-  text-align: center;
-  padding: 12px;
+  padding: 28px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  z-index: 100;
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  background-color: rgb(255, 255, 255);
+}
+
+.no-results-text {
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: 0.2px;
+  color: rgba(25, 28, 52, 0.48);
+}
+
+.no-results-button {
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  padding: 13px 20px;
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: 0.2px;
+  color: rgba(9, 11, 22, 0.94);
 }
 
 svg {
   flex: none;
 }
+
+.text {
+  font-size: 13px !important;
+  line-height: 16px !important;
+  color: rgba(25, 28, 52, 0.48);
+}
 </style>

src/.vitepress/theme/components/CustomNavBar.vue

@@ -12,6 +12,7 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
 import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
 import CustomNavBarTitle from './CustomNavBarTitle.vue'
 import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+import CustomButton from './CustomButton.vue'
 
 defineProps<{
   isScreenOpen: boolean
@@ -27,6 +28,7 @@ const { hasLocalNav } = useLocalNav()
 const { frontmatter } = useData()
 
 const classes = ref<Record<string, boolean>>({})
+const loginUrl = import.meta.env.VITE_LOGIN_URL
 
 watchPostEffect(() => {
   classes.value = {
@@ -43,22 +45,21 @@ watchPostEffect(() => {
       <div class="container">
         <div class="title">
           <CustomNavBarTitle>
-            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
-            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+            <template #nav-bar-title-before>
+              <slot name="nav-bar-title-before" />
+            </template>
+            <template #nav-bar-title-after>
+              <slot name="nav-bar-title-after" />
+            </template>
           </CustomNavBarTitle>
         </div>
 
         <div class="content">
           <div class="content-body">
             <slot name="nav-bar-content-before" />
-            <VPNavBarSearch class="search" />
             <VPNavBarMenu class="menu" />
-            <VPNavBarTranslations class="translations" />
-            <VPNavBarAppearance class="appearance" />
-            <VPNavBarSocialLinks class="social-links" />
-            <VPNavBarExtra class="extra" />
-            <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarSearch class="search" />
+          <!--  <CustomButton text="Войти" size="small" :href="loginUrl" /> -->
           </div>
         </div>
       </div>
@@ -105,7 +106,7 @@ watchPostEffect(() => {
 
 @media (min-width: 768px) {
   .wrapper {
-    padding: 0 32px;
+    padding: 0 24px;
   }
 }
 
@@ -174,7 +175,7 @@ watchPostEffect(() => {
     position: relative;
     z-index: 1;
     padding-right: 32px;
-    padding-left: var(--vp-sidebar-width);
+    padding-left: 0px;
   }
 }
 
@@ -187,7 +188,7 @@ watchPostEffect(() => {
 
 .content-body {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   height: var(--vp-nav-height);
   transition: background-color 0.5s;
@@ -221,6 +222,10 @@ watchPostEffect(() => {
   height: 24px;
   background-color: var(--vp-c-divider);
   content: "";
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
 }
 
 .menu + .appearance::before,
@@ -251,4 +256,9 @@ watchPostEffect(() => {
     background-color: rgba(255, 255, 255, 0.2);
   }
 }
+
+.search {
+  justify-content: flex-end;
+  margin-right: 24px;
+}
 </style>

src/.vitepress/theme/components/CustomNavBarMenuLink.vue

@@ -3,12 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { isActive } from 'vitepress/dist/client/shared'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { computed, ref } from 'vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
+const textRef = ref<HTMLElement | null>(null)
+
+const wrapperWidth = computed(() => textRef.value?.offsetWidth)
 </script>
 
 <template>
@@ -20,22 +24,32 @@ const { page } = useData()
         page.relativePath,
         item.activeMatch || item.link,
         !!item.activeMatch
-      )
+      ),
+      disabled: !isActive(
+        page.relativePath,
+        item.activeMatch || item.link,
+        !!item.activeMatch
+      ) && !item.link ? 'disabled' : '',
     }"
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
     tabindex="0"
   >
-    <span v-html="item.text"></span>
+    <span
+      ref="textRef"
+      v-html="item.text"
+    />
   </VPLink>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@use '@beeline/design-tokens/scss/tokens/globals/colors';
+
 .VPNavBarMenuLink {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 24px;
   line-height: var(--vp-nav-height);
   font-size: 16px;
   font-weight: 500;
@@ -45,9 +59,32 @@ const { page } = useData()
 
 .VPNavBarMenuLink.active {
   color: var(--color-text-active);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    height: 4px;
+    display: none;
+    width: calc(v-bind(wrapperWidth) * 1px);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    background-color: colors.$color-background-brand;
+  }
+
+  &.active {
+    &::after {
+      display: block;
+    }
+  }
 }
 
-.VPNavBarMenuLink:hover {
+.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.VPNavBarMenuLink:hover:not(.disabled) {
   color: var(--color-text-active);
 }
 </style>

src/.vitepress/theme/components/CustomNavBarSearchButton.vue

@@ -14,31 +14,22 @@ const $t = createSearchTranslate(defaultTranslations)
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
-    <span class="DocSearch-Button-Container">
-      <svg
-        class="DocSearch-Search-Icon"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        aria-label="search icon"
-      >
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
-    </span>
-    <span class="DocSearch-Button-Keys">
-      <kbd class="DocSearch-Button-Key"></kbd>
-      <kbd class="DocSearch-Button-Key">K</kbd>
-    </span>
-  </button>
+  <svg
+    class="DocSearch-Search-Icon"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    aria-label="search icon"
+  >
+    <path
+      d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+      stroke="currentColor"
+      fill="none"
+      fill-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
 
 <style>
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
   --docsearch-hit-shadow: none;
 }
 
-.DocSearch-Button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  margin: 0;
-  padding: 0;
-  width: 48px;
-  height: 55px;
-  background: transparent;
-  transition: border-color 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
-
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--vp-c-bg-alt);
-  }
-
-  .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand-1);
-    background: var(--vp-c-bg-alt);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
+.DocSearch-Search-Icon {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--vp-c-text-2);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
-  /*rtl:begin:ignore*/
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  /*rtl:end:ignore*/
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  line-height: 22px;
-  font-family: var(--vp-font-family-base);
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
-  border-right: 1px solid var(--vp-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-  /*rtl:end:ignore*/
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 0 !important;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: 'Ctrl';
-  font-size: 12px;
-  letter-spacing: normal;
-  color: var(--docsearch-muted-color);
-}
-
-.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: '\2318';
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
+  margin: 8px;
 }
 </style>

src/.vitepress/theme/components/CustomNavBarTitle.vue

@@ -38,10 +38,10 @@ const target = computed(() =>
       :target="target"
     >
       <slot name="nav-bar-title-before" />
-      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
       <slot name="nav-bar-title-after" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
     </a>
   </div>
 </template>
@@ -53,10 +53,13 @@ const target = computed(() =>
   border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+  font-size: 25px;
+  font-weight: 500;
+  line-height: 28px;
+  color: var(--color-text-inactive);
   transition: opacity 0.25s;
+  gap: 20px;
+  margin-right: 24px;
 }
 
 @media (min-width: 960px) {
@@ -72,7 +75,6 @@ const target = computed(() =>
 }
 
 :deep(.logo) {
-  margin-right: 8px;
   height: var(--vp-nav-logo-height);
 }
 </style>

src/.vitepress/theme/components/CustomSidebar.vue

@@ -60,9 +60,8 @@ watch(
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px 32px;
-  width: 256px;
-  max-width: 320px;
+  padding: 0px 0px 96px 0px;
+  width: 320px;
   background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
@@ -88,8 +87,6 @@ watch(
 @media (min-width: 960px) {
   .VPSidebar {
     padding-top: var(--vp-nav-height);
-    // width: var(--vp-sidebar-width);
-    // max-width: 100%;
     background-color: var(--vp-sidebar-bg-color);
     opacity: 1;
     visibility: visible;
@@ -98,13 +95,6 @@ watch(
   }
 }
 
-@media (min-width: 1440px) {
-  .VPSidebar {
-    // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    // width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
-  }
-}
-
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
@@ -121,17 +111,14 @@ watch(
 
 .nav {
   outline: 0;
-}
-
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  padding-top: 24px;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    width: 100%;
   }
 }
+
 </style>

src/.vitepress/theme/components/HomeHeroSearchButton.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { ButtonTranslations } from 'vitepress/types/local-search'
+import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
+
+const defaultTranslations: { button: ButtonTranslations } = {
+  button: {
+    buttonText: 'Поиск',
+    buttonAriaLabel: 'Поиск'
+  }
+}
+
+const $t = createSearchTranslate(defaultTranslations)
+</script>
+
+<template>
+  <button type="button" :class="$style.HomeHeroSearchButton" :aria-label="$t('button.buttonAriaLabel')">
+    <span :class="$style.HomeHeroSearchButtonContainer">
+      <img :class="$style.HomeHeroSearchButtonIcon" src="/icons/search.svg" alt="Поиск">
+      <span :class="$style.HomeHeroSearchButtonPlaceholder">{{ $t('button.buttonText') }}</span>
+    </span>
+  </button>
+</template>
+
+<style lang="scss" module>
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+@use "@beeline/design-tokens/scss/mixin";
+@use "@beeline/design-tokens/scss/tokens/components/search";
+
+.HomeHeroSearchButton {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: search.$search-border-radius;
+  height: search.$search-medium-height;
+  background: search.$search-background-color;
+
+  &Container {
+    display: flex;
+  }
+
+  &Icon {
+    margin: 0 search.$search-category-icon-spacing;
+    color: themes.$color-text-inactive;
+    fill: currentColor;
+  }
+
+  &Placeholder {
+    @include mixin.body2;
+    color: themes.$color-text-disabled;
+  }
+}
+</style>

src/.vitepress/theme/constants.ts

@@ -0,0 +1 @@
+export const NAVBAR_HEIGHT = 64

src/.vitepress/theme/scss/components/vp-custom-block.scss

@@ -1,11 +1,329 @@
-.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;
     }
-}
+  }
+}
+
+.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 {
+  h1, h2, h3, h4, h5, ul, p {
+    margin: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+
+  ol {
+    padding: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+}
+
+.custom-block.details summary + p {
+  padding: 24px;
+  margin: 0;
+}
+
+.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;
+}
+
+

src/.vitepress/theme/scss/components/vp-doc-aside.scss

@@ -1,10 +1,53 @@
-.VPDocAside {
-    .outline-link {
-        font-size: 16px;
-    }
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
 
-    .outline-title {
-        font-size: 17px;
-        font-weight: 500;
+.VPDocAside {
+  .outline-link {
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    white-space: unset;
+    color: colors.$color-text-grey-inactive;
+  }
+
+  .outline-link.active {
+    font-weight: 500 !important;
+    color: colors.$color-text-black-active;
+  }
+
+  .outline-title {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 18px;
+    padding-bottom: 16px;
+    color: colors.$color-text-black-active;
+  }
+
+  .content {
+    padding-left: 0px !important;
+    border-left: 0px !important;
+
+    nav {
+      border-left: 1px solid var(--vp-c-divider) !important;
+
+      .outline-link {
+        padding-left: 20px !important;
+        
+        &.active {
+          padding-left: 16px !important;
+          position: relative !important;
+          left: -1px !important;
+          border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+            navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+
+          border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
+          border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
+  
+        }
+      }
     }
+  }
 }

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;
-        }
-    }
-}
+.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;
+}

src/.vitepress/theme/scss/components/vp-sidebar.scss

@@ -1,7 +1,116 @@
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
+@use '@/scss/helpers/media';
+
 .VPSidebar {
-    &Item {
-        .text {
-            font-size: 15px;
-        }
+  --vp-sidebar-bg-color: var(--vp-c-bg);
+}
+
+.VPSidebar .VPSidebarItem .item {
+  margin: 4px 0;
+}
+
+.VPSidebar .VPSidebarItem .link {
+  display: flex;
+  align-items: center;
+}
+
+.indicator {
+  border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
+  border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
+  position: absolute !important;
+  left: 0 !important;
+}
+
+.VPSidebarItem.is-active > .item .link > .text {
+  color: theme.$color-text-active !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+}
+
+.VPSidebarItem {
+  .item {
+    padding: 12px 32px !important;
+    border-top-right-radius: 12px !important; 
+    border-bottom-right-radius: 12px !important;
+    color: theme.$color-text-inactive;
+    
+    &:hover {
+      background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+      color: theme.$color-text-inactive;
     }
+  }
+
+  &.is-active > .item > .indicator {
+    border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+      navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+  }
+}
+
+.VPSidebarItem.collapsible {
+  .items {
+    margin-left: 16px;
+
+    .item {
+      padding: 12px 16px 12px 56px !important;
+      border-top-left-radius: 12px !important; 
+      border-bottom-left-radius: 12px !important;
+    }
+  }
+
+  &.is-active,
+  &.has-active {
+    > .item {
+      .indicator {
+        display: block !important;
+        border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+          navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+      }
+      
+      .text {
+        color: theme.$color-text-active !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+
+  .items .VPSidebarItem.is-active > .item {
+    background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+    
+    .text {
+      color: theme.$color-text-active !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.VPSidebarItem.collapsible .items .item .indicator {
+  display: none !important;
+}
+
+.text {
+  padding: 0px !important;
+  font-weight: 400 !important;
+  font-size: 15px !important;
+  line-height: 18px !important;
+  letter-spacing: 0.2px !important;
+  
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  color: theme.$color-text-inactive !important;
+}
+
+.VPSidebarItem .items {
+  border-left: 0px !important;
+}
+
+.VPSidebarItem {
+  padding-bottom: 0px !important;
+}
+
+.VPLocalNav.has-sidebar {
+  @include media.max(sm) {
+    padding-left: 0px;
+  }
 }

src/.vitepress/theme/scss/design-tokens.scss

@@ -1,3 +1,8 @@
+@use '@beeline/design-tokens/scss/font-face';
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '../assets/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
 @use '@beeline/design-tokens/scss/tokens/themes/dark';
 @use '@beeline/design-tokens/scss/tokens/themes';
 

src/.vitepress/theme/scss/fonts.scss

@@ -1,52 +0,0 @@
-$font-path-beeline-sans: '/fonts/beeline-sans' !default;
-
-@mixin beeline-sans-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Beeline Sans";
-    src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin beeline-sans-font-pair($type, $weight) {
-  @include beeline-sans-font($type, $weight);
-  
-}
-
-@include beeline-sans-font-pair(Regular, 400);
-
-@include beeline-sans-font-pair(Medium, 500);
-
-@include beeline-sans-font-pair(Bold, 700);
-
-@include beeline-sans-font-pair(Black, 900);
-
-$font-path-roboto-mono: '/fonts/roboto-mono' !default;
-
-@mixin roboto-mono-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Roboto Mono";
-    src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin roboto-mono-font-pair($type, $weight) {
-  @include roboto-mono-font($type, $weight);
-  
-}
-
-@include roboto-mono-font-pair(Light, 300);
-
-@include roboto-mono-font-pair(Regular, 400);
-
-@include roboto-mono-font-pair(Medium, 500);
-
-@include roboto-mono-font-pair(Bold, 700);
-

src/.vitepress/theme/scss/helpers/_index.scss

@@ -0,0 +1 @@
+@forward "media";

src/.vitepress/theme/scss/helpers/_media.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+// @deprecated
+@mixin media($minWidth, $maxWidth) {
+  @media (min-width: $minWidth) and (max-width: $maxWidth) {
+    @content;
+  }
+}
+
+// @deprecated
+@mixin media_max($maxWidth) {
+  @media (max-width: $maxWidth) {
+    @content;
+  }
+}
+
+// @deprecated
+@mixin media_min($minWidth) {
+  @media (min-width: $minWidth) {
+    @content;
+  }
+}
+
+$breakpoints: (
+  xl: 1600px,
+  lg: 1400px,
+  md: 1200px,
+  sm: 960px,
+);
+
+@mixin max($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+
+  @if $value {
+    @media (max-width: $value) {
+      @content;
+    }
+  } @else {
+    @error "Breakpoint #{$breakpoint} not found";
+  }
+}

src/.vitepress/theme/scss/style.scss

@@ -1,4 +1,3 @@
-@use "fonts";
-@use "design-system";
+@use "design-tokens";
 @use "vars";
 @use "components";

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;
 }
 
 /**
@@ -203,3 +205,12 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+: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;
+}

src/admin/availability-matrix.md

@@ -1,13 +0,0 @@
-# Матрица региональной доступности
-
-Регион доступности — это один или несколько центров обработки данных (ЦОД), в которых могут быть размещены компоненты облачной инфраструктуры.
-
-| Регион |  Статус | Гипервизор | Процессор | HDD| SSD | NVME|  
-|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
- | **ДатаФорт 1** |  Доступен | OpenStack |  Intel® Xeon® Gold 6248R | ✘ | ✘ | ✅ |  
-
-Условные обозначения:
-
-✅ — есть возможность выдачи ресурсов.
-
-✘ — нет возможности выдачи ресурсов.

src/admin/index.md

@@ -5,6 +5,8 @@ section_links:
     description: Добавление SSH-ключей для подключения к виртуальным машинам 
 --- 
 
-# Аккаунт Beeline Cloud
+# Администрирование
 
-Аккаунт Beeline Cloud создается при [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud. С помощью аккаунта можно управлять профилем пользователя.
+При [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud создается аккаунт и проект в Beeline Cloud.
+
+С помощью аккаунта можно управлять профилем пользователя - добавлять SSH-ключи, чтобы подключаться к виртуальным машинам без ввода пароля.

src/admin/limits.md

@@ -1,40 +0,0 @@
-# Квоты и лимиты
-
-Ограничения включают в себя лимиты и квоты на потребление ресурсов в проекте. 
-
-Квоты ограничивают потребление ресурсов в проекте. В проекте на каждый ресурс выделяется квота, не превышающая лимит.
-
-После создания проекту становятся доступны базовые квоты. Для них установлены значения по умолчанию.
-
-**Базовые квоты**
-
-| Название квоты      | Количество |
-|---------------------|------------|
-| Количество виртуальных ВМов | 3 штуки|
-| ЦПУ                 | 200        |
-| ОЗУ              | 200 Гбайт       |
-| Хранилище NVME   | 5000 Гбайт      |
-| Объектное хранилище | 100 Гбайт      |
-
-## Просмотр квот проекта
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-
-## Редактирование квот проекта
-
-::: tip Информация
-Изменить квоты проекта может пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-6. В правом верхнем углу нажмите **Изменить квоты**.
-7. Увеличите или уменьшите квоты для ресурсов.
-8. Нажмите **Сохранить**.

src/admin/projects.md

@@ -1,49 +0,0 @@
-# Управление проектами
-
-Проект — это структурная единица публичного облака, в которой содержатся ресурсы: виртуальные машины, хранилища, IP-адреса и др. 
-
-Ресурсы могут быть вычислительными и аппаратными.
-
-Вычислительные ресурсы:
-- оперативная память (ОЗУ);
-- ядра процессора (ЦПУ);
-- локальные диски;
-- сетевые диски;
-- IP-адреса.
-
-Аппаратные ресурсы (ВМы, сети, диски) размещены в центрах обработки данных (ЦОД). Каждый дата-центр разделен на модули. Модули оснащены независимыми системами электропитания и охлаждения.
-
-При получении доступа в публичное облако текущий пользователь становится менеджера проектов. Менеджер проектов может создавать новые проекты, в которых он получает роль владельца проекта. Владелец проекта может добавлять пользователей в проект, назначая им роли.
-
-Доступ к проекту осуществляется из консоли управления.
-
-## Создать проект
-
-1. Перейдите в консоль управления.
-2. Нажмите кнопку **Создать → Проект** в правом верхнем углу.
-3. Заполните информацию о проекте:
-   - **Название**: введите наименование проекта.
-   - **Идентификатор**: введите идентификатор проекта:
-     - допустимы строчные и прописные буквы латинского алфавита, цифры и дефис;
-     - длина не более 64 символов;
-     - не должно начинаться или заканчиваться дефисом.
-   - **Описание**: введите краткое описание проекта.
-4. Нажмите **Создать**.
-
-## Изменить имя проекта
-
-::: tip Информация
-Изменить имя и описание проекта может только пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Настройки → Основное**.
-6. Измените имя, описание проекта.
-7. Нажмите **Сохранить**.
-
-## Удаление проекта
-
-Функциональность не предусмотрена в публичном облаке.

src/admin/roles.md

@@ -1,49 +0,0 @@
-# Ролевая модель
-
-Управление проектом основано на ролевой модели.
-
-**Базовые роли**
-
-В проекте предусмотрен базовый набор ролей:
-
-- **Владелец продукта** — управление пользователями проекта, просмотр ресурсов.
-- **DevOps-инженер** — управление инфраструктурой, стандартное администрирование ОС UNIX по протоколу ssh и права управления виртуальными ВМами и дисками в консоли управления.
-
-## Матрица ролей
-
-| Действие | Владелец проекта | DevOps-инженер |
-|---|---|---|
-| Обзор проекта<br> (квоты и количество использованных ресурсов)| &#9989; | &#9989; |
-| ВМы: обзор | &#9989; | &#9989; |
-| ВМы: мониторинг | &#9989; | &#9989; |
-| ВМы: создать ВМ |&#10008; | &#9989; | 
-| ВМы: подключить диск | &#10008; | &#9989; | 
-| ВМы: отключить диск | &#10008; | &#9989; | 
-| ВМы: добавить диск | &#10008; | &#9989; | 
-| ВМы: теги | &#10008; |&#9989; | 
-| ВМы: масштабирование ВМа | &#10008; | &#9989; | 
-| ВМы: выключить ВМ | &#10008; | &#9989; | 
-| ВМы: включить ВМ | &#10008; | &#9989; | 
-| ВМы: перезагрузить ВМ | &#10008; | &#9989; | 
-| ВМы: принудительно перезагрузить ВМ | &#10008; | &#9989; |
-| ВМы: удалить ВМ | &#10008; | &#9989; |
-| ВМы: группы размещения | &#10008; | &#9989; |
-| ВМы: IP-адреса | &#10008; | &#9989; | 
-| Диски: просмотр дисков | &#9989; | &#9989; | 
-| Диски: добавление дискового пространства | &#10008; | &#9989; |
-| Диски: удалить диск| &#10008; | &#9989; |
-| Объектное хранилище: просмотр| &#9989; | &#9989; | 
-| Объектное хранилище: добавить хранилище | &#10008; | &#9989; |
-| Объектное хранилище: удалить хранилище | &#10008; |  &#9989;|
-| DNS: добавить зону | &#10008; | &#9989; |
-| DNS: редактировать зону | &#10008; | &#9989; | 
-| DNS: удалить зону |&#10008; | &#9989; | 
-| Настройки проекта: просмотр| &#9989; | &#9989; | 
-| Настройки проекта: изменить описание проекта |&#9989;  | &#10008; |
-| Участники: просмотр | &#9989; | &#9989; | 
-| Участники: добавить участника | &#9989; | &#10008; | 
-| Участники: удалить участника | &#9989; | &#10008; | 
-| Участники: назначить роль | &#9989;| &#10008; | 
-| Квоты: просмотр | &#9989; | &#9989; | 
-| Веб-обработчики | &#10008; | &#9989; |
-| Наблюдаемость | &#9989; | &#9989; |

src/admin/ssh.md

@@ -10,7 +10,7 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Добавить SSH-ключ
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Нажмите **Добавить ключ**.
@@ -31,14 +31,14 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Посмотреть SSH-ключи
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. В таблице показаны SSH-ключи пользователя.
 
 ## Изменить название SSH-ключа
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Выберите нужный ключ.
@@ -48,7 +48,7 @@ SSH-ключ добавляется на этапе [создания вирту
 
 ## Удалить SSH-ключ
 
-1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
 2. Перейдите в профиль пользователя в правом верхнем углу.
 3. Перейдите в раздел **SSH-ключи**.
 4. Выберите нужный ключ.

src/admin/users.md

@@ -1,47 +0,0 @@
-# Управление пользователями в проекте
-
-В консоли управления можно добавлять пользователей, управлять ролями пользователей в проекте. Один пользователей может участвовать в нескольких проектах и иметь в них разные роли.
-
-::: tip Информация
-Добавлять и удалять пользователей, изменять права пользователей в проекте может только владелец проекта.
-:::
-
-## Добавить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Нажмите **Добавить пользователя**.
-4. Найдите пользователя по ФИО или email.
-5. Назначьте [роль](../admin/roles.md) пользователю.
-6. Нажмите **Добавить**.
-
-## Назначить права пользователю
-
-Каждому пользователю проекта должна быть выдана хотя бы одна роль. У пользователя может быть несколько ролей в одном проекте. 
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
-5. Назначьте [роль](../admin/roles.md) пользователю: установите флажок напротив роли.
-6. Нажмите **Сохранить**.
-
-Права на существующие ОС применятся в течение 10 минут.
-
-## Отозвать права у пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Редактировать**.
-5. Отзовите роль у пользователя: уберите флажок напротив роли. Оставьте пользователю хотя бы одну роль в проекте. 
-6. Нажмите кнопку **Сохранить**.
-
-## Удалить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите ⠇ в строке с именем пользователя и выберите **Удалить**.
-
-Пользователь будет удален из списка участников проекта. Ресурсы проекта станут недоступны пользователю.

src/assets/icons/astra.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0079C0;}
+</style>
+<g>
+	<path class="st0" fill="#0779c3" d="M996.4,397.2l-328.5-56.6c-28.2-59.7-124.3-263-124.3-263l-31.4-66.1L356.3,340.6L27.6,397.1l234.7,254.5
+		l-52.6,360.9l302.4-166l302.4,165.9l-52.9-360.9c41.9-45.4,184.5-199.9,191.5-207.5L996.4,397.2z M719.6,635.2l44.7,301.3
+		L512.2,798.2L259.8,936.7l44.7-301.4L108.1,422.5l274.7-47.4L512,102.2L641,375.1l274.8,47.4L719.6,635.2z"/>
+	<g>
+		<g>
+			<polygon class="st0" fill="#0779c3" points="327,690.8 418.1,814.8 457.3,793.2 305.9,479.7 505.2,766.9 512,763.2 581.6,801.4 428.4,463.9 
+				689.3,860.6 724.7,880 719.1,841.6 550.8,448.2 695.4,679.1 687.5,625.3 731.7,577.5 673.2,432.5 748.9,559 856.1,442.8 
+				620.6,402.3 512,172.9 403.4,402.3 168,442.8 336.6,625.3 			"/>
+			<polygon class="st0" fill="#0779c3" points="317.4,756.3 299.4,880 363,845.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/icons/beta.svg

@@ -0,0 +1,8 @@
+<svg width="46.000000" height="24.000000" viewBox="0 0 46 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<rect id=".❖ Master" rx="12.000000" width="46.000000" height="24.000000" fill="#7E00ED"/>
+	<path id="Text" d="M12.2151 6.80103C13.2844 6.80103 14.0889 7.05859 14.6284 7.57373C15.1704 8.08887 15.4414 8.76147 15.4414 9.59155C15.4414 10.0896 15.3328 10.5193 15.1155 10.8806C14.9006 11.2395 14.5784 11.519 14.1487 11.7192C14.7102 11.8486 15.146 12.1208 15.4561 12.5359C15.7661 12.9509 15.9211 13.4587 15.9211 14.0593C15.9211 14.97 15.6257 15.6877 15.0349 16.2126C14.4441 16.7375 13.6189 17 12.5593 17L9.05103 17L9.05103 6.80103L12.2151 6.80103ZM12.0503 11.1333C12.6509 11.1333 13.0928 11.0259 13.376 10.811C13.6616 10.5962 13.8044 10.2593 13.8044 9.80029C13.8044 9.3291 13.6616 8.99951 13.376 8.81152C13.0928 8.62109 12.6509 8.52588 12.0503 8.52588L10.6257 8.52588L10.6257 11.1333L12.0503 11.1333ZM12.4092 15.2751C13.0391 15.2751 13.509 15.1555 13.8191 14.9163C14.1292 14.6746 14.2842 14.3096 14.2842 13.8213C14.2842 13.3208 14.1292 12.9656 13.8191 12.7556C13.509 12.5457 13.0391 12.4407 12.4092 12.4407L10.6257 12.4407L10.6257 15.2751L12.4092 15.2751ZM24.0109 14.6599C23.9108 15.1091 23.7253 15.5217 23.4543 15.8977C23.1857 16.2737 22.8232 16.5764 22.3666 16.8059C21.9125 17.0354 21.3498 17.1501 20.6784 17.1501C19.9997 17.1501 19.3979 16.9854 18.873 16.6558C18.3481 16.3262 17.9379 15.8708 17.6425 15.2898C17.3471 14.7087 17.1994 14.0532 17.1994 13.3232C17.1994 12.5835 17.3495 11.9268 17.6498 11.353C17.9501 10.7769 18.3627 10.324 18.8876 9.99438C19.4125 9.66479 20.0204 9.5 20.7113 9.5C21.3998 9.5 22.0041 9.66235 22.5241 9.98706C23.0441 10.3118 23.4494 10.7646 23.7399 11.3457C24.0304 11.9243 24.1757 12.6042 24.1757 13.3855C24.1757 13.4148 24.1733 13.4673 24.1684 13.543C24.1635 13.6187 24.1611 13.6711 24.1611 13.7004L18.7155 13.7004C18.7741 14.3108 18.9804 14.7856 19.3344 15.125C19.6908 15.4644 20.1498 15.634 20.7113 15.634C21.2216 15.634 21.6342 15.5449 21.9491 15.3667C22.2641 15.186 22.4911 14.9504 22.6303 14.6599L24.0109 14.6599ZM20.7113 11.0161C20.1816 11.0161 19.7458 11.1638 19.404 11.4592C19.0646 11.7522 18.8449 12.1636 18.7448 12.6934L22.6449 12.6934C22.5741 12.1953 22.3764 11.7913 22.0517 11.4812C21.727 11.1711 21.2802 11.0161 20.7113 11.0161ZM28.3959 17.0916C27.915 17.0916 27.5024 17.0244 27.1581 16.8901C26.8139 16.7534 26.5465 16.5081 26.3561 16.1541C26.1657 15.7976 26.0705 15.2898 26.0705 14.6306L26.0705 11.1516L25.1549 11.1516L25.1549 9.65015L26.0851 9.65015L26.6711 7.896L27.539 7.896L27.539 9.65015L29.4762 9.65015L29.4762 11.1516L27.539 11.1516L27.539 14.2534C27.539 14.7539 27.6391 15.0872 27.8393 15.2532C28.0395 15.4167 28.3251 15.4985 28.6962 15.4985C28.8964 15.4985 29.0685 15.4888 29.2126 15.4692C29.3566 15.4497 29.4945 15.4253 29.6264 15.396L29.6264 16.9268C29.4652 16.9658 29.2773 17.0024 29.0624 17.0366C28.8476 17.0732 28.6254 17.0916 28.3959 17.0916ZM36.5013 17.0293C36.1107 17.0293 35.7945 16.9268 35.5528 16.7217C35.3135 16.5166 35.1695 16.2041 35.1207 15.7842C34.9009 16.1943 34.6153 16.5093 34.2637 16.729C33.9146 16.9487 33.4898 17.0586 32.9893 17.0586C32.3399 17.0586 31.8175 16.884 31.4219 16.5349C31.0264 16.1858 30.8287 15.6853 30.8287 15.0334C30.8287 14.6038 30.9117 14.2498 31.0777 13.9714C31.2437 13.6907 31.4866 13.4526 31.8065 13.2573C32.1263 13.062 32.5157 12.8801 32.9747 12.7117L34.9998 11.9609C34.9608 11.6094 34.8155 11.3689 34.564 11.2395C34.315 11.1101 34.0159 11.0454 33.6668 11.0454C33.2762 11.0454 32.9551 11.1162 32.7037 11.2578C32.4547 11.397 32.2996 11.6155 32.2386 11.9133L30.9202 11.9133C30.991 11.3738 31.1558 10.9246 31.4146 10.5657C31.6758 10.2043 32.0054 9.93701 32.4034 9.76367C32.8038 9.58789 33.2445 9.5 33.7254 9.5C34.5653 9.5 35.2403 9.72339 35.7506 10.1702C36.2608 10.6145 36.5111 11.3005 36.5013 12.2283L36.4537 14.8394C36.4537 15.1104 36.4964 15.2983 36.5819 15.4033C36.6673 15.5083 36.8052 15.5608 36.9957 15.5608L37.2191 15.5608L37.2191 17C37.1092 17.0098 36.9896 17.0171 36.8602 17.022C36.7308 17.0269 36.6112 17.0293 36.5013 17.0293ZM32.3155 14.7039C32.3155 14.9846 32.4229 15.1934 32.6378 15.3301C32.8526 15.4644 33.1346 15.5315 33.4837 15.5315C33.8157 15.5315 34.116 15.4839 34.3846 15.3887C34.6556 15.2935 34.8558 15.1702 34.9852 15.0188L35.0145 12.9937L33.6815 13.5063C33.1907 13.6943 32.8404 13.8713 32.6304 14.0374C32.4205 14.2034 32.3155 14.4255 32.3155 14.7039Z" fill-rule="evenodd" fill="#FFFFFF"/>
+</svg>

src/assets/icons/centos.svg

@@ -0,0 +1,28 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42974)">
+<g clip-path="url(#clip1_1668_42974)">
+<path d="M14.888 5.03516H5.03516V14.888H14.888V5.03516Z" fill="#9CCD2A"/>
+<path d="M26.9661 5.03516H17.1133V14.888H26.9661V5.03516Z" fill="#932279"/>
+<path d="M26.9661 17.1133H17.1133V26.9661H26.9661V17.1133Z" fill="#EFA724"/>
+<path d="M14.888 17.1133H5.03516V26.9661H14.888V17.1133Z" fill="#262577"/>
+</g>
+<g clip-path="url(#clip2_1668_42974)">
+<path d="M9.03301 24.5408L16 31.5078L22.967 24.5408L16 17.5738L9.03301 24.5408Z" fill="#9CCD2A"/>
+<path d="M0.493952 15.9998L7.46094 22.9668L14.4279 15.9998L7.46094 9.03282L0.493952 15.9998Z" fill="#932279"/>
+<path d="M9.03301 7.46075L16 14.4277L22.967 7.46075L16 0.493761L9.03301 7.46075Z" fill="#EFA724"/>
+<path d="M17.5721 15.9998L24.5391 22.9668L31.506 15.9998L24.5391 9.03282L17.5721 15.9998Z" fill="#262577"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0L20.6772 4.67722H27.3228V11.3228L32 16L27.3228 20.6772V27.3228H20.6772L16 32L11.3228 27.3228H4.67722V20.6772L0 16L4.67722 11.3228V4.67722H11.3228L16 0ZM10.6077 5.39234H5.39234V10.6077L7.49943 8.50057L13.4604 14.53H14.53V13.4604L8.50057 7.49943L10.6077 5.39234ZM15.2451 13.1618V4.67722H12.3341L16 1.01134L19.6659 4.67722H16.7549V13.1618L16 13.908L15.2451 13.1618ZM15.2451 14.1674V15.2451H14.1674L14.9136 16L14.1674 16.7549H15.2451V17.8326L16 17.0864L16.7549 17.8326V16.7549H17.8326L17.0864 16L17.8326 15.2451H16.7549V14.1674L16 14.9136L15.2451 14.1674ZM17.47 13.4604V14.53H18.5396L24.5006 8.50057L26.6077 10.6077V5.39234H21.3923L23.4994 7.49943L17.47 13.4604ZM20.381 5.39234H17.47V12.4548L22.4852 7.49653L20.381 5.39234ZM26.6077 11.619L24.5035 9.5148L19.5452 14.53H26.6077V11.619ZM18.8382 15.2451L18.092 16L18.8382 16.7549H27.3228V19.6659L30.9887 16L27.3228 12.3341V15.2451H18.8382ZM26.6077 20.381V17.47H19.5452L24.5035 22.4852L26.6077 20.381ZM18.5396 17.47H17.47V18.5396L23.4994 24.5006L21.3923 26.6077H26.6077V21.3923L24.5006 23.4994L18.5396 17.47ZM20.381 26.6077L22.4852 24.5035L17.47 19.5452V26.6077H20.381ZM16.7549 18.8382L16 18.092L15.2451 18.8382V27.3228H12.3341L16 30.9887L19.6659 27.3228H16.7549V18.8382ZM11.619 26.6077H14.53V19.5452L9.5148 24.5035L11.619 26.6077ZM14.53 18.5396V17.47H13.4604L7.49943 23.4994L5.39234 21.3923V26.6077H10.6077L8.50057 24.5006L14.53 18.5396ZM5.39234 20.381L7.49653 22.4852L12.4548 17.47H5.39234V20.381ZM13.1618 16.7549L13.908 16L13.1618 15.2451H4.67722V12.3341L1.01134 16L4.67722 19.6659V16.7549H13.1618ZM5.39234 11.619V14.53H12.4548L7.49653 9.5148L5.39234 11.619ZM14.53 12.4548L9.5148 7.49653L11.619 5.39234H14.53V12.4548Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1668_42974">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1668_42974">
+<rect width="21.9304" height="21.9304" fill="white" transform="translate(5.03516 5.03516)"/>
+</clipPath>
+<clipPath id="clip2_1668_42974">
+<rect width="21.9304" height="21.9304" fill="white" transform="translate(16 31.5078) rotate(-135)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/check.svg

@@ -0,0 +1,7 @@
+<svg width="13.710938" height="10.442871" viewBox="0 0 13.7109 10.4429" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="Icons name" d="M12.4453 0.0834961C12.3359 0.145996 11.0625 1.47412 8.625 4.06787L4.96875 7.9585L3.14062 6.10693C2.29688 5.26318 1.76953 4.73975 1.55859 4.53662C1.34766 4.3335 1.20312 4.22412 1.125 4.2085C0.90625 4.146 0.707031 4.15771 0.527344 4.24365C0.347656 4.32959 0.203125 4.46631 0.09375 4.65381C0.046875 4.74756 0.0195312 4.82178 0.0117188 4.87646C0.00390625 4.93115 0 5.00537 0 5.09912C0.015625 5.23975 0.0429688 5.34521 0.0820312 5.41553C0.121094 5.48584 0.941406 6.34131 2.54297 7.98193C4.14453 9.62256 4.96094 10.4429 4.99219 10.4429C5.02344 10.4429 6.46484 8.92725 9.31641 5.896C12.168 2.86475 13.6133 1.31006 13.6523 1.23193C13.6914 1.15381 13.7109 1.02881 13.7109 0.856934C13.7109 0.685059 13.6758 0.532715 13.6055 0.399902C13.5352 0.26709 13.4414 0.169434 13.3242 0.106934C13.207 0.0444336 13.0625 0.00927734 12.8906 0.00146484C12.7188 -0.00634766 12.5703 0.0209961 12.4453 0.0834961Z" fill-rule="evenodd" fill="#2CA853"/>
+</svg>

src/assets/icons/debian.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#A80030" d="M76.77 68.974c.74-.577 1.411-1.161 2.008-1.729-1.667.408-3.363.417-5.073.261-2.049.028.388 1.056 3.065 1.468zM84.71 64.762c1.222-1.685 2.111-3.53 2.425-5.438-.274 1.359-1.011 2.534-1.707 3.773-3.833 2.414-.36-1.433-.002-2.895-4.12 5.188-.566 3.111-.716 4.56zM88.773 54.192c.248-3.693-.727-2.525-1.055-1.117.383.199.685 2.603 1.055 1.117zM65.93 3.722c1.094.196 2.365.347 2.186.608 1.197-.262 1.469-.504-2.186-.608zM68.063 4.426l.053-.095-.773.159zM65.27 80.73c-2.951-1.381-5.653-3.468-7.874-6.021 1.178 1.726 2.451 3.403 4.096 4.721-2.783-.942-6.499-6.742-7.584-6.978 4.796 8.587 19.457 15.059 27.135 11.848-3.553.13-8.065.073-12.057-1.402-1.536-.791-3.573-2.355-3.589-2.869-.077.201-.206.4-.127.701zM65.426 79.933l-.03.097.03-.097zM109.475 46.345c.033-1.882.523-.986.713-1.449-.37-.213-1.339-1.656-1.93-4.424.428-.651 1.143 1.686 1.726 1.781-.375-2.201-1.02-3.878-1.045-5.568-1.7-3.553-.602.474-1.981-1.525-1.81-5.646 1.502-1.311 1.725-3.875 2.743 3.974 4.308 10.134 5.026 12.685-.549-3.11-1.433-6.123-2.514-9.04.833.352-1.342-6.399 1.083-1.929-2.591-9.531-11.085-18.436-18.901-22.614.956.875 2.164 1.975 1.73 2.146-3.887-2.314-3.204-2.495-3.76-3.472-3.167-1.288-3.375.103-5.472.002-5.968-3.165-7.118-2.829-12.611-4.813l.251 1.168c-3.955-1.317-4.607.5-8.88.004-.261-.203 1.369-.735 2.71-.93-3.823.504-3.644-.753-7.384.139.921-.646 1.896-1.075 2.879-1.625-3.116.189-7.441 1.814-6.106.336-5.084 2.271-14.115 5.456-19.183 10.208l-.159-1.065c-2.322 2.787-10.126 8.325-10.747 11.935l-.621.145c-1.209 2.046-1.991 4.365-2.949 6.47-1.581 2.693-2.317 1.036-2.091 1.459-3.109 6.302-4.653 11.598-5.986 15.94.951 1.421.022 8.553.382 14.26-1.561 28.19 19.784 55.559 43.115 61.879 3.42 1.222 8.506 1.176 12.832 1.302-5.105-1.46-5.765-.773-10.735-2.508-3.587-1.689-4.373-3.617-6.914-5.821l1.006 1.777c-4.982-1.763-2.897-2.182-6.951-3.466l1.074-1.402c-1.615-.123-4.277-2.721-5.004-4.161l-1.767.069c-2.122-2.618-3.253-4.505-3.171-5.967l-.571 1.018c-.647-1.111-7.807-9.822-4.092-7.793-.691-.632-1.608-1.028-2.603-2.835l.756-.865c-1.788-2.299-3.291-5.249-3.177-6.231.954 1.289 1.616 1.529 2.271 1.75-4.515-11.204-4.768-.618-8.188-11.405l.723-.058c-.555-.836-.891-1.743-1.337-2.633l.314-3.138c-3.25-3.759-.91-15.982-.44-22.686.325-2.727 2.713-5.628 4.529-10.178l-1.106-.191c2.115-3.69 12.079-14.82 16.693-14.247 2.235-2.809-.443-.01-.88-.718 4.91-5.082 6.453-3.591 9.767-4.504 3.573-2.121-3.066.827-1.373-.809 6.178-1.578 4.378-3.587 12.438-4.388.851.484-1.973.747-2.682 1.375 5.148-2.518 16.289-1.946 23.525 1.397 8.397 3.925 17.832 15.525 18.204 26.439l.423.113c-.213 4.339.665 9.356-.858 13.965l1.037-2.182c.121 3.316-.971 4.925-1.955 7.773l-1.772.884c-1.45 2.817.14 1.789-.897 4.03-2.265 2.013-6.871 6.298-8.345 6.689-1.077-.024.729-1.269.964-1.759-3.029 2.082-2.431 3.125-7.065 4.39l-.136-.302c-11.432 5.378-27.312-5.28-27.102-19.822-.123.924-.347.692-.601 1.067-.589-7.483 3.456-14.998 10.278-18.065 6.674-3.305 14.497-1.948 19.276 2.507-2.625-3.44-7.851-7.085-14.046-6.744-6.066.096-11.742 3.952-13.636 8.137-3.109 1.957-3.469 7.544-4.824 8.565-1.822 13.394 3.428 19.179 12.309 25.985.718.484.801.757.739 1.005l.011-.02c10.477 3.915 21.301 2.966 30.366-4.302 2.306-1.796 4.825-4.852 5.553-4.895-1.096 1.649.188.793-.655 2.249 2.298-3.707-.999-1.509 2.375-6.401l1.247 1.716c-.463-3.075 3.819-6.812 3.385-11.676.982-1.488 1.097 1.601.053 5.024 1.446-3.798.381-4.408.754-7.542.401 1.053.928 2.173 1.199 3.284-.943-3.67.967-6.181 1.439-8.313-.462-.204-1.451 1.624-1.677-2.711zM51.037 71.758c1.348 1.831 2.417 3.814 4.138 5.245-1.238-2.417-2.157-3.415-3.85-6.683l-.288 1.438zM54.51 70.195c-.713-.789-1.136-1.738-1.608-2.685.453 1.663 1.377 3.091 2.239 4.545l-.631-1.86zM107.01 70.102c2.02-3.797 3.326-7.952 3.875-12.16l-.302.756c-.553 3.922-1.745 7.805-3.573 11.404zM71.214 2.126c-1.917.161-3.825.257-5.709.499l.83.114c1.387-.509 3.408-.279 4.879-.613zM18.227 30.775c1.424-3.207-.395-1.149-.552-2.007.221 2.846-2.19 3.924.552 2.007zM15.389 38.012c-1.775 2.269-.817 2.752-1.004 4.296.642-1.972.76-3.156 1.004-4.296z"/></svg>

src/assets/icons/docker.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.3605 13.4952C30.2797 13.4287 29.5529 12.884 27.9918 12.884C27.5881 12.884 27.1708 12.9239 26.7671 12.9903C26.471 10.9573 24.7618 9.97399 24.6945 9.92086L24.2773 9.68164L24.0081 10.067C23.6717 10.5852 23.4159 11.1699 23.2679 11.7678C22.9853 12.9239 23.1602 14.0134 23.7524 14.9435C23.0391 15.3422 21.8817 15.4352 21.6395 15.4485H2.52846C2.03051 15.4485 1.62675 15.8471 1.62675 16.3388C1.59987 17.9864 1.88247 19.6341 2.46121 21.1887C3.12064 22.8895 4.10313 24.1519 5.36823 24.9226C6.79481 25.7862 9.1231 26.2779 11.7475 26.2779C12.9318 26.2779 14.1161 26.1716 15.287 25.959C16.9155 25.6666 18.4767 25.1086 19.9167 24.298C21.0969 23.6226 22.1603 22.7611 23.066 21.7468C24.5868 20.0593 25.4885 18.1725 26.1479 16.4982H26.4171C28.0725 16.4982 29.0953 15.8471 29.6606 15.289C30.0374 14.9435 30.32 14.5184 30.5219 14.04L30.6431 13.6946L30.3605 13.4952Z" fill="#0091E2"/>
+<path d="M4.30691 14.9044H6.86399C6.98515 14.9044 7.09282 14.8114 7.09282 14.6785V12.4196C7.09282 12.3 6.99859 12.1938 6.86399 12.1938H4.30691C4.1858 12.1938 4.07812 12.2867 4.07812 12.4196V14.6785C4.09157 14.8114 4.1858 14.9044 4.30691 14.9044V14.9044ZM7.83299 14.9044H10.3901C10.5112 14.9044 10.6189 14.8114 10.6189 14.6785V12.4196C10.6189 12.3 10.5247 12.1938 10.3901 12.1938H7.83294C7.71183 12.1938 7.60416 12.2867 7.60416 12.4196V14.6785C7.61765 14.8114 7.71188 14.9044 7.83294 14.9044M11.4263 14.9044H13.9834C14.1046 14.9044 14.2122 14.8114 14.2122 14.6785V12.4196C14.2122 12.3 14.118 12.1938 13.9834 12.1938H11.4263C11.3052 12.1938 11.1975 12.2867 11.1975 12.4196V14.6785C11.1975 14.8114 11.2918 14.9044 11.4263 14.9044ZM14.9659 14.9044H17.523C17.6441 14.9044 17.7518 14.8114 17.7518 14.6785V12.4196C17.7518 12.3 17.6576 12.1938 17.523 12.1938H14.9659C14.8448 12.1938 14.7371 12.2867 14.7371 12.4196V14.6785C14.7371 14.8114 14.8448 14.9044 14.9659 14.9044ZM7.83299 11.6755H10.3901C10.5112 11.6755 10.6189 11.5693 10.6189 11.4497V9.19075C10.6189 9.07114 10.5246 8.96483 10.3901 8.96483H7.83294C7.71183 8.96483 7.60416 9.05785 7.60416 9.19075V11.4497C7.61765 11.5692 7.71193 11.6755 7.83299 11.6755ZM11.4263 11.6755H13.9834C14.1046 11.6755 14.2122 11.5693 14.2122 11.4497V9.19075C14.2122 9.07114 14.118 8.96483 13.9834 8.96483H11.4263C11.3052 8.96483 11.1975 9.05785 11.1975 9.19075V11.4497C11.1975 11.5692 11.2918 11.6755 11.4263 11.6755ZM14.9659 11.6755H17.523C17.6441 11.6755 17.7518 11.5693 17.7518 11.4497V9.19075C17.7518 9.07114 17.6441 8.96483 17.523 8.96483H14.9659C14.8448 8.96483 14.7371 9.05785 14.7371 9.19075V11.4497C14.7371 11.5692 14.8448 11.6755 14.9659 11.6755ZM14.9659 8.43335H17.523C17.6441 8.43335 17.7518 8.34033 17.7518 8.20748V5.94858C17.7518 5.82897 17.6441 5.72266 17.523 5.72266H14.9659C14.8448 5.72266 14.7371 5.81568 14.7371 5.94858V8.20748C14.7371 8.32704 14.8448 8.43335 14.9659 8.43335ZM18.5324 14.9044H21.0895C21.2106 14.9044 21.3183 14.8114 21.3183 14.6785V12.4196C21.3183 12.3 21.2241 12.1938 21.0895 12.1938H18.5324C18.4112 12.1938 18.3036 12.2867 18.3036 12.4196V14.6785C18.3171 14.8114 18.4113 14.9044 18.5324 14.9044" fill="#0091E2"/>
+</svg>

src/assets/icons/fedora.svg

@@ -0,0 +1,35 @@
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.0"
+   width="267"
+   height="267"
+   id="svg2">
+   <defs
+      id="defs5" />
+   <path
+      d="M 266.62575,133.50613 C 266.62575,59.98128 207.02222,0.37583 133.49792,0.37583 C 60.00668,0.37583 0.42639,59.93123 0.37425,133.41225 L 0.37425,236.4333 C 0.4138,253.11763 13.94545,266.62417 30.64027,266.62417 L 133.55192,266.62417 C 207.05167,266.59532 266.62575,207.01142 266.62575,133.50613"
+      id="voice"
+      style="fill:#294172" />
+   <path
+      d="M 77.126289,142.09756 C 77.126289,142.09756 124.97104,142.09756 124.97104,142.09756 C 124.97104,142.09756 124.97104,189.94234 124.97104,189.94234 C 124.97104,216.35263 103.53659,237.78707 77.126289,237.78707 C 50.715979,237.78707 29.28153,216.35263 29.28153,189.94234 C 29.28153,163.53203 50.715979,142.09756 77.126289,142.09756 z"
+      id="in"
+      style="fill:none;stroke:#3c6eb4;stroke-width:29.21" />
+   <use
+      transform="matrix(-1,0,0,-1,249.71151,284.2882)"
+      id="finity"
+      xlink:href="#in" />
+   <path
+      d="M 139.6074,127.52923 L 139.6074,189.87541 C 139.6074,224.37943 111.63203,252.35541 77.12679,252.35541 C 71.89185,252.35541 68.1703,251.7644 63.32444,250.49771 C 56.25849,248.64859 50.48398,242.85518 50.48158,236.1166 C 50.48158,227.97147 56.39394,222.0467 65.23187,222.0467 C 69.43824,222.0467 70.96454,222.85435 77.12679,222.85435 C 95.3184,222.85435 110.07443,208.11916 110.10634,189.92756 L 110.10634,161.27099 C 110.10634,158.70324 108.01971,156.62274 105.44767,156.62274 L 83.78246,156.61846 C 75.71034,156.61846 69.18845,150.18003 69.18845,142.0858 C 69.18414,133.94124 75.77725,127.52923 83.93653,127.52923"
+      id="free"
+      style="fill:#ffffff" />
+   <use
+      transform="matrix(-1,0,0,-1,249.71152,284.28821)"
+      id="dom"
+      xlink:href="#free" />
+   <path
+      d="M 243.65456,243.58425 C 243.65456,243.58425 243.6546,238.05286 243.6546,238.05286 L 241.12607,243.85062 C 241.12607,243.85062 238.66466,238.05286 238.66466,238.05286 L 238.66513,243.58425 L 237.24683,243.58425 L 237.24683,234.84933 L 238.73387,234.84933 C 238.73387,234.84933 241.16784,240.42984 241.16784,240.42984 L 243.56495,234.84933 L 245.07039,234.84933 L 245.07039,243.58425 L 243.65456,243.58425 z M 233.32154,236.31241 L 233.32154,243.58425 L 231.83941,243.58425 L 231.83941,236.31241 L 229.35453,236.31241 L 229.35453,234.84933 L 235.80399,234.84933 L 235.80399,236.31241"
+      id="TM"
+      style="fill:#3c6eb4" />
+</svg>

src/assets/icons/freebsd.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    aria-label="FreeBSD" role="img"
+    viewBox="0 0 512 512">
+    <rect
+        width="512" height="512"
+        rx="15%" fill="#ffffff" />
+    <path
+        d="m420.1 119.5c18 17.9-31.8 96.8-40.2 105.2-8.4 8.4-29.8 0.7-47.7-17.3-18-17.9-25.7-39.3-17.3-47.7 8.4-8.4 87.3-58.2 105.2-40.2M168.4 138.5 168.4 138.5 168.4 138.5c-27.4-15.6-66.4-32.9-78.8-20.4-12.6 12.6 5.4 52.4 21.1 79.9 14-24.3 33.9-44.8 57.7-59.5M392.8 218.6c2.5 8.6 2.1 15.6-2 19.7-9.6 9.6-35.4-0.6-58.7-22.8-1.6-1.5-3.2-3-4.8-4.6-8.4-8.4-15-17.4-19.2-25.6-8.2-14.6-10.2-27.5-4-33.7 3.4-3.4 8.7-4.3 15.3-3.1 4.3-2.7 9.3-5.7 14.9-8.8-22.5-11.7-48.1-18.4-75.2-18.4-90 0-163 73-163 163 0 90 73 163 163 163 90 0 163-73 163-163 0-29.1-7.6-56.3-21-79.9-2.9 5.3-5.7 10.1-8.2 14.2"
+        fill="#ab2b28" />
+</svg>

src/assets/icons/oel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>

src/assets/icons/oracle-linux.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0883 26.0646C4.47919 26.0646 0 21.5959 0 16.0001C0 10.4042 4.47919 5.93555 10.0883 5.93555H21.9117C27.5208 5.93555 32 10.4042 32 16.0001C32 21.5959 27.5208 26.0646 21.9117 26.0646H10.0883ZM21.6091 22.5017C25.2812 22.5017 28.1261 19.5528 28.1261 16.0001C28.1261 12.3366 25.1702 9.49838 21.6091 9.49838H10.3909C6.71879 9.49838 3.8739 12.4473 3.8739 16.0001C3.8739 19.5528 6.82976 22.5017 10.3909 22.5017H21.6091Z" fill="#C74634"/>
+</svg>

src/assets/icons/pdf.svg

@@ -0,0 +1,11 @@
+<svg width="20.000000" height="20.000000" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <clipPath id="clip9113_47347">
+            <rect id="Format files" rx="4.000000" width="20.000000" height="20.000000" fill="white" fill-opacity="0"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#clip9113_47347)">
+        <rect id="Icon" width="20.000000" height="20.000000" fill="#FF5555" fill-opacity="1.000000"/>
+        <path id="Icon" d="M14.33 12.95C13.43 12.89 12.56 12.55 11.86 11.95C10.49 12.25 9.19 12.69 7.89 13.22C6.86 15.06 5.89 16 5.06 16C4.89 16 4.69 15.96 4.56 15.86C4.19 15.69 4 15.33 4 14.96C4 14.66 4.06 13.82 7.23 12.45C7.96 11.12 8.53 9.75 8.99 8.31C8.59 7.51 7.73 5.54 8.33 4.53C8.53 4.16 8.93 3.97 9.36 4C9.69 4 10.03 4.16 10.23 4.43C10.66 5.03 10.63 6.3 10.06 8.17C10.59 9.18 11.29 10.08 12.13 10.85C12.83 10.72 13.53 10.61 14.23 10.61C15.79 10.65 16.03 11.38 15.99 11.82C15.99 12.95 14.89 12.95 14.33 12.95ZM4.99 15.03L5.09 14.99C5.56 14.83 5.93 14.49 6.19 14.06C5.69 14.26 5.29 14.59 4.99 15.03L4.99 15.03ZM9.43 5L9.33 5C9.29 5 9.23 5 9.19 5.03C9.06 5.6 9.16 6.2 9.39 6.74C9.59 6.17 9.59 5.57 9.43 5ZM9.66 9.85L9.63 9.91L9.59 9.88C9.29 10.65 8.96 11.42 8.59 12.15L8.66 12.12L8.66 12.19C9.4 11.92 10.16 11.69 10.93 11.52L10.89 11.48L10.99 11.48C10.49 10.98 10.03 10.41 9.66 9.85ZM14.19 11.62C13.89 11.62 13.63 11.62 13.33 11.68C13.66 11.85 13.99 11.92 14.33 11.95C14.56 11.99 14.79 11.95 14.99 11.89C14.99 11.78 14.86 11.62 14.19 11.62Z" fill="#FFECEF" fill-opacity="1.000000" fill-rule="nonzero"/>
+    </g>
+</svg>

src/assets/icons/redhat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M116.4 97.9c-2.4-.5-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.7-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.4-5.8 1.4s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.3c8.3 24.7 31.7 42.4 59.2 42.4 21.9.3 41.2-11 52.3-28.2"/><path d="M116.4 97.9c-2.4-.6-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.8-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.3-5.8 1.3s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.4c-2.1-6-3.2-12.7-3.2-19.7 0-34.5 27.9-62.4 62.4-62.4s62.4 27.9 62.4 62.4c0 12.5-3.7 24.1-10 33.9M77.7 92.2c.3.3.9 1.4.2 2.7-.4.7-.8 1.2-1.5 1.8-.9.7-2.6 1.5-4.9 0-1.3-.8-1.3-1.1-3.1-.8-1.2.2-1.7-1.1-1.3-2.1.5-1 2.3-1.9 4.6-.5 1 .6 2.6 1.9 4 .7.6-.5.9-.8 1.7-1.7l.1-.1c.2-.1.2 0 .2 0"/><path fill="#E93442" d="M59.1 31.3c-7.2.5-8 1.3-9.3 2.7-1.9 2-4.4-2.6-4.4-2.6-1.5-.3-3.3-2.7-2.3-5 1-2.2 2.8-1.6 3.3-.9.7.8 2.1 2.2 4 2.2 1.9-.1 4.1-.4 7.1-.4 3.1 0 5.2 1.1 5.3 2.1.1.9-.2 1.7-3.7 1.9m7.6-11.9c-.1 0-.2-.1-.2-.2s0-.1.1-.2c1.4-.7 3.5-1.3 5.9-1.6.7-.1 1.4-.1 2.1-.1h.4c4 .1 7.2 1.7 7.2 3.6-.1 1.9-3.3 3.3-7.3 3.2-1.3 0-2.5-.2-3.6-.5-.1 0-.2-.1-.2-.3 0-.1.1-.2.2-.3 2.5-.6 4.2-1.5 4.1-2.4-.2-1.2-3.4-1.8-7.3-1.4-.6.1-1 .2-1.4.2m32.5 28c-.6 2.1-1.5 4.7-5.4 6.7-.6.3-.8-.2-.5-.6 1.5-2.5 1.7-3.1 2.2-4.1.6-1.4.9-3.5-.3-7.8-2.3-8.4-7.2-19.7-10.8-23.4-3.4-3.5-9.7-4.5-15.3-3.1-2.1.5-6.1 2.6-13.6.9-13-2.9-14.9 3.6-15.7 6.4-.8 2.8-2.5 10.9-2.5 10.9-.6 3.3-1.4 9 18.8 12.8 9.4 1.8 9.9 4.2 10.3 6 .7 3.1 1.9 4.9 3.3 5.8 1.3.9 0 1.6-1.5 1.8-4 .4-18.8-3.8-27.6-8.8-7.2-4.4-7.3-8.3-5.6-11.7-10.8-1.2-19 1-20.4 6.1-2.6 9 19.2 24 44.1 31.5 26.1 7.9 53 2.4 56-14 1.4-7.5-4.9-13-15.5-15.4"/></svg>

src/assets/icons/rocky.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1097 21.2763C31.6865 19.6243 32 17.8488 32 16C32 7.16345 24.8365 0 16 0C7.16345 0 0 7.16345 0 16C0 20.3723 1.75383 24.3352 4.59638 27.223L20.8263 10.9931L24.8333 15L31.1097 21.2763ZM28.187 26.3675L20.8263 19.007L9.29963 30.5337C11.3378 31.4748 13.6076 32 16 32C20.8813 32 25.2523 29.814 28.187 26.3675Z" fill="#10B981"/>
+</svg>

src/assets/icons/suselinux.svg

@@ -0,0 +1,57 @@
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="538.58264"
+   height="327.75589"
+   id="svg4472">
+   <defs
+      id="defs4474" />
+   <metadata
+      id="metadata4477">
+      <rdf:RDF>
+         <cc:Work
+            rdf:about="">
+            <dc:format>image/svg+xml</dc:format>
+            <dc:type
+               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+            <dc:title></dc:title>
+         </cc:Work>
+      </rdf:RDF>
+   </metadata>
+   <g
+      transform="translate(-108.64408,-344.69353)"
+      id="layer1">
+      <g
+         transform="matrix(4.5126211,0,0,4.5126211,-1435.2769,-2076.7792)"
+         id="g4497">
+         <path
+            d="m 349.82612,583.65342 c -3.81226,0 -6.90695,2.95238 -6.90695,6.58607 l 0,1.94322 c 0,3.48901 2.59744,5.92308 6.3163,5.92308 l 6.92398,0 c 0.93956,0 1.89286,0.56227 1.89286,1.6401 l 0,1.79213 c 0,1.00915 -0.98443,1.63369 -1.89286,1.63369 l -12.92306,0 0,3.06319 c 0,1.18406 0.99084,2.04395 2.34798,2.04395 l 11.48259,0 c 3.8434,0 6.96519,-2.95879 6.96519,-6.59157 l 0,-2.60714 c 0,-3.54029 -2.28296,-5.56776 -6.26373,-5.56776 l -6.86812,0 c -1.19505,0 -2,-0.61355 -2,-1.53662 l 0,-1.53297 c 0,-0.8837 1.02839,-1.68498 2.15842,-1.68498 l 11.07875,0 0,-3.06685 c 0,-1.27747 -0.75,-2.03754 -2.00641,-2.03754 l -10.30494,0"
+            id="path3111"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 386.4314,589.8036 c -1.2152,0 -2.06135,0.92216 -2.06135,2.2445 l 0,9.02472 c 0,1.15934 -0.99451,2.09889 -2.21337,2.09889 l -6.17582,0 c -1.21795,0 -2.21245,-0.93955 -2.21245,-2.09889 l 0,-9.02472 c 0,-1.28022 -1.38919,-2.2445 -2.6282,-2.2445 l -1.23627,0 c -1.2152,0 -2.06593,0.92216 -2.06593,2.2445 l 0,9.38644 c 0,4.44138 2.87362,6.99724 7.87362,6.99724 l 0.80861,0 c 2.33424,0 4.26556,-0.96703 5.67398,-1.67582 0.81502,-0.40385 1.46154,-0.72802 1.89286,-0.72802 0.15842,0 0.54212,0.0311 0.74542,0.32417 l 1.40568,1.92674 1.92673,0 c 1.5641,0 2.13095,-1.25274 2.13095,-2.09523 l 0,-14.13552 c 0,-1.28022 -1.38919,-2.2445 -2.6282,-2.2445 l -1.23626,0"
+            id="path3113"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 401.14292,583.65342 c -3.80585,0 -6.90658,2.95238 -6.90658,6.58607 l 0,1.94322 c 0,3.48901 2.59706,5.92308 6.31959,5.92308 l 6.92398,0 c 0.93956,0 1.89286,0.56227 1.89286,1.6401 l 0,1.79213 c 0,1.00915 -0.9881,1.63369 -1.89286,1.63369 l -12.92306,0 0,3.06319 c 0,1.18406 0.98718,2.04395 2.3489,2.04395 l 11.48167,0 c 3.83974,0 6.96245,-2.95879 6.96245,-6.59157 l 0,-2.60714 c 0,-3.54029 -2.28297,-5.56776 -6.26465,-5.56776 l -6.86904,0 c -1.19414,0 -1.99542,-0.61355 -1.99542,-1.53662 l 0,-1.53297 c 0,-0.8837 1.02564,-1.68498 2.15476,-1.68498 l 11.36538,0 0,-3.06685 c 0,-1.20146 -0.93956,-2.03754 -2.2903,-2.03754 l -10.30768,0"
+            id="path3115"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 426.1896,583.65342 c -3.80494,0 -6.90933,2.95238 -6.90933,6.58607 l 0,11.44779 c 0,3.63278 3.10439,6.59157 6.90933,6.59157 l 9.65933,0 c 1.36081,0 2.34524,-0.85897 2.34524,-2.04395 l 0,-3.06319 -10.98534,0 c -1.17399,0 -2,-0.77747 -2,-1.8956 0,0 0,-2.76282 0,-3.11813 0.39103,0 13.16482,0 13.16482,0 1.94414,0 3.52564,-1.50915 3.52564,-3.37087 l 0,-4.54762 c 0,-3.63369 -3.09798,-6.58607 -6.90658,-6.58607 l -8.80311,0 0,0 z m -0.98077,6.94413 c 0,-1.01831 0.87821,-1.84066 1.9478,-1.84066 l 6.86538,0 c 1.07418,0 1.9478,0.82235 1.9478,1.84066 0,0 0,2.56319 0,2.91483 -0.37912,0 -10.38094,0 -10.76098,0 0,-0.35164 0,-2.91483 0,-2.91483"
+            id="path3117"
+            style="fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+         <path
+            d="m 450.07328,554.10308 0,0 c -2.26557,-0.0833 -4.04304,-1.99267 -3.96795,-4.2619 0.0348,-1.09798 0.50458,-2.11355 1.3022,-2.86263 0.80128,-0.75 1.84706,-1.14011 2.94596,-1.0989 2.26832,0.0797 4.0467,1.98626 3.9707,4.25823 -0.0339,1.09524 -0.49726,2.10989 -1.29762,2.86264 -0.80495,0.74725 -1.85165,1.13736 -2.95329,1.10256 l 0,0 z m 0.95329,-3.72618 c 1.00824,0 1.82692,-0.54579 1.82692,-1.21612 0,-0.67308 -0.81868,-1.21886 -1.82692,-1.21886 -1.00824,0 -1.82326,0.54578 -1.82326,1.21886 0,0.67033 0.81502,1.21612 1.82326,1.21612"
+            id="path3119"
+            style="fill:#73ba25;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+         <path
+            d="m 402.70336,578.25599 0.14927,-0.0137 0.0238,-0.17583 c -0.0376,-0.13827 -0.12729,-0.26282 -0.26557,-1.97527 -0.11721,-1.51648 -0.35531,-5.67399 1.73718,-7.73625 0.81135,-0.80403 2.05036,-1.51923 3.02838,-1.75092 4.01007,-0.9771 9.21428,-0.30036 13.65842,4.83882 2.29303,2.65476 3.41849,3.86722 3.98168,4.40934 l 0.19322,0.17949 0.23535,0.16941 c 0.18315,0.10348 7.63827,3.53663 7.63827,3.53663 l 0.15201,-0.0385 0.004,-0.16209 c -0.0485,-0.0549 -4.72435,-6.09523 -3.8956,-11.07142 0.65568,-3.96428 3.81227,-3.60805 8.17399,-3.1108 1.42674,0.16209 3.04944,0.3489 4.7271,0.38645 4.68589,0.0275 9.73534,-0.83242 12.84706,-2.19322 2.01281,-0.88004 3.29761,-1.46063 4.10256,-2.19231 0.28937,-0.23901 0.4423,-0.63187 0.59706,-1.0467 l 0.10715,-0.27931 c 0.13095,-0.33516 0.32143,-1.05311 0.40384,-1.44322 0.0385,-0.17307 0.0559,-0.35989 -0.0659,-0.45238 l -0.43132,0.0797 c -1.36355,0.81868 -4.7793,2.38004 -7.9771,2.44139 -3.96062,0.0824 -11.94504,-3.98443 -12.77746,-4.41666 l -0.0797,-0.0925 c -0.20055,-0.47711 -1.39926,-3.31227 -1.65109,-3.90934 5.74633,3.78388 10.51189,5.87729 14.16207,6.20146 4.06135,0.36264 7.22801,-1.85439 8.58149,-2.80036 0.26557,-0.18041 0.46703,-0.32509 0.54945,-0.35623 l 0.0861,-0.14102 c -0.22445,-1.42674 -2.34807,-8.33333 -3.95063,-9.99084 -0.44597,-0.45604 -0.80128,-0.89835 -1.52015,-1.31959 -5.80494,-3.3837 -19.58697,-5.42857 -20.23258,-5.52197 l -0.1108,0.0311 -0.0412,0.0971 c 0,0 -0.0522,2.85897 -0.0586,3.17765 -1.40842,-0.46978 -11.64101,-3.77472 -21.23441,-4.10952 -8.13278,-0.28626 -19.24266,-0.67362 -34.94136,8.9749 l -0.46245,0.2903 c -7.38369,4.60713 -12.47984,10.28387 -15.14651,16.88734 -0.83516,2.07509 -1.96153,6.7619 -0.8489,11.17124 0.48352,1.93131 1.37821,3.86446 2.587,5.59798 2.72435,3.91574 7.30036,6.51647 12.22801,6.95512 6.9542,0.62179 12.22526,-2.50366 14.0998,-8.35347 1.28754,-4.03755 0,-9.9597 -4.93864,-12.98076 -4.01648,-2.46245 -8.33974,-1.90018 -10.8434,-0.24542 -2.1749,1.44322 -3.40842,3.68131 -3.38369,6.14377 0.0476,4.3608 3.8086,6.68222 6.50915,6.68497 0.78754,0 1.57509,-0.13461 2.46611,-0.42399 0.31411,-0.0971 0.61447,-0.21429 0.94231,-0.4185 l 0.10073,-0.065 0.065,-0.0385 -0.0238,0.011 c 0.61814,-0.41483 0.99085,-1.0989 0.99085,-1.83058 0,-0.20055 -0.0311,-0.40385 -0.0861,-0.60806 -0.31777,-1.10165 -1.40843,-1.77106 -2.54121,-1.5641 l -0.15201,0.0311 -0.20696,0.0687 -0.30037,0.10073 c -0.62179,0.15568 -1.09157,0.16575 -1.18864,0.16941 -0.31685,-0.0211 -1.87454,-0.48718 -1.87454,-2.19322 l 0,-0.0202 c 0.004,-0.62545 0.25549,-1.0641 0.39377,-1.30219 0.47985,-0.76008 1.80586,-1.5055 3.59798,-1.34707 2.3489,0.19963 4.0412,1.40567 5.163,3.67765 1.04304,2.11355 0.77014,4.71062 -0.70147,6.61721 -1.46062,1.88828 -4.06043,2.68956 -7.52105,2.31318 -3.48809,-0.38278 -6.43681,-2.3901 -8.0879,-5.51464 -1.6163,-3.05311 -1.70605,-6.6749 -0.23169,-9.45878 3.53296,-6.66483 10.20146,-6.59615 13.85805,-5.96337 5.41483,0.93498 10.32966,5.26923 12.51555,11.03296 0.3489,0.91849 0.52747,1.64743 0.68315,2.31043 l 0.23535,0.99817 6.11538,2.98718 0.0824,0.0559 0,0 z m 43.47157,-32.5311 0,0 c -1.15385,1.07051 -1.81319,2.53113 -1.86813,4.10622 -0.10715,3.24633 2.44139,5.98076 5.68772,6.10164 1.5815,0.0522 3.07967,-0.50366 4.22985,-1.5815 1.15018,-1.07417 1.81044,-2.53113 1.86813,-4.10256 0.11081,-3.25 -2.43864,-5.98809 -5.69047,-6.1053 -1.57509,-0.0513 -3.07784,0.50366 -4.2271,1.5815"
+            id="path3121"
+            style="fill:#73ba25;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+      </g>
+   </g>
+</svg>

src/assets/icons/ubuntu.svg

@@ -0,0 +1,35 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42894)">
+<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9988 9.7607C12.5525 9.7607 9.75875 12.5544 9.75875 16.0007C9.75875 19.447 12.5525 22.2407 15.9988 22.2407C19.445 22.2407 22.2387 19.447 22.2387 16.0007C22.2387 12.5544 19.445 9.7607 15.9988 9.7607ZM6.71875 16.0007C6.71875 10.8755 10.8735 6.7207 15.9988 6.7207C21.124 6.7207 25.2788 10.8755 25.2788 16.0007C25.2788 21.1259 21.124 25.2807 15.9988 25.2807C10.8735 25.2807 6.71875 21.1259 6.71875 16.0007Z" fill="white"/>
+<g clip-path="url(#clip1_1668_42894)">
+<path d="M5.12113 19.0001C6.778 19.0001 8.12117 17.6569 8.12117 16C8.12117 14.3432 6.778 13 5.12113 13C3.46426 13 2.12109 14.3432 2.12109 16C2.12109 17.6569 3.46426 19.0001 5.12113 19.0001Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6024 16.575H22.0469V15.4238H25.6024V16.575Z" fill="#F47421"/>
+<path d="M5.12036 18.1352C6.30003 18.1352 7.25634 17.1789 7.25634 15.9993C7.25634 14.8196 6.30003 13.8633 5.12036 13.8633C3.94069 13.8633 2.98438 14.8196 2.98438 15.9993C2.98438 17.1789 3.94069 18.1352 5.12036 18.1352Z" fill="white"/>
+</g>
+<g clip-path="url(#clip2_1668_42894)">
+<path d="M18.8428 5.07854C18.0144 6.51344 18.506 8.34823 19.9409 9.17667C21.3758 10.0051 23.2106 9.51347 24.039 8.07858C24.8675 6.64368 24.3759 4.80889 22.941 3.98045C21.5061 3.15201 19.6713 3.64365 18.8428 5.07854Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7018 24.027L12.4796 20.9478L13.4766 21.5234L11.6988 24.6026L10.7018 24.027Z" fill="#F47421"/>
+<path d="M19.5918 5.51071C19.0019 6.53233 19.352 7.83868 20.3736 8.42851C21.3952 9.01835 22.7015 8.66831 23.2914 7.64669C23.8812 6.62507 23.5312 5.31872 22.5096 4.72888C21.4879 4.13905 20.1816 4.48908 19.5918 5.51071Z" fill="white"/>
+</g>
+<g clip-path="url(#clip3_1668_42894)">
+<path d="M24.0399 23.9214C23.2115 22.4865 21.3767 21.9949 19.9418 22.8233C18.5069 23.6517 18.0153 25.4865 18.8437 26.9214C19.6722 28.3563 21.507 28.848 22.9419 28.0195C24.3768 27.1911 24.8684 25.3563 24.0399 23.9214Z" fill="#F47421"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6997 7.39792L13.4775 10.4771L12.4805 11.0527L10.7027 7.97353L11.6997 7.39792Z" fill="#F47421"/>
+<path d="M23.2918 24.354C22.702 23.3324 21.3956 22.9824 20.374 23.5722C19.3524 24.1621 19.0023 25.4684 19.5922 26.49C20.182 27.5117 21.4883 27.8617 22.51 27.2719C23.5316 26.682 23.8816 25.3757 23.2918 24.354Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1668_42894">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(2.12109 13)"/>
+</clipPath>
+<clipPath id="clip2_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(25.5391 5.48047) rotate(120)"/>
+</clipPath>
+<clipPath id="clip3_1668_42894">
+<rect width="23.48" height="6.00007" fill="white" transform="translate(20.3438 29.5195) rotate(-120)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/vyos.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65" fill="none">
+<path d="M46.72 8.18H56.32V40.18H64V0.5H46.72V8.18Z" fill="url(#paint0_linear_20201_573)"/>
+<path d="M39.68 0.5H0V17.78H7.68V8.18H39.68V0.5Z" fill="url(#paint1_linear_20201_573)"/>
+<path d="M7.68 24.82H0V64.5H17.28V56.82H7.68V24.82Z" fill="url(#paint2_linear_20201_573)"/>
+<path d="M24.32 56.82V64.5H64V47.22H56.32V56.82H24.32Z" fill="url(#paint3_linear_20201_573)"/>
+<path d="M14.08 14.58H21.76L35.84 50.42H28.16L14.08 14.58Z" fill="url(#paint4_linear_20201_573)"/>
+<path d="M49.92 14.58H42.24L28.16 50.42H35.84L49.92 14.58Z" fill="url(#paint5_linear_20201_573)"/>
+<defs>
+<linearGradient id="paint0_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint1_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint2_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint3_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint4_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+<linearGradient id="paint5_linear_20201_573" x1="0" y1="0.5" x2="64" y2="64.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBF12"/>
+<stop offset="1" stop-color="#FF9000"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/icons/windows.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1668_42920)">
+<path d="M0 4.5284L13.0252 2.75465L13.0308 15.3184L0.0118275 15.3925L0 4.52852V4.5284ZM13.019 16.7659L13.0289 29.3406L0.0100845 27.5507L0.0093375 16.6816L13.019 16.7659ZM14.5979 2.52246L31.868 0.00195312V15.1586L14.5979 15.2955V2.52246ZM31.872 16.8842L31.8679 31.9724L14.5977 29.535L14.5736 16.8559L31.872 16.8842Z" fill="#00ADEF"/>
+</g>
+<defs>
+<clipPath id="clip0_1668_42920">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/debian.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#A80030" d="M76.77 68.974c.74-.577 1.411-1.161 2.008-1.729-1.667.408-3.363.417-5.073.261-2.049.028.388 1.056 3.065 1.468zM84.71 64.762c1.222-1.685 2.111-3.53 2.425-5.438-.274 1.359-1.011 2.534-1.707 3.773-3.833 2.414-.36-1.433-.002-2.895-4.12 5.188-.566 3.111-.716 4.56zM88.773 54.192c.248-3.693-.727-2.525-1.055-1.117.383.199.685 2.603 1.055 1.117zM65.93 3.722c1.094.196 2.365.347 2.186.608 1.197-.262 1.469-.504-2.186-.608zM68.063 4.426l.053-.095-.773.159zM65.27 80.73c-2.951-1.381-5.653-3.468-7.874-6.021 1.178 1.726 2.451 3.403 4.096 4.721-2.783-.942-6.499-6.742-7.584-6.978 4.796 8.587 19.457 15.059 27.135 11.848-3.553.13-8.065.073-12.057-1.402-1.536-.791-3.573-2.355-3.589-2.869-.077.201-.206.4-.127.701zM65.426 79.933l-.03.097.03-.097zM109.475 46.345c.033-1.882.523-.986.713-1.449-.37-.213-1.339-1.656-1.93-4.424.428-.651 1.143 1.686 1.726 1.781-.375-2.201-1.02-3.878-1.045-5.568-1.7-3.553-.602.474-1.981-1.525-1.81-5.646 1.502-1.311 1.725-3.875 2.743 3.974 4.308 10.134 5.026 12.685-.549-3.11-1.433-6.123-2.514-9.04.833.352-1.342-6.399 1.083-1.929-2.591-9.531-11.085-18.436-18.901-22.614.956.875 2.164 1.975 1.73 2.146-3.887-2.314-3.204-2.495-3.76-3.472-3.167-1.288-3.375.103-5.472.002-5.968-3.165-7.118-2.829-12.611-4.813l.251 1.168c-3.955-1.317-4.607.5-8.88.004-.261-.203 1.369-.735 2.71-.93-3.823.504-3.644-.753-7.384.139.921-.646 1.896-1.075 2.879-1.625-3.116.189-7.441 1.814-6.106.336-5.084 2.271-14.115 5.456-19.183 10.208l-.159-1.065c-2.322 2.787-10.126 8.325-10.747 11.935l-.621.145c-1.209 2.046-1.991 4.365-2.949 6.47-1.581 2.693-2.317 1.036-2.091 1.459-3.109 6.302-4.653 11.598-5.986 15.94.951 1.421.022 8.553.382 14.26-1.561 28.19 19.784 55.559 43.115 61.879 3.42 1.222 8.506 1.176 12.832 1.302-5.105-1.46-5.765-.773-10.735-2.508-3.587-1.689-4.373-3.617-6.914-5.821l1.006 1.777c-4.982-1.763-2.897-2.182-6.951-3.466l1.074-1.402c-1.615-.123-4.277-2.721-5.004-4.161l-1.767.069c-2.122-2.618-3.253-4.505-3.171-5.967l-.571 1.018c-.647-1.111-7.807-9.822-4.092-7.793-.691-.632-1.608-1.028-2.603-2.835l.756-.865c-1.788-2.299-3.291-5.249-3.177-6.231.954 1.289 1.616 1.529 2.271 1.75-4.515-11.204-4.768-.618-8.188-11.405l.723-.058c-.555-.836-.891-1.743-1.337-2.633l.314-3.138c-3.25-3.759-.91-15.982-.44-22.686.325-2.727 2.713-5.628 4.529-10.178l-1.106-.191c2.115-3.69 12.079-14.82 16.693-14.247 2.235-2.809-.443-.01-.88-.718 4.91-5.082 6.453-3.591 9.767-4.504 3.573-2.121-3.066.827-1.373-.809 6.178-1.578 4.378-3.587 12.438-4.388.851.484-1.973.747-2.682 1.375 5.148-2.518 16.289-1.946 23.525 1.397 8.397 3.925 17.832 15.525 18.204 26.439l.423.113c-.213 4.339.665 9.356-.858 13.965l1.037-2.182c.121 3.316-.971 4.925-1.955 7.773l-1.772.884c-1.45 2.817.14 1.789-.897 4.03-2.265 2.013-6.871 6.298-8.345 6.689-1.077-.024.729-1.269.964-1.759-3.029 2.082-2.431 3.125-7.065 4.39l-.136-.302c-11.432 5.378-27.312-5.28-27.102-19.822-.123.924-.347.692-.601 1.067-.589-7.483 3.456-14.998 10.278-18.065 6.674-3.305 14.497-1.948 19.276 2.507-2.625-3.44-7.851-7.085-14.046-6.744-6.066.096-11.742 3.952-13.636 8.137-3.109 1.957-3.469 7.544-4.824 8.565-1.822 13.394 3.428 19.179 12.309 25.985.718.484.801.757.739 1.005l.011-.02c10.477 3.915 21.301 2.966 30.366-4.302 2.306-1.796 4.825-4.852 5.553-4.895-1.096 1.649.188.793-.655 2.249 2.298-3.707-.999-1.509 2.375-6.401l1.247 1.716c-.463-3.075 3.819-6.812 3.385-11.676.982-1.488 1.097 1.601.053 5.024 1.446-3.798.381-4.408.754-7.542.401 1.053.928 2.173 1.199 3.284-.943-3.67.967-6.181 1.439-8.313-.462-.204-1.451 1.624-1.677-2.711zM51.037 71.758c1.348 1.831 2.417 3.814 4.138 5.245-1.238-2.417-2.157-3.415-3.85-6.683l-.288 1.438zM54.51 70.195c-.713-.789-1.136-1.738-1.608-2.685.453 1.663 1.377 3.091 2.239 4.545l-.631-1.86zM107.01 70.102c2.02-3.797 3.326-7.952 3.875-12.16l-.302.756c-.553 3.922-1.745 7.805-3.573 11.404zM71.214 2.126c-1.917.161-3.825.257-5.709.499l.83.114c1.387-.509 3.408-.279 4.879-.613zM18.227 30.775c1.424-3.207-.395-1.149-.552-2.007.221 2.846-2.19 3.924.552 2.007zM15.389 38.012c-1.775 2.269-.817 2.752-1.004 4.296.642-1.972.76-3.156 1.004-4.296z"/></svg>

src/assets/images/hyper-v.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="39.6875mm"
+   height="7.9375mm"
+   viewBox="0 0 39.6875 7.9375"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" /><defs
+     id="defs2" /><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.10224539,-0.10224913)"><path
+       style="fill:none;stroke:none;stroke-width:0.0762313;stroke-opacity:1;image-rendering:auto"
+       d="M 0.1022454,4.0709991 V 0.10224913 H 19.945996 39.789748 v 3.96874997 3.96875 H 19.945996 0.1022454 Z"
+       id="path931" /><path
+       fill="#00adef"
+       d="m 1.1760486,2.0837648 2.4419923,-0.332547 0.00105,2.355489 -2.4408256,0.01389 -0.00222,-2.036806 z m 2.4408255,2.294311 0.00187,2.357543 -2.4408028,-0.335582 -1.748e-4,-2.037763 2.4390514,0.0158 z m 0.2960179,-2.67039 3.2378459,-0.472549 v 2.841599 l -3.2378459,0.02568 v -2.394703 z m 3.2385919,2.692565 -7.89e-4,2.828785 -3.2378454,-0.456981 -0.00452,-2.377103 z"
+       id="path5503"
+       style="stroke-width:0.0233416" /><text
+       xml:space="preserve"
+       style="font-size:5.39239px;fill:none;stroke:#000000;stroke-width:0.449364;stroke-opacity:1"
+       x="8.1005516"
+       y="5.5274873"
+       id="text5929"><tspan
+         sodipodi:role="line"
+         id="tspan5927"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Microsoft Sans Serif';-inkscape-font-specification:'Microsoft Sans Serif';fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.449364"
+         x="8.1005516"
+         y="5.5274873">Hyper-v</tspan></text></g></svg>

src/assets/images/matrix.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#040404">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>

src/assets/images/oel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>

src/assets/images/openstack.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="39.6875mm"
+   height="7.9375mm"
+   viewBox="0 0 39.6875 7.9375"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" /><defs
+     id="defs2" /><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.10224539,-0.10224913)"><g
+       id="g57"
+       transform="matrix(0.06277301,0,0,0.06277301,1.1753106,1.2596941)"
+       inkscape:export-filename="g57.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"><path
+         d="m 21.630509,63.867877 v 3.42529 c 0,2.657552 2.153602,4.811154 4.811154,4.811154 v 0 h 42.890929 c 2.657553,0 4.811155,-2.153602 4.811155,-4.811154 v 0 -3.42529 H 95.770318 V 84.83695 c 0,4.893834 -4.004046,8.89788 -8.897879,8.89788 v 0 H 8.8978795 C 4.0040458,93.73483 0,89.730784 0,84.83695 v 0 -20.969073 z M 21.626572,36.05216 V 57.678732 H 0 V 36.05216 Z m 74.143746,0 V 57.678732 H 74.143747 V 36.05216 Z M 86.872439,0 c 4.893833,0 8.897879,4.0040458 8.897879,8.9018166 v 0 20.9651364 H 74.143747 v -3.42529 c 0,-2.657552 -2.153602,-4.811154 -4.811155,-4.811154 v 0 H 26.437726 c -2.657552,0 -4.811154,2.153602 -4.811154,4.811154 v 0 3.42529 H 0 V 8.8978795 C 0,4.0040458 4.0040458,0 8.8978795,0 v 0 z"
+         fill="#da1a32"
+         id="path53" /><path
+         d="m 192.57216,21.610823 c 9.7168,0 18.88634,8.157702 18.88634,24.571534 v 0 1.283499 c 0,16.319341 -9.07505,24.567597 -18.88634,24.567597 -7.05925,0 -11.2759,-3.944989 -14.20905,-8.252193 v 0 21.177741 H 168.00456 V 22.524234 h 10.35855 v 7.795487 c 3.02371,-4.673355 7.24036,-8.708898 14.20905,-8.708898 z m 257.45975,0 c 6.96869,0 11.5515,2.566999 15.58704,6.602542 v 0 l -5.77575,7.610443 c -2.567,-2.657553 -5.4096,-4.8584 -9.81129,-4.8584 -6.78759,0 -11.73654,6.508051 -11.73654,15.677591 v 0 0.456706 c 0,9.441201 4.94895,15.768145 12.0082,15.768145 4.21665,0 7.05925,-2.106357 9.90185,-4.948954 v 0 l 5.5907,6.874203 c -3.8505,4.307203 -8.7089,7.330908 -16.13036,7.334845 -12.64995,0 -21.81949,-10.177442 -21.81949,-24.662088 v 0 -0.917347 c 0,-14.484646 9.4412,-24.937686 22.18564,-24.937686 z m -212.20261,0 c 13.20114,0 20.16984,11.004236 20.16984,25.579435 v 0 l -2.2e-4,0.298827 c -10e-4,0.734465 -0.0119,2.006748 -0.0903,3.276074 v 0 h -30.43783 c 0.91341,8.157702 5.95685,12.559396 12.28379,12.559396 4.58281,0 7.9766,-2.015803 11.18535,-5.133998 v 0 l 5.40959,6.417497 c -4.40169,4.677293 -9.81129,7.515953 -17.05558,7.515953 -12.46884,0 -22.18564,-9.531755 -22.18564,-24.752641 v 0 -0.732304 c 0,-14.575199 8.80339,-25.028239 20.72104,-25.028239 z m -97.9633,-0.0039 c 12.835,0 22.2762,10.45304 22.2762,24.847132 v 0 0.826794 c 0,14.303538 -9.53569,24.843195 -22.4573,24.839259 -12.835,0 -22.28014,-10.358551 -22.28014,-24.752642 v 0 -0.822857 c 0,-14.303539 9.53176,-24.937686 22.46124,-24.937686 z m 188.84766,0.185045 c 5.40959,0 11.18534,1.925249 15.76814,5.224551 v 0 l -4.4017,7.610443 c -3.66545,-2.472508 -7.70099,-4.307204 -11.55149,-4.307204 -3.8505,0 -6.1419,2.110294 -6.1419,4.767846 v 0 0.185045 c 0,3.208748 3.8505,4.858399 9.53569,7.425398 7.51595,3.393793 13.20115,6.874203 13.20115,14.484646 v 0 0.09055 c 0,9.535693 -7.24036,14.760244 -16.591,14.764181 -5.77575,0 -12.46491,-2.110293 -18.05955,-6.783649 v 0 l 4.8584,-7.425398 c 4.4017,3.570963 9.07899,5.681256 13.38619,5.681256 4.3072,0 6.78365,-2.2914 6.78365,-5.319042 v 0 -0.09055 c 0,-3.484347 -3.75994,-5.043445 -9.53569,-7.51989 -7.24429,-3.118195 -13.29564,-6.417497 -13.29564,-14.394092 v 0 -0.185044 c 0,-8.708898 6.96869,-14.209047 16.04375,-14.209047 z m 73.88389,0.185044 c 6.32694,0 11.18534,1.740205 14.30354,4.948953 3.20875,3.208749 4.8584,7.976595 4.8584,14.031878 v 0 30.162236 H 411.58205 V 65.15925 c -2.8426,4.12216 -7.1498,6.874203 -13.47675,6.874203 -8.06714,0 -14.85079,-5.405659 -14.85079,-14.850797 v 0 -0.456705 c 0,-10.449103 6.96869,-15.583101 17.23668,-15.583101 4.58281,0 7.88605,0.822857 11.18535,1.925249 v 0 -2.01974 c 0,-6.508051 -3.8505,-9.901844 -10.45304,-9.901844 -4.67729,0 -8.52779,1.468544 -11.73654,2.933151 v 0 l -2.93315,-8.252193 c 4.67335,-2.291401 9.53569,-3.850498 16.04374,-3.850498 z M 366.38397,9.4097045 V 22.520297 h 10.90975 v 8.893942 h -10.90975 v 25.855033 c 0,3.759945 1.92525,5.319043 5.22455,5.319043 2.01974,0 3.85444,-0.456706 5.59464,-1.374054 v 0 8.527791 c -2.38195,1.2835 -5.134,2.110294 -8.62228,2.102475 -7.1498,0 -12.5594,-3.02376 -12.5594,-12.468898 v 0 -27.96139 h -3.61427 l -1.70083,-8.893942 h 5.31904 V 9.4097045 Z M 288.42122,21.610823 c 9.35065,0 14.94135,6.598605 14.94135,16.961091 v 0 32.548128 H 293.00402 V 41.505065 c 0,-6.783649 -3.20875,-10.543594 -8.7089,-10.543594 -5.40959,0 -9.16954,4.035543 -9.16954,10.728638 v 0 29.429933 H 264.76704 V 22.528171 h 10.35854 v 7.149801 c 2.75205,-4.307204 6.6931,-8.067149 13.29564,-8.067149 z m 209.08442,24.288062 14.49252,25.21722 H 499.98602 L 490.23379,53.714058 Z M 482.65878,4.9253307 V 43.887019 l 16.59494,-21.362785 h 12.28774 L 482.65878,57.092102 V 71.116105 H 472.30023 V 4.9253307 Z M 402.7826,48.19816 c -5.95686,0 -9.44121,3.023704 -9.44121,8.157702 v 0 0.185044 c 0,4.8584 3.38986,7.610443 7.88211,7.700997 5.96079,0.09055 10.54359,-3.944989 10.54359,-9.445139 v 0 -4.858399 C 409.38514,48.930463 406.26694,48.19816 402.7826,48.19816 Z M 139.67702,30.776427 c -7.24035,0 -11.91764,6.689158 -11.91764,15.768145 v 0 0.551196 c 0,9.078986 5.04344,15.953189 12.10269,15.949253 7.24035,0 11.91764,-6.78365 11.91764,-15.8587 v 0 -0.551196 c 0,-9.075049 -5.04344,-15.858698 -12.10269,-15.858698 z m 50.05254,0.0039 c -6.23245,0 -11.55149,6.047408 -11.55149,15.5831 v 0 0.917348 c 0,9.535692 5.31904,15.587038 11.55149,15.590975 6.32695,0 11.2759,-5.866301 11.2759,-15.587038 v 0 -0.826794 c 0,-9.716799 -5.03951,-15.677591 -11.2759,-15.677591 z m 48.09974,-0.460643 c -5.6852,0 -9.7168,5.043444 -10.44911,13.2917 v 0 h 20.53599 c -0.55119,-7.700997 -4.03554,-13.2917 -10.08688,-13.2917 z"
+         fill="#4e4540"
+         id="path55" /></g><path
+       style="fill:none;stroke:none;stroke-width:0.0762313;stroke-opacity:1;image-rendering:auto"
+       d="M 0.1022454,4.0709991 V 0.10224913 H 19.945996 39.789748 v 3.96874997 3.96875 H 19.945996 0.1022454 Z"
+       id="path931" /></g></svg>

src/assets/images/redhat.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#fff" d="M116.4 97.9c-2.4-.5-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.7-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.4-5.8 1.4s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.3c8.3 24.7 31.7 42.4 59.2 42.4 21.9.3 41.2-11 52.3-28.2"/><path d="M116.4 97.9c-2.4-.6-5-.9-7.5-.9-4.4 0-8.4.8-11.4 2-.3.2-.6.5-.6.9 0 .1 0 .3.1.4.3 1-.2 2.1-3.1 2.8-4.3.9-6.9 5.3-8.5 6.8-1.8 1.7-6.9 2.8-6.1 1.7.6-.8 2.9-3.3 4.3-6 1.3-2.4 2.4-3.1 3.9-5.4.5-.7 2.2-3 2.7-4.9.6-1.8.4-4.1.6-5.1.3-1.4 1.6-4.3 1.7-6 .1-.9-3.9 1.3-5.8 1.3s-3.7-1.1-5.4-1.2c-2.1-.1-3.4 1.6-5.3 1.3-1.1-.2-2-1.1-3.9-1.2-2.7-.1-6 1.5-12.2 1.3-6.1-.2-11.7-7.7-12.5-8.9-.9-1.4-2-1.4-3.2-.3-1.2 1.1-2.7.2-3.1-.5-.8-1.4-2.9-5.5-6.2-6.3-4.6-1.2-6.9 2.5-6.6 5.5.3 3 2.2 3.8 3.1 5.4.9 1.6 1.4 2.6 3 3.3 1.2.5 1.6 1.2 1.3 2.2-.3.9-1.6 1.1-2.4 1.1-1.7.1-3-.4-3.8-1-1-.7-1.9-1.6-2.8-3.1-1-1.7-2.7-2.5-4.6-2.5-.9 0-1.8.2-2.5.6-3 1.6-6.6 2.5-10.4 2.5h-4.4c-2.1-6-3.2-12.7-3.2-19.7 0-34.5 27.9-62.4 62.4-62.4s62.4 27.9 62.4 62.4c0 12.5-3.7 24.1-10 33.9M77.7 92.2c.3.3.9 1.4.2 2.7-.4.7-.8 1.2-1.5 1.8-.9.7-2.6 1.5-4.9 0-1.3-.8-1.3-1.1-3.1-.8-1.2.2-1.7-1.1-1.3-2.1.5-1 2.3-1.9 4.6-.5 1 .6 2.6 1.9 4 .7.6-.5.9-.8 1.7-1.7l.1-.1c.2-.1.2 0 .2 0"/><path fill="#E93442" d="M59.1 31.3c-7.2.5-8 1.3-9.3 2.7-1.9 2-4.4-2.6-4.4-2.6-1.5-.3-3.3-2.7-2.3-5 1-2.2 2.8-1.6 3.3-.9.7.8 2.1 2.2 4 2.2 1.9-.1 4.1-.4 7.1-.4 3.1 0 5.2 1.1 5.3 2.1.1.9-.2 1.7-3.7 1.9m7.6-11.9c-.1 0-.2-.1-.2-.2s0-.1.1-.2c1.4-.7 3.5-1.3 5.9-1.6.7-.1 1.4-.1 2.1-.1h.4c4 .1 7.2 1.7 7.2 3.6-.1 1.9-3.3 3.3-7.3 3.2-1.3 0-2.5-.2-3.6-.5-.1 0-.2-.1-.2-.3 0-.1.1-.2.2-.3 2.5-.6 4.2-1.5 4.1-2.4-.2-1.2-3.4-1.8-7.3-1.4-.6.1-1 .2-1.4.2m32.5 28c-.6 2.1-1.5 4.7-5.4 6.7-.6.3-.8-.2-.5-.6 1.5-2.5 1.7-3.1 2.2-4.1.6-1.4.9-3.5-.3-7.8-2.3-8.4-7.2-19.7-10.8-23.4-3.4-3.5-9.7-4.5-15.3-3.1-2.1.5-6.1 2.6-13.6.9-13-2.9-14.9 3.6-15.7 6.4-.8 2.8-2.5 10.9-2.5 10.9-.6 3.3-1.4 9 18.8 12.8 9.4 1.8 9.9 4.2 10.3 6 .7 3.1 1.9 4.9 3.3 5.8 1.3.9 0 1.6-1.5 1.8-4 .4-18.8-3.8-27.6-8.8-7.2-4.4-7.3-8.3-5.6-11.7-10.8-1.2-19 1-20.4 6.1-2.6 9 19.2 24 44.1 31.5 26.1 7.9 53 2.4 56-14 1.4-7.5-4.9-13-15.5-15.4"/></svg>

src/assets/images/vmware.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="39.6875mm"
+   height="7.9375mm"
+   viewBox="0 0 39.6875 7.9375"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false" /><defs
+     id="defs2" /><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-13.124116,-98.694348)"><g
+       fill-rule="evenodd"
+       clip-rule="evenodd"
+       id="g575"
+       transform="matrix(0.15395432,0,0,0.15395432,13.578541,87.920563)"
+       inkscape:export-filename="vmware-1.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"><path
+         fill="#5c4835"
+         d="m 69.47,106.602 c -0.526,1.383 -1.081,2.234 -2.901,2.234 -1.823,0 -2.376,-0.852 -2.898,-2.234 L 58.277,92.723 c -0.258,-0.672 -0.334,-1.078 -0.334,-1.566 0,-1.722 1.338,-2.61 2.79,-2.61 1.487,0 2.124,1.076 2.378,1.896 l 3.42,10.596 h 0.075 l 3.418,-10.596 c 0.263,-0.82 0.893,-1.896 2.379,-1.896 h 5.263 c 1.361,0 2.256,0.743 2.441,2.048 1.313,-1.42 3.033,-2.236 5.024,-2.236 2.243,0 4.127,0.931 5.538,2.717 1.481,-1.716 3.845,-2.717 5.68,-2.717 4.364,0 7.329,2.534 7.329,7.217 v 10.284 c 0,1.783 -1.115,2.977 -2.668,2.977 -1.561,0 -2.668,-1.193 -2.668,-2.977 v -9.346 c 0,-2.16 -1.203,-3.689 -3.154,-3.689 -1.981,0 -3.182,1.53 -3.182,3.689 v 9.346 c 0,1.783 -1.12,2.977 -2.668,2.977 -1.561,0 -2.665,-1.193 -2.665,-2.977 v -9.346 c 0,-2.16 -1.207,-3.689 -3.157,-3.689 -2.206,0 -3.186,1.53 -3.186,3.689 v 9.346 c 0,1.783 -1.111,2.977 -2.664,2.977 -1.56,0 -2.669,-1.193 -2.669,-2.977 V 92.495 Z m 36.04,-15.335 c -0.146,-0.488 -0.264,-0.927 -0.264,-1.265 0,-0.638 0.451,-1.456 1.568,-1.456 0.705,0 1.373,0.256 1.824,1.681 l 4.203,13.556 h 0.074 l 4.129,-13.072 c 0.451,-1.42 0.742,-2.165 1.941,-2.165 1.186,0 1.486,0.745 1.93,2.165 l 4.133,13.072 h 0.076 l 4.199,-13.556 c 0.451,-1.425 1.121,-1.681 1.82,-1.681 1.121,0 1.562,0.817 1.562,1.455 0,0.334 -0.111,0.777 -0.26,1.264 l -5.428,15.855 c -0.443,1.266 -0.965,1.715 -1.895,1.715 -0.898,0 -1.451,-0.449 -1.854,-1.715 l -4.244,-13.396 h -0.074 l -4.242,13.396 c -0.408,1.266 -0.961,1.715 -1.854,1.715 -0.934,0 -1.451,-0.449 -1.902,-1.715 z m 31.844,7.424 c 0,-3.377 1.416,-7.336 5.439,-7.336 4.023,0 5.441,3.958 5.441,7.336 0,3.365 -1.418,7.332 -5.441,7.332 -4.023,0 -5.439,-3.966 -5.439,-7.332 z m 13.966,-8.564 c 0,-1.14 -0.898,-1.581 -1.529,-1.581 -0.672,0 -1.518,0.441 -1.518,1.581 v 1.041 h -0.08 c -1.523,-1.668 -3.125,-2.622 -5.4,-2.622 -5.59,0 -8.717,4.867 -8.717,10.145 0,5.277 3.127,10.145 8.717,10.145 2.127,0 3.984,-0.961 5.4,-2.963 h 0.08 v 1.373 c 0,1.148 0.846,1.59 1.518,1.59 0.631,0 1.529,-0.441 1.529,-1.59 z m 4.309,0.171 c 0,-1.079 0.629,-1.747 1.631,-1.747 1.004,0 1.645,0.667 1.645,1.747 v 1.684 h 0.076 c 0.74,-1.534 2.568,-3.43 4.465,-3.43 1.146,0 1.822,0.743 1.822,1.675 0,0.932 -0.676,1.526 -2.051,1.789 -1.936,0.334 -4.312,1.789 -4.312,5.628 v 9.439 c 0,1.08 -0.641,1.752 -1.645,1.752 -1.002,0 -1.631,-0.672 -1.631,-1.752 z m 13.809,7.21 c 0.109,-3.039 1.555,-6.301 5.617,-6.152 3.615,0 5.252,3.299 5.252,6.152 z m 12.322,2.459 c 1.41,0 1.824,-0.6 1.824,-1.748 0,-4.806 -3.127,-9.672 -8.529,-9.672 -5.549,0 -8.9,4.755 -8.9,10.153 0,5.271 2.76,10.137 9.088,10.137 3.871,0 7.928,-2.438 7.928,-4.041 0,-0.939 -0.588,-1.459 -1.189,-1.459 -1.227,0 -2.346,2.688 -6.707,2.688 -3.678,0 -5.836,-2.652 -5.836,-6.057 h 12.321 z"
+         id="path565" /><path
+         fill="#698dba"
+         d="M 13.023,74.435 A 3.18,3.18 0 0 0 9.848,77.61 v 23.496 a 3.178,3.178 0 0 0 3.175,3.178 h 23.5 a 3.178,3.178 0 0 0 3.176,-3.178 V 77.61 a 3.182,3.182 0 0 0 -3.176,-3.175 z m -1.394,26.67 V 77.61 a 1.39,1.39 0 0 1 1.394,-1.388 h 23.5 c 0.767,0 1.393,0.621 1.393,1.388 v 23.496 c 0,0.773 -0.626,1.398 -1.393,1.398 h -23.5 c -0.77,0 -1.394,-0.625 -1.394,-1.399 z"
+         id="path567" /><path
+         fill="#698dba"
+         d="m 20.038,81.459 a 3.173,3.173 0 0 0 -3.168,3.168 v 23.503 a 3.174,3.174 0 0 0 3.168,3.172 h 23.5 a 3.175,3.175 0 0 0 3.174,-3.172 V 84.627 a 3.175,3.175 0 0 0 -3.174,-3.168 z m -1.392,26.672 V 84.627 a 1.39,1.39 0 0 1 1.391,-1.388 h 23.5 c 0.771,0 1.391,0.62 1.391,1.388 v 23.503 c 0,0.773 -0.62,1.391 -1.391,1.391 h -23.5 a 1.39,1.39 0 0 1 -1.391,-1.39 z"
+         id="path569" /><path
+         fill="#698dba"
+         d="m 6.007,88.477 a 3.177,3.177 0 0 0 -3.173,3.172 v 23.5 a 3.17,3.17 0 0 0 3.173,3.172 h 23.498 a 3.173,3.173 0 0 0 3.174,-3.172 v -23.5 a 3.18,3.18 0 0 0 -3.174,-3.172 z m -1.394,26.671 v -23.5 c 0,-0.764 0.623,-1.39 1.395,-1.39 h 23.498 c 0.769,0 1.394,0.626 1.394,1.39 v 23.5 c 0,0.768 -0.625,1.395 -1.394,1.395 H 6.007 a 1.395,1.395 0 0 1 -1.394,-1.395 z"
+         id="path571" /><path
+         fill="#5c4835"
+         d="m 186.115,88.885 v 0.433 h -1.031 v 2.958 h -0.518 v -2.958 h -1.025 v -0.433 z m 3.295,3.391 -0.139,-2.034 c -0.021,-0.274 -0.006,-0.594 -0.016,-0.931 h -0.021 c -0.084,0.32 -0.186,0.682 -0.293,0.978 l -0.697,1.938 h -0.4 l -0.682,-1.985 c -0.088,-0.278 -0.172,-0.616 -0.256,-0.931 h -0.021 c -0.008,0.323 0,0.615 -0.021,0.923 l -0.121,2.042 h -0.498 l 0.258,-3.391 h 0.688 l 0.654,1.832 c 0.084,0.259 0.156,0.536 0.24,0.857 h 0.021 c 0.072,-0.321 0.148,-0.612 0.244,-0.862 l 0.652,-1.827 h 0.664 l 0.256,3.391 z"
+         id="path573" /></g><path
+       style="fill:none;stroke:none;stroke-width:0.0762313;stroke-opacity:1;image-rendering:auto"
+       d="m 13.124116,102.6631 v -3.968753 h 19.84375 19.843752 v 3.968753 3.96875 H 32.967866 13.124116 Z"
+       id="path931-6" /></g></svg>

src/backups/about.md

@@ -0,0 +1,8 @@
+# О сервисе
+
+Сервиса **Резервное копирование** — это сервис для сохранения данных и конфигураций виртуальных машин с возможностью последующего восстановления. В облачной среде резервные копии позволяют вернуть систему в рабочее состояние после сбоя и поддерживать доступность сервисов.
+
+Резервное копирование подключается:
+
+- для [виртуальных машин, развернутых в Beeline Cloud](./backup-internal-infra.md);
+- для [собственной инфраструктуры](./backup-external-infra.md).

src/backups/backup-external-infra.md

@@ -0,0 +1,54 @@
+# Резервное копирование собственной инфраструктуры в Beeline Cloud
+
+## Перед началом работы
+
+- Зарегистрируйтесь в [личном кабинете Beeline Cloud](https://console.cloud.beeline.ru/).
+- [Создайте](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра) виртуальный дата-центр.
+- [Создайте](../vdc/vdc-how-to/vm/create-vm.md) виртуальную машину в виртуальном дата-центре.
+
+## Подключить резервное копирование
+
+1. Войдите в [личный кабинет Beeline Cloud](https://lk.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню перейдите в **Сервисы** → **Резервное копирование**.
+4. Нажмите кнопку **Создать хранилище**.
+5. В разделе **Инфраструктура для копирования** выберите опцию **Локальная**.
+6. В разделе **Тип подключения** выберите способ резервного копирования:
+   - **Veeam Agent**: резервное копирование в beeline cloud при помощи Veeam Agent.
+   - **Veeam Cloud Connect**: подключение Veeam к облачному репозиторию beeline cloud.
+   - **Киберпроект**: резервное копирование в beeline cloud при помощи Киберпротект.
+
+:::tabs
+
+== Veeam Agent / Veeam Cloud Connect
+
+- В разделе **Сетевые подключения** выберите тип подключения:
+
+  - **Интернет**: интернет-соединение.
+  - **L2 или L3 канал**: выделенное интернет-соединение.
+  - для **L2 или L3 канал** укажите способ связи с вами и удобное время для консультации с менеджером Beeline Cloud.
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+== Киберпроект
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+
+- В разделе **Параметры** укажите:
+
+  - **ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Базы данных**: количество баз данных, которое нужно подключить к сервису.
+  - **Серверы**: количество серверов, которое нужно подключить к сервису.
+  - **Устройства**: количество рабочих столов (VDI), которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+:::
+
+7. Нажмите кнопку **Создать хранилище**.
+
+Подключение резервного копирования занимает до 3 дней. Статус подключения сервиса отображается в личном кабинете Beeline Cloud.
+
+Данные для доступа к ПО для настройки резервного копирования будут отправлены на электронную почту, указанную в личном кабинете Beeline Cloud.

src/backups/backup-internal-infra.md

@@ -0,0 +1,58 @@
+# Резервное копирование виртуальных машин Beeline Cloud
+
+## Перед началом работы
+
+- Зарегистрируйтесь в [личном кабинете Beeline Cloud](https://console.cloud.beeline.ru/).
+- [Создайте](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра) виртуальный дата-центр.
+- [Создайте](../vdc/vdc-how-to/vm/create-vm.md) виртуальную машину в виртуальном дата-центре.
+
+## Подключить резервное копирование
+
+1. Войдите в [личный кабинет Beeline Cloud](https://lk.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню перейдите в **Сервисы** → **Резервное копирование**.
+4. Нажмите кнопку **Создать хранилище**.
+5. В разделе **Инфраструктура для копирования** выберите опцию **В облаке**.
+6. В разделе **Управление** выберите способ резервного копирования:
+   - **Самостоятельно**.
+   - **Провайдером**.
+
+:::: tabs
+
+== Провайдером
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+- В разделе **Политика резервного копирования** укажите настройки резервного копирования:
+
+  - **Глубина хранения**: время хранения резервных копий.
+  - **Полное резервное копирование**: количество полных копий в день.
+  - **Инкрементальное резервное копирование**: количество инкрементальных копий в день.
+  - **Окно резервного копирования**: выберите время запуска резервного копирования.
+
+::: details Чем полная копия отличается от инкрементной?
+Полное резервное копирование — это создание копии всех данных виртуальной машины за одну операцию. Полная копия подходит для восстановления без зависимости от других сохранений.
+
+Инкрементное резервное копирование — это сохранение только измененных данных относительно предыдущей копии. Это уменьшает объем хранения и ускоряет процесс при регулярном копировании.
+:::
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+== Самостоятельно
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+::::
+
+1.  Нажмите кнопку **Создать хранилище**.
+
+Подключение резервного копирования занимает до 3 дней. Статус подключения сервиса отображается в личном кабинете Beeline Cloud.
+
+Данные для доступа к ПО для настройки резервного копирования будут отправлены на электронную почту, указанную в личном кабинете Beeline Cloud.

src/backups/backup-quatos.md

@@ -0,0 +1,27 @@
+# Квоты и лимиты
+
+Квоты — это организационные ограничения на количество доступных ресурсов в сервисе. В некоторых случаях квоты могут быть увеличены или уменьшены по запросу.
+
+Лимиты — это технические ограничения на количество доступных ресурсов в сервисе. Ограничения, обычно, связаны с характеристиками оборудования и особенностями архитектуры.
+
+## Квоты
+
+### Бесплатный период
+
+В [бесплатном периоде](../start/trial.md) использования Beeline Cloud установлены квоты на ресурсы сервиса:
+
+| Вид ограничения     | Значение |
+| ------------------- | -------- |
+| Количество хранилищ | 1        |
+| Количество виртуальных машин       | 5        |
+| Объем хранилища     | 1 ПБ     |
+
+### Платное использование
+
+| Вид ограничения     | Значение      |
+| ------------------- | ------------- |
+| Количество хранилищ | Неограниченно |
+| Количество виртуальных машин       | 999           |
+| Объем хранилища     | 1 ПБ          |
+
+Если вы заключили договор с Beeline Cloud, то объем хранилища и количество ВМ можно увеличить. Для этого обратитесь в [техническую поддержку](../platform/support/support-overview.md).

src/backups/backups-overview.md

@@ -0,0 +1,11 @@
+---
+section_links:
+  - title: О сервисе
+    link: /backups/about.md
+    description: Назначение сервиса 
+  - title: Квоты и лимиты
+    link: /backups/backup-quatos.md
+    description: Ограничения на количество ресурсов в сервисе  
+---
+
+# Обзор сервиса

src/backups/index.md

@@ -0,0 +1,17 @@
+---
+section_links:
+  - title: Обзор сервиса
+    link: /backups/about.md
+    description: Обзор сервиса, квоты и лимиты
+  - title: Резервное копирование виртуальных машин Beeline Cloud
+    link: /backups/backup-internal-infra.md
+    description: Резервное копирование инфраструктуры, расположенной в контуре Beeline Cloud
+  - title: Резервное копирование собственной инфраструктуры в Beeline Cloud
+    link: /backups/backup-external-infra.md
+    description: Резервное копирование вашей инфраструктуры в облако Beeline Cloud
+  - title: Каталог резервных копий
+    link: /backups/view-backups.md
+    description: Просмотр ресурсов, к которым подключено резервное копирование 
+--- 
+
+# Резервное копирование