From cb6e8cfc58502a1df767cd88e28c8babfb08379e Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Thu, 8 Apr 2021 17:51:32 +0700
Subject: [PATCH 1/2] Add banner for vuemastery free weekend

---
 .../background-bubbles-vuemastery.svg         | 109 +++++
 .../vuemastery/background-vuemastery.svg      |  34 ++
 .../images/vuemastery/lock-vuemastery.svg     | 230 +++++++++++
 .../images/vuemastery/unlock-vuemastery.svg   | 283 +++++++++++++
 .../components/sponsors/VueMasteryBanner.vue  |  19 +-
 src/.vuepress/theme/layouts/Layout.vue        |  72 +++-
 src/.vuepress/theme/styles/index.styl         |   1 +
 .../theme/styles/vuemastery-banner.styl       | 391 +++++++++---------
 8 files changed, 929 insertions(+), 210 deletions(-)
 create mode 100644 src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg
 create mode 100644 src/.vuepress/public/images/vuemastery/background-vuemastery.svg
 create mode 100644 src/.vuepress/public/images/vuemastery/lock-vuemastery.svg
 create mode 100644 src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg

diff --git a/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg b/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg
new file mode 100644
index 0000000000..8f5ec7e888
--- /dev/null
+++ b/src/.vuepress/public/images/vuemastery/background-bubbles-vuemastery.svg
@@ -0,0 +1,109 @@
+<svg width="3840" height="250" viewBox="0 0 3840 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="3840" height="250">
+<rect width="3840" height="250" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M3125.99 67.667C3143.38 67.667 3157.48 53.5685 3157.48 36.177C3157.48 18.7856 3143.38 4.68701 3125.99 4.68701C3108.59 4.68701 3094.5 18.7856 3094.5 36.177C3094.5 53.5685 3108.59 67.667 3125.99 67.667Z" fill="url(#paint0_radial)"/>
+<path d="M3012.62 403.625C3090.01 403.625 3152.74 340.895 3152.74 263.513C3152.74 186.131 3090.01 123.401 3012.62 123.401C2935.24 123.401 2872.51 186.131 2872.51 263.513C2872.51 340.895 2935.24 403.625 3012.62 403.625Z" fill="url(#paint1_radial)"/>
+<path d="M3290.39 194.64C3335.33 194.64 3371.77 158.205 3371.77 113.26C3371.77 68.315 3335.33 31.8799 3290.39 31.8799C3245.44 31.8799 3209.01 68.315 3209.01 113.26C3209.01 158.205 3245.44 194.64 3290.39 194.64Z" fill="url(#paint2_radial)"/>
+<path d="M3125.99 86.584C3153.83 86.584 3176.39 64.016 3176.39 36.177C3176.39 8.338 3153.83 -14.23 3125.99 -14.23C3098.15 -14.23 3075.58 8.338 3075.58 36.177C3075.58 64.016 3098.15 86.584 3125.99 86.584Z" fill="url(#paint3_radial)"/>
+<path d="M3264.55 280.843C3278.82 280.843 3290.39 269.276 3290.39 255.008C3290.39 240.74 3278.82 229.173 3264.55 229.173C3250.29 229.173 3238.72 240.74 3238.72 255.008C3238.72 269.276 3250.29 280.843 3264.55 280.843Z" fill="url(#paint4_radial)"/>
+<path d="M3290.39 162.458C3317.56 162.458 3339.59 140.431 3339.59 113.26C3339.59 86.0887 3317.56 64.062 3290.39 64.062C3263.22 64.062 3241.19 86.0887 3241.19 113.26C3241.19 140.431 3263.22 162.458 3290.39 162.458Z" fill="url(#paint5_radial)"/>
+<path d="M3840 -123V75.159C3805.25 83.968 3768.87 88.652 3731.39 88.652C3571.9 88.652 3432.22 3.909 3354.88 -122.999H3840V-123Z" fill="url(#paint6_radial)"/>
+<path d="M3012.62 339.162C3054.4 339.162 3088.27 305.293 3088.27 263.513C3088.27 221.733 3054.4 187.864 3012.62 187.864C2970.84 187.864 2936.97 221.733 2936.97 263.513C2936.97 305.293 2970.84 339.162 3012.62 339.162Z" fill="url(#paint7_radial)"/>
+<path opacity="0.4" d="M2799.73 -18.148C2799.73 128.954 2680.48 248.203 2533.37 248.203C2522.84 248.203 2512.45 247.592 2502.24 246.401V-123H2778.29C2792.09 -90.822 2799.73 -55.377 2799.73 -18.148Z" fill="url(#paint8_radial)"/>
+<path opacity="0.4" d="M297.487 -18.148C297.487 128.954 178.238 248.203 31.135 248.203C20.601 248.203 10.212 247.592 -0.00195312 246.401V-123H276.053C289.849 -90.822 297.487 -55.377 297.487 -18.148Z" fill="url(#paint9_radial)"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3255.35 217.009) scale(336.602)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3166.4 134.019) scale(316.126 316.126)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3217.22 280.475) scale(324.18)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3092.55 128.065) scale(177.13)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3155.24 95.6988) scale(385.786 385.786)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3238 210.242) scale(189.699)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3426.57 342.694) scale(683.391)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3142.04 136.356) scale(248.948 248.948)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3411.9 247.332) scale(897.876)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(825.658 231.332) scale(897.876)">
+<stop stop-color="white"/>
+<stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+<stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+<stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+<stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+<stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+<stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/.vuepress/public/images/vuemastery/background-vuemastery.svg b/src/.vuepress/public/images/vuemastery/background-vuemastery.svg
new file mode 100644
index 0000000000..fdb8488e2c
--- /dev/null
+++ b/src/.vuepress/public/images/vuemastery/background-vuemastery.svg
@@ -0,0 +1,34 @@
+<svg width="3840" height="250" viewBox="0 0 3840 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3865 -123H-24.9609V377H3865V-123Z" fill="url(#paint0_radial)"/>
+<path d="M3446.65 90.8889C3448.38 90.8889 3449.78 89.4849 3449.78 87.7529C3449.78 86.021 3448.38 84.6169 3446.65 84.6169C3444.92 84.6169 3443.51 86.021 3443.51 87.7529C3443.51 89.4849 3444.92 90.8889 3446.65 90.8889Z" fill="white"/>
+<path d="M2458.43 173.851C2458.43 177.533 2455.45 180.517 2451.76 180.517C2448.08 180.517 2445.09 177.533 2445.09 173.851C2445.09 170.165 2448.08 167.183 2451.76 167.183C2455.44 167.182 2458.43 170.165 2458.43 173.851Z" fill="white"/>
+<path d="M3518.17 114.24C3519.9 114.24 3521.3 112.836 3521.3 111.104C3521.3 109.372 3519.9 107.968 3518.17 107.968C3516.43 107.968 3515.03 109.372 3515.03 111.104C3515.03 112.836 3516.43 114.24 3518.17 114.24Z" fill="white"/>
+<path d="M3503.99 180.12C3505.72 180.12 3507.12 178.717 3507.12 176.985C3507.12 175.254 3505.72 173.85 3503.99 173.85C3502.26 173.85 3500.85 175.254 3500.85 176.985C3500.85 178.717 3502.26 180.12 3503.99 180.12Z" fill="white"/>
+<path d="M2202.26 195.964C2204 195.964 2205.4 194.56 2205.4 192.829C2205.4 191.098 2204 189.694 2202.26 189.694C2200.53 189.694 2199.13 191.098 2199.13 192.829C2199.13 194.56 2200.53 195.964 2202.26 195.964Z" fill="white"/>
+<path d="M2454.89 117.375C2456.63 117.375 2458.03 115.971 2458.03 114.24C2458.03 112.509 2456.63 111.105 2454.89 111.105C2453.16 111.105 2451.76 112.509 2451.76 114.24C2451.76 115.971 2453.16 117.375 2454.89 117.375Z" fill="white"/>
+<path d="M2374.23 213.637C2375.96 213.637 2377.37 212.233 2377.37 210.501C2377.37 208.769 2375.96 207.365 2374.23 207.365C2372.5 207.365 2371.09 208.769 2371.09 210.501C2371.09 212.233 2372.5 213.637 2374.23 213.637Z" fill="white"/>
+<path d="M2606.99 180.12C2608.72 180.12 2610.12 178.717 2610.12 176.985C2610.12 175.254 2608.72 173.85 2606.99 173.85C2605.26 173.85 2603.85 175.254 2603.85 176.985C2603.85 178.717 2605.26 180.12 2606.99 180.12Z" fill="white"/>
+<path d="M2600.72 32.6221C2602.45 32.6221 2603.85 31.2185 2603.85 29.4871C2603.85 27.7556 2602.45 26.3521 2600.72 26.3521C2598.99 26.3521 2597.58 27.7556 2597.58 29.4871C2597.58 31.2185 2598.99 32.6221 2600.72 32.6221Z" fill="white"/>
+<path d="M2643.49 241.84C2645.22 241.84 2646.63 240.436 2646.63 238.705C2646.63 236.974 2645.22 235.57 2643.49 235.57C2641.76 235.57 2640.36 236.974 2640.36 238.705C2640.36 240.436 2641.76 241.84 2643.49 241.84Z" fill="white"/>
+<path d="M2311.39 127.945C2313.12 127.945 2314.53 126.541 2314.53 124.81C2314.53 123.079 2313.12 121.675 2311.39 121.675C2309.66 121.675 2308.26 123.079 2308.26 124.81C2308.26 126.541 2309.66 127.945 2311.39 127.945Z" fill="white"/>
+<path d="M1893.38 216.772C1895.11 216.772 1896.51 215.368 1896.51 213.636C1896.51 211.904 1895.11 210.5 1893.38 210.5C1891.65 210.5 1890.24 211.904 1890.24 213.636C1890.24 215.368 1891.65 216.772 1893.38 216.772Z" fill="white"/>
+<path d="M752.312 155.238C754.184 155.238 755.702 153.72 755.702 151.848C755.702 149.976 754.184 148.458 752.312 148.458C750.44 148.458 748.922 149.976 748.922 151.848C748.922 153.72 750.44 155.238 752.312 155.238Z" fill="white"/>
+<path d="M369.89 200.78C371.762 200.78 373.28 199.262 373.28 197.39C373.28 195.518 371.762 194 369.89 194C368.018 194 366.5 195.518 366.5 197.39C366.5 199.262 368.018 200.78 369.89 200.78Z" fill="white"/>
+<path d="M259.285 73.289C261.157 73.289 262.675 71.7713 262.675 69.899C262.675 68.0268 261.157 66.509 259.285 66.509C257.412 66.509 255.895 68.0268 255.895 69.899C255.895 71.7713 257.412 73.289 259.285 73.289Z" fill="white"/>
+<path d="M667.298 69.8981C668.001 69.8981 668.571 69.3281 668.571 68.6251C668.571 67.922 668.001 67.3521 667.298 67.3521C666.595 67.3521 666.025 67.922 666.025 68.6251C666.025 69.3281 666.595 69.8981 667.298 69.8981Z" fill="white"/>
+<path d="M235.726 102.273C236.429 102.273 236.999 101.703 236.999 101C236.999 100.297 236.429 99.7271 235.726 99.7271C235.023 99.7271 234.453 100.297 234.453 101C234.453 101.703 235.023 102.273 235.726 102.273Z" fill="white"/>
+<path d="M635.507 87.15C636.694 87.15 637.655 86.1883 637.655 85.002C637.655 83.8157 636.694 82.854 635.507 82.854C634.321 82.854 633.359 83.8157 633.359 85.002C633.359 86.1883 634.321 87.15 635.507 87.15Z" fill="white"/>
+<path d="M512 101.875C513.186 101.875 514.148 100.913 514.148 99.7271C514.148 98.5408 513.186 97.5791 512 97.5791C510.813 97.5791 509.852 98.5408 509.852 99.7271C509.852 100.913 510.813 101.875 512 101.875Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3064.34 172.987) rotate(180) scale(1747.05 1728.08)">
+<stop stop-color="#00C9FF"/>
+<stop offset="0.0999" stop-color="#00B0E4"/>
+<stop offset="0.3903" stop-color="#006C9B"/>
+<stop offset="0.5249" stop-color="#00517E"/>
+<stop offset="0.5433" stop-color="#004E7A"/>
+<stop offset="0.7389" stop-color="#003256"/>
+<stop offset="0.898" stop-color="#002040"/>
+<stop offset="1" stop-color="#001A38"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg b/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg
new file mode 100644
index 0000000000..c9583a1a0b
--- /dev/null
+++ b/src/.vuepress/public/images/vuemastery/lock-vuemastery.svg
@@ -0,0 +1,230 @@
+<svg width="2593" height="250" viewBox="0 0 2593 250" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d)">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="3840" height="250">
+<rect width="3840" height="250" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M2002.33 205.278C2002.33 207.683 2000.38 209.633 1997.98 209.633H1865.24C1862.84 209.633 1860.89 207.683 1860.89 205.278V114.129C1860.89 111.723 1862.84 109.773 1865.24 109.773H1997.98C2000.38 109.773 2002.33 111.723 2002.33 114.129V205.278Z" fill="url(#paint0_radial)"/>
+<path d="M1978.14 109.773H1963.73V67.0161C1963.73 57.6141 1956.08 49.9641 1946.68 49.9641H1916.53C1907.13 49.9641 1899.48 57.6131 1899.48 67.0161V109.772H1885.08V67.0161C1885.08 58.6141 1888.35 50.7131 1894.29 44.7721C1900.23 38.8301 1908.13 35.5581 1916.53 35.5581H1946.68C1955.08 35.5581 1962.98 38.8301 1968.93 44.7721C1974.87 50.7131 1978.14 58.6141 1978.14 67.0161V109.773Z" fill="url(#paint1_radial)"/>
+<path d="M1876.6 186.818C1877.92 186.818 1878.99 185.751 1878.99 184.434C1878.99 183.117 1877.92 182.05 1876.6 182.05C1875.29 182.05 1874.22 183.117 1874.22 184.434C1874.22 185.751 1875.29 186.818 1876.6 186.818Z" fill="#00FFAF"/>
+<path d="M1876.6 195.723C1877.92 195.723 1878.99 194.656 1878.99 193.339C1878.99 192.022 1877.92 190.955 1876.6 190.955C1875.29 190.955 1874.22 192.022 1874.22 193.339C1874.22 194.656 1875.29 195.723 1876.6 195.723Z" fill="#00FFAF"/>
+<path d="M1871.53 209.635H1865.24C1862.83 209.635 1860.88 207.683 1860.88 205.277V114.13C1860.88 111.723 1862.83 109.773 1865.24 109.773H1871.53C1869.12 109.773 1867.17 111.724 1867.17 114.13V205.277C1867.17 207.684 1869.12 209.635 1871.53 209.635Z" fill="url(#paint2_radial)"/>
+<path d="M2002.33 114.129V205.276C2002.33 207.683 2000.38 209.634 1997.97 209.634H1991.43C1993.83 209.634 1995.78 207.682 1995.78 205.276V114.129C1995.78 111.722 1993.83 109.772 1991.43 109.772H1997.97C2000.38 109.772 2002.33 111.723 2002.33 114.129Z" fill="url(#paint3_radial)"/>
+<path d="M2002.33 202.658V205.277C2002.33 207.684 2000.38 209.635 1997.97 209.635H1865.24C1862.83 209.635 1860.88 207.683 1860.88 205.277V202.658C1860.88 205.065 1862.83 207.016 1865.24 207.016H1997.97C2000.38 207.016 2002.33 205.065 2002.33 202.658Z" fill="url(#paint4_radial)"/>
+<path d="M2002.33 114.129V116.749C2002.33 114.343 2000.38 112.392 1997.97 112.392H1865.24C1862.83 112.392 1860.88 114.344 1860.88 116.749V114.129C1860.88 111.722 1862.83 109.772 1865.24 109.772H1997.97C2000.38 109.772 2002.33 111.723 2002.33 114.129Z" fill="url(#paint5_radial)"/>
+<path d="M1932.72 109.773H1930.5V207.016H1932.72V109.773Z" fill="url(#paint6_radial)"/>
+<path d="M1972.15 207.016H1969.92V157.74C1969.92 152.635 1974.07 148.483 1979.18 148.483H2002.33V150.709H1979.18C1975.3 150.709 1972.15 153.863 1972.15 157.74V207.016Z" fill="url(#paint7_radial)"/>
+<path d="M2002.33 196.98H1990.76C1985.65 196.98 1981.5 192.826 1981.5 187.723V168.624C1981.5 163.52 1985.65 159.367 1990.76 159.367H2002.33V161.594H1990.76C1986.88 161.594 1983.73 164.748 1983.73 168.624V187.723C1983.73 191.599 1986.88 194.752 1990.76 194.752H2002.33V196.98Z" fill="url(#paint8_radial)"/>
+<path d="M2002.33 135.555H1979.18C1974.07 135.555 1969.92 131.402 1969.92 126.297V109.773H1972.15V126.297C1972.15 130.175 1975.3 133.328 1979.18 133.328H2002.33V135.555Z" fill="url(#paint9_radial)"/>
+<path d="M1958.79 207.016H1956.56V184.099C1956.56 180.222 1953.41 177.068 1949.53 177.068H1938.01V174.842H1949.53C1954.63 174.842 1958.79 178.995 1958.79 184.099V207.016V207.016Z" fill="url(#paint10_radial)"/>
+<path d="M1905.99 145.607H1894.46C1889.36 145.607 1885.21 141.453 1885.21 136.35V109.773H1887.43V136.35C1887.43 140.227 1890.59 143.38 1894.46 143.38H1905.99V145.607Z" fill="url(#paint11_radial)"/>
+<path d="M1890.46 207.016H1888.23V174.931C1888.23 171.056 1885.08 167.901 1881.2 167.901H1860.88V165.675H1881.2C1886.3 165.675 1890.46 169.828 1890.46 174.931V207.016Z" fill="url(#paint12_radial)"/>
+<path d="M1907.8 207.016H1905.57V170.61C1905.57 165.505 1909.72 161.353 1914.83 161.353H1923.73V163.578H1914.83C1910.95 163.578 1907.8 166.732 1907.8 170.61V207.016Z" fill="url(#paint13_radial)"/>
+<path d="M1907.8 109.773H1905.57V134.522H1907.8V109.773Z" fill="url(#paint14_radial)"/>
+<path d="M1886.32 133.328H1860.88V135.555H1886.32V133.328Z" fill="url(#paint15_radial)"/>
+<path d="M1949.69 134.521L1931.61 166.194L1913.52 134.521H1900.35L1931.61 189.83L1962.86 134.521H1949.69Z" fill="#54FFFF"/>
+<g opacity="0.6">
+<rect x="1864" y="98" width="135" height="128" fill="url(#pattern0)"/>
+</g>
+<path d="M1978.14 86.5342H1963.73V109.773H1978.14V86.5342Z" fill="url(#paint16_radial)"/>
+<path d="M1899.48 86.5342H1885.08V109.773H1899.48V86.5342Z" fill="url(#paint17_radial)"/>
+<rect x="1838" y="146" width="77" height="77" fill="url(#pattern1)"/>
+<rect x="1838" y="154" width="77" height="78" fill="url(#pattern2)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="1834" y="35.5581" width="172.332" height="204.442" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0"/>
+</pattern>
+<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1"/>
+</pattern>
+<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image2"/>
+</pattern>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1936.15 357.624) scale(321.01 321.01)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1939.01 300.975) scale(262.157)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1952.85 208.23) scale(136.302 136.304)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.41 208.23) scale(139.661 139.661)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1928.99 211.414) scale(361.34 361.339)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1931.96 236.061) scale(132.647)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.692) scale(142.263 142.272)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.692) scale(142.32 142.32)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.692) scale(142.328 142.328)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.69) scale(142.322 142.321)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.691) scale(142.313 142.313)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.691) scale(142.317 142.317)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.691) scale(142.313)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint13_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.691) scale(142.326 142.327)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint14_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.689) scale(142.319 142.316)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint15_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.684) scale(142.308 142.307)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF5"/>
+<stop offset="0.2471" stop-color="#00ADCF"/>
+<stop offset="0.4375" stop-color="#0077B0"/>
+<stop offset="0.6131" stop-color="#004D97"/>
+<stop offset="0.7708" stop-color="#002E86"/>
+<stop offset="0.9051" stop-color="#001C7B"/>
+<stop offset="1" stop-color="#001577"/>
+</radialGradient>
+<radialGradient id="paint16_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1980.16 155.992) scale(25.7584 18.6826)">
+<stop stop-color="#002551"/>
+<stop offset="0.2276" stop-color="#00194B"/>
+<stop offset="0.6795" stop-color="#000743"/>
+<stop offset="1" stop-color="#000040"/>
+</radialGradient>
+<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1980.16 155.992) scale(25.7579 18.6822)">
+<stop stop-color="#002551"/>
+<stop offset="0.2276" stop-color="#00194B"/>
+<stop offset="0.6795" stop-color="#000743"/>
+<stop offset="1" stop-color="#000040"/>
+</radialGradient>
+<image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACACAYAAAAh4nqyAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+<image id="image1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAYAAADjCemwAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+<image id="image2" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+</defs>
+</svg>
diff --git a/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg b/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg
new file mode 100644
index 0000000000..917b2bd2ae
--- /dev/null
+++ b/src/.vuepress/public/images/vuemastery/unlock-vuemastery.svg
@@ -0,0 +1,283 @@
+<svg width="2571" height="249" viewBox="0 0 2571 249" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="3840" height="250">
+<rect y="-1" width="3840" height="250" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M1980.33 213.994C1980.33 216.402 1978.38 218.354 1975.97 218.354H1843.1C1840.69 218.354 1838.74 216.401 1838.74 213.994V122.748C1838.74 120.34 1840.69 118.387 1843.1 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.748V213.994Z" fill="url(#paint0_radial)"/>
+<path d="M1956.12 53.1011V118.387H1941.7V53.1011C1941.7 43.6881 1934.04 36.0311 1924.63 36.0311H1894.45C1885.04 36.0311 1877.38 43.6891 1877.38 53.1011V80.6801L1873.59 84.4651L1877.38 88.2491V95.9041H1862.96V53.1011C1862.96 44.6901 1866.23 36.7811 1872.18 30.8331C1878.13 24.8851 1886.04 21.6091 1894.45 21.6091H1924.63C1933.04 21.6091 1940.95 24.8851 1946.9 30.8331C1952.84 36.7811 1956.12 44.6901 1956.12 53.1011Z" fill="url(#paint1_radial)"/>
+<path d="M1854.47 195.514C1855.79 195.514 1856.86 194.445 1856.86 193.127C1856.86 191.809 1855.79 190.74 1854.47 190.74C1853.15 190.74 1852.09 191.809 1852.09 193.127C1852.09 194.445 1853.15 195.514 1854.47 195.514Z" fill="#00FFAF"/>
+<path d="M1854.47 204.429C1855.79 204.429 1856.86 203.36 1856.86 202.042C1856.86 200.724 1855.79 199.655 1854.47 199.655C1853.15 199.655 1852.09 200.724 1852.09 202.042C1852.09 203.36 1853.15 204.429 1854.47 204.429Z" fill="#00FFAF"/>
+<path d="M1980.33 122.749V125.371C1980.33 122.963 1978.38 121.009 1975.97 121.009H1843.1C1840.69 121.009 1838.74 122.963 1838.74 125.371V122.749C1838.74 120.34 1840.69 118.387 1843.1 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.749Z" fill="url(#paint2_radial)"/>
+<path d="M1956.12 86.312H1941.7V118.387H1956.12V86.312Z" fill="url(#paint3_radial)"/>
+<rect x="1816" y="154" width="77" height="78" fill="url(#pattern0)"/>
+<rect x="1816" y="163" width="77" height="78" fill="url(#pattern1)"/>
+<path d="M1910.65 118.387H1908.42V215.733H1910.65V118.387Z" fill="url(#paint4_radial)"/>
+<path d="M1950.12 215.733H1947.89V166.405C1947.89 161.295 1952.04 157.137 1957.15 157.137H1980.33V159.366H1957.15C1953.27 159.366 1950.12 162.524 1950.12 166.405V215.733Z" fill="url(#paint5_radial)"/>
+<path d="M1980.33 205.687H1968.75C1963.64 205.687 1959.48 201.529 1959.48 196.42V177.301C1959.48 172.192 1963.64 168.034 1968.75 168.034H1980.33V170.264H1968.75C1964.86 170.264 1961.71 173.421 1961.71 177.301V196.42C1961.71 200.301 1964.86 203.457 1968.75 203.457H1980.33V205.687Z" fill="url(#paint6_radial)"/>
+<path d="M1980.33 144.197H1957.15C1952.04 144.197 1947.89 140.04 1947.89 134.929V118.387H1950.12V134.929C1950.12 138.811 1953.27 141.967 1957.15 141.967H1980.33V144.197Z" fill="url(#paint7_radial)"/>
+<path d="M1936.74 215.733H1934.51V192.793C1934.51 188.912 1931.36 185.754 1927.48 185.754H1915.94V183.526H1927.48C1932.59 183.526 1936.75 187.683 1936.75 192.793V215.733H1936.74Z" fill="url(#paint8_radial)"/>
+<path d="M1883.89 154.26H1872.35C1867.25 154.26 1863.09 150.102 1863.09 144.993V118.388H1865.31V144.993C1865.31 148.875 1868.47 152.031 1872.35 152.031H1883.89V154.26H1883.89Z" fill="url(#paint9_radial)"/>
+<path d="M1868.34 215.733H1866.11V183.614C1866.11 179.734 1862.96 176.576 1859.07 176.576H1838.74V174.347H1859.07C1864.18 174.347 1868.34 178.504 1868.34 183.614V215.733V215.733Z" fill="url(#paint10_radial)"/>
+<path d="M1885.7 215.733H1883.47V179.288C1883.47 174.178 1887.63 170.022 1892.74 170.022H1901.65V172.25H1892.74C1888.86 172.25 1885.7 175.408 1885.7 179.289V215.733H1885.7Z" fill="url(#paint11_radial)"/>
+<path d="M1885.7 118.387H1883.47V143.162H1885.7V118.387Z" fill="url(#paint12_radial)"/>
+<path d="M1864.2 141.967H1838.74V144.196H1864.2V141.967Z" fill="url(#paint13_radial)"/>
+<path opacity="0.5" d="M1909.67 328.667C1994.02 328.667 2062.4 260.288 2062.4 175.938C2062.4 91.5881 1994.02 23.209 1909.67 23.209C1825.32 23.209 1756.94 91.5881 1756.94 175.938C1756.94 260.288 1825.32 328.667 1909.67 328.667Z" fill="url(#paint14_radial)"/>
+<path opacity="0.4" d="M1849.39 218.355H1843.1C1840.69 218.355 1838.74 216.401 1838.74 213.992V122.749C1838.74 120.34 1840.69 118.387 1843.1 118.387H1849.39C1846.99 118.387 1845.03 120.34 1845.03 122.749V213.992C1845.03 216.401 1846.98 218.355 1849.39 218.355Z" fill="url(#paint15_linear)"/>
+<path opacity="0.4" d="M1980.33 122.749V213.992C1980.33 216.401 1978.38 218.355 1975.97 218.355H1969.42C1971.83 218.355 1973.78 216.401 1973.78 213.992V122.749C1973.78 120.34 1971.83 118.387 1969.42 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.749Z" fill="url(#paint16_linear)"/>
+<path d="M1980.33 211.37V213.992C1980.33 216.401 1978.38 218.355 1975.97 218.355H1843.1C1840.69 218.355 1838.74 216.401 1838.74 213.992V211.37C1838.74 213.78 1840.69 215.733 1843.1 215.733H1975.97C1978.38 215.733 1980.33 213.78 1980.33 211.37Z" fill="url(#paint17_radial)"/>
+<path d="M1941.7 53.101C1941.7 43.688 1934.04 36.031 1924.62 36.031H1894.45C1885.03 36.031 1877.38 43.689 1877.38 53.101V49.642C1877.38 40.23 1885.03 32.572 1894.45 32.572H1924.62C1934.04 32.572 1941.7 40.23 1941.7 49.642V53.101Z" fill="url(#paint18_radial)"/>
+<path d="M1956.11 53.1011V56.5591C1956.11 48.1491 1952.84 40.2401 1946.89 34.2911C1940.94 28.3441 1933.03 25.0671 1924.62 25.0671H1894.44C1886.03 25.0671 1878.12 28.3431 1872.18 34.2911C1866.23 40.2391 1862.95 48.1481 1862.95 56.5591V53.1011C1862.95 44.6901 1866.23 36.7811 1872.18 30.8331C1878.12 24.8851 1886.03 21.6091 1894.44 21.6091H1924.62C1933.03 21.6091 1940.94 24.8851 1946.89 30.8331C1952.84 36.7811 1956.11 44.6901 1956.11 53.1011Z" fill="url(#paint19_radial)"/>
+<path opacity="0.4" d="M1982.98 378.306L1981.68 378.766L1836.66 -29.696L1837.96 -30.157L1982.98 378.306Z" fill="url(#paint20_radial)"/>
+<path opacity="0.4" d="M1707.56 252.155L1706.54 249.463L2112.08 96.4551L2113.1 99.1461L1707.56 252.155Z" fill="url(#paint21_radial)"/>
+<path d="M1909.82 112.621C1876.43 112.621 1849.36 139.689 1849.36 173.079C1849.36 206.471 1876.43 233.54 1909.82 233.54C1943.21 233.54 1970.28 206.471 1970.28 173.079C1970.28 139.689 1943.21 112.621 1909.82 112.621ZM1909.82 232.688C1876.9 232.688 1850.21 206 1850.21 173.079C1850.21 140.16 1876.9 113.471 1909.82 113.471C1942.74 113.471 1969.43 140.159 1969.43 173.079C1969.43 206 1942.74 232.688 1909.82 232.688Z" fill="url(#paint22_radial)"/>
+<path opacity="0.1" d="M1996.74 263.364C2004.14 263.364 2010.15 257.36 2010.15 249.953C2010.15 242.546 2004.14 236.542 1996.74 236.542C1989.33 236.542 1983.32 242.546 1983.32 249.953C1983.32 257.36 1989.33 263.364 1996.74 263.364Z" fill="#5BFFFF"/>
+<g opacity="0.1">
+<rect x="1718" width="177" height="178" fill="url(#pattern2)"/>
+</g>
+<g opacity="0.1">
+<rect x="1915" y="158" width="218" height="218" fill="url(#pattern3)"/>
+</g>
+<path opacity="0.2" d="M1818.81 148.837L1829.53 108.855L1869.51 98.1431L1898.78 127.411L1888.06 167.393L1848.08 178.105L1818.81 148.837Z" fill="#5BFFFF"/>
+<path opacity="0.2" d="M1890.91 199.089L1901.62 159.108L1941.61 148.395L1970.87 177.664L1960.16 217.646L1920.18 228.358L1890.91 199.089Z" fill="#5BFFFF"/>
+<path opacity="0.2" d="M1934.36 225.131L1942.33 195.379L1972.08 187.408L1993.86 209.188L1985.89 238.939L1956.14 246.911L1934.36 225.131Z" fill="#5BFFFF"/>
+<path opacity="0.2" d="M1828.32 131.704C1838.86 131.704 1847.41 123.16 1847.41 112.621C1847.41 102.082 1838.86 93.5381 1828.32 93.5381C1817.78 93.5381 1809.24 102.082 1809.24 112.621C1809.24 123.16 1817.78 131.704 1828.32 131.704Z" fill="#5BFFFF"/>
+<path opacity="0.2" d="M1802.2 98.6581C1807.4 98.6581 1811.6 94.4504 1811.6 89.2601C1811.6 84.0697 1807.4 79.8621 1802.2 79.8621C1797.01 79.8621 1792.81 84.0697 1792.81 89.2601C1792.81 94.4504 1797.01 98.6581 1802.2 98.6581Z" fill="#5BFFFF"/>
+<path opacity="0.2" d="M1726.2 35.1551C1731.39 35.1551 1735.59 30.9479 1735.59 25.7581C1735.59 20.5683 1731.39 16.3611 1726.2 16.3611C1721.01 16.3611 1716.8 20.5683 1716.8 25.7581C1716.8 30.9479 1721.01 35.1551 1726.2 35.1551Z" fill="#5BFFFF"/>
+<path opacity="0.3" d="M1909.82 39.2891C1835.93 39.2891 1776.03 99.1881 1776.03 173.079C1776.03 246.973 1835.93 306.872 1909.82 306.872C1983.71 306.872 2043.61 246.973 2043.61 173.079C2043.61 99.1881 1983.71 39.2891 1909.82 39.2891ZM1909.82 306.053C1836.38 306.053 1776.84 246.518 1776.84 173.078C1776.84 99.6411 1836.38 40.1061 1909.82 40.1061C1983.26 40.1061 2042.79 99.6411 2042.79 173.078C2042.79 246.519 1983.26 306.053 1909.82 306.053Z" fill="url(#paint23_radial)"/>
+<rect x="1842" y="107" width="135" height="128" fill="url(#pattern4)"/>
+<path d="M1927.64 143.163L1909.53 174.868L1891.43 143.163H1878.25L1909.53 198.528L1940.82 143.163H1927.64Z" fill="white"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0"/>
+</pattern>
+<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0"/>
+</pattern>
+<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1"/>
+</pattern>
+<pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image2"/>
+</pattern>
+<pattern id="pattern4" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image3"/>
+</pattern>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.08 171.254) scale(98.5972)">
+<stop stop-color="#00B6FF"/>
+<stop offset="0.0695" stop-color="#00A6EF"/>
+<stop offset="0.283" stop-color="#0079C2"/>
+<stop offset="0.4888" stop-color="#00569F"/>
+<stop offset="0.6819" stop-color="#003D86"/>
+<stop offset="0.8576" stop-color="#002E77"/>
+<stop offset="1" stop-color="#002972"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1913.3 290.081) scale(303.059 303.059)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1909.89 244.799) scale(132.779)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1951.59 51.4336) scale(160.486 160.486)">
+<stop stop-color="#002551"/>
+<stop offset="0.2276" stop-color="#00194B"/>
+<stop offset="0.6795" stop-color="#000743"/>
+<stop offset="1" stop-color="#000040"/>
+</radialGradient>
+<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.185 117.196)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.193 117.193)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.195 117.195)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.19 117.19)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.197 117.197)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.191)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.195)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.197 117.196)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.14 169.034) scale(117.215 117.215)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint13_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.038) scale(117.2 117.201)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.1647" stop-color="#00CEE9"/>
+<stop offset="0.4721" stop-color="#0077C3"/>
+<stop offset="0.7234" stop-color="#0037A6"/>
+<stop offset="0.9055" stop-color="#000F95"/>
+<stop offset="1" stop-color="#00008E"/>
+</radialGradient>
+<radialGradient id="paint14_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1909.67 175.938) scale(152.729)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0258" stop-color="#00F9FF" stop-opacity="0.9742"/>
+<stop offset="0.1593" stop-color="#00DFFF" stop-opacity="0.8407"/>
+<stop offset="0.3065" stop-color="#00CAFF" stop-opacity="0.6935"/>
+<stop offset="0.4724" stop-color="#00BCFF" stop-opacity="0.5276"/>
+<stop offset="0.6724" stop-color="#00B4FF" stop-opacity="0.3276"/>
+<stop offset="1" stop-color="#00B1FF" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint15_linear" x1="1844.06" y1="288.025" x2="1844.06" y2="115.88" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00ACFF"/>
+<stop offset="0.1331" stop-color="#008BDA"/>
+<stop offset="0.3503" stop-color="#005AA5"/>
+<stop offset="0.5531" stop-color="#00337B"/>
+<stop offset="0.7353" stop-color="#00175C"/>
+<stop offset="0.8904" stop-color="#00064A"/>
+<stop offset="1" stop-color="#000043"/>
+</linearGradient>
+<linearGradient id="paint16_linear" x1="1974.87" y1="288.025" x2="1974.87" y2="115.88" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00ACFF"/>
+<stop offset="0.1331" stop-color="#008BDA"/>
+<stop offset="0.3503" stop-color="#005AA5"/>
+<stop offset="0.5531" stop-color="#00337B"/>
+<stop offset="0.7353" stop-color="#00175C"/>
+<stop offset="0.8904" stop-color="#00064A"/>
+<stop offset="1" stop-color="#000043"/>
+</linearGradient>
+<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1906.92 220.136) scale(361.715)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint18_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.64 102.811) scale(113.891 113.891)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint19_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1912 163.444) scale(129.055 129.055)">
+<stop stop-color="#00FFFF"/>
+<stop offset="0.0472" stop-color="#00EEF3"/>
+<stop offset="0.2471" stop-color="#00ADC2"/>
+<stop offset="0.4375" stop-color="#00779A"/>
+<stop offset="0.6131" stop-color="#004D7A"/>
+<stop offset="0.7708" stop-color="#002E64"/>
+<stop offset="0.9051" stop-color="#001C56"/>
+<stop offset="1" stop-color="#001551"/>
+</radialGradient>
+<radialGradient id="paint20_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1903.85 158.281) scale(204.297)">
+<stop stop-color="white"/>
+<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint21_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.12 170.215) scale(213.176)">
+<stop stop-color="white"/>
+<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint22_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2016.99 299.678) scale(350.849)">
+<stop stop-color="white"/>
+<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint23_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2146.98 453.229) scale(776.406)">
+<stop stop-color="white"/>
+<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+</radialGradient>
+<image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+<image id="image1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAACyCAYAAAANvS5rAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+<image id="image2" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAADaCAYAAADAHVzbAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+<image id="image3" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACACAYAAAAh4nqyAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+</defs>
+</svg>
diff --git a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue b/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue
index d29bd1a022..109d95662f 100644
--- a/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue
+++ b/src/.vuepress/theme/components/sponsors/VueMasteryBanner.vue
@@ -1,15 +1,14 @@
 <template>
