Новая структура и оформлениеr

src/.vitepress/theme/components/SectionLinkList/SectionLinkList.types.ts

@@ -0,0 +1,9 @@
+export type SectionLinkListItem = {
+  title: string,
+  link: string,
+  description?: string
+}
+
+export type SectionLinkListProps = {
+  links: SectionLinkListItem[]
+}

src/.vitepress/theme/components/SectionLinkList/SectionLinkList.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="$style.SectionLinkList">
+    <div v-for="link in links" :key="link.title" :class="$style.SectionLinkListItem">
+      <div :class="$style.SectionLinkListLink">
+        <VPLink :href="link.link">{{ link.title }}</VPLink>
+      </div>
+      <div :class="$style.SectionLinkListDescription">
+        {{ link.description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
+import { SectionLinkListProps } from './SectionLinkList.types'
+
+defineProps<SectionLinkListProps>()
+
+</script>
+
+<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";
+
+.SectionLinkList {
+  $el: &;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
+  margin-top: sizes.$size-spacing-x10;
+
+  &Item {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x2;
+    // max-width: 315px;
+  }
+
+  &Link {
+
+    a,
+    a:hover,
+    a:visited,
+    a:active {
+      color: themes.$color-text-link;
+      text-decoration: none;
+      @include mixin.subtitle3;
+    }
+  }
+
+  &Description {
+    color: themes.$color-text-inactive;
+    @include mixin.body3;
+  }
+}
+</style>