diff --git a/docs/.vuepress/public/images/vueschool/vs-fw-bg-small.svg b/docs/.vuepress/public/images/vueschool/vs-fw-bg-small.svg
new file mode 100644
index 000000000..a914f4005
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-fw-bg-small.svg
@@ -0,0 +1,183 @@
+<svg width="375" height="80" viewBox="0 0 375 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="44.505%" y1="63.572%" x2="38.734%" y2="35.987%" id="xyjb951esd">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="ladppv4vnf">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="crxo99pdog">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.011%" y1="98.997%" x2="50.011%" y2="0%" id="l018dwim3h">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop stop-color="#100222" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="vf87rf4i9i">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="n2ips3meoj">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.011%" y1="98.997%" x2="50.011%" y2="0%" id="5lfox0f34k">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop stop-color="#100222" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="67.838%" y1="49.111%" x2="77.139%" y2="52.125%" id="glljbgkral">
+            <stop stop-color="#463487" offset="0%"/>
+            <stop stop-color="#352869" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="7zcs47oy5m">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="1ivo9tc94n">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.011%" y1="98.997%" x2="50.011%" y2="0%" id="jtz1zgl29o">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop stop-color="#100222" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="85.547%" y1="49.383%" x2="0%" y2="50.617%" id="shrr9bnubp">
+            <stop stop-color="#3AAB82" offset="0%"/>
+            <stop stop-color="#352869" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="tv07ok373q">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="eoraskrsfr">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.011%" y1="98.997%" x2="50.011%" y2="0%" id="cimbnvk4us">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop stop-color="#100222" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="85.547%" y1="49.111%" x2="0%" y2="50.889%" id="b2acvzbj7t">
+            <stop stop-color="#41878F" offset="0%"/>
+            <stop stop-color="#352869" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="totw3crrmu">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="s5bxokedgv">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.011%" y1="98.997%" x2="50.011%" y2="0%" id="x8jdggif0x">
+            <stop stop-color="#100122" offset="0%"/>
+            <stop stop-color="#100222" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="85.547%" y1="48.98%" x2="0%" y2="51.02%" id="bvdunkfahy">
+            <stop stop-color="#1B2A68" offset="0%"/>
+            <stop stop-color="#352869" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="9resnyc60z">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="50.02%" y1="100%" x2="50.02%" y2="-.011%" id="9znzegdhvA">
+            <stop stop-color="#241644" offset="0%"/>
+            <stop stop-color="#040102" offset="100%"/>
+        </linearGradient>
+        <radialGradient cx="86.363%" cy="59.145%" fx="86.363%" fy="59.145%" r="282.589%" gradientTransform="matrix(-.173 .5851 -.12703 -.82532 1.088 .574)" id="oprraelscb">
+            <stop stop-color="#7A1591" offset="0%"/>
+            <stop stop-color="#050A1E" offset="100%"/>
+            <stop stop-color="#050A1E" offset="100%"/>
+        </radialGradient>
+        <radialGradient cx="4.87%" cy="50%" fx="4.87%" fy="50%" r="1332.284%" gradientTransform="matrix(-.07506 0 0 -1 .052 1)" id="0rnf4zdzve">
+            <stop stop-color="#53FFB3" offset="0%"/>
+            <stop stop-color="#3E2F7A" offset="100%"/>
+        </radialGradient>
+        <filter x="-201.5%" y="-225.6%" width="502.9%" height="551.1%" filterUnits="objectBoundingBox" id="2t22ix8htw">
+            <feGaussianBlur stdDeviation="11" in="SourceGraphic"/>
+        </filter>
+        <path id="1l5w42l0na" d="M0 0h375v80H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <mask id="fjuopk87tc" fill="#fff">
+            <use xlink:href="#1l5w42l0na"/>
+        </mask>
+        <use fill="url(#oprraelscb)" xlink:href="#1l5w42l0na"/>
+        <g mask="url(#fjuopk87tc)" fill="#FFF">
+            <g transform="translate(-917 5)">
+                <circle opacity=".142" cx="1144" cy="10" r="2"/>
+                <circle opacity=".142" cx="1276" cy="6" r="2"/>
+                <circle opacity=".142" cx="1290" cy="37" r="2"/>
+                <circle opacity=".359" cx="1049" cy="28" r="2"/>
+                <circle opacity=".359" cx="983" cy="66" r="1"/>
+                <circle opacity=".359" cx="1184" cy="47" r="1"/>
+                <circle opacity=".359" cx="1146" cy="65" r="1"/>
+            </g>
+        </g>
+        <g mask="url(#fjuopk87tc)">
+            <path d="M.54.973S-.014 3.466.044 4.06c.058.595 1.32 1.918 1.32 1.918s1.322 2.59 1.739 3.857c.417 1.266 1.848 2.878 1.848 2.878s4.911 4.666 6.39 4.608c.678-.026 3.403-2.551 4.282-2.551 2.337 0 3.735-1.846 3.735-1.846s3.299-5.219 3.587-5.477c.287-.259 1.93-.795 1.93-.795s2.674-4.4 2.884-5.557l-7.437.278L.54.973z" fill="url(#xyjb951esd)" transform="translate(306.607 65.944)"/>
+            <path d="m.54.973 3.513-.25L6.094.529s9.657.014 12.443.109c0 0 2.318-.527 2.947-.544.63-.016 1.849.63 1.849.63l4.426.326s-2.03.396-3.575.378l1.485.282c-.28.12-.599.21-.938.265-.59.1-5.021.174-7.12.16-2.1-.012-3.025-.425-3.025-.425l.966-.206-1.136-.076s-3.44.34-4.753.362A29.142 29.142 0 0 1 6.66 1.63l-.125-.252S2.968 1.268.54.973z" fill="url(#0rnf4zdzve)" transform="translate(306.607 65.944)"/>
+            <path d="M5.702 1.585v1.741l-1.939.3s-.085.035-.299.527c-.214.493-1.201 1.734-1.201 1.734l-.898.09.72 1.468s1.037.01 1.45.243c.414.234 1.327.932 1.327.932l.549 1.37s.548-2.534.58-2.934c.03-.4.569-2.112.486-2.411-.083-.3.033-1.425.033-1.425l.15-1.179s2.81.352 3.104.447c.293.095.42 1.167.42 1.167l.966 2.012-1.081 2.944.417 2.492.131 1.875 1.526 3.966 1.207-.836s.989-6.513 1.06-6.81c.072-.298-.268-1-.268-1l.48-3.06-.046-3.068.966-.333-1.136-.123s-3.565.485-4.156.536c-.59.052-3.596-.457-3.596-.457l1.802-.4-2.754.192z" fill="url(#ladppv4vnf)" transform="translate(306.607 65.944)"/>
+            <path d="m21.116 2.137 2.408.226-.386.518-1.043 1.413-1.26.674-1.411.294-1.097.435h.952l-.073.574-.512 1.367-.025.979.687-.267s2.526-2.416 3.579-3.378c0 0 1.751-.304 1.931-.491.18-.187 2.657-2.79 2.883-3.433l-3.565.38 1.485.28c-.558.142-1.14.252-1.738.327-.7.06-2.815.102-2.815.102z" fill="url(#crxo99pdog)" transform="translate(306.607 65.944)"/>
+            <path d="m325.144 66.577-.772.217s.568.072.896.124c.328.052 2.138-.03 2.458-.083.32-.052 1.51-.256 1.51-.256l.064-.21s-.888-.447-1.158-.423c-.27.024-2.528.501-2.998.63z" fill="#41A997"/>
+            <path d="m330.05 66.676-.754.24-1.18.016h-2.51s1.931-.093 2.223-.128c.291-.035 1.406-.227 1.406-.227l.063-.21.752.309z" fill="#10001D"/>
+            <path fill="#000" d="m312.31 68.368.81 1.072.141-2.019 1.802-.248-2.754.12zM330.791 67.371l1.485.282-.64 2.617s1.992-2.141 2.732-3.278l-3.577.38zM316.857 67.703l1.893 1.035 1.17.702.238.6 1.05-.376-.017-2.011.964-.206-1.138-.076z"/>
+            <g>
+                <path d="M.325.943S.022 2.437.054 2.793c.031.357.72 1.15.72 1.15s.722 1.551.95 2.31c.227.76 1.008 1.725 1.008 1.725s2.681 2.796 3.489 2.76c.37-.015 1.857-1.528 2.337-1.528 1.275 0 2.038-1.106 2.038-1.106s1.8-3.126 1.958-3.281c.157-.155 1.054-.477 1.054-.477s1.46-2.635 1.574-3.329l-4.06.167L.325.944z" fill="url(#l018dwim3h)" transform="translate(297.077 69.01)"/>
+                <path d="m297.402 69.954 1.917-.241 1.114-.19s5.271.014 6.793.105c0 0 1.265-.511 1.608-.527.344-.016 1.009.61 1.009.61l2.416.317s-1.108.384-1.951.367l.81.273a1.564 1.564 0 0 1-.512.257c-.321.097-2.74.169-3.886.156-1.146-.013-1.651-.413-1.651-.413l.527-.2-.62-.073s-1.878.329-2.594.35a9.047 9.047 0 0 1-1.64-.153l-.068-.245s-1.947-.106-3.272-.393z" fill="#3F7D8C"/>
+                <path d="M3.142 1.308v1.043l-1.058.179s-.046.021-.163.316-.656 1.039-.656 1.039l-.49.053.393.88s.566.005.792.145c.225.14.724.558.724.558l.3.82s.299-1.517.315-1.756c.017-.24.311-1.265.266-1.445-.045-.179.018-.852.018-.852l.082-.707s1.534.211 1.694.268c.16.057.23.699.23.699l.527 1.205-.59 1.762.228 1.493.071 1.123.833 2.375.659-.5s.54-3.901.579-4.08c.039-.178-.147-.598-.147-.598l.263-1.832-.026-1.838.527-.199-.62-.074s-1.946.291-2.268.322c-.323.03-1.963-.274-1.963-.274l.984-.24-1.504.115z" fill="url(#vf87rf4i9i)" transform="translate(297.077 69.01)"/>
+                <path d="m11.556 2.073 1.314.219-.21.502-.57 1.37-.687.654-.77.285-.6.422h.52l-.04.557-.28 1.326-.013.948.375-.258s1.38-2.343 1.954-3.276c0 0 .956-.295 1.054-.477.098-.181 1.45-2.706 1.574-3.329l-1.946.368.81.273a4.944 4.944 0 0 1-.948.316c-.383.058-1.537.1-1.537.1z" fill="url(#n2ips3meoj)" transform="translate(297.077 69.01)"/>
+                <path d="m307.226 69.624-.422.21s.31.07.489.121c.18.05 1.167-.03 1.342-.08.175-.05.824-.249.824-.249l.035-.203s-.485-.434-.632-.41c-.148.023-1.38.486-1.636.611z" fill="#211941"/>
+                <path d="m309.903 69.72-.411.233-.644.016h-1.37s1.054-.09 1.213-.125c.159-.033.767-.22.767-.22l.035-.203.41.299z" fill="#10001D"/>
+                <path fill="#000" d="m300.22 71.361.442 1.04.077-1.958.984-.24-1.503.116zM310.308 70.395l.81.273-.35 2.538s1.089-2.077 1.492-3.18l-1.952.369zM302.702 70.716l1.033 1.004.639.68.13.583.573-.365-.01-1.95.527-.2-.621-.073z"/>
+            </g>
+            <g opacity=".6">
+                <path d="M.15.435s-.14.688-.125.852c.014.164.332.53.332.53s.332.715.437 1.064c.105.35.465.795.465.795s1.235 1.288 1.607 1.272c.17-.007.856-.704 1.077-.704.588 0 .94-.51.94-.51s.83-1.44.902-1.512c.072-.071.485-.22.485-.22S6.943.789 6.996.47L5.125.545.15.435z" fill="url(#5lfox0f34k)" transform="translate(290 60.963)"/>
+                <path d="m.15.435.883-.111.514-.088s2.428.006 3.13.049c0 0 .582-.236.74-.243.159-.008.465.281.465.281l1.114.146s-.51.177-.9.169l.374.126a.72.72 0 0 1-.236.118C6.086.927 4.971.96 4.443.954c-.528-.006-.76-.19-.76-.19l.242-.092L3.64.638S2.775.789 2.444.8C2.191.799 1.938.775 1.69.729L1.657.616S.76.566.15.435z" fill="url(#glljbgkral)" transform="translate(290 60.963)"/>
+                <path d="M1.448.603v.48l-.488.083s-.021.01-.075.146c-.054.136-.302.478-.302.478l-.226.025.181.405s.261.002.365.067c.104.064.334.257.334.257l.138.378s.138-.7.145-.81c.008-.11.144-.582.123-.665-.021-.083.008-.393.008-.393L1.689.73s.707.097.78.123c.074.026.106.322.106.322l.243.555-.272.812.105.688.033.518.384 1.094.303-.23s.25-1.798.267-1.88c.018-.082-.067-.276-.067-.276l.12-.844L3.68.764l.243-.092-.286-.034s-.896.134-1.045.148C2.443.801 1.687.66 1.687.66l.454-.11-.693.053z" fill="url(#7zcs47oy5m)" transform="translate(290 60.963)"/>
+                <path d="m5.325.955.605.101-.097.231-.262.632-.317.3-.355.132-.276.195h.24l-.019.256-.128.611-.007.438.173-.12s.636-1.08.9-1.51c0 0 .44-.135.486-.219.045-.083.668-1.247.725-1.534l-.896.17.373.126c-.14.063-.287.112-.437.145-.176.027-.708.046-.708.046z" fill="url(#1ivo9tc94n)" transform="translate(290 60.963)"/>
+                <path d="m294.676 61.246-.194.097s.143.032.225.056c.083.023.538-.014.619-.037l.38-.115.016-.094s-.224-.2-.292-.189c-.068.011-.636.224-.754.282z" fill="#5E48B5"/>
+                <path d="m295.91 61.29-.19.108-.296.007h-.632s.486-.042.56-.057c.073-.016.353-.102.353-.102l.016-.094.189.138z" fill="#10001D"/>
+                <path fill="#000" d="m291.448 62.047.204.478.035-.902.454-.11-.693.053zM296.097 61.601l.373.126-.161 1.17s.501-.957.687-1.465l-.9.17zM292.592 61.75l.476.462.294.313.06.269.264-.168-.004-.9.242-.09-.286-.035z"/>
+            </g>
+            <g opacity=".267">
+                <path d="M.29.813s-.16.767-.143.95c.017.183.38.59.38.59s.38.798.5 1.188c.12.39.53.886.53.886S2.97 5.863 3.396 5.845c.194-.008.978-.785 1.23-.785.672 0 1.074-.568 1.074-.568s.948-1.607 1.03-1.686c.083-.08.556-.245.556-.245s.768-1.354.829-1.71L5.976.936.29.813z" fill="url(#jtz1zgl29o)" transform="matrix(-1 0 0 1 355 57.968)"/>
+                <path d="M.146.755 1.12.652l.566-.08s2.678.006 3.45.045c0 0 .644-.217.818-.223.175-.007.513.258.513.258l1.227.134s-.563.162-.991.155l.412.116a.866.866 0 0 1-.26.109c-.164.04-1.393.071-1.975.066-.582-.006-.839-.175-.839-.175L4.31.972l-.315-.03s-.954.138-1.318.148c-.28 0-.558-.023-.833-.065L1.808.92S.82.876.146.755z" fill="url(#shrr9bnubp)" transform="matrix(-1 0 0 1 355 57.968)"/>
+                <path d="M1.429.875v.563l-.574.097s-.025.012-.088.171c-.064.16-.355.561-.355.561l-.266.03.213.474s.307.003.429.079.392.301.392.301l.163.444s.162-.82.171-.95c.01-.129.169-.683.144-.78-.025-.097.01-.46.01-.46l.044-.383s.831.114.918.145c.087.03.125.378.125.378l.285.651-.32.952.124.807.039.607.451 1.283.357-.27s.293-2.108.314-2.204c.02-.097-.08-.324-.08-.324l.143-.99-.014-.993.285-.108-.335-.04s-1.055.158-1.23.174C2.6 1.107 1.711.942 1.711.942l.533-.13-.815.063z" fill="url(#tv07ok373q)" transform="matrix(-1 0 0 1 355 57.968)"/>
+                <path d="m5.923 1.356.643.113-.103.258-.279.704-.336.336-.377.147-.293.217h.254l-.02.286-.136.682-.007.488.184-.133s.675-1.205.956-1.684c0 0 .467-.152.515-.245.048-.094.71-1.392.77-1.712l-.952.189.397.14c-.15.071-.305.125-.464.163-.187.03-.752.051-.752.051z" fill="url(#eoraskrsfr)" transform="matrix(-1 0 0 1 355 57.968)"/>
+                <path d="m349.625 58.629.197.092s-.145.03-.229.053c-.084.022-.546-.013-.627-.035l-.386-.11-.016-.088s.227-.19.296-.18c.069.01.645.213.765.268z" fill="#09080F"/>
+                <path d="m348.564 58.59.213.179.334.012h.71s-.546-.07-.628-.096c-.083-.025-.398-.168-.398-.168l-.019-.156-.212.23z" fill="#10001D"/>
+                <path fill="#000" d="m353.596 59.444-.247.595-.043-1.12-.549-.138.839.066zM348.144 58.975l-.348.144.15 1.339s-.467-1.096-.64-1.677l.838.194zM352.338 59.356l-.6.488-.37.331-.075.283-.333-.177.006-.948-.305-.097.36-.036z"/>
+            </g>
+            <g>
+                <path d="M.23.666S.015 1.72.037 1.972c.022.251.509.811.509.811s.509 1.095.67 1.631c.16.536.712 1.218.712 1.218S3.82 7.605 4.39 7.58c.261-.01 1.311-1.079 1.65-1.079.9 0 1.439-.78 1.439-.78s1.27-2.207 1.382-2.317c.11-.109.744-.336.744-.336s1.03-1.86 1.11-2.35L7.852.836.23.666z" fill="url(#cimbnvk4us)" transform="matrix(-1 0 0 1 349.694 60.09)"/>
+                <path d="m.23.666 1.353-.17.786-.134s3.72.01 4.795.074c0 0 .892-.36 1.135-.372.243-.011.712.43.712.43l1.706.224s-.782.27-1.378.259l.573.193c-.109.082-.231.144-.362.181-.227.069-1.935.12-2.744.11-.808-.008-1.165-.291-1.165-.291l.372-.14-.437-.053s-1.326.232-1.832.248a6.386 6.386 0 0 1-1.157-.109L2.54.944S1.164.868.229.666z" fill="url(#b2acvzbj7t)" transform="matrix(-1 0 0 1 349.694 60.09)"/>
+                <path d="M2.218.923v.736l-.747.127s-.033.015-.115.223c-.083.208-.463.733-.463.733l-.346.038.277.62s.4.004.56.103c.158.1.51.394.51.394l.212.58s.211-1.072.223-1.24c.012-.17.22-.894.188-1.02-.032-.127.012-.602.012-.602l.058-.499s1.083.149 1.196.19c.113.04.162.493.162.493l.372.85-.416 1.244.16 1.054.05.792.589 1.677.465-.354s.38-2.753.408-2.879c.028-.125-.103-.422-.103-.422l.185-1.293-.018-1.297.372-.141-.437-.052s-1.374.205-1.601.227c-.228.021-1.386-.194-1.386-.194l.694-.169-1.06.081z" fill="url(#totw3crrmu)" transform="matrix(-1 0 0 1 349.694 60.09)"/>
+                <path d="m8.157 1.463.928.155-.149.354-.402.967-.485.462-.544.201-.423.298h.367l-.028.393-.197.936-.01.67.265-.183s.973-1.654 1.379-2.312c0 0 .675-.209.744-.337.07-.128 1.024-1.91 1.111-2.35l-1.374.26.573.193a3.49 3.49 0 0 1-.67.223c-.27.04-1.085.07-1.085.07z" fill="url(#s5bxokedgv)" transform="matrix(-1 0 0 1 349.694 60.09)"/>
+                <path d="m342.53 60.523.298.15s-.218.048-.345.084c-.126.036-.824-.02-.947-.056-.124-.036-.582-.176-.582-.176l-.025-.144s.343-.306.447-.29c.104.017.974.344 1.155.432z" fill="#09080F"/>
+                <path d="m340.64 60.591.29.165.456.01h.967s-.744-.063-.857-.087c-.112-.024-.541-.156-.541-.156l-.025-.143-.29.211z" fill="#10001D"/>
+                <path fill="#000" d="m347.476 61.75-.312.733-.055-1.381-.694-.17 1.061.082zM340.355 61.067l-.572.193.247 1.792s-.768-1.466-1.053-2.244l1.378.26zM345.724 61.294l-.73.709-.45.48-.092.411-.405-.257.007-1.377-.371-.14.438-.053z"/>
+            </g>
+            <g fill-rule="nonzero">
+                <path d="m16.469.411-7.622 14.22-1.91-.07L.089 0l1.91.07 2.895.07 2.666.062.673 1.431L8.994.21l1.91.07 2.67.062 2.895.07z" fill="#05FF8F" filter="url(#2t22ix8htw)" transform="translate(311.471 50)"/>
+                <path fill="#1F3A2E" d="m318.874 53.566 1.905-.073-1.758-3.283-1.909.07z"/>
+                <path fill="#385F86" d="m314.442 50.342 4.572 8.533 4.11-8.735-2.667.062-1.583 3.364-1.762-3.287z"/>
+                <path fill="#1F3A2E" d="m319.169 64.63 1.91-.07L327.927 50l-1.91.07z"/>
+                <path fill="#53FFB3" d="m311.547 50.411 7.622 14.22 6.85-14.561-2.896.07-4.11 8.735-4.57-8.533z"/>
+            </g>
+            <g>
+                <path d="M.98 2.938S.28 6.446.353 7.282C.426 8.12 2.021 9.98 2.021 9.98s1.668 3.644 2.195 5.426c.527 1.782 2.333 4.05 2.333 4.05s6.202 6.563 8.07 6.482c.855-.038 4.296-3.59 5.405-3.59 2.951 0 4.717-2.596 4.717-2.596s4.164-7.341 4.528-7.705c.363-.364 2.438-1.119 2.438-1.119s3.375-6.188 3.64-7.816l-9.39.39L.98 2.939z" fill="url(#x8jdggif0x)" transform="matrix(-1 0 0 1 91.348 57.062)"/>
+                <path d="m.348 3.091 4.517-.61 2.625-.478s12.417.035 16 .266c0 0 2.98-1.29 3.79-1.33.81-.04 2.376 1.54 2.376 1.54l5.692.798s-2.61.969-4.597.926l1.91.689c-.362.294-.77.514-1.207.649-.757.245-6.457.426-9.156.394-2.7-.032-3.889-1.043-3.889-1.043l1.242-.503-1.46-.186s-4.423.83-6.112.886A19.94 19.94 0 0 1 8.218 4.7l-.162-.617S3.47 3.815.348 3.091z" fill="url(#bvdunkfahy)" transform="matrix(-1 0 0 1 91.348 57.062)"/>
+                <path d="M6.855 4.21v2.463l-2.462.423s-.108.05-.38.747c-.272.698-1.525 2.453-1.525 2.453l-1.14.127.915 2.077s1.316.013 1.84.344c.526.331 1.685 1.317 1.685 1.317l.697 1.94s.696-3.586.735-4.151c.04-.565.724-2.989.618-3.412-.105-.423.042-2.015.042-2.015l.191-1.668s3.568.498 3.94.632c.373.135.535 1.651.535 1.651l1.226 2.847-1.373 4.164.53 3.526.166 2.653 1.937 5.61 1.533-1.183s1.255-9.214 1.346-9.635c.09-.42-.34-1.414-.34-1.414l.61-4.329-.06-4.34 1.227-.471-1.442-.174s-4.526.687-5.277.76c-.75.071-4.565-.648-4.565-.648l2.288-.566-3.497.272z" fill="url(#9resnyc60z)" transform="matrix(-1 0 0 1 91.348 57.062)"/>
+                <path d="m26.9 5.385 3.066.508-.491 1.162-1.329 3.174-1.603 1.513-1.798.662-1.397.977h1.212l-.093 1.289-.652 3.071-.032 2.197.876-.598s3.217-5.427 4.557-7.588c0 0 2.231-.684 2.46-1.103.229-.42 3.384-6.268 3.672-7.71l-4.54.851 1.891.633c-.711.318-1.453.563-2.214.732-.892.134-3.586.23-3.586.23z" fill="url(#9znzegdhvA)" transform="matrix(-1 0 0 1 91.348 57.062)"/>
+                <path d="m68.06 59.276.94.44s-.691.145-1.09.25c-.4.106-2.604-.061-2.994-.167-.39-.105-1.838-.518-1.838-.518L63 58.857s1.082-.903 1.41-.855c.33.048 3.078 1.013 3.65 1.274z" fill="#09080F"/>
+                <path d="m61 59.546 1.017.425L63.61 60H67s-2.608-.165-3.001-.227c-.394-.061-1.899-.402-1.899-.402L62.014 59 61 59.546z" fill="#10001D"/>
+                <path fill="#000" d="M84 63.635 82.822 66l-.205-4.453L80 61l4 .264zM61 61.81l-2.076.601L59.82 68s-2.786-4.572-3.82-7l5 .81zM78 61.745l-2.5 2.327-1.547 1.579L73.639 67l-1.389-.846.023-4.521L71 61.171 72.503 61z"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-iso.svg b/docs/.vuepress/public/images/vueschool/vs-iso.svg
index 7e1192bcd..a95d92607 100644
--- a/docs/.vuepress/public/images/vueschool/vs-iso.svg
+++ b/docs/.vuepress/public/images/vueschool/vs-iso.svg
@@ -1,10 +1,7 @@
-<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>
+<svg width="26" height="30" viewBox="0 0 26 30" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M7.546 18.111c-1.96-9.69-.103-16.049-.103-16.049s-.497 3.871 3.408 10.11c-.05 7.735 1.473 11.77 1.473 11.77l.313-.23-.313.272s-2.316-1.89-4.778-5.873zM16.776 16.74c.937.943 1.81 1.596 2.442 1.907a1.405 1.405 0 0 1-.01-.006s.708.255.834.085c.864-.915 1.075-2.621.5-5.827-3.297-1.882-3.713-4.816-3.713-4.816s-.593 4.073-.053 8.656z" fill="#364FDE"/>
+        <path d="M7.443 2.062S4.73 11.348 9.32 24.577a.954.954 0 0 1-.334 1.06l-4.84 3.393c-.458.339-1.126.127-1.334-.424-1.293-3.52-4.84-15.18-1.252-27.943.167-.509.71-.806 1.21-.594l4.673 1.993z" fill="#56D8FF"/>
+        <path d="m16.704 20.719-4.38 3.222s-2.337-6.19-1.127-17.936c.084-.678.793-1.017 1.377-.678l4.255 2.756s-.834 5.724.376 11.237c.125.55-.084 1.102-.5 1.399zM24.797 13.553l-4.046-2.671c-.25-.17-.626.084-.543.381.96 4.283.835 6.403-.167 7.463-.125.17-.834-.085-.834-.085.668.34.834.17.834.17.668-.509 3.171-2.332 4.756-3.435.626-.466.626-1.399 0-1.823z" fill="#667DFF"/>
     </g>
 </svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-logo.svg b/docs/.vuepress/public/images/vueschool/vs-logo.svg