-  <div id="vm-banner" class="vuemastery-banner hide" role="banner">
-    <div class="vuemastery-planet"></div>
-    <a class="vuemastery-banner--link" href="https://www.vuemastery.com/black-friday-2020" target="_blank">
+<div id="vm-banner" class="vuemastery-banner hide" role="banner">
+  <a href="https://www.vuemastery.com/free-weekend" target="_blank">
+    <div class="vuemastery-banner--wrapper">
       <img class="vuemastery-banner--logo" src="/images/vuemastery/logo-vuemastery.svg" alt="vuemastery" />
-      <div class="vuemastery-banner--wrapper">
-        <p><span>Vue Mastery's Black Friday Sale:</span>Save 50% off a year of Vue courses</p>
-        <button class="vuemastery-button">Get discount</button>
-      </div>
-    </a>
-    <div @click.prevent="$emit('close-banner')" class="vuemastery-banner--close"></div>
-  </div>
+      <p><span>Watch all Vue Mastery courses</span>Free all weekend on April 23-25</p>
+      <button class="vuemastery-button">Reserve your spot</button>
+    </div>
+    <div id="vm-close" class="vuemastery-banner--close" @click.prevent="$emit('close-banner')"></div>
+  </a>
+</div>
 </template>
 
 <script>
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index e7890e088c..4d177963db 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -5,6 +5,11 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
+    <VueMasteryBanner
+      v-if="isBannerOpen"
+      @close-banner="closeBanner"
+      ref="vueMasteryBanner"
+    />
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -48,6 +53,7 @@ import Home from '@theme/components/Home.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
+import VueMasteryBanner from '@theme/components/sponsors/VueMasteryBanner.vue'
 import BuySellAds from '@theme/components/BuySellAds.vue'
 import CarbonAds from '@theme/components/CarbonAds.vue'
 import { resolveSidebarItems } from '../util'
