From: Nico Devs <3766839+nicodevs@users.noreply.github.com>
Date: Wed, 17 Aug 2022 11:19:19 +0000 (-0300)
Subject: Docs: Add VF2 banner (#1520)
X-Git-Tag: v4.1.4~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=57a2b3487e7a354a7a9746439b96c12d9bac275b;p=thirdparty%2Fvuejs%2Frouter.git

Docs: Add VF2 banner (#1520)
---

diff --git a/packages/docs/.vitepress/components/VueSchool/BannerTop.vue b/packages/docs/.vitepress/components/VueSchool/BannerTop.vue
index a187640d..2de1910b 100644
--- a/packages/docs/.vitepress/components/VueSchool/BannerTop.vue
+++ b/packages/docs/.vitepress/components/VueSchool/BannerTop.vue
@@ -2,39 +2,26 @@
   <a
     v-if="isVisible"
     id="vs"
-    href="https://vueschool.io/sales/summer-vue/?friend=vuerouter"
+    href="https://vuejsforge.com/?friend=vuerouter&utm_source=vuerouter&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner"
     target="_blank"
     rel="noreferrer">
     <div class="vs-iso">
-      <img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
+      <img src="/images/vueschool/vf-iso.svg" alt="Vue Forge Logo">
     </div>
     <div class="vs-logo">
-      <img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
+      <img src="/images/vueschool/vf-logo.svg" alt="Vue Forge Logo">
     </div>
     <div class="vs-core">
-      <div class="vs-backpack">
-        <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
-      </div>
       <div class="vs-slogan-wrapper">
         <div class="vs-slogan">
-          Learn Vue this summer and <span class="vs-slogan-light">save 40%</span>
+          Join the 2nd edition of the largest hands-on Vue.js Event
         </div>
         <div class="vs-subline">
-          <span
-            v-if="isExtended"
-            :style="{ fontWeight: 'bold', marginRight: '8px' }">
-            Extended!
-          </span>
-          <span
-            v-else>
-            Limited time offer
-          </span>
-          <BannerCountdown
-            v-bind="{ remaining }" />
+          Starts 30 Aug. Build your own e-commerce app!
         </div>
       </div>
       <div class="vs-button">
-        Get Offer
+        JOIN FOR FREE
       </div>
     </div>
     <div
@@ -47,49 +34,39 @@
 </template>
 
 <script>
-import BannerCountdown from './BannerCountdown.vue'
-
 export default {
-  components: {
-    BannerCountdown
-  },
   data () {
     return {
-      isActive: null,
-      isExtended: null,
       isVisible: false,
       remaining: 0
     }
   },
   mounted () {
     const now = new Date()
-    const extension = new Date('2022-07-27T00:00:00+02:00')
-    const end = new Date('2022-07-29T00:00:00+02:00')
-
-    this.isActive = now < end
-    this.isExtended = now > extension && now < end
-
-    this.remaining = (this.isExtended ? end : extension) - now
-    this.isVisible = !localStorage.getItem('VS_SUMMER_22') && this.remaining > 0
+    const end = new Date('2022-09-01T00:00:00+02:00')
+    this.remaining = end - now
+    this.isVisible = !localStorage.getItem('VF2') && this.remaining > 0
     if (this.isVisible) document.body.classList.add('has-top-banner')
   },
   methods: {
     close () {
       this.isVisible = false
       document.body.classList.remove('has-top-banner')
-      localStorage.setItem('VS_SUMMER_22', 1)
+      localStorage.setItem('VF2', 1)
     }
   }
 }
 </script>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
 #vs {
   align-items: center;
-  background-color: #202A5A;
+  background-color: #0A1124;
   box-sizing: border-box;
   color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   justify-content: center;
   position: fixed;
   padding: 0 10px;
@@ -97,51 +74,31 @@ export default {
   right: 0;
   top: 0;
   z-index: 100;
-  height: 5rem;
+  height: 72px;
   display: flex;
+  background-image: url(/images/vueschool/bg-mobile.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top right;
 }
 
 #vs:hover {
   text-decoration: none;
 }
 
-@media (min-width: 680px) {
-  #vs {
-    height: 5rem;
-  }
-}
-
 #vs:hover .vs-core .vs-button {
-  background: #f22606;
+  background: rgb(240, 80, 35);
+  color: #FFF;
 }
 
 #vs .vs-iso {
   position: absolute;
