From 046a0937e3749e0284678929a57c9d2839910dab Mon Sep 17 00:00:00 2001
From: Nico Devs <3766839+nicodevs@users.noreply.github.com>
Date: Mon, 14 Jun 2021 10:57:42 -0300
Subject: [PATCH] docs: add VueSchool Summer Sale banner (#3564)

---
 docs/.vuepress/components/HomeSponsors.vue    |  10 +-
 .../public/images/vueschool/close.svg         |   7 +
 .../public/images/vueschool/vs-backpack.png   | Bin 0 -> 6234 bytes
 .../public/images/vueschool/vs-iso.svg        |  13 ++
 .../public/images/vueschool/vs-logo.svg       |  16 ++
 docs/.vuepress/theme/Layout.vue               | 104 ++++++-----
 docs/.vuepress/theme/components/BannerTop.vue | 170 ++++++++++++++++++
 7 files changed, 276 insertions(+), 44 deletions(-)
 create mode 100644 docs/.vuepress/public/images/vueschool/close.svg
 create mode 100644 docs/.vuepress/public/images/vueschool/vs-backpack.png
 create mode 100644 docs/.vuepress/public/images/vueschool/vs-iso.svg
 create mode 100644 docs/.vuepress/public/images/vueschool/vs-logo.svg
 create mode 100644 docs/.vuepress/theme/components/BannerTop.vue

diff --git a/docs/.vuepress/components/HomeSponsors.vue b/docs/.vuepress/components/HomeSponsors.vue
index 8790be802..8e3ce0721 100644
--- a/docs/.vuepress/components/HomeSponsors.vue
+++ b/docs/.vuepress/components/HomeSponsors.vue
@@ -27,11 +27,17 @@ export default {
 <style>
 #sponsors {
   text-align: center;
-  padding: 35px 40px 45px;
-  margin: 0 -2rem;
+  padding: 35px 30px 45px;
   background-color: #f6f6f6;
 }
 
+@media (min-width: 768px) {
+  #sponsors {
+    padding: 35px 40px 45px;
+    margin: 0 -2rem;
+  }
+}
+
 #sponsors h3 {
   color: #999;
   margin: 0 0 10px;
