Add Vue School Black Friday 21 banners (#1330)

* Add Vue School Black Friday 21 banners

* Update Black Friday Vue School banner

Author: nicodevs

src/.vuepress/config.js

@@ -274,7 +274,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Archivo:400,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
@@ -510,7 +510,7 @@ module.exports = {
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
     },
-    topBanner: false
+    topBanner: true
   },
   plugins: [
     [

src/.vuepress/public/images/vueschool/tech-coin-js.png

@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="vs-blackfriday-coins">
+    <img
+      v-for="coin in coins"
+      :key="coin.id"
+      :alt="coin.id"
+      :src="`/images/vueschool/tech-coin-${coin.id}.png`"
+      :class="[coin.id, coin.inverse ? inverseDirection : direction]"
+      :style="coin.style"
+      class="vs-blackfriday-coin">
+  </div>
+</template>
+
+<script>
+const coins = [
+  { id: 'js', inverse: true },
+  { id: 'ts' },
+  { id: 'vue', inverse: true },
+  { id: 'vuex', inverse: true },
+  { id: 'nuxt' }
+]
+
+export default {
+  data () {
+    return {
+      coins,
+      xPosition: 0,
+      direction: 'left',
+      inverseDirection: 'right',
+      isAnimated: false
+    }
+  },
+  mounted () {
+    if (window.innerWidth < 1024) return
+    this.isAnimated = true
+    this.animationTarget = document.getElementById('vs')
+    this.animationTarget.addEventListener('mousemove', this.animate)
+  },
+  beforeDestroy () {
+    if (!this.isAnimated) return
+    this.animationTarget.removeEventListener('mousemove', this.animate)
+  },
+  methods: {
+    animate (e) {
+      this.direction = e.pageX > this.xPosition ? 'right' : 'left'
+      this.inverseDirection = this.direction === 'left' ? 'right' : 'left'
+      this.xPosition = e.pageX
+    }
+  }
+}
+</script>
+
+<style>
+.vs-blackfriday-coins {
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.vs-blackfriday-coin {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .vs-blackfriday-coins {
+    background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet.svg);
+    background-position: center;
+    background-size: cover;
+  }
+}
+
+@media (min-width: 1024px) {
+  .vs-blackfriday-coins {
+    background: transparent;
+  }
+
+  #vs:hover .vs-blackfriday-coin.left {
+    transform: translateX(-600px);
+    transition: transform 30s linear;
+  }
+
+  #vs:hover .vs-blackfriday-coin.right {
+    transform: translateX(600px);
+    transition: transform 30s linear;
+  }
+
+  .vs-blackfriday-coin {
+    display: inline-block;
+    position: absolute;
+    transition: transform 1000ms linear;
+    transform: translateX(0);
+  }
+
+  .vs-blackfriday-coin.js {
+    width: 43px;
+    top: 32px;
+    left: calc(50% - 341px);
+  }
+
+  .vs-blackfriday-coin.ts {
+    top: 0;
+    left: 0;
+    width: 54px;
+    left: calc(50% + 457px);
+  }
+
+  .vs-blackfriday-coin.vue {
+    top: 18px;
+    width: 60px;
+    left: calc(50% + 586px);
+  }
+
+  .vs-blackfriday-coin.vuex {
+    top: 23px;
+    left: 0;
+    width: 56px;
+    left: calc(50% - 620px);
+  }
+
+  .vs-blackfriday-coin.nuxt {
+    top: 10px;
+    width: 48px;
+    left: calc(50% - 474px);
+  }
+}
+</style>