🚧 Importing code from Undesign, and scripts and third party services …

…removed

.eslintrc.js

@@ -2,19 +2,19 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true,
+    node: true
   },
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: 'babel-eslint'
   },
   extends: [
     '@nuxtjs',
     'prettier',
     'prettier/vue',
     'plugin:prettier/recommended',
-    'plugin:nuxt/recommended',
+    'plugin:nuxt/recommended'
   ],
   plugins: ['prettier'],
   // add your custom rules here
-  rules: {},
+  rules: {}
 }

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none"
 }

assets/style/_mixins.scss

@@ -0,0 +1,7 @@
+/* stylelint-disable */
+@mixin container($padding) {
+  max-width: $container-width;
+  padding: 0 $padding;
+  margin: auto;
+}
+/* stylelint-enable */

assets/style/_variables.scss

@@ -0,0 +1,43 @@
+:root {
+  --font-xl: 28px;
+  --font-lg: 24px;
+  --font-md: 20px;
+  --font-sm: 16px;
+  --font-xs: 14px;
+  --font-xxs: 12px;
+
+  @media (max-width: 768px) {
+    --font-xl: 26px;
+    --font-lg: 20px;
+    --font-md: 18px;
+    --font-sm: 14px;
+    --font-xs: 14px;
+    --font-xxs: 12px;
+  }
+}
+
+// Variables
+
+$container-width: 1200px;
+$container-padding: 30px;
+
+$primary-color: #5a51fe;
+$secondary-color: #8751fe;
+$text-color: #222;
+$link-color: $primary-color;
+$background-color: #f6f8fa;
+$grey-color: #908f9e;
+$medium-grey-color: lighten($grey-color, 30);
+$light-grey-color: #f6f8fa;
+
+$font-xl: var(--font-xl);
+$font-lg: var(--font-lg);
+$font-md: var(--font-md);
+$font-sm: var(--font-sm);
+$font-xs: var(--font-xs);
+$font-xxs: var(--font-xxs);
+
+$system-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell",
+  "Helvetica Neue", sans-serif;
+$primary-font-family: $system-font-family;
+$secondary-font-family: "Roboto Mono", monospace;

assets/style/main.scss

@@ -0,0 +1,80 @@
+@import "normalize.css";
+@import "variables";
+@import "mixins";
+
+body {
+  font-family: $primary-font-family;
+  color: $text-color;
+  font-size: $font-sm;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $secondary-font-family;
+}
+
+.container {
+  /* stylelint-disable */
+  @include container($container-padding);
+  /* stylelint-enable */
+
+  box-sizing: border-box;
+}
+
+.section-title {
+  color: $primary-color;
+  text-align: center;
+}
+
+.section-description {
+  text-align: center;
+  font-size: $font-sm;
+  color: $grey-color;
+  font-weight: 400;
+  max-width: 600px;
+  margin: auto;
+  margin-bottom: 32px;
+}
+
+.hr {
+  border: 0;
+  margin: 0;
+  width: 100%;
+  height: 1px;
+  background: $medium-grey-color;
+}
+
+.button {
+  background: linear-gradient(65deg, $primary-color 0, $secondary-color 100%);
+  font-family: $secondary-font-family;
+  color: #fff;
+  display: inline-flex;
+  font-size: $font-xxs;
+  letter-spacing: 0;
+  font-weight: 700;
+  line-height: 16px;
+  text-transform: uppercase;
+  text-decoration: none !important;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  justify-content: center;
+  padding: 16px 32px;
+  text-align: center;
+  white-space: nowrap;
+  box-shadow: 0 8px 24px rgba(32, 43, 54, 0.12);
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: #fff;
+    box-shadow: 0 8px 24px rgba(32, 43, 54, 0.25);
+  }
+}
+
+a {
+  color: $primary-color;
+}

commitlint.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ['@commitlint/config-conventional']
 }

components/CategoryItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <nuxt-link :to="`/${slug}/`" class="category-item">
+    <p class="icon">
+      {{ icon }}
+    </p>
+    <p class="name">
+      {{ name }}
+    </p>
+  </nuxt-link>
+</template>
+
+<script>
+export default {
+  name: 'CategoryItem',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    slug: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/style/variables';
+
+.category-item {
+  display: flex;
+  background-color: #fff;
+  padding: 42px 16px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 3px;
+  border: 1px solid $medium-grey-color;
+  box-shadow: 0 4px 24px rgba(32, 43, 54, 0.08);
+  color: $text-color;
+  transform: translateX(0) translateY(0) translateZ(0);
+  transition: all 0.4s ease;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    transform: translateX(0) translateY(-8px) translateZ(0);
+    box-shadow: 0 8px 24px rgba(32, 43, 54, 0.12);
+  }
+}
+
+.icon {
+  font-size: $font-xl;
+  margin: 0;
+}
+
+.name {
+  font-size: $font-sm;
+  margin-bottom: 0;
+  font-family: $secondary-font-family;
+}
+</style>

components/ResourceItem.vue

@@ -0,0 +1,111 @@
+<template>
+  <a :href="url" target="_blank" class="resource-item">
+    <img v-if="icon" :src="icon" alt="" class="icon" />
+    <div v-if="!icon" class="icon icon--placeholder">
+      {{ name | firstLetter }}
+    </div>
+    <div class="text">
+      <h3 class="title">
+        {{ name }}
+      </h3>
+      <p class="description">
+        {{ description }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'ResourceItem',
+  filters: {
+    firstLetter(value) {
+      if (!value) return ''
+      value = value.toString()
+      return value.charAt(0)
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/style/variables';
+
+.resource-item {
+  display: flex;
+  text-decoration: none;
+  padding: 16px 0;
+  border-bottom: 1px solid $medium-grey-color;
+  transform: translateX(0) translateY(0) translateZ(0);
+  transition: all 0.4s ease;
+  align-items: center;
+
+  &:hover {
+    transform: translateX(5px) translateY(0) translateZ(0);
+  }
+
+  &:last-of-type {
+    border: none;
+  }
+}
+
+.title {
+  margin-top: 4px;
+  margin-bottom: 8px;
+  color: $text-color;
+  font-family: $primary-font-family;
+}
+
+.description {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: $grey-color;
+}
+
+.icon {
+  height: 64px;
+  width: 64px;
+  min-height: 64px;
+  min-width: 64px;
+  object-fit: contain;
+  margin-right: 16px;
+  background-color: $light-grey-color;
+  border-radius: 3px;
+  padding: 16px;
+  box-sizing: border-box;
+
+  @media (max-width: 720px) {
+    height: 32px;
+    width: 32px;
+    min-height: 32px;
+    min-width: 32px;
+    padding: 4px;
+  }
+
+  &--placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $grey-color;
+    font-weight: 900;
+  }
+}
+</style>