diff --git a/docs/.vuepress/public/images/vueschool/close.svg b/docs/.vuepress/public/images/vueschool/close.svg
new file mode 100644
index 000000000..a9d51d1d8
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/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>
diff --git a/docs/.vuepress/public/images/vueschool/vs-backpack.png b/docs/.vuepress/public/images/vueschool/vs-backpack.png
new file mode 100644
index 0000000000000000000000000000000000000000..43807ff60d253f86445b638697960cf25a11c2e8
GIT binary patch
literal 6234
zcmcgw_ct4k*EWjUYJH4oi`bjc*kY$8s7)0`W7Xc&-XpaYp;n`I)oAS!qg7(B+G53C
zwa3@{PrUb>JD&TTbAPz^`RT^#!Zaw!Sjh13@F=00sxR*|;@;CA65dA-m*u|u^Z*Xg
zhT!4VejvZLCc4M?o-Z|&@v1QZ93CD)madk8nueQ}10&w;?d|3M_5)&)@$Y%Jmlyc>
z_zp1TdpH}%b5Gsg-L2Zn@1%>ZIkDric~XTLW}>-=!-OXyxo2W{l<LA~<G7bKS+!MU
zT6{RypOwu8OG-X}JsZb+dwq*|`QOHK)>Y%DYK>8o(L8r|clXoQB`fa>$oB{-ZL9M#
zo{Mtsb;*i!{zv!ydsd|-N(yGB1bbEC^z<Ie2Du#;@XaUiu0ojG99h?&v#e_XAWf0#
z0XA2az(d?dM^5|?aiQO`%$u?(3%I*Vyz@Ioyqmkb0@45W!}>J>omSKMPD^=k=>j`n
zEDHbr+yH;NzP;-f4L@4?eYU%Fb91)_VS)UJn2F*3hvME!7nFp)zOLmwui(0@1YT7G
zZ|gWtzi^+Garr|Zwfb@FW()j{<2tKTz3$MtYSX?unp=~sIB(QAF6P<I72eMm+eh+U
zwCEjv;=5>ieo!oVP$+Tu`Pna7!lN%TCl&JB1;9HrY$=&{E}rk-SLLo?_QNvvO(fSs
z63=c4$6Ed~97=vIm478mbT}G#F&Mv+&b^k+wE=y4RIl?V95^M<RN|$zTcb9r&Fv3Y
zy4oDKw}f~A>Bdup^z~E~HK2E~&O3$@mlHWSyC(<5z{5n|L>KUZwL(p>#DX#_lPGN9
z1yiM!^7Z1^ABkE*a$0%5ptCNwCE1+CL>F9D)~Gco>LtTv;H%jx-7k)8xe>5`F0fxI
zf_k~$*=9@zAx6_K&zoaJ*7CzNERDk72pvxi?GCj6i51#uuRzJ`|J0XA@YEmt2z_1|
zoU9}n+Ti>{-eEvGI@eWaIe=p}^i{JIpvod0_t`2U?89+vU|XZjrg7v!w#u4}Q=e8z
zf}diR#q*=Yq&dvr;(NVzd%c9|<89B}(9zto5L28V@jn6S*xY<Z_za9~<O<lnzTKF4
zBi(mf)dX#7H{SaeSABpk%m(!b>y)*O>>u9xE(YS}Cojg|Xxwg(yh}OPY~DLgunGv+
zM(2dzEAao#ZhPF!ck%G(Q=qC41HZpJAGh`COj&yMaoXG}O17=FQ3$7|0-KERmuA~r
zK~`Sn>hO*qk}bo09_(Ri)0!DchH3Mn5~1$T)rIw6j1J4oFp2R&$x<n-yM$cc@YakM
z{dnCwulRP+6Xxpz1cogIA3~LVn+Z3Jhpt*TkWW)u$7I{a_){5f71a&tv-YI@ug`zW
zfA0Af$r?2puh{;s=uGET$Aqy!c|Gr*QIkQn!Q-2qceD(Pm$;ZuPFRET*kxW$_6u_^
znZsjhMGKPH*~Q%U|NKs4iTTJf9@Y4A2xk5Htl`^1Sv30B{NcL8Z<?2+>@s{uJ6X}%
z+;lWEKRF#HqUrLw&>_^KF&Lzb=fhAJn-EpNTI5*dY93we=^v?N)Fv3k9B=~7RxZ-j
zjK_P(>ZQCX__+`G>w+=%l*Y9;NgdlMPS5x|yO4cHCq=h1mXG`C(bJ-M%5qaNVFna_
zUhfo!B4g>a%hg99ON-PafM<2|sEZP`fg>ms+vEI?no>ThqR+0x1cJ{=wwhuLl^RCQ
zsw5C#AcZY2qKE(KPqXp;Mo8>1d<{>pcSGj@ay>;KYj6uJhVSxm_2i)6uN87X#31Ds
zJ5%z6=};NihAB((rbh`}vm%DiRU}0j@)8-Ggn^}^nGT{wb9t6I;<oBsKoy_81~JH$
zEiJR)%Y0Ea?NE8~S`*CIm;8NuerSVy<MFnR<ibCvq%_zJyNurc_atIEO`!T!uK;-|
zlkWIK&=1=q^%4f<=<uWRYm9W@c76}5`0eEg`)_Hi^hX+jM?)@LKJ1!ASB^T6#PU_T
zg=CLs>BEF=lJK<5jcnAOKj4Ms?pWbsI<vq?)tH?dPS9b8>q6CXH&fA=H^al+#GgJs
z7KLuo?SWr_H1I**)I=Y@aeVyniHedGlsZPcB>jT@Kdl!A+E8dxYR<#x)qZ}>7uJTq
za3{Zxb@YvSeE#vZMu!l@LHK3b%D(I@nM$uQdj&Wz-%-fN>xy#9%J+Lr-~Qt7dO<fn
z64Yy=ZXbDI;KHAGc-QWLIZtH-X^hc*ohssxl5UujpeZ?cqhK#f2977=2M&o0`Y3Zo
z!g(N~h%qswo%t`i`rq#!4FOu&+uBs$*FrgFg@|CdV6|HZH@{xeL5%xyBr1@2eJ^Sa
zVv>qs85sw+)04@%yNZm>wik3kT!A0{plcB0YIZ?<qEB-$+;;<sLsQe!_BDlF5vbT#
z&aI*h*-Xf<ok7<k{lqUO3u5?<R})YQTd?^$X$py9kizX3F%*kt?eDAkyt`Xg0Y5Az
zkJZ=tk!JD~W3Rvi!;B}$GoOj6CkZQZi=?~~?Y%t@SOU*$YT8@JM@B|dN?wGRHxlX1
zw-&~?f-Y;qPzpv>4vOX4*dnof)M1aW?a6O3fj{nYu~?Js+*;_snd9(kqHaj)S^_HA
zSWqrWz#+(3lw6`m_7%YC`|P~S_jyM<|15N8hd-XCmhR)`W@$^%zkg$T0LI>sH?Lxg
zv!!*A%NC~#!oVchd}zs}DS;1W`76xFYwpY8Snjc!z9MT+wl?a};wgw~GTh`LRLk)X
z?}inRZ2QUJu=!-1r&2*#2P?UbIOSoqyJ@W$C0_}t8={Q3ZD_F-mhbqeRDm&{2%C0J
zpEl=Z;{SroNi_y^ENmpd;#8C{Wn9S%6O`)!4xd9kbz}%|4m7$VL%#3Vipk?Ad+MC*
z8uI(bK=~xd%uFf)63|~S!OfW-cgK!T3z>HZ-MGgE1?oNnoSx&9j^c81<B>%WaQTEq
ztHpjXuF9Wk2>rk_`I(TAjc~z8Sscq7>J$>Tar~I3x-?;vA+tmO_=B%vIj~oJUl<Yw
z_4=YeD0CCfSyu%pYKMHKLJH|2b+GWqdW-cmzJAY6e#q!i9x7N<%7V1zL2ai!%0@q{
zyR%=@7(Y~0hA4fh@!HaITq0~EY?{@#xM|W|s;ZY)^Ro(Rh)t<(q|ufUv|#jpYr6ZF
zTW0EH$wfx@<}q@wKtn%rgZV<d^?WrvG$IX|jj~SH_dQ*md=+o+x?f(6atP@^IA_ck
zWJwYs%E`QXmBmF4_$ON9LX2c{D(rk?s<1n7yqOV;?h3H`MWBHl&c=^fs8`Q<(9@-o
zsk_MaD5lPQxLTP+$9id+**`{P)2sS5o2~S=r~sm*G|sY-@mC3Fye~Pp4EWQ^9si%w
z=|n(?WX=!yA&J(W^FaDOF~?daBQ#A9VvB|<Z$h~o+~_2U{9!o$Fqa~v0&lDzOu(3+
zo)xv@!`AO%boKaT&E=|=b0(7H@AdERu_d1wbY#(db5O4DhQ5?d$JVEol8Q1uPm`e3
z*mAp|I6bBUYi_o6LHBjjQ8Oaxpu?&c@Rx#eJ4NoMU!xt~`7eFNLl~7t@i0rx`-hH|
z>pIyv|3e>wx=VESQItbF9N7ffnMR>3p7;oL03%yU_wf&>=GU)FajIbEF3<DgX8N4`
zwXsMz60&X;VrGu=+kuhwV8cKGS&UU?UeVgtjx2Aw=M9!kUEbLp5K_FU6!hU~0Lf5t
zj6MQAg7>jFe1-a6lpM6u<N!=UNxAJ3)N)}DNj`$iC|mu=I}45Hk9RHdG(b>_AsbOO
zU4hnDqU4B@TJ;3!`qjb-H)A3sg{i{z;i;DDm@g5skAgFujBeQh4%9CD`QN*f&m-UP
z@p+E9RZiXCrajbl8esLC(|}Go5&cK&@CK6{xYNq$Ym`}G&&b_IW3P$|&YE?WV$~GW
zRWc%jlPuOD9EmsA6RQ|38pX3u+)|;TkoAv3>yNa3JX$2>y*xc(=Av;NRnQMt*+6->
zfe7hKL3j1tocy<u`pJKMObe5pvjbXb-=>;Eu-|eAGo1%V2FxV~v&3`|mOKgtxcp~z
z)L84+m7&%sfRarklNB(c7jLM01Y5Iwj91YV?UsWB-1#1u|H^$LWm-4pkZ0ZN7d)Q$
z!cH^kX}gB<R6RQMn4!x7b7(0riwBS18JU^s6EU(yg$(p#^OYC6srmAG$QLC%qhE)o
zVY52e^Z<7m!Ke@qXELuRcRyV1q!&8PHCi4G#<I5=t++?KB<df;%(;=_k=zVT-ch4M
z;yv9f4aXICea?akrV{g*M_4^*;i8u4z13(=!kilXQc~KLZ<yScmceQAYr+T<b#;S)
zh{yT1PY(hACzEr|F6K^fmf`?uX>9M_IdgA6CEY`&*PovQ_|uGn5o2`7bvCEYi_E5>
zHy@?m2Y2IUV`V%3kizMDv#lQ=fPv+5Bb%lSoemgM4T#&G*iMkI@0n)1)d_!v=|qCN
zhZz^J=V9p~8M>IF;$(^HS`)m|(ca&{3+aMa-mBt|)6a{ysXgmJ>J&Kx{>1Sgr`GS!
za@;W=X7EdeE=$w6s4{}`ud}E3TL{Y=mYj)m-Y!OoJzM(n?WGJ-H3?HO;M84sbE99J
z%x3slQnAL-Qi4h%6OL^B`K6rFRn!AL6YrKIiqV8&?S3c<E>-sAaj!$fVdhsoxka}g
z$16Rjr>BjLz=B4pbAuC`ccf<l^8}bFr=Pe_k-Q)3t;_zp-k#f7E_x5&nMr^8)L1Ko
zPz09HmlUpL$rL<#LnAv}nY`4%X_%w^Y|JI4FJN~&@eN!_Nk#ei;WwyF?D3d&xNZuW
z!xObA$8T>sH=%Xq<32>QrUQz{80oXW?LLXx<cpD++?ci}pProg2K;=`Azf<eRQ>jS
zx#W=k`GuPD&3kvfyP)mlI*&iGDuM~W-@e;FS>@VVU0qFop!qJNg`R|mXJ>1y%}k=<
z7t!R1qJ)o2uzAIDxi040t$Ec;z8W}n!RA;*Tf#PVG=Vw61Y}pT&mUdoc{}9V(LUo%
z`mx2P;qNR$)-My!eORV!N|N_@RYLE9N}JrYunZXNGqpc=w--}YwZE^v^YA1nr1`9|
zxELD(h(Ttk=0wbh81I(&WCD?j%!mMztxdclbd8FSn@f;kVAIqr`%<zu=B!#h0wx=v
zqIVt>J2v8e7lTH(u$R)Ez20k6%YTi#2Dk;+R703;N{vhK--G{HGldUPAU`iQ4Y{>r
z`!0pSP%;<ku=JS<HkWtMZ2<i0#Ot&l{KV6nSD>eIY>t5K=(|fan{ySLZXf}8V|$Xd
z8yY;_B0jit+UHlTx@@Ba01@TTAQjGzL(>{=E4lR(dZ_EB!j8GKUKIIL7{2UNMJ8l*
z5vwBC%l~OG1ca@OcrP0i=tFT<Y~8hs%q`%VK*n4GST8>TY>V8D3NjlrTde?KN02=u
z0hb4CE{*4$DU09yPO~g<<zT*Ga7uH-gjaN%DQPqY%U%lU!q367gh<-&h-UW%fYZwH
zKWvD0G$`WCt?!C-?^Z6PJ#z*8<b#5<EBa=|g0pL6WD)*k2vdOa-CubB_olvul;2r~
ze<k9NAftfV*f^-F+x_X_#0Ew>lt+hK*^N6-UgjrM9QoPzTB?)4<gQdlSGpWuF<aT%
zyFvF?b*gywKtI_{?GeQZeS@kvGo~m4yCW3CCXwSNMX^jc;oSu_Er^~-hQo8CdIJda
zjW}x&)CP<p-)1H%DOEwjRM-@?ZKk1T(+lEzT~SqHiyn=e!86mt--rgH;GQKXPQSv{
z1Mo9UG=WT72_~9|FmVCq=;MI~s^xKM1o7GB+=3CAtk1BG<q4Bpq85Ht-MPTBpvve3
zi^B>uITR(=p$`*fLey=U#juiu(f4$Q$<;VJgTZIYEhidx>*j*7X=ZB349gTA`Des9
z0~4!n{)i1om7sq@sCeV|AdH7wDiu`)T%3L*zs{Bl{G49|Ox`EkQ=bq~TNeSg>ooP*
z1j`K=$CH$jffWyh(&KcI&_=(z^O53)hInLG=Y_<2<&O1!g3x>R-EOL3!J!uLfI0K5
zsQ~+A*=T#Gjadn`V#l*(!By8vL#-3ZC7L12JO9I?Gu96^v_h<XGA^Xq6ZxA1G9OLJ
zmR9FKANDQhKKqWGF#b8hMCCbYS=ZKPz6gxeg((5)5E(?(HVO7dH*uIYJ8>isJ!4Yb
z^ZE<-wVcj}w(|4iiiYwORk7`o|DLAzNzsM-Pfnesye*wmMqcC@xuMas5EnLPH#gGl
zN9KA#G_{&>+x{iS7v=r#AN?80?r%px^x+*FLjUdCztj%I%v9+{QR>-@ec33^x3tvL
zM<mOd@u6w2Vdgk586mTckJx%91Ot7)oDU6&>yRy&H7LVQoB)0aZx=k`|CD9hm5p78
zWO@bGNmvSJ{nom&t7!e?tzv3VoTUoj)bV^*4(A|%k7nx;B5-CrNuWk|KlE6%ezZ}*
zOf5!VY~)ej!BTP&1_u*m)K#c)EUIHl;;AEWD@eh_T4XL&f*DI8Sv_v{-t1dHJF7lT
z)8a1~P^wU@Nq5RThVKTt_v6<R7QTw<<U^OO&S%7a$t%e{-FfWp)oJR`X&OhwUKa$m
z3z69Dh5_EYiUL|vzj%7cUpE`@TTbvc$W59aoS0H<nEafnRi?FA2OH+hbyaeBi+K3j
ziuI_03rfQ)Mi&lYGrfhDh`K5xMhSVVR+Y)Hu2j*vGFqw$F}9}2!=IgH20(o%|HAZP
zqOZxPhOswbS!*m?-Q%I<K`2Gclo)fI#5*i+B;n*TmMtWoka~M$Bg@<l;85SyEBlu3
zbxfD7VK)?}x}tR?K&lZzo4HQV%7yS<FH8eR6Z3er5`wu77^M0q9D5pJCsTynp${Ja
z2CgvKFRn>{XFEao`k|h{t8TFW4i2f%dS4kT4fx3xMC6LU+moce3N0>=wYgBy00^WB
z0`k=peYf1%`bWW3HJq1`YeJ7=URI=>K9eK06s&2n86)qN{YIQ5o^E%)CPbl$;3VnR
zR<k>Vd|ZY1d>CYrS{NI?_8l?LU$-RP7(|!r^H@z{#a)oRR1!eKfwR^!Fs2zXhDKEs
zF{hh7N0V)F#=@WQ(6$!_21-2i?L7jJSh7ebIDSO<Gt_66$AZ(%ax*hdeQ*fx%(JYz
zZ4TJ59|>yn<s8D6bbXt<X1UMg!BA3lwL@@~GXbJ7G%g{ExK~Gsx6VN<SJU<#%a9-3
zq3jDo!@M7W!_>$tT7TK_<icI1N8)Q<-udW<*l_AWQJ|KPDF**T!?41_a@t8FRLnF+
zHy%%a{JBy@VMP14st7}hS5|qf0HTQ)<02Z3E*-vrpzrwKSSo8AlgTK}&{kbU4DQ-J
zDZSP!wDghN;rvVXCcNo#JAKxI`B}uVYRh2m_tlR-bZBHr0%-MeqZ-%PST$#>=qOYX
zTJjH;m~yx!k}mB<8=8Y^v=5!^(0Im9ny8P`{1V0?L-j2!<|S&}S*YR0>5|>d>As~1
zVwP7bmbhqZH)ISx=<a}3@HE-Nc}r$#6PdJVo9hwzV_OgRzAc}whA-RRRsU$^BX&Xb
z?I5i53H()rPA&=praePeT0Eft+zcbmw43i8k@RUH43l11Bg`4~Mvr^ZKKQ`)+<u2P
z(a-Z!SZc*K3LAJzY0N*_eFTsGtAzz-{*sU@o(&gPclj@!`0Sx;=JU@o{CMKVB2B!)
zNvrho;w+PZgeHY?#g!$^R<Ig^zI5Ds5OlMTOZ^Y-25xozN{xfGBxWU2o%l)sRN9+C
z8?!T8=Sx<WcL&3ER!9-rG4Em@Qo*BYLiN;MkrAgx*0|7U!@jPM&WXGa{!m;FjuSC?
z59iKig}aYc)tGy{r^45(7m&!~AN(0IX8BQ(Afe=g77+-PC2ydrRE(7<*DZkPIV!gC
zqK?TD9I4~S<;4N=(_|zo7mA{zyL`-lxi&Mj_1(xwAQAS_)T%FAT+fnv+vh~_g+>p~
zcU=q}vu2fX`1{Yx6(pt=>94wCNj2h=PN^66CL_KOfScj!mw(l1jO|DrziW_O_G-8c
zdHIel|A!Azi=E|+z~1QB`gBGvU*4igq&#+=x7}=1^!3qbw0?0djm5LL(q;8>%(NZ7
pOjL8Q=u=Mb_#)$_Hj%<}#T%39@3<&+wfko)9#jpcTCHpq{y+WWP~`vs

literal 0
HcmV?d00001

diff --git a/docs/.vuepress/public/images/vueschool/vs-iso.svg b/docs/.vuepress/public/images/vueschool/vs-iso.svg
new file mode 100644
index 000000000..873f0bcdc
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-iso.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="42" viewBox="0 0 37 42">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <path fill="#364FDE" d="M10.648 25.558C7.883 11.884 10.503 2.91 10.503 2.91s-.701 5.463 4.81 14.267c-.07 10.915 2.078 16.609 2.078 16.609l.442-.325-.442.385s-3.267-2.667-6.743-8.288zM23.674 23.622c1.322 1.332 2.555 2.254 3.447 2.692l-.016-.008s1 .36 1.177.12c1.22-1.292 1.519-3.699.705-8.223-4.65-2.656-5.238-6.796-5.238-6.796s-.838 5.748-.075 12.215z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#56D8FF" d="M10.503 2.91s-3.827 13.104 2.65 31.773c.176.539 0 1.137-.472 1.496l-6.829 4.787c-.648.479-1.59.18-1.884-.598C2.143 35.4-2.86 18.946 2.202.935c.235-.718 1-1.137 1.707-.837l6.594 2.812z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#667DFF" d="M23.573 29.238l-6.182 4.548s-3.297-8.736-1.59-25.311c.118-.958 1.119-1.436 1.943-.958l6.005 3.89s-1.177 8.078.53 15.857c.177.777-.118 1.555-.706 1.974zM34.994 19.126l-5.711-3.77c-.353-.24-.883.12-.765.539 1.354 6.043 1.177 9.035-.236 10.53-.176.24-1.177-.119-1.177-.119.942.479 1.177.24 1.177.24.942-.719 4.474-3.292 6.712-4.847.883-.658.883-1.975 0-2.573z" transform="translate(-20 -19) translate(20 19)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-logo.svg b/docs/.vuepress/public/images/vueschool/vs-logo.svg
new file mode 100644
index 000000000..01f7ae050
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g opacity=".9">
+                    <g>
+                        <path fill="#364FDE" d="M9.936 24.365C7.355 11.329 9.8 2.775 9.8 2.775s-.654 5.207 4.488 13.6c-.066 10.405 1.939 15.833 1.939 15.833l.412-.31-.412.367s-3.049-2.543-6.291-7.9zM22.09 22.519c1.233 1.27 2.384 2.148 3.215 2.566l-.014-.007s.933.342 1.098.114c1.139-1.232 1.417-3.526.658-7.84-4.34-2.531-4.887-6.478-4.887-6.478s-.782 5.48-.07 11.645z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#56D8FF" d="M9.8 2.774s-3.57 12.492 2.472 30.29c.165.513 0 1.083-.44 1.426L5.46 39.053c-.604.456-1.483.171-1.757-.57C2 33.748-2.67 18.06 2.055.892c.22-.685.933-1.084 1.593-.799L9.8 2.774z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#667DFF" d="M21.995 27.873l-5.768 4.335S13.15 23.88 14.744 8.079c.11-.913 1.043-1.369 1.813-.913l5.602 3.708s-1.098 7.7.495 15.116c.165.742-.11 1.483-.66 1.883zM32.651 18.233l-5.328-3.594c-.33-.228-.824.114-.714.513 1.263 5.762 1.099 8.614-.22 10.04-.165.228-1.098-.114-1.098-.114.878.456 1.098.228 1.098.228.88-.685 4.175-3.138 6.262-4.62.824-.628.824-1.883 0-2.453z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                    </g>
+                </g>
+                <path fill="#FFF" d="M54.753 13.93l-3.028-8.623h-2.47l4.287 11.602h2.323L60.17 5.307H57.78l-3.027 8.624zm11.29 2.98h2.079l-.016-.148c-.028-.276-.06-.697-.065-1.167l-.001-6.737h-2.176v4.68c0 .933-.557 1.587-1.522 1.587-1.015 0-1.473-.72-1.473-1.62V8.858h-2.176v5.09c0 1.75 1.112 3.174 3.06 3.174.85 0 1.783-.327 2.225-1.08 0 .327.033.703.066.867zm5.875-4.943c.05-.736.671-1.587 1.8-1.587 1.244 0 1.767.785 1.8 1.587h-3.6zm3.813 2.095c-.262.72-.818 1.227-1.833 1.227-1.08 0-1.98-.769-2.029-1.833h5.76l.024-.366c.005-.095.009-.2.009-.305 0-2.585-1.49-4.172-3.977-4.172-2.061 0-3.96 1.669-3.96 4.238 0 2.716 1.948 4.304 4.157 4.304 1.98 0 3.256-1.162 3.665-2.553l-1.816-.54zM58.22 25.255c-.261-1.31-1.341-3.011-4.156-3.011-2.192 0-4.041 1.57-4.041 3.632 0 1.751 1.194 2.946 3.043 3.322l1.62.327c.9.18 1.408.704 1.408 1.375 0 .818-.671 1.424-1.882 1.424-1.637 0-2.438-1.031-2.537-2.177l-2.094.557c.18 1.652 1.538 3.632 4.614 3.632 2.7 0 4.19-1.8 4.19-3.583 0-1.637-1.13-3.011-3.24-3.42l-1.62-.311c-.851-.164-1.26-.671-1.26-1.31 0-.768.72-1.472 1.816-1.472 1.473 0 1.996.998 2.11 1.636l2.03-.621zm5.466 2.552c1.08 0 1.588.688 1.784 1.358l1.947-.654c-.343-1.358-1.587-2.716-3.78-2.716-2.34 0-4.173 1.783-4.173 4.27 0 2.471 1.866 4.271 4.239 4.271 2.143 0 3.403-1.374 3.763-2.716l-1.914-.638c-.18.622-.737 1.358-1.85 1.358-1.112 0-2.061-.818-2.061-2.275 0-1.456.933-2.258 2.045-2.258zm7.56 1.555c.05-.884.59-1.571 1.506-1.571 1.047 0 1.489.704 1.489 1.604v4.696h2.176v-5.073c0-1.767-.949-3.19-2.994-3.19-.77 0-1.653.261-2.177.883v-4.467h-2.176V34.09h2.176v-4.73zm10.997 2.994c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm9.556 6.561c-1.064 0-2.045-.785-2.045-2.29 0-1.522.981-2.291 2.045-2.291s2.045.769 2.045 2.29c0 1.522-.981 2.291-2.045 2.291zm0-6.561c-2.405 0-4.222 1.783-4.222 4.27 0 2.471 1.817 4.271 4.222 4.271 2.405 0 4.222-1.8 4.222-4.27 0-2.488-1.817-4.271-4.222-4.271zm8.116 8.296V22.244H97.74V34.09h2.176zm15.339-1.735c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm-6.066 8.296v-8.182h-2.176v8.182h2.176zm-2.28-10.386c0-.599.489-1.09 1.085-1.09.608 0 1.097.491 1.097 1.09 0 .6-.489 1.091-1.097 1.091-.596 0-1.085-.491-1.085-1.09zm-4.882 9.011c0-.818.671-1.489 1.49-1.489.834 0 1.505.671 1.505 1.49 0 .818-.671 1.488-1.506 1.488-.818 0-1.489-.67-1.489-1.489z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
index 8ce01a230..a3aeecce2 100644
--- a/docs/.vuepress/theme/Layout.vue
+++ b/docs/.vuepress/theme/Layout.vue
@@ -1,42 +1,51 @@
 <template>
-  <ParentLayout>
-    <template #page-top>
-      <CarbonAds
-        v-if="$site.themeConfig.carbonAds"
-        :key="'ca:' + $page.path"
-        :code="$site.themeConfig.carbonAds.carbon"
-        :placement="$site.themeConfig.carbonAds.placement"
-      />
-    </template>
-    <template #page-bottom>
-      <BuySellAds
-        v-if="$site.themeConfig.carbonAds"
-        :key="'bsa:' + $page.path"
-        :code="$site.themeConfig.carbonAds.custom"
-        :placement="$site.themeConfig.carbonAds.placement"
-      />
-    </template>
-    <template #sidebar-bottom>
-      <div class="sponsors">
-        <a
-          href="https://github.com/sponsors/posva"
-          target="_blank"
-          rel="noopener"
-          >Sponsors</a
-        >
+  <div
+    class="main-container"
+    :class="{ 'has-top-banner': showTopBanner }"
+  >
+    <BannerTop
+      v-if="showTopBanner"
+      @close="closeBannerTop"
+    />
+    <ParentLayout>
+      <template #page-top>
+        <CarbonAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'ca:' + $page.path"
+          :code="$site.themeConfig.carbonAds.carbon"
+          :placement="$site.themeConfig.carbonAds.placement"
+        />
+      </template>
+      <template #page-bottom>
+        <BuySellAds
+          v-if="$site.themeConfig.carbonAds"
+          :key="'bsa:' + $page.path"
+          :code="$site.themeConfig.carbonAds.custom"
+          :placement="$site.themeConfig.carbonAds.placement"
+        />
+      </template>
+      <template #sidebar-bottom>
+        <div class="sponsors">
+          <a
+            href="https://github.com/sponsors/posva"
+            target="_blank"
+            rel="noopener"
+            >Sponsors</a
+          >
 
-        <a
-          v-for="sponsor in sponsors.gold"
-          :href="sponsor.href"
-          :key="sponsor.href"
-          target="_blank"
-          rel="noopener"
-        >
-          <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
-        </a>
-      </div>
-    </template>
-  </ParentLayout>
+          <a
+            v-for="sponsor in sponsors.gold"
+            :href="sponsor.href"
+            :key="sponsor.href"
+            target="_blank"
+            rel="noopener"
+          >
+            <img :src="sponsor.imgSrcLight" :alt="sponsor.alt" />
+          </a>
+        </div>
+      </template>
+    </ParentLayout>
+  </div>
 </template>
 
 <script>
@@ -47,15 +56,26 @@ import sponsors from '../components/sponsors.json'
 
 export default {
   name: 'Layout',
-
   components: {
     ParentLayout,
     CarbonAds,
-    BuySellAds
+    BuySellAds,
+    BannerTop: () => import('./components/BannerTop.vue')
   },
-
-  created() {
-    this.sponsors = sponsors
+  data () {
+    return {
+      sponsors,
+      showTopBanner: false
+    }
+  },
+  mounted () {
+    this.showTopBanner = !localStorage.getItem('VS_SUMMER_BANNER_CLOSED')
+  },
+  methods: {
+    closeBannerTop () {
+      this.showTopBanner = false
+      localStorage.setItem('VS_SUMMER_BANNER_CLOSED', 1)
+    }
   }
 }
 </script>
diff --git a/docs/.vuepress/theme/components/BannerTop.vue b/docs/.vuepress/theme/components/BannerTop.vue
new file mode 100644
index 000000000..b9ec330fa
--- /dev/null
+++ b/docs/.vuepress/theme/components/BannerTop.vue
@@ -0,0 +1,170 @@
+<template>
+  <a id="vs" href="https://vueschool.io/sales/summer-vue?friend=vuerouter" target="_blank" rel="noreferrer">
+    <div class="vs-iso">
+      <img src="/images/vueschool/vs-iso.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-logo">
+      <img src="/images/vueschool/vs-logo.svg" alt="Vue School Logo">
+    </div>
+    <div class="vs-core">
+      <div class="vs-backpack">
+        <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
+      </div>
+      <div class="vs-slogan">
+        3-months Vue School for only $49 <span style="text-decoration: line-through">$75</span>!
+        <span class="vs-slogan-light">
+          Limited Time Offer
+        </span>
+      </div>
+      <div class="vs-button">
+        GET ACCESS
+      </div>
+    </div>
+    <div
+      id="vs-close"
+      class="vs-close"
+      @click.stop.prevent="$emit('close')">
+      <img src="/images/vueschool/close.svg" alt="Close">
+    </div>
+  </a>
+</template>
+
+<style lang="stylus">
+$topBannerHeight ?= 5rem
+$topBannerHeightMobile ?= 3.125rem
+$navbarHeight ?= 3.6rem
+$contentClass = '.theme-default-content'
+
+@import url('https://fonts.googleapis.com/css?family=Roboto')
+
+// Banner
+#vs
+  align-items: center
+  background-color: #202A5A
+  box-sizing: border-box
+  color: #fff
+  display: none
+  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: $topBannerHeightMobile
+  @media (min-width: 680px)
+    height: $topBannerHeight
+  &:hover
+    .vs-core
+      .vs-button
+        background: #f22606
+
+  .vs-iso
+    position: absolute
+    left: 20px
+    height: 26px
+    display: none
+    img
+      height: 26px
+    @media (min-width: 680px)
+      display: block
+      left: 40px
+      height: 40px
+      img
+        height: 40px
+    @media (min-width: 900px)
+      display: none
+
+  .vs-logo
+    position: absolute
+    display: none
+    left: 40px
+    @media (min-width: 900px)
+      display: block
+
+  .vs-core
+    display: flex
+    align-items: center
+    margin-right: 20px
+    @media (min-width: 680px)
+      margin-right: 0
+
+    .vs-backpack
+      margin-right: 6px
+      @media (min-width: 680px)
+        margin-right: 14px
+      img
+        height: 50px
+        @media (min-width: 680px)
+          height: 74px
+
+    .vs-slogan
+      color: #FFF
+      font-weight: bold
+      font-size: 14px
+      @media (min-width: 680px)
+        font-size: 18px
+      > .vs-slogan-light
+        color: #ff5338
+        display: block
+        text-align: left
+        @media (min-width: 900px)
+          text-align: center
+          display: inline
+
+    .vs-button
+      margin-left: 43px
+      color: #FFF
+      padding: 13px 24px
+      border-radius: 40px
+      display: none
+      background: #ff5338
+      font-weight: bold
+      @media (min-width: 680px)
+        display: inline-block
+
+  .vs-close
+    right: 10px
+    position: absolute
+    padding: 10px
+    @media (min-width: 680px)
+      right: 20px
+    &:hover
+      color: #56D8FF
+
+/************************************/
+
+// Show banner only if the container has class "has-top-banner"
+.main-container.has-top-banner
+  #vs
+    display: flex
+
+// Add margin top to body, navbar and sidebar
+.main-container.has-top-banner
+  margin-top: $topBannerHeightMobile
+  .navbar
+    margin-top: $topBannerHeightMobile
+  .sidebar
+    margin-top: $topBannerHeightMobile
+@media (min-width: 680px)
+  .main-container.has-top-banner
+    margin-top: $topBannerHeight
+    .navbar
+      margin-top: $topBannerHeight
+    .sidebar
+      margin-top: $topBannerHeight
+
+// Adjust titles margin and padding for anchor links
+.main-container.has-top-banner
+  {$contentClass}:not(.custom)
+    h1, h2, h3, h4, h5, h6
+      margin-top (2.5rem - $topBannerHeightMobile - $navbarHeight)
+      padding-top ($navbarHeight + $topBannerHeightMobile + 1rem)
+@media (min-width: 680px)
+  .main-container.has-top-banner
+    {$contentClass}:not(.custom)
+      h1, h2, h3, h4, h5, h6
+        margin-top (2.5rem - $topBannerHeight - $navbarHeight)
+        padding-top ($navbarHeight + $topBannerHeight + 1rem)
+</style>