Merge branch 'feature/VEGA-4499-main-page' into 'main'

VEGA-4499: адаптация UI главной страницы документации

Closes VEGA-4499

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

.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"

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
+  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

@@ -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

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/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/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>

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,130 @@
+<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,
+  [style.CustomFeatureWithScroll]: scrollTo && !disabled
+}))
+
+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 }) }">
+            <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 !important;
+    }
+
+    #{$el}Disabled & {
+      color: themes.$color-text-disabled;
+    }
+
+    #{$el}WithScroll & {
+      color: themes.$color-text-active;
+    }
+  }
+
+  &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 {

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

@@ -45,8 +45,12 @@ 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>
 

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/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/assets/icons/astra.svg

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

src/assets/icons/beta.svg

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

src/assets/icons/centos.svg

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

src/assets/icons/check.svg

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

src/assets/icons/debian.svg

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

src/assets/icons/docker.svg

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

src/assets/icons/fedora.svg

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

src/assets/icons/freebsd.svg

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

src/assets/icons/oel.svg

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

src/assets/icons/oracle-linux.svg

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

src/assets/icons/pdf.svg

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

src/assets/icons/redhat.svg

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

src/assets/icons/rocky.svg

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

src/assets/icons/suselinux.svg

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

src/assets/icons/ubuntu.svg

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

src/assets/icons/vyos.svg

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

src/assets/icons/windows.svg

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

src/assets/images/debian.svg

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

src/assets/images/hyper-v.svg

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

src/assets/images/matrix.svg

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

src/assets/images/oel.svg

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

src/assets/images/openstack.svg

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

src/assets/images/redhat.svg

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

src/assets/images/vmware.svg

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

src/assets/scss/app/_base.scss

@@ -0,0 +1,38 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+
+:root {
+  --app-navbar-height: #{$app-navbar-height};
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+html {
+  overflow-y: auto;
+}
+
+#app {
+  height: 100vh;
+}
+
+html.dark-theme {
+  background-color: $color-background-base;
+  color: $color-text-active;
+}
+
+a:visited {
+  color: $color-text-active !important;
+}
+
+a:hover {
+  text-decoration: none !important;
+}

src/assets/scss/app/_index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'base';
+@import 'form';
+@import 'helpers';
+@import 'components';

src/assets/scss/app/_variables.scss

@@ -0,0 +1,3 @@
+// Navbar
+$app-navbar-height: 3.5rem;
+$app-header-height: 64px;

src/assets/scss/app/components/_fab.scss

@@ -0,0 +1,122 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
+@use '@beeline/design-tokens/scss/tokens/components/button' as *;
+@use '@beeline/design-tokens/scss/tokens/globals' as *;
+@use '@beeline/design-tokens/scss/mixin';
+
+@mixin fab_button {
+  background-color: $button-overlay-background-color;
+  padding-left: $button-only-text-small-padding-horizontal;
+  padding-right: $button-only-text-small-padding-horizontal;
+  letter-spacing: $button-small-text-font-letter-spacing;
+  line-height: $button-small-text-font-line-height;
+  font-size: $button-small-text-font-size;
+  height: $button-small-height;
+  color: $button-overlay-text-color;
+  box-shadow: none;
+  border: 1px solid $button-outline-border-color;
+  border-radius: $button-border-radius;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $button-overlay-background-color-hover;
+  }
+}
+
+.app-fab {
+  height: $fab-standard-height;
+  width: $fab-standard-width;
+  position: fixed;
+  z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  padding: $fab-standard-padding;
+  letter-spacing: $fab-text-font-letter-spacing;
+  line-height: $fab-text-font-line-height;
+  font-size: $fab-text-font-size;
+  font-weight: $fab-text-font-weight;
+  box-shadow: $fab-shadow;
+  background-color: $color-background-inverse;
+  color: $color-text-active-inverse;
+  cursor: pointer;
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &:hover {
+    // background-color: $fab-hover-background-color;
+  }
+
+  &--focused {
+    border-color: $fab-focused-border-color;
+    border-width: $fab-focused-border-width;
+  }
+
+  &--mini {
+    height: $fab-mini-height;
+    width: $fab-mini-width;
+    border-radius: $fab-mini-border-radius;
+    padding: $fab-mini-padding;
+  }
+
+  &--extended {
+    height: $fab-extended-height;
+    border-radius: $fab-extended-border-radius;
+    padding-right: $fab-extended-padding-right;
+    padding-left: $fab-extended-padding-left;
+
+    & &__icon {
+      margin-right: $fab-extended-icon-spacing;
+    }
+  }
+
+  .app-fab--extended.app-fab--mini {
+    height: $fab-mini-height;
+  }
+
+  &--disabled {
+    opacity: $fab-disabled-opacity;
+  }
+}
+
+.app-fab-dialog {
+  position: fixed;
+  bottom: 44px;
+  right: 0;
+  // background-color: $color-background-medium;
+  background-color: transparent;
+  // border-radius: 12px;
+  padding: 1rem;
+  // border: 1px solid $color-border;
+  // min-width: 300px;
+  // box-shadow: $elevation-medium;
+
+  .icon-contained {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: $color-status-neutral-background;
+    color: $color-status-neutral;
+    border-radius: 12px;
+  }
+
+  #feedback_button {
+    @include fab_button();
+  }
+
+  #bug_button {
+    @include fab_button();
+    line-height: 38px;
+  }
+
+  a#bug_button,
+  a#bug_button:visited,
+  a#bug_button:active {
+    color: $button-overlay-text-color !important;
+  }
+}

