feat(base-divider): initializing component

components/BaseDivider.vue

@@ -3,7 +3,10 @@
      ************************************************************************* -->
 
 <template lang="pug">
+.c-base-divider
+  span.c-base-divider__category {{ category }}
 
+  hr.c-base-divider__line
 </template>
 
 <!-- *************************************************************************
@@ -11,11 +14,38 @@
      ************************************************************************* -->
 
 <script>
-export default {};
+export default {
+  props: {
+    category: {
+      name: String,
+      required: true
+    }
+  }
+};
 </script>
 
 <!-- *************************************************************************
      STYLE
      ************************************************************************* -->
 
-<style lang="scss"></style>
+<style lang="scss">
+$c: ".c-base-divider";
+
+#{$c} {
+  display: flex;
+  align-items: center;
+
+  #{$c}__category {
+    font-size: 18px;
+    color: #ffffff;
+    text-transform: uppercase;
+    font-weight: bold;
+    margin-right: 40px;
+  }
+
+  #{$c}__line {
+    flex: 1;
+    color: #313d4f;
+  }
+}
+</style>

components/TheCopyright.vue

@@ -28,7 +28,7 @@ $c: ".c-the-copyright";
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px 5px 5px 15px;
+  padding: 5px 5px 5px 10px;
   border-top: 1px solid #313d4f;
   border-left: 1px solid #313d4f;
   border-top-left-radius: 4px;

pages/index.vue

@@ -9,10 +9,17 @@
     srcset="/images/common/logo@2x.png"
     class="c-index__logo"
   )
-  p(
-    v-html="description"
-    class="c-index__description"
+  p.c-index__description
+    | Awesome cheatsheets for popular programming languages, frameworks and development tools.<br/>
+    | They include everything you should know in one single file. 👩‍💻👨‍💻
+
+  section(
+    v-for="(category, index) in categories"
+    class="c-index__category"
   )
+    base-divider(
+      :category="'0' + (index + 1) + '. ' + category.name"
+    )
 </template>
 
 <!-- *************************************************************************
@@ -20,13 +27,32 @@
      ************************************************************************* -->
 
 <script>
+import BaseDivider from "@/components/BaseDivider";
+
 export default {
+  components: {
+    BaseDivider
+  },
+
   data() {
     return {
-      description: `
-        Awesome cheatsheets for popular programming languages, frameworks and development tools.<br/>
-        They include everything you should know in one single file. 👩‍💻👨‍💻
-      `
+      categories: [
+        {
+          name: "Languages"
+        },
+        {
+          name: "Backend"
+        },
+        {
+          name: "Frontend"
+        },
+        {
+          name: "Databases"
+        },
+        {
+          name: "Tools"
+        }
+      ]
     };
   }
 };
@@ -52,5 +78,9 @@ $c: ".c-index";
     font-size: 24px;
     line-height: 36px;
   }
+
+  #{$c}__category {
+    margin-bottom: 30px;
+  }
 }
 </style>