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

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>