@@ -60,13 +66,18 @@ export default {
     Page,
     Sidebar,
     Navbar,
+    VueMasteryBanner,
     BuySellAds,
     CarbonAds
   },
 
   data() {
     return {
-      isSidebarOpen: false
+      isSidebarOpen: false,
+      isBannerOpen: true,
+      isMenuFixed: false,
+      nameStorage: 'vuemastery-free-weekend-2021-banner',
+      menuPosition: 0
     }
   },
 
@@ -110,7 +121,9 @@ export default {
         {
           'no-navbar': !this.shouldShowNavbar,
           'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
+          'no-sidebar': !this.shouldShowSidebar,
+          'vuemastery-menu-fixed': this.isMenuFixed,
+          'vuemastery-promo': this.isBannerOpen
         },
         userPageClass
       ]
@@ -125,6 +138,13 @@ export default {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
+
+    // Load component according to user preferences
+    if (!localStorage.getItem(this.nameStorage)) {
+      this.initBanner()
+    } else {
+      this.isBannerOpen = false
+    }
   },
 
   methods: {
@@ -151,6 +171,54 @@ export default {
           this.toggleSidebar(false)
         }
       }
+    },
+
+    //  Vue Mastery Banner
+    initBanner() {
+      // Add event listeners
+      this.toggleBannerEvents(true)
+      // Add class to the body to push fixed elements
+      this.isBannerOpen = true
+      // Get the menu position
+      this.getMenuPosition()
+      // Check current page offset position
+      this.isMenuFixed = this.isUnderBanner()
+    },
+
+    closeBanner(e) {
+      // Remove events
+      this.toggleBannerEvents(false)
+      // Hide the banner
+      this.isBannerOpen = false
+      // Save action in the local storage
+      localStorage.setItem(this.nameStorage, true)
+    },
+
+    getMenuPosition() {
+      this.menuPosition = this.$refs.vueMasteryBanner.$el.clientHeight
+    },
+
+    isUnderBanner() {
+      return window.pageYOffset > this.menuPosition
+    },
+
+    fixMenuAfterBanner() {
+      if (this.isUnderBanner()) {
+        if (!this.isMenuFixed) {
+          // The menu will be fixed
+          this.isMenuFixed = true
+        }
+      } else if (this.isMenuFixed) {
+        // The menu stay under the banner
+        this.isMenuFixed = false
+      }
+    },
+
+    toggleBannerEvents(on) {
+      // Add or remove event listerners attached to the DOM
+      let method = on ? 'addEventListener' : 'removeEventListener'
+      window[method]('resize', this.getMenuPosition)
+      window[method]('scroll', this.fixMenuAfterBanner)
     }
   }
 }