index 4e060ce4e..b44c00458 100644
--- a/docs/.vuepress/public/images/vueschool/vs-logo.svg
+++ b/docs/.vuepress/public/images/vueschool/vs-logo.svg
@@ -1,13 +1,8 @@
-<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>
+<svg width="128" height="41" viewBox="0 0 128 41" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M10.448 25.077c-2.714-13.417-.143-22.222-.143-22.222s-.688 5.36 4.72 13.999c-.07 10.71 2.039 16.296 2.039 16.296l.433-.32-.433.378s-3.206-2.617-6.616-8.13zM23.228 23.177c1.297 1.307 2.507 2.212 3.382 2.642a1.952 1.952 0 0 1-.015-.008s.981.352 1.155.117c1.197-1.267 1.49-3.629.692-8.068-4.564-2.606-5.14-6.668-5.14-6.668s-.822 5.64-.074 11.985z" fill="#364FDE"/>
+        <path d="M10.305 2.855s-3.754 12.858 2.6 31.175c.173.529 0 1.116-.463 1.468l-6.7 4.697c-.636.47-1.56.176-1.849-.587-1.79-4.873-6.7-21.018-1.732-38.69.23-.705.981-1.116 1.675-.822l6.47 2.76z" fill="#56D8FF"/>
+        <path d="m23.129 28.688-6.065 4.462s-3.235-8.572-1.56-24.835c.115-.94 1.097-1.409 1.906-.94l5.892 3.817s-1.155 7.926.52 15.558c.173.763-.116 1.527-.693 1.938zM34.335 18.766l-5.603-3.7c-.347-.234-.867.118-.751.53 1.328 5.929 1.155 8.865-.231 10.332-.174.235-1.156-.117-1.156-.117.925.47 1.156.235 1.156.235.924-.705 4.39-3.23 6.585-4.756.866-.646.866-1.937 0-2.524z" fill="#667DFF"/>
+        <path d="m57.499 17.684 4.43-11.94h-2.46l-3.115 8.875-3.116-8.876h-2.543l4.412 11.941H57.5zm8.118.22c.876 0 1.836-.338 2.29-1.112 0 .336.034.724.068.892h2.139a13.63 13.63 0 0 1-.085-1.499V9.398h-2.24v4.817c0 .96-.572 1.633-1.566 1.633-1.044 0-1.516-.74-1.516-1.667V9.398h-2.24v5.238c0 1.802 1.146 3.267 3.15 3.267zm10.425.033c2.038 0 3.352-1.196 3.773-2.628l-1.87-.555c-.27.74-.842 1.263-1.886 1.263-1.112 0-2.038-.792-2.088-1.886h5.928c0-.034.034-.371.034-.691 0-2.661-1.533-4.295-4.093-4.295-2.122 0-4.076 1.718-4.076 4.362 0 2.796 2.004 4.43 4.278 4.43zm1.684-5.34h-3.705c.05-.757.69-1.633 1.853-1.633 1.28 0 1.819.809 1.852 1.634zM55.781 35.622c2.779 0 4.312-1.853 4.312-3.688 0-1.685-1.162-3.1-3.335-3.52l-1.667-.32c-.876-.169-1.297-.69-1.297-1.348 0-.791.74-1.516 1.87-1.516 1.515 0 2.054 1.028 2.172 1.685l2.088-.64c-.27-1.348-1.38-3.1-4.278-3.1-2.257 0-4.16 1.618-4.16 3.74 0 1.802 1.23 3.031 3.133 3.419l1.667.336c.927.186 1.449.725 1.449 1.415 0 .842-.69 1.465-1.937 1.465-1.684 0-2.51-1.06-2.61-2.24l-2.156.573c.185 1.701 1.583 3.74 4.75 3.74zm9.785 0c2.207 0 3.503-1.415 3.874-2.796l-1.97-.657c-.186.64-.758 1.398-1.904 1.398-1.145 0-2.122-.842-2.122-2.34 0-1.5.96-2.325 2.105-2.325 1.112 0 1.634.707 1.836 1.398l2.004-.674c-.353-1.398-1.633-2.796-3.89-2.796-2.408 0-4.295 1.836-4.295 4.396 0 2.543 1.92 4.396 4.362 4.396zm7.765-.253v-4.867c.05-.91.606-1.617 1.549-1.617 1.078 0 1.533.724 1.533 1.65v4.834h2.24v-5.22c0-1.82-.977-3.285-3.082-3.285-.792 0-1.702.27-2.24.91v-4.598h-2.24v12.193h2.24zm11.317.253c2.476 0 4.346-1.853 4.346-4.396 0-2.56-1.87-4.396-4.346-4.396-2.475 0-4.345 1.836-4.345 4.396 0 2.543 1.87 4.396 4.345 4.396zm0-2.038c-1.094 0-2.105-.808-2.105-2.358 0-1.566 1.01-2.358 2.105-2.358s2.106.792 2.106 2.358c0 1.567-1.01 2.358-2.106 2.358zm9.836 2.038c2.476 0 4.345-1.853 4.345-4.396 0-2.56-1.869-4.396-4.345-4.396s-4.345 1.836-4.345 4.396c0 2.543 1.87 4.396 4.345 4.396zm0-2.038c-1.095 0-2.105-.808-2.105-2.358 0-1.566 1.01-2.358 2.105-2.358s2.105.792 2.105 2.358c0 1.567-1.01 2.358-2.105 2.358zm8.354 1.785V23.175h-2.24v12.193h2.24zm3.705.118c.86 0 1.55-.69 1.55-1.532a1.542 1.542 0 0 0-3.082 0c0 .842.69 1.532 1.532 1.532zm9.095-9.751c.775 0 1.38-.623 1.38-1.364a1.38 1.38 0 0 0-1.38-1.398 1.39 1.39 0 0 0-1.381 1.398c0 .74.623 1.364 1.38 1.364zm1.128 9.633v-8.286h-2.24v8.286h2.24zm6.114.253c2.476 0 4.345-1.853 4.345-4.396 0-2.56-1.87-4.396-4.345-4.396-2.476 0-4.345 1.836-4.345 4.396 0 2.543 1.87 4.396 4.345 4.396zm0-2.038c-1.095 0-2.105-.808-2.105-2.358 0-1.566 1.01-2.358 2.105-2.358s2.105.792 2.105 2.358c0 1.567-1.01 2.358-2.105 2.358z" fill="#FFF"/>
     </g>
 </svg>