-  left: 20px;
-  height: 26px;
-  display: none;
+  left: 10px;
+  height: 28px;
 }
 
 #vs .vs-iso img {
-  height: 26px;
-}
-
-@media (min-width: 680px) {
-  #vs .vs-iso {
-    left: 40px;
-    height: 40px;
-    display: inline-block;
-  }
-
-  #vs .vs-iso img {
-    height: 40px;
-  }
-}
-
-@media (min-width: 900px) {
-  #vs .vs-iso {
-    display: none;
-  }
+  height: 28px;
 }
 
 #vs .vs-logo {
@@ -150,113 +107,124 @@ export default {
   left: 40px;
 }
 
-@media (min-width: 900px) {
-  #vs .vs-logo {
-    display: block;
-  }
-}
-
 #vs .vs-core {
   display: flex;
   align-items: center;
-}
-
-#vs .vs-core .vs-backpack {
-  margin-right: 26px;
-}
-
-#vs .vs-core .vs-backpack img {
-  height: 44px;
-}
-
-#vs .vs-core .vs-slogan-wrapper {
-  margin-right: 26px;
+  width: 288px;
 }
 
 #vs .vs-core .vs-slogan {
   color: #FFF;
   font-weight: bold;
-  font-size: 16px;
+  font-size: 12px;
   text-align: center;
 }
 
-@media (min-width: 680px) {
-  #vs .vs-core .vs-slogan {
-    font-size: 18px;
-  }
+#vs .vs-core .vs-slogan-wrapper .vs-subline {
+  color: #cfc1e3;
+  text-align: center;
+  font-size: 10px;
+  margin-top: 4px;
+  font-weight: bold;
 }
 
-#vs .vs-core .vs-slogan > .vs-slogan-light {
-  color: #00b5ff;
-  display: block;
+#vs .vs-core .vs-button {
+  color: #000;
+  padding: 8px 6px;
+  border-radius: 4px;
+  background: #ffbb27;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 10px;
+  letter-spacing: 0.3px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
-#vs .vs-core .vs-slogan-wrapper .vs-subline {
-  color: #FFF;
-  text-align: center;
-  font-size: 12px;
+#vs .vs-close {
+  right: 0;
+  position: absolute;
+  padding: 10px;
+}
+
+#vs .vs-close:hover {
+  color: #56d8ff;
 }
 
 @media (min-width: 680px) {
-  #vs .vs-core .vs-slogan-wrapper .vs-subline {
+  #vs {
+    background-image: url(/images/vueschool/bg-tablet.png);
+  }
+
+  #vs .vs-iso {
+    display: inline-block;
+  }
+
+  #vs .vs-core {
+    width: auto;
+  }
+
+  #vs .vs-core .vs-slogan-wrapper {
+    margin-right: 26px;
+  }
+
+  #vs .vs-core .vs-slogan {
     font-size: 16px;
   }
-}
 
-@media (min-width: 900px) {
-  #vs .vs-core .vs-slogan > .vs-slogan-light {
-    text-align: center;
-    display: inline;
+  #vs .vs-core .vs-slogan-wrapper .vs-subline {
+    font-size: 16px;
   }
-}
 
-#vs .vs-core .vs-button {
-  color: #fff;
-  padding: 13px 24px;
-  border-radius: 40px;
-  display: none;
-  background: #ff5338;
-  font-weight: bold;
-  text-transform: uppercase;
-}
+  #vs .vs-core {
+    margin-right: 40px;
+  }
 
