From: Nico Devs <3766839+nicodevs@users.noreply.github.com>
Date: Fri, 22 Apr 2022 15:29:21 +0000 (-0300)
Subject: Vueschool Free Weekend Banner (#1202)
X-Git-Tag: @pinia/nuxt@0.1.9~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1141bee67308b89b72611aeacc7901e9129e18d6;p=thirdparty%2Fvuejs%2Fpinia.git

Vueschool Free Weekend Banner (#1202)

* docs(docs): Vue School Free Weekend Banner

* docs(docs): Update Free Weekend Banner

* docs(docs): Restore video introduction link

* docs(docs): Change Free Weekend copy

* docs(docs): Fix link referrer
---

diff --git a/packages/docs/.vitepress/components/Banner.vue b/packages/docs/.vitepress/components/Banner.vue
new file mode 100644
index 00000000..ccaac7a6
--- /dev/null
+++ b/packages/docs/.vitepress/components/Banner.vue
@@ -0,0 +1,240 @@
+<template>
+  <a
+    id="vs"
+    v-if="isVisible"
+    href="https://vueschool.io/free-weekend?friend=pinia"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <div class="vs-logo">
+      <img src="/images/vueschool/vs-iso.svg" class="logo-small">
+      <img src="/images/vueschool/vs-logo.svg" class="logo-big">
+    </div>
+    <div class="vs-core">
+      <div class="vs-slogan">
+        <div class="vs-slogan-subtitle">
+          VUE 3 MASTERCLASS - FREE WEEKEND
+        </div>
+        <div class="vs-slogan-title">
+          Register at <strong>vueschool.io/free-weekend</strong>
+        </div>
+      </div>
+      <div class="vs-button">
+        Free Access
+      </div>
+    </div>
+    <div id="vs-close" class="vs-close" @click.stop.prevent="close">
+      <img src="/images/vueschool/vs-close.svg" alt="Close">
+    </div>
+  </a>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isVisible: false
+    }
+  },
+  mounted () {
+    this.isVisible = !localStorage.getItem('VS_FW_22')
+    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_FW_22', 1)
+    }
+  }
+}
+</script>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&display=swap');
+
+#vs {
+  align-items: center;
+  background-color: #000c19;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  font-family: 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;
+  justify-content: center;
+  position: fixed;
+  padding: 0 10px;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 100;
+  height: 5rem;
+  line-height: 1;
+  background-image: url(/images/vueschool/vs-fw-bg.svg);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+#vs:hover {
+  text-decoration: none;
+}
+#vs .vs-logo {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}
+#vs .vs-logo .logo-small {
+  display: none;
+}
+#vs .vs-logo .logo-big {
+  display: none;
+}
+@media (min-width: 768px) {
+  #vs .vs-logo .logo-small {
+    display: inline-block;
+  }
+}
+@media (min-width: 1024px) {
+  #vs .vs-logo .logo-small {
+    display: none;
+  }
+  #vs .vs-logo .logo-big {
+    display: inline-block;
+  }
+}
+@media (min-width: 680px) {
+  #vs {
+    height: 5rem;
+  }
+}
+#vs:hover .vs-core .vs-button {
+  background: linear-gradient(261deg, #e61463 100%, #db5248 3%);
+  border-color: #e61463;
+}
+@media (min-width: 680px) {
+  #vs .vs-core {
+    display: flex;
+    align-items: center;
+  }
+}
+#vs .vs-core .vs-slogan {
+  font-family: Archivo;
+  color: #fff;
+  margin-left: 8px;
+  text-align: center;
+}
+@media (min-width: 680px) {
+  #vs .vs-core .vs-slogan {
+    margin-left: 24px;
+  }
+}
+#vs .vs-core .vs-slogan .vs-slogan-subtitle {
+  font-size: 14px;
+  color: #47b785;
+  font-weight: bold;
+}
+@media (min-width: 680px) {
+  #vs .vs-core .vs-slogan .vs-slogan-subtitle {
+    font-size: 18px;
+  }
+}
+#vs .vs-core .vs-slogan .vs-slogan-title {
+  margin-top: 6px;
+  font-size: 16px;
+}
+@media (min-width: 680px) {
+  #vs .vs-core .vs-slogan .vs-slogan-title {
+    font-size: 18px;
+  }
+}
+#vs .vs-core .vs-slogan .vs-slogan-title strong {
+  color: #48a0ff;
+  font-weight: 400;
+}
+#vs .vs-core .vs-button {
+  color: #fff;
+  padding: 7px 10px;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-right: 18px;
+  margin-left: 16px;
+  font-family: 'Archivo', sans-serif;
+  object-fit: contain;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 2px;
+  background-image: linear-gradient(255deg, #d457d0 98%, #ed81eb 2%), linear-gradient(to bottom, #b349b0, #db61d9);
+  text-transform: uppercase;
+  border-color: #B349B0;
+  display: none;
+}
+@media (min-width: 680px) {
+  #vs .vs-core .vs-button {
+    display: inline-block;
+    margin-right: 0;
+    padding: 8px 24px;
+    margin-left: 22px;
+  }
+}
+@media (min-width: 1024px) {
+  #vs .vs-core .vs-button {
+    margin-left: 69px;
+  }
+}
+.vs-tag {
+  margin-left: 10px
+}
+@media (min-width: 1024px) {
+  .vs-tag {
+    margin-left: 30px
+  }
+}
+#vs .vs-close {
+  right: 6px;
+  position: absolute;
+}
+@media (min-width: 680px) {
+  #vs .vs-close {
+    padding: 10px;
+    right: 20px;
+  }
+}
+#vs .vs-close:hover {
+  color: #56d8ff;
+}
+
+/********************************************/
+
+.has-top-banner .theme {
+  margin-top: 80px;
+}
+
+.has-top-banner .theme .nav-bar {
+  margin-top: 80px;
+}
+
+.has-top-banner .theme .sidebar {
+  margin-top: 80px;
+}
+
+.has-top-banner .theme .page {
+  margin-top: 80px;
+}
+
+@media (min-width: 680px) {
+  .has-top-banner .theme {
+    margin-top: 80px;
+  }
+
+  .has-top-banner .theme .nav-bar {
+    margin-top: 80px;
+  }
+
+  .has-top-banner .theme .sidebar {
+    margin-top: 80px;
+  }
+
+  .has-top-banner .theme .page {
+    margin-top: 80px;
+  }
+}
+
+</style>
diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 5c80ce0d..8f45909a 100644
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -4,6 +4,7 @@ import sponsors from '../components/sponsors.json'
 import './sponsors.css'
 import { darkStorageConfig } from '../theme/dark-theme'
 import { useDark } from '@vueuse/core'