src/assets/scss/app/components/_index.scss

@@ -0,0 +1 @@
+@import 'fab';

src/assets/scss/app/form/_states.scss

@@ -0,0 +1 @@
+@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;

src/assets/scss/app/form/_textarea.scss

@@ -0,0 +1,104 @@
+@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
+@use '@beeline/design-tokens/scss/tokens/components/formfield';
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+.textarea-field {
+  $px: 16px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
+  height: $textarea-without-label-medium-height;
+  background: formfield.$formfield-background-color;
+  border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
+  border-radius: formfield.$formfield-border-radius;
+
+  & &__label {
+    position: absolute;
+    top: $textarea-with-label-text-margin-top;
+    left: $px;
+    transition: font-size 300ms ease-out;
+    color: formfield.$formfield-label-color;
+  }
+
+  & textarea {
+    height: $textarea-medium-text-height;
+    width: 100%;
+    outline: none;
+    border: none;
+    box-shadow: none;
+    resize: none;
+    background-color: transparent;
+    color: themes.$color-text-active;
+  }
+
+  & &__resizer {
+    position: absolute;
+    bottom: $textarea-resizer-margin-bottom;
+    right: $textarea-resizer-margin-right;
+    rotate: -45deg;
+    width: 1em;
+    height: 1em;
+
+    &:hover {
+      cursor: nwse-resize;
+    }
+
+    &::before {
+      content: '';
+      display: flex;
+      background-color: darkslategrey;
+      width: 10px;
+      height: 1px;
+    }
+
+    &::after {
+      content: '';
+      display: flex;
+      position: relative;
+      right: -3px;
+      bottom: -2px;
+      background-color: darkslategrey;
+      width: 4px;
+      height: 1px;
+    }
+  }
+
+  &.textarea-field--with-label {
+    height: $textarea-with-label-medium-height;
+    padding-top: $textarea-with-label-text-margin-top;
+
+    &.textarea-field--floated .textarea-field__label {
+      top: $textarea-medium-label-floated-margin-top;
+      line-height: $textarea-small-label-floated-font-line-height;
+      font-size: $textarea-small-label-floated-font-size;
+    }
+
+    &.textarea-field--small {
+      height: $textarea-with-label-small-height;
+      padding-top: $textarea-small-label-margin-top;
+      top: $textarea-small-label-floated-margin-top;
+
+      & .textarea-field__label {
+        font-size: $textarea-small-label-font-size;
+        font-weight: $textarea-small-label-font-weight;
+        letter-spacing: $textarea-small-label-font-letter-spacing;
+      }
+    }
+  }
+
+  &.textarea-field--focused {
+    border-color: formfield.$formfield-border-color-focus;
+    background-color: transparent;
+  }
+
+  &.textarea-field--small {
+    padding-top: $textarea-without-label-small-text-margin-top;
+    height: $textarea-without-label-small-height;
+
+    & textarea {
+      height: $textarea-small-text-height;
+    }
+  }
+}