diff --git a/src/.vuepress/theme/styles/index.styl b/src/.vuepress/theme/styles/index.styl
index a35b13f7c0..2d31089d2f 100644
--- a/src/.vuepress/theme/styles/index.styl
+++ b/src/.vuepress/theme/styles/index.styl
@@ -4,6 +4,7 @@
 @require './arrow'
 @require './wrapper'
 @require './toc'
+@require './vuemastery-banner'
 
 html, body
   padding 0
diff --git a/src/.vuepress/theme/styles/vuemastery-banner.styl b/src/.vuepress/theme/styles/vuemastery-banner.styl
index af1a66a4b2..b8d05e5344 100644
--- a/src/.vuepress/theme/styles/vuemastery-banner.styl
+++ b/src/.vuepress/theme/styles/vuemastery-banner.styl
@@ -1,166 +1,113 @@
-// Screen sizes
-tiny    = 330px
-small   = 465px
-phone   = 700px
-tablet  = 900px
-desktop = 1000px
-
-// Media queries mixins
-mqMax(val)
-  @media all and (max-width: val)
-    {block}
-mqMin(val)
-  @media all and (min-width: val + 1px)
-    {block}
-
-// Animations easing
-animIn  = all cubic-bezier(0.34, 0.06, 0.01, 1) 2s
-animOut = all cubic-bezier(0.34, 0.06, 0.01, 1) 1s
-
 .vuemastery-banner
