Описание чата с моделями

VEGA-5236 Адаптация результатов поиска в документации

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

.gitignore

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

.gitlab-ci.yml

@@ -12,6 +12,5 @@ variables:
   IMAGE_NAME: docs-portal
 
 include: 
-  - ci/develop.yml
+  - ci/*.yml
-  - "ci/rules.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:
+build-image:
-  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:
   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:
+  before_script:
-    - .deploy-template
+    - |
+      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-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")
+    - if: $CI_PIPELINE_SOURCE == "push"
-      exists:
-        - .npmrc
-        - ./*/.npmrc

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "docs",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "docs",
-      "version": "0.6.1",
+      "version": "0.6.2",
       "license": "MIT",
       "dependencies": {
         "@beeline/design-tokens": "^1.31.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
-  "version": "0.6.1",
+  "version": "0.6.4",
-  "description": "Vega docs portal",
+  "description": "Beeline Cloud docs",
   "main": "index.js",
   "scripts": {
     "dev": "vitepress dev src",

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

@@ -42,7 +42,8 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: "Beeline Cloud",
+  srcDir: ".",
+  title: "cloud",
   description: "Документация Beeline Cloud",
   head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
   base: typeof new_version !== 'undefined' ? '/' : '/docs/',
@@ -63,7 +64,11 @@ export default defineConfig({
     }
   },
   themeConfig: {
-    logo: '/favicon.svg',
+    logo: {
+      light: '/logo-light-theme.svg',
+      dark: '/logo-dark-theme.svg',
+      alt: 'cloud',
+    },
     search: {
       provider: 'local',
       options: {
@@ -75,7 +80,7 @@ export default defineConfig({
                 buttonAriaLabel: 'Поиск'
               },
               modal: {
-                noResultsText: 'Нет результатов для',
+                noResultsText: 'Не удалось загрузить данные',
                 resetButtonTitle: 'Сбросить',
                 displayDetails: 'Показать расширенный список',
                 footer: {
@@ -91,151 +96,181 @@ export default defineConfig({
     },
     // https://vitepress.dev/reference/default-theme-config
     // nav: [
-    //   ],
+    //   {
-
+    //     text: 'Документация',
-    //  socialLinks: [
+    //     link: '/guide/',
-    //    { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
+    //   },
-    //  ],
+    //   {
-
+    //     text: 'API',
-    // editLink: {
+    //     link: '',
-    //   pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
+    //   },
-    //   text: 'Отредактируйте эту страницу на GitLab'
+    //   {
-    // },
+    //     text: 'Terraform',
+    //     // link: '/terraform/',
+    //     link: '',
+    //   },
+    // ],
 
     docFooter: {
       next: 'Вперед',
       prev: 'Назад'
     },
 
-    // lastUpdated: {
-    //   text: 'Обновлена',
-    //   formatOptions: {
-    //     dateStyle: 'long',
-    //   }
-    // },
-
     outline: {
       label: 'Содержание'
     },
     sidebar: {
-      '/platform/': [
+    '/platform/': [
-        {
+      {
-          text: 'Платформа Beeline Cloud', link: '/platform/index.md',
+        text: 'Платформа Beeline Cloud', link: '/platform/index.md',
-          collapsed: true,
+        collapsed: true,
           items: [
-            { text: 'Сервисы', link: '/platform/services/services.md' },
+            {text: 'Обзор', link: '/platform/about.md'},
-            { text: 'Техническая поддержка', link: '/platform/support/support-overview.md' },
+            {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'}, 
           ],
         },
       ],
-      '/start/': [
+    '/start/': [
-        {
+      {
-          text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
+        text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
-          collapsed: true,
+      },
-          items: [
+      {text: 'Начать работу', link: '/start/getting-started.md'},
-            { text: 'Начать работу', link: '/start/getting-started.md' },
+      {text: 'Бесплатный период', link: '/start/trial.md'}, 
-            { text: 'Бесплатный период', link: '/start/trial.md' },
+      {text: 'Платное использование', link: '/start/organization.md'},
-            { text: 'Платное использование', link: '/start/organization.md' },
+    ],
+    '/ai/': [
+            { text: 'AI платформа', link: '/ai/index.md' },
+            { text: 'Обзор сервиса', link: '/ai/ai-overview-platform.md' },
+            { text: 'Быстрый старт', link: '/ai/ai-getting-started.md' },
+            { text: 'Управление сервисом', link: '/ai/ai-setting.md' },
+            { text: 'Чат с LLM', link: '/ai/ai-chat-llm.md' },
+            { text: 'Концепции', link: '/ai/ai-glossary.md' },
           ],
-        },
-      ],
-      //  '/billing/': [
-
-      //   ],
       '/vdc/': [
         {
           text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
           collapsed: true,
-          items: [
+              items: [  
-            { text: 'Обзор сервиса', link: '/vdc/vdc-overview.md' },
+            { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
-            { text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md' },
+            { text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
-            {
+           ]
-              text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.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-create.md' },
-                { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.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-manage.md'},
-                {
+            ],  
-                  text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md',
+            },   
-                  collapsed: true,
+            { text: 'Виртуальные машины', link: '/vdc/vdc-how-to/vm/vm-index.md',
-                  items: [
+              collapsed: true,
-                    { text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md' },
+              items: [
-                    { text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md' },
+                {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/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: 'Сети', link: '/vdc/vdc-how-to/networks/networks-index.md',
+              collapsed: true,
+              items: [
+                {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/isolated-to-routed.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.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-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: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
-              ],
+                ],
-            },
+              },
-            { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
+        { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
-            { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
+        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
-            { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
+        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
-            {
+        { text: 'Сети', link: '/compute/compute-how-to/compute-network/compute-network-index.md',
-              text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
+          collapsed: true,
-              collapsed: true,
+          items: [
-              items: [
+            { text: 'Настройка site-to-site VPN с помощью VyOS', link: '/compute/compute-how-to/compute-network/compute-vpn-vyos.md' },
-                { text: 'Подключение по SSH к ВМ закрытого контура', link: '/compute/compute-guide/compute-guide-ssh-inside.md' },
+            { text: 'Подключение ВМ закрытого контура к интернету', link: '/compute/compute-how-to/compute-network/compute-network-inside.md' },
-              ],
-            },
           ],
         },
-
       ],
       '/admin/': [
-        {
+      {
-          text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
+        text: 'Администрирование', link: '/admin/index.md',
+      },
+      {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
+      ],    
+      '/billing/': [
+        { text: 'Биллинг', link: '/billing/about.md',
           collapsed: true,
           items: [
-            { text: 'Управление ключевыми парами', link: '/admin/ssh.md' },
+                { text: 'Аналитика потребления', link: '/billing/usage-analytics.md' },
-          ],
+                ],
-        },
+              },
       ],
-      '/yellowbe/': [
+      '/concepts/': [
-        {
+      {text: 'Виртуальные дата-центры', link: '/concepts/datacenters.md'},
-          text: 'Дизайн-платформа Yellowbe', link: '/yellowbe/index.md',
+      {text: 'DNS', link: '/concepts/dns.md'},
-          collapsed: false,
+      {text: 'Edge Gateway', link: '/concepts/edge-gateway.md'},
-          items: [
+      {text: 'NAT', link: '/concepts/nat.md'},
-            {
+      {text: 'Типы сетей в vDC', link: '/concepts/network-types.md'},
-              text: 'Начать работу',
+      {text: 'Ролевая модель', link: '/concepts/roles.md'},
-              link: '/yellowbe/get-started/index.md',
+      {text: 'vApp', link: '/concepts/vApp.md'},
-              collapsed: true,
-              items: [
-                {
-                  text: 'Разработчику',
-                  link: '/yellowbe/get-started/dev.md',
-                }, {
-                  text: 'Дизайнеру',
-                  link: '/yellowbe/get-started/design.md',
-                },
-              ]
-            },
-            {
-                  text: 'Состав дизайн-платформы',
-                  link: '/yellowbe/about.md',
-            }
-          ],
-        },
       ],
+      '/monitoring/': [
+      {
+        text: 'Мониторинг', link: '/monitoring/about.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
+  <div class="VPContent CustomContent" id="VPContent" :class="{
-    class="VPContent CustomContent"
-    id="VPContent"
-    :class="{
       'has-sidebar': hasSidebar,
       'is-home': frontmatter.layout === 'home'
-    }"
+}">
-  >
+    <slot name="not-found" v-if="page.isNotFound">
-    <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
+      <NotFound />
+    </slot>
 
     <VPPage v-else-if="frontmatter.layout === 'page'">
-      <template #page-top><slot name="page-top" /></template>
+      <template #page-top>
-      <template #page-bottom><slot name="page-bottom" /></template>
+        <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-before>
-      <template #home-hero-info><slot name="home-hero-info" /></template>
+        <slot name="home-hero-before" />
-      <template #home-hero-image><slot name="home-hero-image" /></template>
+      </template>
-      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-hero-info>
-      <template #home-features-before><slot name="home-features-before" /></template>
+        <slot name="home-hero-info" />
-      <template #home-features-after><slot name="home-features-after" /></template>
+      </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
+    <component v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" :is="frontmatter.layout" />
-      v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'"
-      :is="frontmatter.layout"
-    />
 
     <CustomDoc v-else>
-      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-top>
-      <template #doc-bottom><slot name="doc-bottom" /></template>
+        <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-footer-before>
-      <template #doc-before><slot name="doc-before" /></template>
+        <slot name="doc-footer-before" />
-      <template #doc-after><slot name="doc-after" /></template>
+      </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-top>
-      <template #aside-outline-before><slot name="aside-outline-before" /></template>
+        <slot name="aside-top" />
-      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      </template>
-      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-outline-before>
-      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+        <slot name="aside-outline-before" />
-      <template #aside-bottom><slot name="aside-bottom" /></template>
+      </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

@@ -73,58 +73,70 @@ const pageName = computed(() =>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@use 'src/assets/scss/app/helpers/media';
+
 .VPDoc {
   padding: 32px 24px 96px;
   width: 100%;
-}
 
-@media (min-width: 768px) {
+  @include media.media_min(960px) {
-  .VPDoc {
+    padding: 48px 32px 0;
+  }
+
+  @include media.media_max(768px) {
     padding: 48px 32px 128px;
   }
 }
 
-@media (min-width: 960px) {
+.VPDoc:not(.has-sidebar) .container {  
-  .VPDoc {
+  @include media.media_min(1440px) {
-    padding: 48px 32px 0;
+    max-width: 1104px;
   }
 
-  .VPDoc:not(.has-sidebar) .container {
+  @include media.media_max(960px) {
-    display: flex;
+    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 .aside {
-  .VPDoc:not(.has-sidebar) .content {
+  @include media.media_min(1280px) {
-    max-width: 784px;
+    display: block;
-  }
-
-  .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
   }
 }
 
 .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 +192,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/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
+            <CustomButton tag="a" size="medium" :theme="action.theme" :text="action.text" :href="action.link" />
-              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;
-}
+  background-color: themes.$color-background-secondary;
-
+  padding: 98px 92px;
-.VPHero.has-image .container {
+  border-radius: sizes.$size-border-radius-x6;
-  text-align: center;
+  
-}
-
-@media (min-width: 960px) {
   .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) {
+    .VPHero.has-image .main {
-  .main {
+      max-width: 592px;
-    order: 1;
+    }
-    width: calc((100% / 3) * 2);
   }
 
-  .VPHero.has-image .main {
+  .name,
-    max-width: 592px;
+  .text {
+    @include mixin.h1;
+    white-space: pre-wrap;
   }
-}
 
-.name,
+  .VPHero.has-image .name,
-.text {
+  .VPHero.has-image .text {
-  max-width: 392px;
+    margin: 0 auto;
-  letter-spacing: -0.4px;
+  }
-  line-height: 40px;
+  
-  font-size: 32px;
+  .name {
-  font-weight: 700;
+    color: themes.$color-text-active;
-  white-space: pre-wrap;
+    padding-bottom: 40px;
-}
+    text-align: center;
-
+  }
-.VPHero.has-image .name,
-.VPHero.has-image .text {
-  margin: 0 auto;
-}
-
-.name {
-  color: var(--vp-home-hero-name-color);
 }
 
 .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,
@@ -132,6 +133,7 @@ watchEffect(() => {
 const results: Ref<(SearchResult & Result)[]> = shallowRef([])
 
 const enableNoResults = ref(false)
+const loadig = ref(true)
 
 watch(filterText, () => {
   enableNoResults.value = false
@@ -160,11 +162,7 @@ debouncedWatch(
     if (!index) return
 
     // Search
-    results.value = index
+    retrySearch(index, filterTextValue)
-      .search(filterTextValue)
-      .slice(0, 16) as (SearchResult & Result)[]
-    enableNoResults.value = true
-
     // Highlighting
     const mods = showDetailedListValue
       ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id)))
@@ -268,6 +266,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 +489,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"
@@ -535,6 +516,7 @@ function formMarkRegex(terms: Set<string>) {
         </form>
 
         <ul
+          v-if="!!results.length"
           ref="resultsEl"
           :id="results?.length ? 'localsearch-list' : undefined"
           :role="results?.length ? 'listbox' : undefined"
@@ -561,29 +543,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">
+                    <span class="text"> > </span>
-                      <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="m9 18l6-6l-6-6"
-                      />
-                    </svg>
                   </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 +568,21 @@ 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>
-
+        <ul
-        <div class="search-keyboard-shortcuts">
+          v-else-if="filterText && !results.length && enableNoResults"
-          <span>
+          class="no-results"
-            <kbd :aria-label="$t('modal.footer.navigateUpKeyAriaLabel')">
+        >
-              <svg width="14" height="14" viewBox="0 0 24 24">
+          <p class="no-results-text">
-                <path
+            {{ $t('modal.noResultsText') }}
-                  fill="none"
+          </p>
-                  stroke="currentColor"
+          <button
-                  stroke-linecap="round"
+            class="no-results-button"
-                  stroke-linejoin="round"
+            @click="retrySearch(searchIndex, filterText)"
-                  stroke-width="2"
+          >
-                  d="M12 19V5m-7 7l7-7l7 7"
+            Попробовать еще раз
-                />
+          </button>
-              </svg>
+        </ul>
-            </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>
       </div>
     </div>
   </Teleport>
@@ -675,16 +605,13 @@ 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 +625,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 +639,6 @@ function formMarkRegex(terms: Set<string>) {
   }
 }
 
-.search-bar:focus-within {
-  border-color: var(--vp-c-brand-1);
-}
-
 .search-icon {
   margin: 8px;
 }
@@ -802,27 +725,31 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .results {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  box-shadow: var(--vp-c-shadow-3);
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  padding: 8px 0;
+  max-height: min(100vh - 214px, 900px);
+
+  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;
+  height: 66px;
 }
 
 .result > div {
-  margin: 12px;
+  margin: 12px 16px;
   width: 100%;
   overflow: hidden;
 }
@@ -840,6 +767,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 +786,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 +815,7 @@ function formMarkRegex(terms: Set<string>) {
 
 .titles :deep(mark),
 .excerpt :deep(mark) {
-  background-color: var(--vp-local-search-highlight-bg);
+  background-color: transparent;
-  color: var(--vp-local-search-highlight-text);
-  border-radius: 2px;
-  padding: 0 2px;
 }
 
 .excerpt :deep(.vp-code-group) .tabs {
@@ -932,12 +852,42 @@ function formMarkRegex(terms: Set<string>) {
 }
 
 .no-results {
-  font-size: 0.9rem;
+  padding: 28px 0;
-  text-align: center;
+  display: flex;
-  padding: 12px;
+  flex-direction: column;
+  gap: 24px;
+  align-items: center;
+  z-index: 100;
+  box-shadow: 0 0 10 0 rgba(0, 0, 0, 0.16);
+  border-radius: 12px;
+  border: 1px solid rgba(25, 28, 52, 0.18);
+  background-color: rgb(255, 255, 255);
+}
+
+.no-results-text {
+  font-weight: 700;
+  font-size: 17px;
+  line-height: 22px;
+  letter-spacing: 0.2px;
+}
+
+.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;
 }
 
 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-before>
-            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+              <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" />
+            <VPNavBarSearch class="search" />
-            <VPNavBarAppearance class="appearance" />
+          <!--  <CustomButton text="Войти" size="small" :href="loginUrl" /> -->
-            <VPNavBarSocialLinks class="social-links" />
-            <VPNavBarExtra class="extra" />
-            <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
           </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')">
+  <svg
-    <span class="DocSearch-Button-Container">
+    class="DocSearch-Search-Icon"
-      <svg
+    width="20"
-        class="DocSearch-Search-Icon"
+    height="20"
-        width="20"
+    viewBox="0 0 20 20"
-        height="20"
+    aria-label="search icon"
-        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"
-        <path
+      stroke="currentColor"
-          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"
+      fill="none"
-          stroke="currentColor"
+      fill-rule="evenodd"
-          fill="none"
+      stroke-linecap="round"
-          fill-rule="evenodd"
+      stroke-linejoin="round"
-          stroke-linecap="round"
+    />
-          stroke-linejoin="round"
+  </svg>
-        />
-      </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>
 </template>
 
 <style>
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
   --docsearch-hit-shadow: none;
 }
 
-.DocSearch-Button {
+.DocSearch-Search-Icon {
-  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 {
   position: relative;
-  width: 16px;
+  width: 18px;
-  height: 16px;
+  height: 18px;
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
-}
+  margin: 8px;
-
-.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;
 }
 </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-size: 25px;
-  font-weight: 600;
+  font-weight: 500;
-  color: var(--vp-c-text-1);
+  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;
+  padding: 0px 0px 96px 0px;
-  width: 256px;
+  width: 320px;
-  max-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;
-}
+  padding-top: 24px;
-
+  width: 100%;
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
+    width: 100%;
-    width: calc(var(--vp-sidebar-width) - 64px);
   }
 }
+
 </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-doc-aside.scss

@@ -1,10 +1,52 @@
-.VPDocAside {
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
-    .outline-link {
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
-        font-size: 16px;
-    }
 
-    .outline-title {
+.VPDocAside {
-        font-size: 17px;
+  .outline-link {
-        font-weight: 500;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 22px;
+    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: 17px;
+    font-weight: 500;
+    line-height: 22px;
+    padding-bottom: 16px;
+  }
+
+  .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-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 'src/assets/scss/app/helpers/media';
+
 .VPSidebar {
-    &Item {
+  --vp-sidebar-bg-color: var(--vp-c-bg);
-        .text {
+}
-            font-size: 15px;
+
-        }
+.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/fonts.scss

@@ -1,3 +1,8 @@
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
+
 $font-path-beeline-sans: '/fonts/beeline-sans' !default;
 
 @mixin beeline-sans-font($type, $weight, $style: normal) {

src/.vitepress/theme/scss/vars.scss

@@ -203,3 +203,6 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+:root {
+  --vp-sidebar-width: 320px;
+}

src/admin/index.md

@@ -5,6 +5,10 @@ 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/ai/ai-chat-llm.md

@@ -0,0 +1,178 @@
+# Чат с LLM
+
+**Чат с LLM** - это интерфейс для общения с LLM-моделями. Подходит для знакомства и тестирования моделей.
+
+Исходя из возможностей сервиса Чат с LLM пользовательский путь от авторизации к диалогу выглядит следующим образом:
+
+1. Переход в чат с LLM.
+2. Выбор LLM.
+3. Выбор базы знаний.
+4. Настройка системного промпта.
+5. Диалог с LLM.
+
+## Доступные модели
+
+Чат с LLM поддерживает модели:.
+
+| Модель | Контекст | Параметры | Reasoning | Инструменты | Картинки |
+|:-------|:-------|:-------|:-------|:-------|:-------|
+| Deepseek-chat	| 131k | 671B	| ✅ | ✅ | ❌ |
+| Gemma 3 | 128k	| 27B	| ❌	| ❌	| ✅ |
+| Qwen 3 |  131k | 32B | ✅	|✅ |	❌|
+
+::: details Описание моделей
+
+- **DeepSeek Chat**
+
+DeepSeek V3 — это мощная гибридная модель с 671 млрд. параметров, специально оптимизированная для кодогенерации и работы поисковых агентов. Модель поддерживает контекст до 128 тыс. токенов и позволяет гибко управлять режимом рассуждений через параметр "reasoning_enabled". Она демонстрирует производительность уровня DeepSeek-R1, но работает быстрее, идеально подходя для программирования, исследований и агентных workflow.
+
+- **Gemma 3**
+
+Основная особенность этой модели в том, что она поддерживает картинки. Вы можете использовать ее как OCR: модель распознает рукописный текст на русском языке. Кроме этого, модель распознает и классифицирует объекты на фотографиях; может распознавать и переводить надписи.
+
+- **Qwen 3 32B**
+
+Основная модель, с которой рекомендуется начинать эксперименты. Поддерживает нативный вызов инструментов.
+
+Режимы работы:
+
+- с рассуждениями (включен по умолчанию).
+- без рассуждений (нужно передать в запросе /no_think).
+
+:::
+
+## Авторизация в чате с LLM
+
+Доступ к чату с LLM-моделями предоставляется по уникальной ссылке, которая формируется после [создания тенанта](ai-setting.md#создать-тенант).
+
+1. В левом меню откройте раздел **Тенанты**.
+2. Нажмите на имя тенанта.
+3. Из поля **Url приложения** скопируйте ссылку на чат с LLM.
+4. Вставьте ссылку в браузер. Откроется чат с LLM.
+
+![alt text](./image/Chat_AI_Main_1024.png)
+
+::: details Интерфейс чата с LLM
+
+- **Чат**
+
+Раздел включает функции:
+
+- диалог с моделью в режиме вопрос-ответ;
+- выбор LLM;
+- выбор базы знаний.
+
+- **Базы знаний**
+
+Раздел предназначен для подготовки базы знаний, на основе которой модель будет генерировать ответы.
+
+- **Системные промпты**
+
+Раздел предназначен для создания системных промптов. Системный промпт представляет из себя набор инструкций, на которые опирается модель при подготовке ответа на запрос пользователя.
+
+:::
+
+## Начать диалог с моделью
+
+1. [Авторизоваться в чате с LLM](#авторизация-в-чате-с-llm).
+2. В левом меню выберите раздел **Чаты**.
+3. Выберите из списка модель. Если в списке отсутствует нужная [модель](#доступные-модели), то [добавьте модель](ai-setting.md#добавить-модель) в тенант.
+
+    ::: tip Информация
+
+    Эксперименты рекомендуется с модели **Qwen 3 32B**, которая имеет больший контекст и поддерживает нативный вызов инструментов.
+
+    Модель **Qwen 3 32B** может работать:
+    - [с рассуждениями](ai-glossary.md#рассуждения) - этот режим включен по умолчанию;
+    - без рассуждений - в этом случае нужно передать в запросе `/no_think`.
+
+    :::
+4. (опционально) Выберите базу знаний, на основе которой модель составит ответ. Если список баз данных пуст, то [создайте](#создать-базу-знаний) базу знаний.
+5. (опциоанльно) Выберите системный промпт. По умолчанию в чате задан системный промпт. Если необходим промпт под определенную задачу, то [измените](#редактировать-системный-промпт) системный промпт.
+6. Введите запрос к модели. Дождитесь ответа.
+
+## Использовать базу знаний
+
+Если необходимо, чтобы модель генерировала ответы не на базе своего раннего обучения, а обращалась, например, к актуальной нормативной базе или актуальным тарифам, то необходимо указать [базу знаний](ai-glossary.md#база-знаний-rag), с которой чат должен расширить свой контекст.
+
+Для этого необходимо выбрать базу знаний и продолжить диалог.
+
+![alt text](./image/Chat_AI_Choice_RAG_SalesHelper_1024.png)
+
+Если база знаний отсутствует в списке, то [создайте](#создать-базу-знаний) базу знаний и добавьте документы.
+
+### Создать базу знаний
+
+1. [Авторизоваться в чате с LLM](#авторизация-в-чате-с-llm).
+2. В левом меню выберите раздел **Базы знаний**.
+3. Нажмите кнопку **Создать базу знаний**.
+4. Заполните параметры базы знаний:
+   - **Имя**: введите имя базы знаний, имя будет отображаться при выборе базы знаний в чате.
+   - **Описание**: введите описание базы знаний.
+5. Нажмите кнопку **Создать**.
+
+База знаний будет создана, но в ней пока нет информации для генерации ответов модели. Добавьте документы в базу знаний.
+
+### Добавить документ в базу знаний
+
+1. [Авторизоваться в чате с LLM](#авторизация-в-чате-с-llm).
+2. В левом меню выберите раздел **Базы знаний**.
+3. В списке нажмите на нужную базу знаний.
+4. Нажмите кнопку **Добавить документ**.
+5. Загрузите файлы в базу знаний.
+6. Нажмите **Добавить**.
+
+## Редактировать системный промпт
+
+По умолчанию задан простой "размытый" [промпт](ai-glossary.md#промпт), который указывает, что ответы модели должны быть полезными. Но такой чат не всегда сможет предоставить пользователю ответ, который его устроит.
+
+В чате с LLM доступен редактор системных промптов. Возможны способы редактирования системных промптов:
+
+- редактирование системного промпта в текущей сессии диалога с моделью;
+- создание системного промпта в библиотеке системных промптов для дальнейшего использования.
+
+### Редактирование системного промпта в текущей сессии
+
+1. [Начните](#начать-диалог-с-моделью) диалог с моделью.
+2. Системный промпт отображается над строкой для ввода текста в чате.
+3. Нажмите на значок карандаша справа от системного промпта.
+4. В появившемся окне справа введите содержимое промпта.
+5. Нажмите кнопку **Сохранить**.
+6. Содержимое системного промпта обновится.
+
+Редактируемый системный промпт доступен для всех моделей и сохраняется только в рамках текущей сессии.
+
+### Создать системный промпт
+
+1. [Авторизоваться в чате с LLM](#авторизация-в-чате-с-llm).
+2. В левом меню выберите раздел **Системные промпты**.
+3. Нажмите кнопку **Создать системный промпт**.
+4. Заполните параметры промпта:
+    - **Название**: введите название системного промпта.
+    - **Содержание**: введите содержание промпта.  
+5. Нажмите **Создать**.
+
+Системный промпт добавлен в библиотеку системных промптов. Посмотреть список промптов можно в левом меню в разделе **Системные промпты**.
+
+## Сменить тенант
+
+В чате с LLM-моделями есть возможность работать сразу с несколькими [тенантами](ai-setting.md#создать-тенант).
+
+Для смены текущего тенанта необходимо:
+
+1. В верхнем меню нажмите на вкладку **Тенант**.
+2. Выберите из списка тенант.
+
+К тенанта привязаны сущности:
+
+- модели;
+- базы знаний;
+- системные промпты.
+
+Для каждого тенанта эти сущности будут отличаться.
+
+## Очистить контекст диалога
+
+При длительном диалоге модель накапливает [контекст](ai-glossary.md#контекст) и может начать генерировать неточные ответы ("галлюцинации"). Для предотвращения "галлюцинации" рекомендуется периодически очищать контекст диалога.
+
+Для очистки контекста диалога нажмите на значок корзины в правом верхнем углу окна чата.

src/ai/ai-getting-started.md

@@ -0,0 +1,51 @@
+# Быстрый старт с AI платформа
+
+Данная инструкция рассматривает начальную настройку сервиса **AI платформа** и отправку первого запроса к LLM-модели.
+
+## Перед началом работы
+
+- [Зарегистрируйтесь](../start/getting-started.md#1-регистрация-в-beeline-cloud) в личном кабинете Beeline Cloud.
+
+## 1. Создать тенант
+
+1. В верхнем меню нажмите на пункт **Сервисы**.
+2. Выберите **Сервис AI платфома**.
+3. В левом меню откройте раздел **Тенанты**.
+4. Нажмите кнопку **Создать тенант**.
+5. Введите имя тенанта.
+6. Нажмите **Создать тенант**.
+
+## 2. Добавить модель
+
+1. В левом меню откройте раздел **Модель**.
+2. Нажмите кнопку **Добавить модель**.
+3. В поле **Тенант** выберите созданный тенант.
+4. В поле **Модель** выберите из списка подходящую **LLM-модель**.
+5. Установите лимит использования токенов в час.
+6. Нажмите **Добавить модель**.
+
+## 3. Перейти в чат с LLM
+
+Протестировать модели в интерфейсе можно в чате с LLM. Доступ к чату с LLM-моделями предоставляется по уникальной ссылке, которая формируется после создания тенанта.
+
+1. В левом меню откройте раздел **Тенанты**.
+2. Нажмите на имя тенанта.
+3. Из поля **Url приложения** скопируйте ссылку на чат с LLM.
+4. Вставьте ссылку в браузер.
+
+## 4. Создать системный промпт
+
+1. В чате с LLM в левом меню откройте раздел **Системные промпты**.
+2. Нажмите кнопку **Создать системный промпт**.
+3. Заполните параметры промпта:
+    - **Название**: введите название систменого промпта;
+    - **Содержание**: введите содержание промпта.  
+4. Нажмите **Создать**.
+
+## 5. Начать диалог с моделью
+
+1. В чате с LLM-моделями в левом меню перейдите в раздел **Чат**.
+2. Выберите из списка модель.
+3. Выберите из списка системный промпт.
+4. Откроется чат. В текстовом поле внизу введите запрос к LLM-модели.
+5. Дождитесь ответа модели.

src/ai/ai-glossary.md

@@ -0,0 +1,26 @@
+# Концепции
+
+## База знаний (RAG)
+
+RAG — это подход, при котором ответ LLM формируется с использованием дополнительного источника актуальных данных.
+
+## Контекст
+
+Контекст — это ограниченное по размеру окно, в которое должен уместиться запрос к LLM. У каждой модели контекст строго ограничен и указан в документации к ней.
+
+## Рассуждения
+
+Reasoning (рассуждение или логическое мышление) у LLM — это способность модели не просто воспроизводить выученные паттерны текста, а последовательно и логически выводить новую информацию из уже известных ей данных.
+
+
+## Промпт
+
+Промпт — это текстовый запрос, который вы отправляете модели, и который задает контекст и направление для ответа. LLM анализирует промпт и генерирует ответ, который является логическим продолжением текста. Чем понятнее и конкретнее сформулирован промпт, тем качественнее будет ответ.
+
+Системные промпты — специальные инструкции, которые задают общие рамки поведения модели на протяжении всего диалога. Системный промпт устанавливается в начале общения и сообщает модели, какую роль она должна играть, какие ограничения соблюдать и какой стиль общения использовать.
+
+В сервисе **AI-платформа** системный промпт доступен для редактирования, чтобы пользователи могли максимально настраивать поведение моделей.
+
+## Токен
+
+LLM представляет текст не в виде слов или букв, а в виде токенов. Токен — это несколько букв (часть слова), которые часто встречаются рядом в обучающей выборке. Текст запроса, который вы отправляете в LLM, сначала нарезается на токены, и только потом обрабатывается моделью.

src/ai/ai-overview-platform.md

@@ -0,0 +1,11 @@
+# Обзор сервиса
+
+Сервис **AI платфома** предоставляет доступ к большим языковым моделям (Large Language Models, LLM). LLM-модели готовы к использованию и избавляют пользователя от необходимости самостоятельного развертывания и изучения связанных технологий.
+
+## Возможности сервиса
+
+- Интерфейс для взаимодействия с моделями в формате чат-бота.
+- Предоставляет различные [модели](ai-chat-llm.md#доступные-модели).
+- Использование баз знаний (RAG).
+- Редактирование системного промпта.
+- Диалог с моделью.

src/ai/ai-setting.md

@@ -0,0 +1,56 @@
+# Управление сервисом
+
+В разделе рассмотрены компоненты сервиса **AI платформа**  и приведены пошаговые инструкции по их созданию и управлению компонентами.
+
+## Создать тенант
+
+**Тенант** представляет собой изолированный логический контейнер ресурсов сервиса (модели, базы знаний) для работы в рамках проекта. Создается в личном кабинете Beeline Cloud.
+
+1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+2. В верхнем меню нажмите на раздел **Сервисы**.
+3. Выберите **Сервис AI платформа**.
+4. В левом меню откройте раздел **Тенанты**.
+5. Нажмите кнопку **Создать тенант**.
+6. Введите имя тенанта.
+7. Нажмите **Создать тенант**.
+
+## Добавить модель
+
+1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+2. В верхнем меню нажмите на раздел **Сервисы**.
+3. Выберите **Сервис AI платформа**.
+4. В левом меню откройте раздел **Модели**.
+5. Нажмите кнопку **Добавить модель**.
+6. Заполните параметры модели:
+    - **Тенант**: выберите тенант, в котором будет использоваться модель.
+    - **Модель**: выберите из списка подходящую LLM-модель.
+    - **Токены**: введите лимит использования токенов в час.
+7. Нажмите кнопку **Добавить модель**.
+
+## Добавить базу знаний
+
+1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+2. В верхнем меню нажмите на раздел **Сервисы**.
+3. Выберите **Сервис AI платформа**.
+4. В левом меню откройте раздел **База знаний**.
+5. Нажмите кнопку **Создать базу знаний**.
+6. Заполните параметры базы знаний:
+    - **Тенант**: выберите из списка тенант.
+    - **Имя**: введите имя базы знаний.
+    - **Описание**: введите описание базы знаний.
+7. Нажмите **Создать базу знаний**.
+
+[Наполнение базы знаний](ai-chat-llm.md#добавить-документ-в-базу-знаний) документами, на основании которых будет генерироваться ответ модели, выполняется в чате с LLM.
+
+## Удалить тенант, модель, базу знаний
+
+1. Войдите в [личный кабинет](https://lk.cloud.beeline.ru/).
+2. В верхнем меню нажмите на раздел **Сервисы**.
+3. Выберите **Сервис AI платформа**.
+4. Откройте раздел c нужным компонентом сервиса:
+   - **Тенанты**,
+   - **Модели**,
+   - **Базы знаний**.
+5. В таблице найдите строку с нужным компонентом сервиса.
+6. Нажмите … и выберите **Удалить**.
+7. В открывшемся окне подтвердите операцию, нажав **Удалить**.

src/ai/index.md

@@ -0,0 +1,21 @@
+---
+section_links:
+  - title: Обзор сервиса
+    link: /ai/ai-overview-platform.md
+    description: Обзор сервиса, решаемые задачи
+  - title: Быстрый старт
+    link: /ai/ai-getting-started.md
+    description: Создание виртуальной машины в дата-центре
+  - title: Настройка сервиса
+    link: /ai/ai-setting.md
+    description: Создание тенанта, добавление моделей и базы знаний
+  - title: Чат с LLM
+    link: /ai/ai-chat-llm.md
+    description: Интерфейс для взаимодействия с LLM-моделями в формате чат-бота
+  - title: Концепции
+    link: /ai/ai-glossary.md
+    description: Основные понятия, используемые в сервисе  
+    
+---    
+
+# AI платформа

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>