add brand, fix typo, clickable cards

components/Card.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .card
+  .card(@click="goToSite(url)")
     .card--title
       p {{title}}
     .card--body
@@ -9,7 +9,12 @@
 
 <script>
 export default {
-  props: ['title', 'desc', 'url']
+  props: ['title', 'desc', 'url'],
+  methods: {
+    goToSite(url){
+      location.href = url
+    }
+  }
 }
 </script>
 
@@ -19,6 +24,17 @@ export default {
   background: #2D3748;
   border-radius: .3rem;
   padding: 1rem;
+  transition: .2s ease-in-out;
+  display:flex;
+  flex-direction: column;
+
+  &:hover {
+    transform: scale(1.002);
+    background: #008190;
+    cursor: pointer;
+    box-shadow: 0 4px 6px -1px rgba(45, 55, 72, 0.1), 0 2px 4px -1px rgba(45, 55, 72, 0.06);
+
+  }
 
   &--title {
     p{
@@ -38,6 +54,7 @@ export default {
     a {
      font-size: 12px;
      line-height: 1;
+     align-self: bottom;
     }
   }
 }

components/Logo.vue

@@ -1,15 +1,38 @@
 <template lang="pug">
-  nuxt-link(to="/").logo
+  .logo(@click="goToHome")
     img(src="~/assets/logo.svg")
+    p webgems.io
 </template>
 
+<script>
+export default {
+  methods: {
+    goToHome(){
+      this.$router.push("/")
+    }
+  }
+}
+</script>
+
 
 <style lang="scss" scoped>
 .logo {
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-direction: row;
+
+  &:hover {
+    cursor: pointer;
+  }
+  img {
+    max-width:30px;
+  }
+  p {
+    margin: 0 0 0 .3rem;
+    font-size: 12px;
+  }
 }
-img {
-  padding: .2rem;
-}
+
+
 </style>