-  background #071532
+  background: url(/images/vuemastery/background-vuemastery.svg) center center no-repeat
+  background-size 100% auto
   overflow hidden
   position relative
-  transition animIn
-  cursor pointer
-  z-index 11
+  transition all .3s ease-out .1s
 
-  &:after,
   &:before
     content ''
+    background: url(/images/vuemastery/background-bubbles-vuemastery.svg) left center no-repeat
+    background-size cover
     position absolute
-    pointer-events none
-    transition animOut
-    bottom 0
-    
-  &:after
-    width 100%
-    position absolute
-    transition animIn
-    background-image url(/images/vuemastery/background.png)
-    background-position center
-    background-size: 100% auto;
     top 0
+    bottom 0
+    left 0
+    right 0
+    transition all .3s ease-out .1s
+    transform: scale(1.1)
 
-  &:before
-    height 100%
-    width 100%
+  &:after
+    content: ''
+    background: url(/images/vuemastery/lock-vuemastery.svg) right center no-repeat
+    background-size: auto 100%
+    position: absolute
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+    pointer-events: none
 
   &:hover
-    +mqMin(desktop)
-      &:before,
-      &:after
-        transition animIn
-
-      &:before
-        transform translateX(50%)
-
-      &:after
-        transform scale(1.2)
+    background-size 150% auto
 
