From 74ba633c666b71ea26e590693db21bcec501b222 Mon Sep 17 00:00:00 2001
From: Israel <israelugbodaga@gmail.com>
Date: Sun, 24 Dec 2023 10:05:49 +0000
Subject: [PATCH] docs: Add vuemastery banner (#2535)

* feat: add vuemastery banner

* Update packages/docs/.vitepress/theme/components/VueMasteryBanner.vue

---------

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
---
 .../theme/components/VueMasteryBanner.vue     | 291 ++++++++++++++++++
 packages/docs/.vitepress/theme/index.ts       |   2 +
 .../background-bubbles-vuemastery.svg         | 109 +++++++
 .../public/vuemastery/lock-vuemastery.svg     | 230 ++++++++++++++
 .../public/vuemastery/unlock-vuemastery.svg   | 283 +++++++++++++++++
 .../public/vuemastery/vuemastery-white.svg    |  31 ++
 6 files changed, 946 insertions(+)
 create mode 100644 packages/docs/.vitepress/theme/components/VueMasteryBanner.vue
 create mode 100644 packages/docs/public/vuemastery/background-bubbles-vuemastery.svg
 create mode 100644 packages/docs/public/vuemastery/lock-vuemastery.svg
 create mode 100644 packages/docs/public/vuemastery/unlock-vuemastery.svg
 create mode 100644 packages/docs/public/vuemastery/vuemastery-white.svg

diff --git a/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue
new file mode 100644
index 0000000000..e05c5d9c3b
--- /dev/null
+++ b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="vuemastery-banner-wrapper" role="banner" v-if="isVisible">
+    <div
+      :class="{ 'show-flash': showFlash }"
+      class="vuemastery-background-dim"
+      ref="vuemastery-banner-flash"
+    ></div>
+    <a id="vm-banner" href="https://www.vuemastery.com/holiday" target="_blank">
+      <img
+        id="vm-logo-full"
+        src="/vuemastery/vuemastery-white.svg"
+        alt="vuemastery"
+      />
+      <img
+        id="vm-logo-small"
+        src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108"
+        alt="vuemastery"
+      />
+      <div class="vm-banner-wrapper">
+        <div class="vm-banner-content">
+          <h1 class="vm-banner-title">Learn Vue with Evan You</h1>
+          <p class="vm-banner-sub">Get 60% off a year of Vue courses</p>
+        </div>
+        <button id="vm-banner-cta">Unlock your discount</button>
+      </div>
+      <button id="vm-banner-close" @click.prevent="closeBanner">
+        <span class="close">&times;</span>
+      </button>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const isVisible = ref(false)
+const showFlash = ref(false)
+const nameStorage = 'VUEMASTERY-BANNER-DECEMBER-2023'
+
+const closeBanner = () => {
+  // Hide the banner
+  isVisible.value = false
+  // Save action in the local storage
+  localStorage.setItem(nameStorage, String(true))
+  document.documentElement.classList.remove('vuemastery-menu-fixed')
+}
+
+onMounted(() => {
+  isVisible.value = !localStorage.getItem(nameStorage)
+  if (isVisible.value) {
+    document.documentElement.classList.add('vuemastery-menu-fixed')
+    setTimeout(() => {
+      showFlash.value = true
+    }, 2000)
+  }
+})
+</script>
+<style scoped>
+.vuemastery-banner-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 61;
+  width: 100%;
+  height: 100%;
+  max-height: 70px;
+  background: linear-gradient(45deg, #0a2b4e, #835ec2);
+  background-size: 110%;
+  background-position: 50% 50%;
+  overflow: hidden;
+  padding: 12px;
+  margin: 0;
+  transition: background-size 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+.vuemastery-banner-wrapper:hover {
+  background-size: 100%;
+}
+
+.vuemastery-banner-wrapper:before {
+  content: '';
+  background: url(/vuemastery/background-bubbles-vuemastery.svg) left center
+    no-repeat;
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease-out 0.1s;
+  transform: scale(1.1);
+  width: 100%;
+  height: 100%;
+}
+.vuemastery-banner-wrapper:after {
+  content: '';
+  background: url(/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;
+}
+
+.vuemastery-banner-wrapper:hover:after {
+  background-image: url(/vuemastery/unlock-vuemastery.svg);
+}
+
+#vm-banner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+#vm-logo-full {
+  position: absolute;
+  left: 15px;
+  width: 120px;
+}
+
+#vm-logo-small {
+  display: none;
+}
+
+.vm-banner-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.vm-banner-content {
+  display: flex;
+}
+
+.vm-banner-title {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  font-size: 24px;
+  text-align: center;
+  background: linear-gradient(145deg, #c3ffac, #86ec87, #38a56a);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.vm-banner-sub {
+  margin: 0 2em;
+  padding: 0;
+  font-size: 16px;
+  text-align: center;
+  color: #fff;
+}
+
+#vm-banner-cta {
+  position: relative;
+  margin-left: 10px;
+  padding: 10px 24px;
+  background: linear-gradient(to top right, #41b782, #86d169);
+  border: none;
+  border-radius: 30px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+#vm-banner-cta:hover {
+  background: linear-gradient(to bottom right, #41b782, #86d169);
+}
+
+#vm-banner-close {
+  position: absolute;
+  right: 12px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#vm-banner-close > .close {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+@media (max-width: 1200px) {
+  #vm-banner-cta {
+    display: none;
+  }
+
+  .vm-banner-content {
+    flex-direction: column;
+  }
+
+  .vm-banner-sub {
+    margin: 0 1em;
+  }
+}
+
+@media (max-width: 850px) {
+  .vuemastery-banner-wrapper:after {
+    background: none;
+  }
+}
+@media (max-width: 767px) {
+  #vm-logo-full {
+    left: 10px;
+    width: 100px;
+  }
+}
+@media (max-width: 767px) {
+  #vm-logo-full {
+    display: none;
+  }
+  #vm-logo-small {
+    position: absolute;
+    display: block;
+    left: 10px;
+    width: 40px;
+  }
+  .vm-banner-title {
+    font-size: 14px;
+  }
+  .vm-banner-sub {
+    font-size: 12px;
+    margin: 0;
+  }
+}
+
+.vuemastery-background-dim {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.vuemastery-background-dim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  transition: 0.5s;
+  transition-delay: 0.5s;
+}
+.vuemastery-background-dim.show-flash:after {
+  left: 100%;
+}
+</style>
+
+<style>
+html.vuemastery-menu-fixed {
+  --vt-banner-height: 70px;
+}
+html.vuemastery-menu-fixed .VPNav,
+html.vuemastery-menu-fixed .VPSidebar {
+  top: 70px;
+}
+html.vuemastery-menu-fixed {
+  scroll-padding-top: 134px;
+  overflow: auto;
+}
+html.vuemastery-menu-fixed {
+  margin-top: 72px;
+}
+@media (max-width: 960px) {
+  html.vuemastery-menu-fixed .VPNav,
+  html.vuemastery-menu-fixed .VPSidebar {
+    top: 0;
+  }
+}
+</style>
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index 0055a4deb0..7076e68374 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -7,6 +7,7 @@ import './styles/vars.css'
 import './styles/playground-links.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