diff --git a/docs/.vuepress/theme/components/VueSchool/BannerTop.vue b/docs/.vuepress/theme/components/VueSchool/BannerTop.vue
index b2bae154d..092d9d02c 100644
--- a/docs/.vuepress/theme/components/VueSchool/BannerTop.vue
+++ b/docs/.vuepress/theme/components/VueSchool/BannerTop.vue
@@ -1,7 +1,7 @@
 <template>
   <a
     id="vs"
-    href="https://vueschool.io/free-weekend?friend=vuerouter"
+    href="https://vueschool.io/sales/price-increase-22?friend=vuerouter"
     target="_blank"
     rel="noreferrer"
   >
@@ -11,15 +11,17 @@
     </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>
+          Get up to <strong>40% off</strong> your Vue School Subscription
+        </div>
+        <div class="vs-slogan-subtitle">
+          Time Limited Offer
         </div>
       </div>
       <div class="vs-button">
-        Free Access
+        <div class="vs-button-inside">
+          GET OFFER
+        </div>
       </div>
     </div>
     <div id="vs-close" class="vs-close" @click.stop.prevent="$emit('close')">
@@ -29,128 +31,178 @@
 </template>
 
 <style lang="stylus">
-$topBannerHeight ?= 5rem
-$topBannerHeightMobile ?= 5rem
-$navbarHeight ?= 3.6rem
-$contentClass = '.theme-default-content'
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+#vs {
+  align-items: center;
+  background-color: #000c19;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  font-family: '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-small.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-big {
+  display: none;
+}
+
+#vs:hover .vs-core .vs-button-inside {
+  background: linear-gradient(257deg, #e19b09 99%, #ffca24 6%);
+}
 