+import Banner from '../components/Banner.vue'
 
 export const Layout = defineComponent({
   name: 'CustomLayout',
@@ -16,7 +17,8 @@ export const Layout = defineComponent({
         Theme.Layout,
         {},
         {
-          'home-hero': () =>
+          'home-hero': () => h('div', {}, [
+            h(Banner),
             h(
               'div',
               {
@@ -33,7 +35,9 @@ export const Layout = defineComponent({
                   [h('span', 'Watch Video Introduction')]
                 ),
               ]
-            ),
+            )
+          ]),
+          'page-top': () => h(Banner),
           'sidebar-top': () =>
             h('div', { class: 'sponsors sponsors-top' }, [
               h('span', 'Platinum Sponsors'),
diff --git a/packages/docs/public/images/vueschool/vs-close.svg b/packages/docs/public/images/vueschool/vs-close.svg
new file mode 100644
index 00000000..0e2f31fc
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vs-close.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#FFF" fill-rule="nonzero">
+            <path d="M1569.69 33.321c-.415-.414-1.084-.414-1.498 0L1563 38.503l-5.192-5.192c-.414-.415-1.083-.415-1.497 0-.415.414-.415 1.083 0 1.497l5.192 5.192-5.192 5.192c-.415.414-.415 1.083 0 1.497.414.415 1.083.415 1.497 0l5.192-5.192 5.192 5.192c.414.415 1.083.415 1.497 0 .415-.414.415-1.083 0-1.497L1564.497 40l5.192-5.192c.404-.404.404-1.083 0-1.487z" transform="translate(-1556.000000, -33.000000)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/docs/public/images/vueschool/vs-fw-bg.svg b/packages/docs/public/images/vueschool/vs-fw-bg.svg
new file mode 100644
index 00000000..8c522206
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vs-fw-bg.svg
@@ -0,0 +1,219 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600" height="80" viewBox="0 0 1600 80">
+    <defs>
+        <linearGradient id="5ameghss0d" x1="69.517%" x2="6.594%" y1="51.532%" y2="50.219%">
+            <stop offset="0%" stop-color="#2F1360"/>
+            <stop offset="100%" stop-color="#170733" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="ldcbexte6e" x1="44.505%" x2="38.734%" y1="63.572%" y2="35.987%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%"/>
+        </linearGradient>
+        <linearGradient id="d2q9m4a13g" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="vad27r6pfh" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="9dpb6hp5ci" x1="50.011%" x2="50.011%" y1="98.997%" y2="0%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%" stop-color="#100222"/>
+        </linearGradient>
+        <linearGradient id="t5ze97cb1j" x1="67.838%" x2="77.139%" y1="49.111%" y2="52.125%">
+            <stop offset="0%" stop-color="#418D90"/>
+            <stop offset="100%" stop-color="#352869"/>
+        </linearGradient>
+        <linearGradient id="iunmf4p5dk" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="ugpy0s3qzl" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="d2qa2xa78m" x1="50.011%" x2="50.011%" y1="98.997%" y2="0%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%" stop-color="#100222"/>
+        </linearGradient>
+        <linearGradient id="ghn0xezfxn" x1="67.838%" x2="77.139%" y1="49.111%" y2="52.125%">
+            <stop offset="0%" stop-color="#463487"/>
+            <stop offset="100%" stop-color="#352869"/>
+        </linearGradient>
+        <linearGradient id="nkk1vcp9xo" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="iatia160pp" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="b93vg68qvq" x1="50.011%" x2="50.011%" y1="98.997%" y2="0%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%" stop-color="#100222"/>
+        </linearGradient>
+        <linearGradient id="qfqmiu1lhr" x1="85.547%" x2="0%" y1="49.383%" y2="50.617%">
+            <stop offset="0%" stop-color="#3AAB82"/>
+            <stop offset="100%" stop-color="#352869"/>
+        </linearGradient>
+        <linearGradient id="3ph8n0fdus" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="z844b6m03t" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="grslp9mosu" x1="50.011%" x2="50.011%" y1="98.997%" y2="0%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%" stop-color="#100222"/>
+        </linearGradient>
+        <linearGradient id="oi7nzej9iv" x1="85.547%" x2="0%" y1="49.111%" y2="50.889%">
+            <stop offset="0%" stop-color="#41878F"/>
+            <stop offset="100%" stop-color="#352869"/>
+        </linearGradient>
+        <linearGradient id="f8fiecmc3w" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="alvgpbp57x" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="z3rt2dgojy" x1="50.011%" x2="50.011%" y1="98.997%" y2="0%">
+            <stop offset="0%" stop-color="#100122"/>
+            <stop offset="100%" stop-color="#100222"/>
+        </linearGradient>
+        <linearGradient id="3zewkh3hjz" x1="85.547%" x2="0%" y1="49.111%" y2="50.889%">
+            <stop offset="0%" stop-color="#1B2A68"/>
+            <stop offset="100%" stop-color="#352869"/>
+        </linearGradient>
+        <linearGradient id="at7ruyopaA" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <linearGradient id="1y097csx7B" x1="50.02%" x2="50.02%" y1="100%" y2="-.011%">
+            <stop offset="0%" stop-color="#241644"/>
+            <stop offset="100%" stop-color="#040102"/>
+        </linearGradient>
+        <radialGradient id="pemavkj99b" cx="100%" cy="50%" r="946.157%" fx="100%" fy="50%" gradientTransform="matrix(-.04881 .21668 -.01103 -.99353 1.054 .78)">
+            <stop offset="0%" stop-color="#8647B7"/>
+            <stop offset="100%" stop-color="#050A1E"/>
+        </radialGradient>
+        <radialGradient id="eertgxvnhf" cx="4.87%" cy="50%" r="1332.284%" fx="4.87%" fy="50%" gradientTransform="matrix(-.07506 0 0 -1 .052 1)">
+            <stop offset="0%" stop-color="#53FFB3"/>
+            <stop offset="100%" stop-color="#3E2F7A"/>
+        </radialGradient>
+        <filter id="rx0t6c148C" width="269%" height="289.2%" x="-84.5%" y="-94.6%" filterUnits="objectBoundingBox">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="11"/>
+        </filter>
+        <path id="f8t3xp6zsa" d="M0 0H1600V80H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <mask id="j8rbacs7oc" fill="#fff">
+                <use xlink:href="#f8t3xp6zsa"/>
+            </mask>
+            <use fill="url(#pemavkj99b)" xlink:href="#f8t3xp6zsa"/>
+            <g fill="#FFF" mask="url(#j8rbacs7oc)">
+                <g transform="translate(141 5)">
+                    <circle cx="1144" cy="10" r="2" opacity=".142"/>
+                    <circle cx="1276" cy="6" r="2" opacity=".142"/>
+                    <circle cx="1415" cy="50" r="2" opacity=".359"/>
+                    <circle cx="1290" cy="37" r="2" opacity=".142"/>
+                    <circle cx="1049" cy="28" r="2" opacity=".359"/>
+                    <circle cx="1341" cy="64" r="2" opacity=".359"/>
+                    <circle cx="260" cy="28" r="2" opacity=".359"/>
+                    <circle cx="71" cy="64" r="2" opacity=".359"/>
+                    <circle cx="70" cy="38" r="1" opacity=".359"/>
+                    <circle cx="157" cy="63" r="1" opacity=".359"/>
+                    <circle cx="231" cy="8" r="1" opacity=".359"/>
+                    <circle cx="310" cy="63" r="1" opacity=".359"/>
+                    <circle cx="429" cy="1" r="1" opacity=".359"/>
+                    <circle cx="619" cy="69" r="1" opacity=".359"/>
+                    <circle cx="761" cy="51" r="1" opacity=".359"/>
+                    <circle cx="808" cy="67" r="1" opacity=".359"/>
+                    <circle cx="983" cy="66" r="1" opacity=".359"/>
+                    <circle cx="1184" cy="47" r="1" opacity=".359"/>
+                    <circle cx="1313" cy="58" r="1" opacity=".359"/>
+                    <circle cx="1313" cy="41" r="1" opacity=".359"/>
+                    <circle cx="1367" cy="41" r="1" opacity=".142"/>
+                    <circle cx="1412" cy="16" r="1" opacity=".359"/>
+                    <circle cx="1379" cy="16" r="1" opacity=".359"/>
+                    <circle cx="1146" cy="65" r="1" opacity=".359"/>
+                    <circle cx="1359" cy="15" r="1" opacity=".359"/>
+                    <circle cx="2" cy="2" r="2" opacity=".359"/>
+                    <circle cx="796" cy="6" r="2" opacity=".359"/>
+                </g>
+            </g>
+            <path fill="url(#5ameghss0d)" d="M1466.372 7.76l59.556 5.549-75.405 1.606-170.359 9.693-42.523-1.11 58.819-5.46 42.003-2.974-145.38-5.964 30.368 4.058 24.469 4.045L1143 11.085V80l220.316-1.273 125.536-8.515-73.365-7.78h50.885l130.39 10.236-48.38-8.287H1600V1.736S1490.4 4.817 1415.871 0l50.5 7.76z" mask="url(#j8rbacs7oc)" opacity=".101"/>
+            <g mask="url(#j8rbacs7oc)">
+                <g>
+                    <g>
+                        <path fill="url(#ldcbexte6e)" d="M1.288 2.32S-.034 8.265.104 9.683c.139 1.419 3.15 4.574 3.15 4.574s3.15 6.176 4.145 9.197c.995 3.02 4.407 6.864 4.407 6.864s11.712 11.127 15.24 10.989c1.616-.063 8.114-6.084 10.21-6.084 5.572 0 8.906-4.401 8.906-4.401s7.866-12.445 8.552-13.062c.686-.617 4.605-1.896 4.605-1.896s6.374-10.49 6.876-13.25l-17.735.663L1.288 2.32z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="url(#eertgxvnhf)" d="M1.288 2.32l8.377-.594 4.868-.466s23.026.033 29.672.259c0 0 5.526-1.257 7.027-1.296 1.502-.039 4.407 1.5 4.407 1.5l10.556.778s-4.84.944-8.525.902l3.542.672c-.67.286-1.43.5-2.238.632-1.405.239-11.974.415-16.98.384-5.006-.031-7.212-1.016-7.212-1.016l2.303-.49-2.708-.182s-8.202.81-11.334.864c-2.402-.004-4.8-.13-7.16-.379l-.3-.601S7.077 3.025 1.288 2.32z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="url(#d2q9m4a13g)" d="M13.598 3.78V7.93l-4.624.714s-.202.084-.714 1.26c-.51 1.175-2.864 4.134-2.864 4.134l-2.142.214 1.718 3.501s2.473.021 3.459.58c.985.558 3.164 2.22 3.164 2.22l1.307 3.27s1.308-6.044 1.382-6.997c.074-.953 1.359-5.038 1.16-5.751-.197-.714.079-3.396.079-3.396l.36-2.813s6.7.84 7.4 1.066c.7.227 1.004 2.783 1.004 2.783l2.302 4.799-2.579 7.018.995 5.945.313 4.47 3.638 9.458 2.879-1.994s2.358-15.532 2.528-16.241c.17-.71-.64-2.385-.64-2.385l1.147-7.296-.11-7.317 2.302-.793-2.708-.294s-8.501 1.159-9.91 1.28c-1.41.122-8.576-1.09-8.576-1.09l4.297-.954-6.567.458z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="url(#vad27r6pfh)" d="M50.353 5.096l5.742.54-.92 1.233-2.488 3.37-3.002 1.607-3.367.702-2.615 1.037h2.27l-.175 1.369-1.22 3.26-.06 2.333 1.64-.635s6.023-5.762 8.533-8.056c0 0 4.177-.726 4.605-1.171.428-.446 6.337-6.654 6.876-8.186l-8.502.904 3.542.672c-1.331.337-2.72.598-4.145.777-1.672.143-6.714.244-6.714.244z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="#41A997" d="M44.205 1.509l-1.843.518s1.354.171 2.137.295c.783.125 5.098-.072 5.863-.197.764-.124 3.601-.611 3.601-.611l.152-.5S51.997-.053 51.352.004c-.645.057-6.028 1.195-7.147 1.504z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="#10001D" d="M55.902 1.744l-1.796.573-2.814.04h-5.987s4.606-.224 5.3-.307c.696-.083 3.354-.541 3.354-.541l.152-.5 1.791.735z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                        <path fill="#000" d="M13.598 5.78L15.532 8.336 15.868 3.523 20.165 2.932 13.598 3.217zM57.67 3.403l3.542.672-1.53 6.241S64.437 5.21 66.2 2.5l-8.529.904zM24.443 4.194L28.956 6.662 31.747 8.336 32.314 9.767 34.819 8.87 34.778 4.075 37.076 3.585 34.363 3.403z" transform="translate(323 7) translate(1041.601 38.02)"/>
+                    </g>
+                    <g>
+                        <path fill="url(#9dpb6hp5ci)" d="M.774 2.25S.052 5.812.128 6.662c.075.85 1.72 2.74 1.72 2.74s1.719 3.7 2.262 5.51c.543 1.81 2.405 4.112 2.405 4.112s6.393 6.667 8.319 6.584c.882-.038 4.429-3.645 5.573-3.645 3.041 0 4.861-2.637 4.861-2.637s4.294-7.456 4.668-7.825c.375-.37 2.514-1.137 2.514-1.137s3.48-6.284 3.753-7.938l-9.68.397L.773 2.25z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="url(#t5ze97cb1j)" d="M.774 2.25l4.572-.576 2.658-.452s12.569.032 16.196.251c0 0 3.016-1.22 3.836-1.257.82-.038 2.406 1.456 2.406 1.456l5.761.754s-2.642.915-4.653.875l1.933.65c-.366.279-.78.487-1.221.614-.767.231-6.536.402-9.269.372-2.732-.03-3.936-.985-3.936-.985l1.257-.475-1.479-.176s-4.477.784-6.186.837c-1.311-.004-2.62-.126-3.909-.367l-.163-.584S3.934 2.934.774 2.25z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="url(#iunmf4p5dk)" d="M7.493 3.12v2.486l-2.524.427s-.11.05-.39.754c-.278.704-1.563 2.476-1.563 2.476l-1.169.129.938 2.096s1.35.013 1.888.347c.538.334 1.727 1.33 1.727 1.33l.714 1.958s.714-3.62.754-4.19c.04-.571.741-3.017.633-3.444-.108-.428.043-2.034.043-2.034L8.74 3.77s3.658.502 4.04.638c.382.136.548 1.667.548 1.667l1.257 2.873-1.408 4.203.543 3.56.17 2.677 1.987 5.663 1.57-1.194s1.288-9.3 1.38-9.725c.094-.425-.348-1.428-.348-1.428l.625-4.37-.06-4.38 1.257-.476-1.478-.176s-4.64.694-5.41.767c-.769.073-4.68-.654-4.68-.654l2.345-.57-3.585.274z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="url(#ugpy0s3qzl)" d="M27.556 4.942l3.135.523-.503 1.197-1.358 3.267-1.639 1.559-1.837.681-1.428 1.006h1.24l-.096 1.327-.666 3.162-.033 2.263.895-.616s3.288-5.588 4.658-7.813c0 0 2.28-.704 2.514-1.136.233-.433 3.459-6.453 3.753-7.939l-4.64.878 1.932.65c-.726.328-1.484.58-2.262.755-.913.138-3.665.236-3.665.236z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="#211941" d="M24.2 1.463l-1.006.503s.74.166 1.167.286c.427.121 2.783-.07 3.2-.19.417-.121 1.966-.594 1.966-.594l.083-.485S28.453-.05 28.1.005c-.352.055-3.29 1.159-3.901 1.458z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="#10001D" d="M30.585 1.692l-.98.555-1.536.038H24.8s2.514-.216 2.893-.297c.38-.08 1.83-.525 1.83-.525l.083-.485.978.714z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                        <path fill="#000" d="M7.493 5.606L8.549 8.084 8.733 3.416 11.078 2.843 7.493 3.12zM31.55 3.3l1.933.652-.834 6.053s2.594-4.952 3.557-7.582l-4.656.878zM13.413 4.067L15.877 6.46 17.4 8.084 17.709 9.472 19.077 8.602 19.054 3.952 20.309 3.477 18.828 3.301z" transform="translate(323 7) translate(1018.876 45.333)"/>
+                    </g>
+                    <g opacity=".6">
+                        <path fill="url(#d2qa2xa78m)" d="M.357 1.037S.024 2.678.059 3.07C.094 3.46.85 4.332.85 4.332s.792 1.705 1.043 2.54c.25.833 1.108 1.894 1.108 1.894s2.946 3.072 3.833 3.034c.407-.018 2.041-1.68 2.568-1.68 1.402 0 2.24-1.215 2.24-1.215S13.622 5.47 13.794 5.3c.173-.17 1.159-.523 1.159-.523s1.603-2.896 1.729-3.658l-4.46.183L.356 1.037z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="url(#ghn0xezfxn)" d="M.357 1.037L2.464.77 3.688.563s5.791.015 7.463.116c0 0 1.39-.562 1.768-.58.377-.017 1.108.671 1.108.671l2.655.348s-1.217.421-2.144.403l.89.3c-.168.128-.359.224-.562.283-.354.106-3.012.185-4.271.17-1.26-.013-1.814-.453-1.814-.453l.58-.219-.682-.081s-2.063.361-2.85.386c-.605-.002-1.208-.059-1.802-.17l-.075-.268s-2.14-.117-3.595-.432z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="url(#nkk1vcp9xo)" d="M3.453 1.437v1.146L2.29 2.78s-.051.023-.18.347c-.128.325-.72 1.141-.72 1.141l-.539.06.432.966s.622.005.87.16c.248.153.796.612.796.612l.329.902s.329-1.668.347-1.93c.019-.263.342-1.39.292-1.587-.05-.197.02-.937.02-.937l.09-.777s1.686.232 1.862.295c.176.062.252.768.252.768l.58 1.324-.65 1.936.25 1.64.08 1.234.915 2.61.724-.55s.593-4.286.636-4.482c.042-.196-.161-.658-.161-.658l.288-2.013-.028-2.019.58-.219-.682-.081s-2.138.32-2.492.353c-.355.034-2.157-.3-2.157-.3l1.08-.264-1.651.126z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="url(#iatia160pp)" d="M12.697 2.277l1.445.241-.232.552-.625 1.505-.756.719-.846.313-.658.464h.57l-.043.611-.307 1.457-.015 1.043.412-.284s1.515-2.575 2.146-3.6c0 0 1.051-.324 1.159-.523.107-.2 1.594-2.974 1.73-3.658l-2.14.404.892.3c-.335.15-.685.267-1.043.347-.42.064-1.689.11-1.689.11z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="#5E48B5" d="M11.15.674l-.462.232s.34.076.537.132c.197.055 1.282-.033 1.475-.088.192-.056.905-.274.905-.274l.039-.223s-.533-.476-.695-.45c-.163.025-1.517.533-1.798.671z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="#10001D" d="M14.093.78l-.452.256-.707.017h-1.506s1.158-.1 1.333-.137c.175-.037.843-.242.843-.242l.038-.223.451.329z" transform="translate(323 7) translate(1002 26.143)"/>
+                        <path fill="#000" d="M3.453 2.583L3.939 3.725 4.024 1.574 5.105 1.31 3.453 1.437zM14.538 1.52l.89.3-.384 2.79s1.195-2.282 1.64-3.493l-2.146.404zM6.181 1.874L7.316 2.977 8.018 3.725 8.16 4.365 8.79 3.964 8.78 1.821 9.358 1.602 8.676 1.521z" transform="translate(323 7) translate(1002 26.143)"/>
+                    </g>
+                    <g opacity=".267">
+                        <path fill="url(#b93vg68qvq)" d="M.691 1.938s-.38 1.83-.34 2.267c.04.436.905 1.407.905 1.407s.906 1.901 1.192 2.831c.286.93 1.266 2.113 1.266 2.113s3.367 3.425 4.38 3.382c.465-.02 2.333-1.873 2.935-1.873 1.602 0 2.56-1.354 2.56-1.354s2.262-3.83 2.459-4.02c.197-.19 1.324-.584 1.324-.584s1.832-3.229 1.976-4.078l-5.098.204L.691 1.938z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="url(#qfqmiu1lhr)" d="M.348 1.8l2.323-.244 1.35-.192s6.386.014 8.229.107c0 0 1.532-.516 1.948-.532.417-.016 1.223.616 1.223.616l2.927.319s-1.342.387-2.364.37l.982.276c-.186.117-.396.205-.62.26-.39.097-3.321.17-4.71.157-1.388-.013-2-.417-2-.417l.64-.201-.752-.075s-2.274.332-3.143.355c-.666-.002-1.33-.054-1.986-.156l-.083-.247S1.953 2.09.348 1.8z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="url(#3ph8n0fdus)" d="M3.407 2.086V3.43l-1.367.23s-.06.028-.211.408C1.677 4.448.98 5.406.98 5.406l-.633.07.508 1.132s.732.007 1.023.188c.292.18.936.719.936.719l.387 1.058s.387-1.956.408-2.265c.022-.308.402-1.63.344-1.86-.059-.232.023-1.1.023-1.1l.106-.91s1.982.272 2.19.345c.206.074.296.9.296.9l.681 1.554-.763 2.27.295 1.924.092 1.447 1.076 3.06.852-.645s.697-5.026.748-5.255c.05-.23-.19-.772-.19-.772l.34-2.36-.033-2.369.68-.256-.8-.095s-2.515.374-2.932.414c-.416.04-2.536-.353-2.536-.353l1.271-.309-1.943.148z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="url(#z844b6m03t)" d="M14.124 3.233l1.533.27-.246.615-.664 1.68-.802.801-.899.35-.698.518h.606l-.047.682-.325 1.626-.016 1.163.437-.316s1.609-2.874 2.28-4.018c0 0 1.115-.361 1.229-.584.114-.222 1.692-3.318 1.836-4.082l-2.27.451.945.335c-.355.168-.726.298-1.106.388-.447.071-1.793.121-1.793.121z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="#09080F" d="M12.818 1.577l-.47.22s.346.072.545.125c.2.052 1.302-.031 1.497-.084.195-.053.92-.26.92-.26l.038-.211s-.54-.452-.705-.428c-.165.024-1.54.507-1.825.638z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="#10001D" d="M15.348 1.485l-.509.425-.796.028h-1.695s1.304-.165 1.5-.227c.197-.061.95-.401.95-.401l.043-.372.507.547z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                        <path fill="#000" d="M3.348 3.52L3.937 4.938 4.039 2.266 5.348 1.938 3.348 2.097zM16.348 2.401l.83.344-.358 3.193s1.114-2.612 1.528-4l-2 .463zM6.348 3.311L7.777 4.474 8.661 5.264 8.84 5.938 9.633 5.516 9.62 3.255 10.348 3.024 9.489 2.938z" transform="translate(323 7) matrix(-1 0 0 1 1157 19)"/>
+                    </g>
+                    <g>
+                        <path fill="url(#grslp9mosu)" d="M.546 1.588S.037 4.103.09 4.702c.053.6 1.214 1.934 1.214 1.934s1.214 2.612 1.597 3.89 1.698 2.903 1.698 2.903 4.512 4.706 5.872 4.647c.623-.026 3.126-2.573 3.934-2.573 2.147 0 3.431-1.861 3.431-1.861s3.031-5.263 3.296-5.524c.264-.26 1.774-.802 1.774-.802s2.456-4.436 2.65-5.604l-6.834.28L.546 1.589z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="url(#oi7nzej9iv)" d="M.546 1.588l3.228-.406L5.65.862s8.872.023 11.432.178c0 0 2.13-.86 2.708-.887.579-.027 1.698 1.027 1.698 1.027l4.067.532s-1.865.646-3.284.618l1.364.46c-.258.196-.55.342-.862.432-.541.164-4.614.284-6.542.263-1.93-.021-2.78-.696-2.78-.696l.888-.335-1.043-.124s-3.16.553-4.367.59c-.926-.002-1.85-.088-2.76-.258l-.115-.412S2.777 2.07.546 1.588z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="url(#f8fiecmc3w)" d="M5.29 2.202v1.755l-1.782.302s-.078.035-.275.532-1.104 1.748-1.104 1.748l-.825.09.662 1.48s.953.01 1.332.245c.38.236 1.22.939 1.22.939l.503 1.382s.504-2.555.533-2.958c.028-.403.523-2.13.447-2.43-.076-.303.03-1.436.03-1.436l.138-1.19s2.582.356 2.852.451c.27.096.387 1.177.387 1.177l.887 2.028-.994 2.967.384 2.513.12 1.89 1.402 3.997 1.11-.843s.908-6.565.973-6.865c.066-.3-.246-1.008-.246-1.008l.441-3.084-.042-3.093.887-.335-1.043-.124s-3.276.49-3.819.54c-.543.052-3.304-.46-3.304-.46l1.656-.403-2.53.193z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="url(#alvgpbp57x)" d="M19.451 3.489l2.213.369-.355.844-.958 2.307-1.157 1.1-1.297.481-1.008.71h.875l-.068.937-.47 2.232-.023 1.597.632-.435s2.32-3.944 3.288-5.515c0 0 1.61-.497 1.774-.802.165-.305 2.442-4.555 2.65-5.603l-3.276.619 1.364.46c-.513.23-1.048.409-1.597.532-.644.097-2.587.167-2.587.167z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="#09080F" d="M17.082 1.033l-.71.355s.522.117.824.202c.302.085 1.964-.05 2.259-.135.294-.085 1.387-.419 1.387-.419l.059-.342s-.816-.73-1.065-.69c-.248.039-2.323.818-2.754 1.029z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="#10001D" d="M21.59 1.194l-.693.392-1.084.027h-2.307s1.775-.153 2.043-.21c.268-.056 1.292-.37 1.292-.37l.058-.343.69.504z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                        <path fill="#000" d="M5.289 3.957L6.035 5.707 6.164 2.411 7.82 2.007 5.289 2.202zM22.27 2.33l1.365.46-.589 4.272s1.831-3.495 2.511-5.351l-3.286.619zM9.468 2.871L11.207 4.56 12.282 5.707 12.501 6.686 13.466 6.072 13.45 2.789 14.335 2.454 13.29 2.33z" transform="translate(323 7) matrix(-1 0 0 1 1144.348 24.062)"/>
+                    </g>
+                    <g>
+                        <path fill="url(#z3rt2dgojy)" d="M1.177 3.42S.08 8.837.194 10.129c.115 1.292 2.614 4.166 2.614 4.166s2.615 5.626 3.44 8.377c.826 2.752 3.658 6.253 3.658 6.253s9.719 10.136 12.646 10.01c1.342-.058 6.734-5.542 8.473-5.542 4.625 0 7.392-4.01 7.392-4.01s6.528-11.335 7.097-11.897c.57-.562 3.822-1.727 3.822-1.727s5.29-9.555 5.706-12.07l-14.718.604-39.147-.871z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="url(#3zewkh3hjz)" d="M1.177 3.42l6.952-.875 4.04-.688s19.109.05 24.624.383c0 0 4.586-1.854 5.832-1.911 1.246-.058 3.657 2.213 3.657 2.213l8.76 1.146s-4.017 1.391-7.074 1.33l2.939.99c-.557.423-1.186.739-1.858.933-1.165.351-9.936.611-14.09.565-4.155-.046-5.986-1.498-5.986-1.498l1.911-.722-2.247-.268S21.83 6.211 19.23 6.291c-1.994-.005-3.983-.192-5.943-.558l-.248-.887S5.98 4.46 1.177 3.421z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="url(#at7ruyopaA)" d="M11.392 4.743v3.78l-3.837.65s-.168.076-.592 1.146c-.424 1.07-2.377 3.765-2.377 3.765l-1.778.195 1.426 3.187s2.052.02 2.87.527c.818.509 2.626 2.022 2.626 2.022l1.085 2.977s1.086-5.503 1.147-6.37c.061-.868 1.127-4.587.963-5.237-.164-.65.065-3.092.065-3.092l.298-2.56s5.56.764 6.142.97c.58.207.833 2.534.833 2.534l1.911 4.369-2.14 6.39.825 5.412.26 4.07 3.02 8.61 2.388-1.815s1.957-14.14 2.098-14.786c.142-.646-.531-2.171-.531-2.171l.952-6.643-.092-6.661 1.91-.723-2.246-.267s-7.056 1.055-8.225 1.166c-1.17.11-7.116-.994-7.116-.994l3.565-.868-5.45.417z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="url(#1y097csx7B)" d="M41.895 7.514l4.766.795-.765 1.819-2.063 4.968-2.492 2.37-2.794 1.036-2.17 1.528h1.883l-.145 2.018-1.013 4.808-.05 3.44 1.361-.936s5-8.496 7.082-11.879c0 0 3.466-1.07 3.822-1.727.355-.658 5.259-9.811 5.706-12.07l-7.055 1.334 2.939.99c-1.105.497-2.257.882-3.44 1.147-1.387.21-5.572.359-5.572.359z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="#09080F" d="M36.793 2.224l-1.53.765s1.125.252 1.774.435c.65.184 4.231-.107 4.865-.29.635-.184 2.99-.902 2.99-.902l.125-.738S43.26-.076 42.724.008c-.535.084-5.003 1.762-5.931 2.216z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="#10001D" d="M46.5 2.572l-1.49.845-2.335.057h-4.969s3.822-.329 4.399-.45c.577-.123 2.782-.8 2.782-.8l.126-.737L46.5 2.572z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                        <path fill="#000" d="M11.392 8.523L12.998 12.291 13.277 5.194 16.842 4.323 11.392 4.743zM47.968 5.018l2.939.99-1.269 9.203s3.944-7.529 5.408-11.527l-7.078 1.334zM20.393 6.184L24.138 9.822 26.454 12.291 26.925 14.401 29.004 13.078 28.969 6.008 30.876 5.286 28.625 5.018z" transform="translate(323 7) matrix(-1 0 0 1 56.348 45.062)"/>
+                    </g>
+                    <g fill-rule="nonzero">
+                        <path fill="#05FF8F" d="M39.271.98L21.097 34.888l-4.553-.166L.21 0l4.553.167 6.903.166 6.357.148 1.606 3.413L21.448.5l4.553.166 6.367.148 6.903.167z" filter="url(#rx0t6c148C)" transform="translate(323 7) matrix(-1 0 0 1 1092.683 0) matrix(-1 0 0 1 39.482 0)"/>
+                        <g>
+                            <path fill="#1F3A2E" d="M21.589 8.504L17.046 8.329 21.238 0.5 25.791 0.666z" transform="translate(323 7) matrix(-1 0 0 1 1092.683 0) translate(.24)"/>
+                            <path fill="#385F86" d="M32.157 0.814L21.256 21.164 11.456 0.333 17.814 0.481 21.589 8.504 25.791 0.666z" transform="translate(323 7) matrix(-1 0 0 1 1092.683 0) translate(.24)"/>
+                            <path fill="#1F3A2E" d="M20.886 34.887L16.333 34.721 0 0 4.553 0.167z" transform="translate(323 7) matrix(-1 0 0 1 1092.683 0) translate(.24)"/>
+                            <path fill="#53FFB3" d="M39.061 0.981L20.886 34.887 4.553 0.167 11.456 0.333 21.256 21.164 32.157 0.814z" transform="translate(323 7) matrix(-1 0 0 1 1092.683 0) translate(.24)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/docs/public/images/vueschool/vs-iso.svg b/packages/docs/public/images/vueschool/vs-iso.svg
new file mode 100644
index 00000000..7e1192bc
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vs-iso.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="41" viewBox="0 0 36 41">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <path fill="#FCFCFE" d="M10.381 24.917c-2.696-13.332-.141-22.08-.141-22.08s-.684 5.325 4.688 13.91c-.068 10.64 2.027 16.191 2.027 16.191l.43-.316-.43.375s-3.186-2.6-6.574-8.08zM23.08 23.03c1.289 1.298 2.491 2.197 3.36 2.624l-.015-.008s.976.35 1.148.117c1.19-1.26 1.48-3.606.687-8.017-4.534-2.589-5.107-6.625-5.107-6.625s-.816 5.603-.073 11.909z" opacity=".5" transform="translate(-10 -20) translate(10 20)"/>
+                <path fill="#FFF" d="M10.24 2.837s-3.731 12.776 2.582 30.976c.172.525 0 1.109-.459 1.459l-6.658 4.667c-.631.466-1.55.175-1.836-.584C2.089 34.513-2.79 18.471 2.147.912c.23-.7.975-1.108 1.664-.817l6.428 2.742zM22.981 28.505l-6.026 4.433s-3.214-8.517-1.55-24.676c.115-.933 1.09-1.4 1.894-.933l5.854 3.792s-1.148 7.875.517 15.459c.172.758-.115 1.516-.689 1.925zM34.116 18.646l-5.568-3.675c-.344-.233-.86.117-.746.525 1.32 5.892 1.148 8.809-.23 10.267-.172.233-1.147-.117-1.147-.117.918.467 1.148.234 1.148.234.918-.7 4.362-3.209 6.543-4.726.86-.641.86-1.925 0-2.508z" transform="translate(-10 -20) translate(10 20)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/docs/public/images/vueschool/vs-logo.svg b/packages/docs/public/images/vueschool/vs-logo.svg
new file mode 100644
index 00000000..4e060ce4
--- /dev/null
+++ b/packages/docs/public/images/vueschool/vs-logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="41" viewBox="0 0 120 41">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <path fill="#FCFCFE" d="M10.381 24.917c-2.696-13.332-.141-22.08-.141-22.08s-.684 5.325 4.688 13.91c-.068 10.64 2.027 16.191 2.027 16.191l.43-.316-.43.375s-3.186-2.6-6.574-8.08zM23.08 23.03c1.289 1.298 2.491 2.197 3.36 2.624l-.015-.008s.976.35 1.148.117c1.19-1.26 1.48-3.606.687-8.017-4.534-2.589-5.107-6.625-5.107-6.625s-.816 5.603-.073 11.909z" opacity=".5" transform="translate(-50 -20) translate(50 20)"/>
+                    <path fill="#FFF" d="M10.24 2.837s-3.731 12.776 2.582 30.976c.172.525 0 1.109-.459 1.459l-6.658 4.667c-.631.466-1.55.175-1.836-.584C2.089 34.513-2.79 18.471 2.147.912c.23-.7.975-1.108 1.664-.817l6.428 2.742zM22.981 28.505l-6.026 4.433s-3.214-8.517-1.55-24.676c.115-.933 1.09-1.4 1.894-.933l5.854 3.792s-1.148 7.875.517 15.459c.172.758-.115 1.516-.689 1.925zM34.116 18.646l-5.568-3.675c-.344-.233-.86.117-.746.525 1.32 5.892 1.148 8.809-.23 10.267-.172.233-1.147-.117-1.147-.117.918.467 1.148.234 1.148.234.918-.7 4.362-3.209 6.543-4.726.86-.641.86-1.925 0-2.508z" transform="translate(-50 -20) translate(50 20)"/>
+                </g>
+                <path fill="#FFF" d="M54.132 17.571l4.401-11.864H56.09l-3.096 8.819-3.096-8.82h-2.527l4.385 11.865h2.376zm8.066.218c.87 0 1.824-.335 2.276-1.105 0 .335.034.72.067.887h2.126c-.034-.284-.084-.853-.084-1.489V9.338h-2.226v4.786c0 .954-.569 1.623-1.556 1.623-1.038 0-1.506-.736-1.506-1.656V9.338h-2.226v5.204c0 1.791 1.138 3.247 3.13 3.247zm10.36.033c2.024 0 3.33-1.188 3.748-2.61l-1.858-.552c-.268.736-.837 1.255-1.874 1.255-1.105 0-2.025-.787-2.075-1.875h5.89c0-.033.034-.368.034-.686 0-2.644-1.523-4.267-4.067-4.267-2.108 0-4.05 1.707-4.05 4.334 0 2.778 1.992 4.401 4.251 4.401zm1.673-5.304h-3.682c.05-.754.686-1.624 1.84-1.624 1.273 0 1.808.804 1.842 1.624zM52.425 35.394c2.762 0 4.284-1.84 4.284-3.665 0-1.673-1.154-3.08-3.313-3.498l-1.657-.318c-.87-.167-1.288-.686-1.288-1.338 0-.787.736-1.506 1.857-1.506 1.506 0 2.042 1.02 2.159 1.673l2.075-.636c-.268-1.339-1.372-3.08-4.25-3.08-2.243 0-4.134 1.607-4.134 3.716 0 1.79 1.222 3.012 3.113 3.397l1.656.335c.92.184 1.44.72 1.44 1.406 0 .836-.687 1.456-1.925 1.456-1.673 0-2.493-1.055-2.594-2.226l-2.142.569c.184 1.69 1.573 3.715 4.72 3.715zm9.723 0c2.192 0 3.481-1.406 3.85-2.778l-1.959-.653c-.184.636-.753 1.39-1.89 1.39-1.139 0-2.11-.837-2.11-2.327s.954-2.31 2.092-2.31c1.105 0 1.624.704 1.825 1.39l1.99-.67c-.35-1.389-1.622-2.778-3.865-2.778-2.393 0-4.267 1.824-4.267 4.368 0 2.527 1.908 4.368 4.334 4.368zm7.715-.251v-4.836c.05-.904.602-1.607 1.54-1.607 1.07 0 1.522.72 1.522 1.64v4.803h2.226v-5.188c0-1.807-.97-3.263-3.062-3.263-.787 0-1.69.268-2.226.904v-4.57h-2.226v12.117h2.226zm11.246.25c2.46 0 4.317-1.84 4.317-4.367 0-2.544-1.857-4.368-4.317-4.368s-4.318 1.824-4.318 4.368c0 2.527 1.858 4.368 4.318 4.368zm0-2.024c-1.088 0-2.092-.803-2.092-2.343 0-1.556 1.004-2.343 2.092-2.343 1.087 0 2.091.787 2.091 2.343s-1.004 2.343-2.091 2.343zm9.773 2.025c2.46 0 4.317-1.84 4.317-4.368 0-2.544-1.857-4.368-4.317-4.368s-4.318 1.824-4.318 4.368c0 2.527 1.858 4.368 4.318 4.368zm0-2.025c-1.088 0-2.092-.803-2.092-2.343 0-1.556 1.004-2.343 2.092-2.343 1.087 0 2.091.787 2.091 2.343s-1.004 2.343-2.091 2.343zm8.3 1.774V23.027h-2.226v12.116h2.226zm3.682.117c.853 0 1.54-.686 1.54-1.523 0-.837-.687-1.523-1.54-1.523-.837 0-1.523.686-1.523 1.523 0 .837.686 1.523 1.523 1.523zm4.903-9.69c.77 0 1.372-.619 1.372-1.355 0-.77-.602-1.389-1.372-1.389-.753 0-1.372.62-1.372 1.39 0 .735.619 1.355 1.372 1.355zm1.121 9.573v-8.234h-2.226v8.234h2.226zm6.075.25c2.46 0 4.317-1.84 4.317-4.367 0-2.544-1.857-4.368-4.317-4.368s-4.318 1.824-4.318 4.368c0 2.527 1.858 4.368 4.318 4.368zm0-2.024c-1.088 0-2.092-.803-2.092-2.343 0-1.556 1.004-2.343 2.092-2.343s2.092.787 2.092 2.343-1.004 2.343-2.092 2.343z" transform="translate(-50 -20) translate(50 20)"/>
+            </g>
+        </g>
+    </g>
+</svg>