update vueschool banner (#2793)

Author: rahaug

themes/vue/layout/partials/vueschool_banner.ejs

@@ -1,23 +1,19 @@
-<a id="vs" class="vs-hidden" href="https://vueschool.io/the-vuejs-master-class?friend=vuejs#plans" target="_blank" rel="noreferrer">
+<a id="vs" class="vs-hidden" href="https://vueschool.io/sales/flashsale21?friend=vuejs" target="_blank" rel="noreferrer">
   <div class="vs-iso">
     <img src="/images/banners/vs-iso.svg" alt="Vue School logo">
   </div>
   <div class="vs-logo">
     <img src="/images/banners/vs-logo.svg" alt="Vue School logo">
   </div>
   <div class="vs-core">
+    <div class="vs-illustration">
+      <img src="/images/banners/vs-backpack.svg" alt="backpack illustration">
+    </div>
     <div class="vs-slogan">
-      <div class="vs-slogan-up">
-        LEARN VUE AT VUE SCHOOL
-      </div>
-      <div class="vs-slogan-down">
-        Register today and get <strong>20% OFF</strong>
-      </div>
+      <span class="vs-slogan-main">Flash Sale -</span> Less than <span style="color: #1fdb69">48hrs left</span> to get 20% OFF!
     </div>
     <div class="vs-button">
-      <div class="vs-button-inside">
-        <img src="/images/banners/learn-more.svg" alt="Learn More">
-      </div>
+      GET OFFER
     </div>
   </div>
   <div id="vs-close" class="vs-close">

themes/vue/source/css/_vueschool.styl

@@ -54,10 +54,7 @@ body.has-vs-banner
   box-sizing: border-box
   color: #fff
   background-size: cover
-  background-color: #1E204D
-  background-repeat: no-repeat
-  background-position: top right
-  background-image: url(../images/banners/vueschool-banner-bg-mobile-2.svg)
+  background-color: #202A5A
   display: flex
   justify-content: center
   align-items: center
@@ -69,22 +66,16 @@ body.has-vs-banner
   top: 0
   @media (min-width: 680px)
     min-height: $vs-banner-height-desktop
-    background-image: url(../images/banners/vueschool-banner-bg-tablet-2.svg)
   @media (min-width: 900px)
     position: static
-    background-image: url(../images/banners/vueschool-banner-bg-desktop-2.svg)
 
   &.vs-hidden
     display: none
 
   &:hover
     .vs-core
       .vs-button
-        .vs-button-inside
-          background: linear-gradient(#ed81eb, #d457d0)
-        &.vs-button-alt
-          .vs-button-inside
-            background: linear-gradient(#ffea80, #ffba49)
+        background-color: #364fde
 
   .vs-iso
       position: absolute
@@ -93,11 +84,6 @@ body.has-vs-banner
       img
         height: 26px
       @media (min-width: 680px)
-        left: 40px
-        height: 40px
-        img
-          height: 40px
-      @media (min-width: 900px)
         display: none
 
   .vs-logo
@@ -111,53 +97,46 @@ body.has-vs-banner
     display: flex
     align-items: center
 
+    .vs-illustration
+      display: none
+      @media (min-width: 680px)
+        display: inline-block
+        margin-right: 8px
+      @media (min-width: 900px)
+        margin-right: 20px
+
     .vs-slogan
       text-align: center
-
-      .vs-slogan-up
-        color: #47b785
-        font-size: 14px
-        font-weight: bold
-        @media (min-width: 680px)
-          font-size: 18px
-
-      .vs-slogan-down
-        color: #fff
-        font-size: 12px
-        padding-top: 2px
+      font-size: 14px
+      font-weight: bold
+      @media (min-width: 680px)
+        font-size: 22px
+      .vs-slogan-main
+        display: none
         @media (min-width: 680px)
-          font-size: 16px
-        strong
-          color: #fff
-          font-weight: bold
+          display: inline
 
     .vs-button
-      margin-left: 43px
+      margin-left: 8px
       color: #fff
-      background: linear-gradient(to bottom, #b349b0, #dc61da)
+      background: #667dff
       padding: 2px
       border-radius: 40px
       display: none
+      padding: 17px 24px
+      font-weight: bold
       @media (min-width: 680px)
         display: inline-block
-      .vs-button-inside
-        border-radius: 40px
-        background: linear-gradient(#dc61da, #b349b0)
-        transition: all .25s ease-in
-        padding: 12px 24px 8px
-        line-height: 0
-        @media (min-width: 680px)
-          padding: 12px 24px 8px
-      &.vs-button-alt
-        background: linear-gradient(to bottom, #ffcc38, #ffd13d)
-        .vs-button-inside
-          background: linear-gradient(to bottom, #ffe24f, #ffa40e)
+      @media (min-width: 900px)
+        margin-left: 20px
 
   .vs-close
       right: 10px
       position: absolute
       padding: 10px
       @media (min-width: 680px)
+        right: 0px
+      @media (min-width: 900px)
         right: 20px
       &:hover
         color: #56D8FF