add logos

docs/src/components/LogoItem/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <g-link class="logo-item" :to="to">
+    <div class="logo-item__image" v-html="svg" v-if="svg" />
+    <div class="logo-item__title">
+      {{ title }}
+    </div>
+  </g-link>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: null,
+    },
+
+    image: {
+      type: String,
+      default: null,
+    },
+
+    to: {
+      type: String,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      svg: null,
+    }
+  },
+
+  created() {
+    this.svg = require(`!html-loader!@/assets/logos/${this.image}.svg`)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgba($colorBlack, 0.03);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+
+  &__image ::v-deep svg {
+    width: 100%;
+    height: 3rem;
+  }
+
+  &__title {
+    white-space: nowrap;
+    font-size: 0.85rem;
+  }
+}
+</style>

docs/src/components/LogoList/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="logo-list">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-list {
+  column-count: 2;
+  column-gap: 1rem;
+
+  @media (min-width: 700px) {
+    column-count: 4;
+  }
+}
+</style>