-@import url('https://fonts.googleapis.com/css?family=Archivo:400,600')
-
-// Banner
-#vs
-  align-items: center
-  background-color: #000c19
-  box-sizing: border-box
-  color: #fff
-  display: none
-  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
-  line-height: 1
-  height: $topBannerHeightMobile
-  background-image: url(/images/vueschool/vs-fw-bg.svg)
-  background-size: cover
-  background-repeat: no-repeat
-  @media (min-width: 680px)
-    height: $topBannerHeight
-    justify-content: center
-
-  &:hover
-    .vs-core
-      .vs-button
-        background: linear-gradient(261deg, #e61463 100%, #db5248 3%)
-        border-color: #e61463
-
-  .vs-logo {
-    position: absolute
-    left: 20px
-    top: 20px
-
-    .logo-small {
-      display: none
-      @media (min-width: 680px) {
-        display: inline-block
-      }
-      @media (min-width: 1024px) {
-        display: none
-      }
-    }
-
-    .logo-big {
-      display: none
-      @media (min-width: 1024px) {
-        display: inline-block
-      }
-    }
+#vs .vs-core .vs-slogan {
+  color: #fff;
+  margin-left: 8px;
+  text-align: center;
+}
+
+#vs .vs-core {
+  width: 190px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#vs .vs-core .vs-slogan .vs-slogan-subtitle {
+  font-size: 14px;
+  color: #cdc5dc;
+  margin-top: 8px;
+}
+
+#vs .vs-core .vs-slogan .vs-slogan-title {
+  font-size: 16px;
+  font-weight: 800;
+}
+
+#vs .vs-core .vs-slogan .vs-slogan-title strong {
+  color: #fdc722;
+}
+
+#vs .vs-core .vs-button {
+  background: linear-gradient(0deg, #ffdf4c, #e29d0a);
+  padding: 2px;
+  margin-right: 18px;
+  margin-left: 16px;
+  border-radius: 30px;
+  display: none;
+}
+
+#vs .vs-core .vs-button-inside {
+  color: #000;
+  padding: 7px 10px;
+  font-weight: 800;
+  font-size: 22px;
+  white-space: nowrap;
+  border-radius: 30px;
+  background: linear-gradient(90deg, #FFC828, #E19C0E);
+  text-transform: uppercase;
+}
+
+#vs .vs-close {
+  right: 6px;
+  position: absolute;
+}
+
+#vs .vs-close:hover {
+  color: #56d8ff;
+}
+
+@media (min-width: 680px) {
+  #vs {
+    background-image: url(/images/vueschool/vs-fw-bg.svg);
+    background-position: top right -110px;
   }
 