+import VueMasteryBanner from './components/VueMasteryBanner.vue'
 
 const theme: Theme = {
   ...DefaultTheme,
@@ -14,6 +15,7 @@ const theme: Theme = {
     return h(DefaultTheme.Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),
       'aside-ads-before': () => h(AsideSponsors),
+      'layout-top': () => h(VueMasteryBanner),
     })
   },
 
diff --git a/packages/docs/public/vuemastery/background-bubbles-vuemastery.svg b/packages/docs/public/vuemastery/background-bubbles-vuemastery.svg
new file mode 100644
index 0000000000..8f5ec7e888
--- /dev/null
+++ b/packages/docs/public/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/packages/docs/public/vuemastery/lock-vuemastery.svg b/packages/docs/public/vuemastery/lock-vuemastery.svg
new file mode 100644
index 0000000000..c9583a1a0b
--- /dev/null
+++ b/packages/docs/public/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/packages/docs/public/vuemastery/unlock-vuemastery.svg b/packages/docs/public/vuemastery/unlock-vuemastery.svg
new file mode 100644
index 0000000000..917b2bd2ae
--- /dev/null
+++ b/packages/docs/public/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/packages/docs/public/vuemastery/vuemastery-white.svg b/packages/docs/public/vuemastery/vuemastery-white.svg
new file mode 100644
index 0000000000..8b3b9171b1
--- /dev/null
+++ b/packages/docs/public/vuemastery/vuemastery-white.svg
@@ -0,0 +1,31 @@
+<svg width="481" height="83" viewBox="0 0 481 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.5 82.2L47.5 63.2L58.5 82.2H76L47.5 32.9L19 82.2H36.5Z" fill="#36495E"/>
+<path d="M47.5 32.9V63.2L58.5 82.2H76L47.5 32.9Z" fill="url(#paint0_linear)"/>
+<path d="M115.5 82.2L104.5 63.2L93.5 82.2H76L104.5 32.9L133 82.2H115.5Z" fill="#36495E"/>
+<path d="M104.5 32.9V63.2L93.5 82.2H76L104.5 32.9Z" fill="url(#paint1_linear)"/>
+<path d="M104.5 0L76 49.3L47.5 0L0 82.2H19L47.5 32.9L76 82.2L104.5 32.9L133 82.2H152L104.5 0Z" fill="url(#paint2_linear)"/>
+<path d="M178.9 34.7H189.7L178 70.3H166.7L155.1 34.7H165.9L170.7 52.7C171.7 56.7 172.3 59.5 172.4 61.1C172.5 60 172.7 58.5 173.1 56.8C173.4 55.1 173.7 53.8 174 52.8L178.9 34.7Z" fill="white"/>
+<path d="M212.6 70.3L211.4 66.9H210.8C210 68.2 208.9 69.1 207.5 69.8C206.1 70.5 204.4 70.8 202.5 70.8C199.5 70.8 197.1 69.9 195.4 68.2C193.7 66.4 192.9 64 192.9 60.7V42.7H202.4V57.8C202.4 59.6 202.7 61 203.2 61.9C203.7 62.8 204.5 63.3 205.7 63.3C207.3 63.3 208.5 62.7 209.2 61.4C209.9 60.1 210.2 57.9 210.2 54.9V42.7H219.7V70.3H212.6Z" fill="white"/>
+<path d="M239.6 70.8C235 70.8 231.4 69.6 228.9 67.1C226.4 64.7 225.1 61.2 225.1 56.7C225.1 52 226.3 48.5 228.6 46C231 43.5 234.3 42.3 238.7 42.3C242.9 42.3 246.1 43.4 248.3 45.5C250.6 47.7 251.7 50.8 251.7 54.9V59.1H234.7C234.8 60.6 235.3 61.8 236.4 62.7C237.5 63.6 238.9 64 240.7 64C242.4 64 243.9 63.8 245.3 63.5C246.7 63.2 248.2 62.6 249.9 61.9V68.7C248.4 69.5 246.9 70 245.3 70.3C243.7 70.6 241.8 70.8 239.6 70.8ZM239.1 48.7C238 48.7 237 49.1 236.3 49.8C235.5 50.5 235.1 51.6 235 53.1H243.2C243.2 51.8 242.8 50.7 242.1 49.9C241.4 49.1 240.3 48.7 239.1 48.7Z" fill="white"/>
+<path d="M286.1 70.3L278.8 44.7H278.6C278.9 49.1 279.1 52.5 279.1 54.9V70.3H270.6V34.7H283.4L290.8 59.9H291L298.3 34.7H311.1V70.3H302.3V54.7C302.3 53.9 302.3 53 302.3 52C302.3 51 302.4 48.6 302.6 44.7H302.4L295.2 70.3H286.1Z" fill="white"/>
+<path d="M336.2 70.3L334.4 66.7H334.2C332.9 68.3 331.6 69.4 330.3 70C329 70.6 327.3 70.9 325.1 70.9C322.5 70.9 320.5 70.1 319 68.6C317.5 67 316.8 64.9 316.8 62C316.8 59.1 317.8 56.9 319.9 55.4C321.9 54 324.9 53.2 328.8 53L333.4 52.9V52.5C333.4 50.2 332.3 49.1 330 49.1C328 49.1 325.4 49.8 322.3 51.1L319.6 44.8C322.8 43.1 326.9 42.3 331.8 42.3C335.3 42.3 338.1 43.2 340 44.9C341.9 46.7 342.9 49.1 342.9 52.2V70.3H336.2V70.3ZM329.1 64C330.3 64 331.2 63.6 332.1 62.9C333 62.2 333.3 61.2 333.3 60.1V58L331.1 58.1C328 58.2 326.4 59.4 326.4 61.6C326.4 63.2 327.3 64 329.1 64Z" fill="white"/>
+<path d="M370.5 61.8C370.5 64.8 369.5 67 367.5 68.5C365.5 70 362.6 70.8 358.8 70.8C356.8 70.8 355 70.7 353.5 70.5C352 70.3 350.5 69.9 348.9 69.3V61.7C350.4 62.3 352 62.9 353.8 63.3C355.6 63.7 357.1 63.9 358.5 63.9C360.6 63.9 361.6 63.4 361.6 62.5C361.6 62 361.3 61.6 360.7 61.2C360.1 60.8 358.5 60.1 355.7 59C353.2 58 351.4 56.8 350.4 55.5C349.4 54.2 348.9 52.5 348.9 50.5C348.9 47.9 349.9 45.9 351.9 44.5C353.9 43.1 356.7 42.4 360.3 42.4C362.1 42.4 363.8 42.6 365.4 43C367 43.4 368.7 44 370.4 44.7L367.8 50.8C366.5 50.2 365.2 49.8 363.8 49.4C362.4 49 361.2 48.8 360.3 48.8C358.7 48.8 358 49.2 358 49.9C358 50.4 358.3 50.8 358.8 51.1C359.3 51.4 360.9 52.1 363.5 53.1C365.4 53.9 366.9 54.7 367.8 55.4C368.7 56.1 369.4 57.1 369.9 58.1C370.4 59.1 370.5 60.3 370.5 61.8Z" fill="white"/>
+<path d="M389.3 63.2C390.6 63.2 392.1 62.9 393.9 62.3V69.2C392.6 69.8 391.4 70.1 390.2 70.4C389 70.6 387.7 70.8 386.1 70.8C382.9 70.8 380.6 70 379.2 68.5C377.8 66.9 377.1 64.5 377.1 61.3V49.8H373.8V45.9L378 42.9L380.5 37.1H386.7V42.6H393.5V49.7H386.7V60.4C386.7 62.4 387.6 63.2 389.3 63.2Z" fill="white"/>
+<path d="M412 70.8C407.4 70.8 403.8 69.6 401.3 67.1C398.8 64.7 397.5 61.2 397.5 56.7C397.5 52 398.7 48.5 401 46C403.4 43.5 406.7 42.3 411.1 42.3C415.3 42.3 418.5 43.4 420.7 45.5C423 47.7 424.1 50.8 424.1 54.9V59.1H407.1C407.2 60.6 407.7 61.8 408.8 62.7C409.9 63.6 411.3 64 413.1 64C414.8 64 416.3 63.8 417.7 63.5C419.1 63.2 420.6 62.6 422.3 61.9V68.7C420.8 69.5 419.3 70 417.7 70.3C416.1 70.6 414.2 70.8 412 70.8ZM411.5 48.7C410.4 48.7 409.4 49.1 408.7 49.8C407.9 50.5 407.5 51.6 407.4 53.1H415.6C415.6 51.8 415.2 50.7 414.5 49.9C413.8 49.1 412.7 48.7 411.5 48.7Z" fill="white"/>
+<path d="M446.2 42.2C447 42.2 447.8 42.3 448.6 42.4L449.1 42.5L448.2 51.5C447.4 51.3 446.3 51.2 445 51.2C442.9 51.2 441.4 51.7 440.5 52.6C439.6 53.5 439.1 54.9 439.1 56.7V70.2H429.6V42.7H436.7L438.2 47.1H438.7C439.5 45.6 440.6 44.5 442 43.6C443.3 42.7 444.7 42.2 446.2 42.2Z" fill="white"/>
+<path d="M449.6 42.7H459.6L464.3 58.5C464.5 59.3 464.7 60.3 464.8 61.5H465C465.1 60.4 465.3 59.4 465.6 58.6L470.4 42.7H480.1L469.2 72C467.8 75.7 466.1 78.4 464.1 79.9C462.1 81.4 459.4 82.2 456.1 82.2C454.8 82.2 453.5 82.1 452.2 81.8V74.3C453.1 74.5 454 74.6 455.1 74.6C455.9 74.6 456.7 74.4 457.3 74.1C457.9 73.8 458.5 73.3 459 72.7C459.5 72.1 460 71.1 460.5 69.8L449.6 42.7Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="61.7617" y1="82.2439" x2="61.7617" y2="32.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="90.2671" y1="82.2439" x2="90.2671" y2="32.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="76.0144" y1="82.2439" x2="76.0144" y2="-0.0439023" gradientUnits="userSpaceOnUse">
+<stop offset="0.2" stop-color="#41B782"/>
+<stop offset="1" stop-color="#86D169"/>
+</linearGradient>
+</defs>
+</svg>