+    &:before
+      transform: scale(1)
 
-      .vuemastery-planet
-        transform rotate(-35deg) scale(10) translateX(40%)
-        &:after
-          transform translateX(-93px) scale(1.3)
-          opacity 0
-    
-      .vuemastery-banner--close
-        &:before,
-        &:after
-          transform-origin 100%
-
-        &:hover
-          &:before,
-          &:after
-            transition transform .2s ease-in .5s, transform-origin .2s ease-in
-            transform-origin 50%
-
-      .vuemastery-button:after
-        left: 120%;
-        transition: left 1.5s cubic-bezier(.19,1,.22,1);
-
-.vuemastery-banner--link
-  display flex
-  height 80px
-  justify-content center
-  overflow hidden
-  position relative
-  z-index 2
-
-  +mqMax(phone)
-    justify-content start
-    height 65px
+    &:after
+      background-image url(/images/vuemastery/unlock-vuemastery.svg)
 
+  a
+    display flex
+    height 80px
+    justify-content center
+  
 .vuemastery-banner--wrapper
   display flex
   height 100%
   align-items center
+  width: 100%
+  justify-content: center
   position relative
-  color #fff
-  z-index 3
-  transition animIn
 
+  &:before
+    content ''
+    pointer-events none
+    position absolute
+    top 0
+    bottom 0
+    left 0
+    width 0
+    transition width .3s ease-out
+
+  &:hover
+    + .vuemastery-banner--close
+      &:before,
+      &:after
+        transform-origin 100%
+  
   p
     margin -3px 50px 0 20px
