From: Israel <israelugbodaga@gmail.com>
Date: Sat, 25 Mar 2023 01:41:10 +0000 (+0000)
Subject: add vuemastery pinia weekend promotion banner (#2075)
X-Git-Tag: @pinia/nuxt@0.4.8~16
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0d29ed3f4f8da157e11d9391687739d562f014ee;p=thirdparty%2Fvuejs%2Fpinia.git

add vuemastery pinia weekend promotion banner (#2075)
---

diff --git a/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue
new file mode 100644
index 00000000..b2dfdbdd
--- /dev/null
+++ b/packages/docs/.vitepress/theme/components/VueMasteryBanner.vue
@@ -0,0 +1,286 @@
+<template>
+  <div
+    :class="vueMasteryClass"
+    class="vuemastery-banner-wrapper"
+    ref="$vueMasteryBanner"
+    role="banner"
+    v-if="isVisible"
+  >
+    <a
+      id="vm-pinia-weekend"
+      href="https://www.vuemastery.com/pinia"
+      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-pinia-weekend-wrapper">
+        <div class="vm-pinia-weekend-content">
+          <h1 class="vm-pinia-weekend-title">
+            PINIA WEEKEND <span>MARCH 24-26</span>
+          </h1>
+          <p class="vm-pinia-weekend-sub">
+            Watch all 4 premium courses for free
+          </p>
+        </div>
+        <button id="vm-banner-cta">Secure your spot</button>
+      </div>
+      <button id="vm-banner-close" @click.prevent="closeBanner">X</button>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick } from 'vue'
+
+const isVisible = ref<Boolean>(true)
+const isMenuFixed = ref<Boolean>(false)
+const $vueMasteryBanner = ref<HTMLElement | null>(null)
+
+const nameStorage = 'VUEMASTERY-BANNER--PINIA-WEEKEND-MARCH-2023'
+
+const getMenuPosition = () => {
+  return $vueMasteryBanner.value?.clientHeight || 0
+}
+
+const isUnderBanner = () => {
+  return window.pageYOffset > getMenuPosition()
+}
+
+const fixMenuAfterBanner = () => {
+  if (isUnderBanner()) {
+    if (!isMenuFixed.value) {
+      // The menu will be fixed
+      isMenuFixed.value = true
+    }
+  } else if (isMenuFixed.value) {
+    // The menu stay under the banner
+    isMenuFixed.value = false
+  }
+}
+
+const toggleBannerEvents = (on: Boolean) => {
+  // Add or remove event listerners attached to the DOM
+  let method: 'addEventListener' | 'removeEventListener' = on
+    ? 'addEventListener'
+    : 'removeEventListener'
+  window[method]('resize', getMenuPosition)
+  window[method]('scroll', fixMenuAfterBanner)
+}
+
+const closeBanner = () => {
+  console.log('closeBanner => ')
+  // Remove events
+  toggleBannerEvents(false)
+  // Hide the banner
+  isVisible.value = false
+  // Save action in the local storage
+  localStorage.setItem(nameStorage, String(true))
+}
+
+const initBanner = () => {
+  // Add event listeners
+  toggleBannerEvents(true)
+  // Get the menu position
+  getMenuPosition()
+  // Check current page offset position
+  isMenuFixed.value = isUnderBanner()
+}
+
+const vueMasteryClass = computed(() => {
+  return {
+    'vuemastery-menu-fixed': !isMenuFixed.value,
+  }
+})
+
+onMounted(() => {
+  isVisible.value = !localStorage.getItem(nameStorage)
+  if (isVisible.value) {
+    nextTick(initBanner)
+  }
+})
+</script>
+<style scoped>
+.vuemastery-banner-wrapper {
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 60;
+  width: 100%;
+  height: 100%;
+  max-height: 70px;
+  background: url(/vuemastery/background-vuemastery.svg) left center no-repeat;
+  overflow: hidden;
+  padding: 12px;
+  margin: 0;
+  background-size: cover;
+}
+.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 {
+  background-size: 150% auto;
+}
+.vuemastery-banner-wrapper:hover:before {
+  transform: scale(1);
+}
+.vuemastery-banner-wrapper:hover:after {
+  background-image: url(/vuemastery/unlock-vuemastery.svg);
+}
+
+#vm-pinia-weekend {
+  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-close {
+  position: absolute;
+  right: 12px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#vm-banner-close:hover {
+  color: #9d9c9c;
+}
+
+.vm-pinia-weekend-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.vm-pinia-weekend-title {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  background: linear-gradient(145deg, #c3ffac, #86ec87, #38a56a);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.vm-pinia-weekend-sub {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+}
+
+#vm-banner-cta {
+  position: relative;
+  margin-left: 10px;
+  padding: 12px;
+  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;
+  box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
+}
+#vm-banner-cta:hover {
+  background: linear-gradient(to bottom right, #41b782, #86d169);
+}
+
+@media (max-width: 850px) {
+  .vuemastery-banner-wrapper:after {
+    background: none;
+  }
+}
+
+@media (max-width: 767px) {
+  #vm-logo-full {
+    left: 10px;
+    width: 100px;
+  }
+  #vm-banner-cta {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  #vm-logo-full {
+    display: none;
+  }
+  #vm-logo-small {
+    position: absolute;
+    display: block;
+    left: 10px;
+    width: 40px;
+  }
+  .vm-pinia-weekend-title {
+    font-size: 14px;
+  }
+  .vm-pinia-weekend-sub {
+    font-size: 12px;
+  }
+}
+</style>
+
+<style>
+.Layout:has(.vuemastery-menu-fixed) > .VPNav {
+  position: relative;
+}
+
+.Layout:has(.vuemastery-menu-fixed) > .VPSidebar {
+  margin-top: 4em;
+}
+</style>
\ No newline at end of file
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index 089a8019..47667b62 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -2,19 +2,21 @@ import { h, watchEffect } from 'vue'
 import { Theme, useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 // import AsideSponsors from './components/AsideSponsors.vue'
-// import HomeSponsors from './components/HomeSponsors.vue'
+// import AsideSponsors from './components/AsideSponsors.vue'
+import VueMasteryBanner from './components/VueMasteryBanner.vue'
 import './styles/vars.css'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 import VueMasteryLogoLink from './components/VueMasteryLogoLink.vue'
 
 const theme: Theme = {
   ...DefaultTheme,
-  // Layout() {
-  //   return h(DefaultTheme.Layout, null, {
-  //     'home-features-after': () => h(HomeSponsors),
-  //     'aside-ads-before': () => h(AsideSponsors),
-  //   })
-  // },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      // 'home-features-after': () => h(HomeSponsors),
+      // 'aside-ads-before': () => h(AsideSponsors),
+      'layout-top': () => h(VueMasteryBanner),
+    })
+  },
 
   enhanceApp({ app }) {
     app.component('VueSchoolLink', VueSchoolLink)
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 00000000..8f5ec7e8
--- /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/background-vuemastery.svg b/packages/docs/public/vuemastery/background-vuemastery.svg
new file mode 100644
index 00000000..fdb8488e
--- /dev/null
+++ b/packages/docs/public/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/packages/docs/public/vuemastery/lock-vuemastery.svg b/packages/docs/public/vuemastery/lock-vuemastery.svg
new file mode 100644
index 00000000..c9583a1a
--- /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/logo-vuemastery.svg b/packages/docs/public/vuemastery/logo-vuemastery.svg
new file mode 100644
index 00000000..b4ce163d
--- /dev/null
+++ b/packages/docs/public/vuemastery/logo-vuemastery.svg
@@ -0,0 +1,22 @@
+<svg width="356" height="182" viewBox="0 0 356 182" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M110.099 0L356 0L245.739 182H0L110.099 0Z" fill="white"/>
+<path d="M121.5 132.2L132.5 113.2L143.5 132.2H161L132.5 82.9L104 132.2H121.5Z" fill="#36495E"/>
+<path d="M132.5 82.9V113.2L143.5 132.2H161L132.5 82.9Z" fill="url(#paint0_linear)"/>
+<path d="M200.5 132.2L189.5 113.2L178.5 132.2H161L189.5 82.9L218 132.2H200.5Z" fill="#36495E"/>
+<path d="M189.5 82.9V113.2L178.5 132.2H161L189.5 82.9Z" fill="url(#paint1_linear)"/>
+<path d="M189.5 50L161 99.3L132.5 50L85 132.2H104L132.5 82.9L161 132.2L189.5 82.9L218 132.2H237L189.5 50Z" fill="url(#paint2_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="146.762" y1="132.244" x2="146.762" y2="82.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="175.267" y1="132.244" x2="175.267" y2="82.8712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36495E"/>
+<stop offset="1" stop-color="#0A1C33"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="161.014" y1="132.244" x2="161.014" y2="49.9561" gradientUnits="userSpaceOnUse">
+<stop offset="0.2" stop-color="#41B782"/>
+<stop offset="1" stop-color="#86D169"/>
+</linearGradient>
+</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 00000000..917b2bd2
--- /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 00000000..8b3b9171
--- /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>