-@media (min-width: 680px) {
   #vs .vs-core .vs-button {
-    display: inline-block;
+    font-size: 13px;
+    padding: 8px 15px;
   }
-}
-
-#vs .vs-close {
-  right: 10px;
-  position: absolute;
-  padding: 10px;
-}
 
-@media (min-width: 680px) {
   #vs .vs-close {
     right: 20px;
   }
 }
 
-#vs .vs-close:hover {
-  color: #56d8ff;
+@media (min-width: 900px) {
+  #vs {
+    background-image: url(/images/vueschool/bg-desktop.png);
+  }
+
+  #vs .vs-iso {
+    display: none;
+  }
+
+  #vs .vs-logo {
+    display: block;
+  }
+
+  #vs .vs-core {
+    margin-right: 0;
+  }
 }
 
 /************************************/
 
 .has-top-banner {
-  margin-top: 5rem;
+  margin-top: 72px;
 }
 
 .has-top-banner .nav-bar {
-  margin-top: 5rem;
+  margin-top: 72px;
 }
 
 .has-top-banner .sidebar {
-  margin-top: 5rem;
+  margin-top: 72px;
 }
 
 .has-top-banner .page {
-  margin-top: 5rem;
+  margin-top: 72px;
 }
 </style>
diff --git a/packages/docs/public/images/vueschool/bg-desktop.png b/packages/docs/public/images/vueschool/bg-desktop.png
new file mode 100644
index 00000000..9e5391e5
Binary files /dev/null and b/packages/docs/public/images/vueschool/bg-desktop.png differ
diff --git a/packages/docs/public/images/vueschool/bg-mobile.png b/packages/docs/public/images/vueschool/bg-mobile.png
new file mode 100644
index 00000000..5866d7fc
Binary files /dev/null and b/packages/docs/public/images/vueschool/bg-mobile.png differ
diff --git a/packages/docs/public/images/vueschool/bg-tablet.png b/packages/docs/public/images/vueschool/bg-tablet.png
new file mode 100644
index 00000000..b43a07ec
Binary files /dev/null and b/packages/docs/public/images/vueschool/bg-tablet.png differ
diff --git a/packages/docs/public/images/vueschool/vf-iso.svg b/packages/docs/public/images/vueschool/vf-iso.svg
new file mode 100644
index 00000000..70a5bcaf
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vf-iso.svg
@@ -0,0 +1,6 @@
+<svg width="34" height="29" viewBox="0 0 34 29" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path fill="#FF5323" d="M14.323 13.408h1.257l3.165-5.448h-7.61L9.672 5.455h10.522L23.359 0H0l4.614 7.96H0l3.188 5.448h4.59l8.638 14.901V16.985z"/>
+        <path fill="#FDB92C" d="M16.416 16.985V28.31L32.83 0h-6.56z"/>
+    </g>
+</svg>
diff --git a/packages/docs/public/images/vueschool/vf-logo.svg b/packages/docs/public/images/vueschool/vf-logo.svg
new file mode 100644
index 00000000..1e6470cd
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vf-logo.svg
@@ -0,0 +1,8 @@
+<svg width="126" height="22" viewBox="0 0 126 22" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M67.132 6.966v8.267c0 1.886-.891 3.152-4.19 3.152v-2.273c.685-.036.99-.293.99-.944V6.966h3.2zm4.993-.258c2.21 0 3.692.733 3.885 2.812h-2.877a.867.867 0 0 0-.956-.796c-.586 0-.843.257-.843.586 0 .328.386.55 1.33.65 2.455.293 3.592.873 3.592 2.713 0 2.091-1.594 2.987-3.996 2.987-2.403 0-3.956-1.013-4.003-2.958h2.93a.908.908 0 0 0 1.055.879c.586 0 .89-.246.89-.586 0-.34-.357-.586-1.494-.715-2.291-.258-3.293-.879-3.293-2.695 0-1.951 1.705-2.877 3.78-2.877zm-18.642-.017c2.39 0 4.418 1.365 4.418 4.417v.78h-5.878a1.523 1.523 0 0 0 1.594 1.587c.891 0 1.237-.422 1.33-.908h2.99c-.258 1.951-1.759 3.088-4.437 3.088-2.678 0-4.706-1.559-4.706-4.365v-.13c0-2.764 2.11-4.47 4.689-4.47zm-11.335.246v5.015c0 .861.323 1.3 1.073 1.3s1.266-.468 1.266-1.476v-4.84h3.2v8.496h-3.2v-1.318a2.755 2.755 0 0 1-2.696 1.529c-1.623 0-2.842-.996-2.842-3.135V6.937h3.2zm18.443 5.173a1.758 1.758 0 1 1 0 3.516 1.758 1.758 0 0 1 0-3.516zM30.984 3.82l2.163 7.774 2.156-7.774h3.446L35 15.432h-4.161L27.005 3.82h3.98zM53.5 8.753c-.861 0-1.33.504-1.46 1.465h2.796c-.035-.914-.474-1.465-1.336-1.465zm13.243-5.508a1.757 1.757 0 0 1-1.182 3.053 1.641 1.641 0 0 1-1.758-1.611 1.758 1.758 0 0 1 2.94-1.442z" fill="#FF5323"/>
+        <path d="M112.374 8.08V6.906h3.2V14.7c0 2.53-1.676 3.878-4.84 3.878-2.901 0-4.296-1.2-4.525-3.21h3.165c.117.515.41 1.001 1.4 1.001a1.448 1.448 0 0 0 1.624-1.622v-1.313a2.842 2.842 0 0 1-2.585 1.494c-1.934 0-3.557-1.4-3.557-4.03v-.13c0-2.548 1.606-4.1 3.516-4.1a2.702 2.702 0 0 1 2.602 1.411zm9.02-1.39c2.39 0 4.418 1.366 4.418 4.418v.78h-5.878a1.523 1.523 0 0 0 1.594 1.587c.891 0 1.237-.422 1.33-.908h2.99c-.258 1.951-1.759 3.088-4.437 3.088-2.678 0-4.706-1.559-4.706-4.365v-.13c0-2.764 2.11-4.47 4.689-4.47zm-27.568.018c2.684 0 4.688 1.64 4.688 4.37v.13c0 2.794-2.08 4.435-4.729 4.435s-4.706-1.582-4.706-4.353v-.13c0-2.764 2.063-4.452 4.747-4.452zM88.61 3.82V6.66h-4.354v2.156h3.516v2.713h-3.516v3.902H80.57V3.82h8.04zm16.949 3v2.988c-1.758-.094-2.731.492-2.731 1.71v3.914h-3.2V6.937h3.2v1.722a2.666 2.666 0 0 1 2.73-1.84zM93.826 9.087c-.99 0-1.512.668-1.512 1.998v.129c0 1.382.486 2.097 1.512 2.097s1.43-.738 1.43-2.086h.03v-.093c0-1.33-.47-2.045-1.46-2.045zm17.2-.023c-.96 0-1.494.667-1.494 1.757v.129c0 1.037.522 1.723 1.495 1.723.972 0 1.494-.704 1.494-1.776v-.111c0-1.043-.533-1.722-1.494-1.722zm10.385-.311c-.861 0-1.33.504-1.459 1.465h2.795c-.035-.914-.474-1.465-1.336-1.465z" fill="#FDB92C"/>
+        <path fill="#FF5323" d="M10.953 10.253h.961l2.42-4.166H8.516l-1.12-1.916h8.047L17.862 0H0l3.528 6.087H0l2.438 4.166h3.51l6.605 11.395v-8.66z"/>
+        <path fill="#FDB92C" d="M12.553 12.989v8.66L25.106 0H20.09z"/>
+    </g>
+</svg>