-  .vs-core
-    display: flex
-    align-items: center
-
-    .vs-slogan
-      font-family: Archivo
-      color: #FFF
-      margin-left: 8px
-      text-align: center
-      @media (min-width: 680px)
-        margin-left: 24px
-      .vs-slogan-subtitle
-        font-size: 14px
-        color: #47b785
-        font-weight: bold
-        @media (min-width: 680px)
-          font-size: 19px
-      .vs-slogan-title
-        margin-top: 6px
-        font-size: 16px
-        font-weight: 400
-        @media (min-width: 680px)
-          font-size: 18px
-        strong
-          color: #48a0ff
-          font-weight: 400
-
-    .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)
-        display: inline-block
-        margin-right: 0
-        padding: 8px 24px
-        margin-left: 22px
-      @media (min-width: 1024px)
-        margin-left: 69px
-
-  .vs-close
-      right: 6px
-      position: absolute
-      @media (min-width: 680px)
-        padding: 10px
-        right: 20px
-      &:hover
-        color: #56D8FF
+  #vs .vs-core .vs-slogan {
+    margin-left: 24px;
+    width: auto;
+  }
+
+  #vs .vs-core .vs-slogan .vs-slogan-subtitle {
+    font-size: 16px;
+  }
+
+  #vs .vs-core .vs-slogan .vs-slogan-title {
+    font-size: 18px;
+  }
+
+  #vs .vs-core .vs-button {
+    display: inline-block;
+    margin-right: 0;
+    margin-left: 22px;
+  }
+
+  #vs .vs-core .vs-button-inside {
+    padding: 8px 24px;
+  }
+
+  #vs .vs-close {
+    padding: 10px;
+    right: 20px;
+  }
+}
+
+@media (min-width: 768px) {
+  #vs .vs-logo .logo-small {
+    display: none;
+  }
+
+  #vs .vs-logo .logo-big {
+    display: inline-block;
+  }
+
+  #vs .vs-core {
+    width: 430px;
+  }
+}
+
+@media (min-width: 1024px) {
+  #vs {
+    background-position: top right;
+  }
+
+  #vs .vs-core .vs-slogan .vs-slogan-title {
+    font-size: 24px;
+  }
+
+  #vs .vs-core .vs-button {
+    margin-left: 69px;
+  }
+
+  #vs .vs-core {
+    width: auto;
+  }
+}
 
 /************************************/
 
+$topBannerHeight ?= 5rem
+$topBannerHeightMobile ?= 5rem
+$navbarHeight ?= 3.6rem
+$contentClass = '.theme-default-content'
+
 // Show banner only if the container has class "has-top-banner"
 .main-container.has-top-banner
   #vs