-    font-size 1.17rem
-    font-weight 600
-    white-space nowrap
+    font-size 1rem
+    line-height 1.4rem
+    color #fff
     position relative
+    transition-delay .15s
 
   span
-    font-size 1rem
+    font-size 1.17rem
+    font-weight 600
     display block
-
-  +mqMax(phone)
-    flex-direction: column;
-    width: calc(100% - 172px);
-
-    p, span
-      margin: .5rem 0 0rem 0;
-      font-size .8rem
-      color #fff
-
-  +mqMax(phone)
-    span
-      display none
-
-  +mqMax(tiny)
-    p
-      font-size 0.6rem
-      margin -3px 28px 0 0px
+    color #BEFF74
+    background -webkit-linear-gradient(#41E281, #BEFF74)
+    -webkit-background-clip text
+    -webkit-text-fill-color transparent
 
 .vuemastery-banner--logo
   height 102%
-  margin-top -1px
-  margin-left -90px
+  margin-top: -1px
+  margin-left -200px
   position relative
   z-index 2
-  transition animIn
-
-  +mqMax(phone)
-    margin-left: -40px;
-    transform: rotateY(190deg);
-    height: 105%;
   
 .vuemastery-banner--close
-  height 100%
-  width 75px
   position absolute
-  top 0
-  right 0
-  z-index 2
+  top 20px
+  right 25px
+  height 40px
+  width 40px
   -webkit-tap-highlight-color transparent
+  border-radius 50%
   cursor pointer
 
   &:before,
   &:after
     content ''
+    position absolute
+    top 19px
+    left 14px
     width 25px
     height 2px
-    position absolute
-    top 39px
-    right 25px
     background-color #fff
     transform-origin 50%
     transform rotate(-45deg)
@@ -169,83 +116,6 @@ animOut = all cubic-bezier(0.34, 0.06, 0.01, 1) 1s
   &:after
     transform rotate(45deg)
 
-  &:hover
-    &:before,
-    &:after
-      transform rotate(180deg)
-
-  +mqMax(phone)
-    &:before,
-    &:after
-      width 15px
-      top 19px
-      right 14px
-
-.vuemastery-promo
-  .navbar
-    position relative
-
-  .sidebar
-    position absolute
-    top 7.60625rem
-
-  &.vuemastery-menu-fixed
-    .sidebar,
-    .navbar
-      position fixed
-
-    .sidebar
-      top 3.6rem
-
-    +mqMax(tablet)
-      .vuemastery-banner
-        margin-bottom 40px
-
-.vuemastery-planet
-  position absolute
-  z-index 2
-  width 100%
-  height 100%
-  transform-origin bottom right
-  transition animIn
-
-  +mqMax(phone)
-    transform translateX(70px)
-
-  &:after,
-  &:before
-    content ''
-    position absolute
-    pointer-events none
-    bottom 0
-    width 100%
-    top 0
-    right 0
-    background-image url(/images/vuemastery/black-hole.png)
-    background-attachment fixed
-    background-size: auto 200px;
-    background-position: top -52px right -24px;
-    background-repeat: no-repeat;
-
-  &:before
-    +mqMax(phone)
-      background-size: auto 200px;
-      background-position: top -81px right -82px;
-
-  &:after
-    background-image: url(/images/vuemastery/planets.png);
-    transition: all cubic-bezier(0.34, 0.06, 0.01, 1) 3s;
-    background-position: left -80px top -80px;
-    background-size: auto 180px;
-
-    +mqMax(phone)
-      display none
-
-@media print
-  .vuemastery-banner
-    display none
-
-
 .vuemastery-button
   display: inline-flex;
   background: linear-gradient(to top right,#3d2c61,#835ec2);
@@ -278,3 +148,128 @@ animOut = all cubic-bezier(0.34, 0.06, 0.01, 1) 1s
     top: -50px;
     transform: rotate(35deg);
     width: 100px;
+
+.vuemastery-weekend-promo
+  #mobile-bar,
+  #mobile-bar.top
+    position relative
+    background-color #fff
+  
+  &.docs:not(.vuemastery-menu-fixed)
+    padding-top 0
+    #header
+      position relative
+      width auto
+    #nav
+      position absolute
+
+  &.vuemastery-menu-fixed
+    #mobile-bar
+      position fixed
+
+@media screen and (min-width: 901px)
+  .vuemastery-weekend-promo
+    &.docs:not(.vuemastery-menu-fixed)
+      #main.fix-sidebar .sidebar
+        position absolute
+        top 141px
+      
+      #sidebar-sponsors-platinum-right
+        position absolute
+        top: 170px;
+    
+    &.vuemastery-menu-fixed.docs
+      .vuemastery-banner
+        margin-bottom 0
+
+@media screen and (max-width: 1200px)
+  .vuemastery-banner
+    &,
+    &:hover
+      background-size cover
+
+    &:before
+      transform: scale(1)
+
+    &:hover:before
+      transform: scale(1)
+
+@media screen and (max-width: 1100px)
+    .vuemastery-button
+      display none
+
+@media screen and (max-width: 900px)
+  .vuemastery-weekend-promo
+    &.vuemastery-menu-fixed
+      .vuemastery-banner
+        margin-bottom 40px
+
+
+@media screen and (max-width: 700px)
+  .vuemastery-banner
+    &:after
+      background-position right -2rem center
+    a
+      height 40px
+      overflow hidden
+
+    .vuemastery-banner--logo
+      margin-left 0
+      justify-content flex-start
+
+    p, span
+      font-size .8rem
+      color #fff
+      line-height .9rem
+
+    .vuemastery-banner--close
+      top 0px
+      right 0px
+
+      &:before,
+      &:after
+        top 19px
+        left 14px
+        width 15px
+        height 2px
+
+@media screen and (max-width: 465px)
+  .vuemastery-banner
+    &:after
+      display: none
+    p
+      margin-right 40px
+      margin-left 5px
+
+    &:after
+      background-position right -3rem center
+@media screen and (max-width 330px)
+  .vuemastery-banner p
+    font-size 0.6rem
+    margin-right 20px
+    margin-left 0
+
+@media print
+  .vuemastery-banner
+    display none
+
+
+.vuemastery-promo
+  .navbar
+    position relative
+
+  .sidebar
+    position absolute
+    top 7.60625rem
+
+  &.vuemastery-menu-fixed
+    .sidebar,
+    .navbar
+      position fixed
+
+    .sidebar
+      top 3.6rem
+
+    +mqMax(tablet)
+      .vuemastery-banner
+        margin-bottom 40px
\ No newline at end of file

From 7fc416750f994ec7699d9dcea717cab96833988f Mon Sep 17 00:00:00 2001
From: Pierre Schweiger <schweiger.pierre@gmail.com>
Date: Sat, 10 Apr 2021 08:30:03 +0700
Subject: [PATCH 2/2] Fix slight flash of the banner

---
 src/.vuepress/theme/layouts/Layout.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 4d177963db..5862e61c55 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -74,7 +74,7 @@ export default {
   data() {
     return {
       isSidebarOpen: false,
-      isBannerOpen: true,
+      isBannerOpen: false,
       isMenuFixed: false,
       nameStorage: 'vuemastery-free-weekend-2021-banner',
       menuPosition: 0
@@ -134,16 +134,18 @@ export default {
     }
   },
 
+  beforeMount() {
+    this.isBannerOpen = !localStorage.getItem(this.nameStorage)
+  },
+
   mounted() {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
 
     // Load component according to user preferences
-    if (!localStorage.getItem(this.nameStorage)) {
+    if (this.isBannerOpen) {
       this.initBanner()
-    } else {
-      this.isBannerOpen = false
     }
   },
 
@@ -177,8 +179,6 @@ export default {
     initBanner() {
       // Add event listeners
       this.toggleBannerEvents(true)
-      // Add class to the body to push fixed elements
-      this.isBannerOpen = true
       // Get the menu position
       this.getMenuPosition()
       // Check current page offset position