Docs: Update Vue School Black Friday banner (vuejs#1200)

Author: nicodevs

docs/.vitepress/components/VueSchool/BannerCoins.vue

@@ -0,0 +1,133 @@
+<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-property: transform;
+    transition-timing-function: cubic-bezier(.17, .84, .44,1);
+    transition-duration: 75ms;
+    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>

docs/.vitepress/components/BannerTop.vue renamed to docs/.vitepress/components/VueSchool/BannerTop.vue

@@ -5,6 +5,7 @@
     target="_blank"
     rel="noreferrer"
   >
+    <BannerCoins />
     <div class="vs-core">
       <div class="vs-logo">
         <img src="/images/vueschool/vueschool_blackfriday_logo.svg">
@@ -27,6 +28,16 @@
   </a>
 </template>
 
+<script>
+import BannerCoins from './BannerCoins.vue'
+
+export default {
+  components: {
+    BannerCoins
+  }
+}
+</script>
+
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
 
@@ -54,12 +65,6 @@
   #vs {
     height: 5rem;
     justify-content: center;
-    background-image: url("/images/vueschool/vueschool_blackfriday_background_tablet.svg");
-  }
-}
-@media (min-width: 900px) {
-  #vs {
-    background-image: url("/images/vueschool/vueschool_blackfriday_background_desktop.svg");
   }
 }
 #vs:hover .vs-core .vs-button {

docs/.vitepress/theme/Layout.vue

@@ -48,7 +48,7 @@ import { defineAsyncComponent } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import sponsors from '../components/sponsors.json'
 
-const BannerTop = defineAsyncComponent(() => import('../components/BannerTop.vue'))
+const BannerTop = defineAsyncComponent(() => import('../components/VueSchool/BannerTop.vue'))
 
 export default {
   name: 'Layout',