diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 3b90124a..733ba37b 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -49,7 +49,7 @@ const nav: ThemeConfig['nav'] = [
           { text: 'UI Components', link: 'https://ui-libs.vercel.app/' },
           {
             text: 'گواهی‌نامه',
-            link: 'https://certification.vuejs.org/?ref=vuejs-nav'
+            link: 'https://certificates.dev/vuejs/?ref=vuejs-nav'
           },
           { text: 'مشاغل', link: 'https://vuejobs.com/?ref=vuejs' },
           { text: 'فروشگاه تیشرت', link: 'https://vue.threadless.com/' }
@@ -630,6 +630,14 @@ export default defineConfigWithTheme<ThemeConfig>({
         'utf-8'
       )
     ],
+    [
+      'script',
+      {},
+      fs.readFileSync(
+        path.resolve(__dirname, './inlined-scripts/uwu.js'),
+        'utf-8'
+      )
+    ],
     [
       'script',
       {
diff --git a/.vitepress/inlined-scripts/uwu.js b/.vitepress/inlined-scripts/uwu.js
new file mode 100644
index 00000000..5b25107e
--- /dev/null
+++ b/.vitepress/inlined-scripts/uwu.js
@@ -0,0 +1,3 @@
+if (location.search.includes('?uwu')) {
+  document.documentElement.classList.add('uwu')
+}
diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue
index c88c4cd5..8d3097eb 100644
--- a/.vitepress/theme/components/Home.vue
+++ b/.vitepress/theme/components/Home.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import SiteMap from './SiteMap.vue'
 // import NewsLetter from './NewsLetter.vue'
 import { load, data, base } from './sponsors'
 import SponsorsGroup from './SponsorsGroup.vue'
 import VueMasteryModal from './VueMasteryModal.vue'
 
-onMounted(async () => {
-  await load()
-})
+onMounted(load)
 </script>
 
 <template>
   <section id="hero">
+    <img id="uwu" alt="Vue.js Kawaii Logo by @icarusgkx" />
     <h1 class="tagline">
       فریمورک
       <span class="accent">پیش‌رونده</span>
@@ -311,4 +310,23 @@ html:not(.dark) .accent,
     font-size: 36px;
   }
 }
+
+#uwu {
+  display: none;
+}
+
+.uwu #uwu {
+  display: block;
+  width: 100%;
+  max-width: 720px;
+  margin: -120px auto -20px;
+  aspect-ratio: 192 / 108;
+  content: url(/logo-uwu.png);
+}
+
+@media (max-width: 576px) {
+  .uwu #uwu {
+    margin: -60px auto -10px;
+  }
+}
 </style>
diff --git a/.vitepress/theme/components/VueMasteryBanner.vue b/.vitepress/theme/components/VueMasteryBanner.vue
new file mode 100644
index 00000000..5e6bad9f
--- /dev/null
+++ b/.vitepress/theme/components/VueMasteryBanner.vue
@@ -0,0 +1,283 @@
+<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/free-weekend"
+      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">
+            FREE WEEKEND <span>MAY 10-12</span>
+          </h1>
+          <p class="vm-banner-sub">Watch all Vue Mastery courses free</p>
+        </div>
+        <button id="vm-banner-cta">Get Access</button>
+      </div>
+      <button id="vm-banner-close" @click.prevent="closeBanner">
+        <VTIconPlus class="close" />
+      </button>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { VTIconPlus } from '@vue/theme'
+
+const isVisible = ref<Boolean>(true)
+const showFlash = ref<Boolean>(false)
+const nameStorage = 'VUEMASTERY-BANNER-FREE_WEEKEND-MAY-10-12-2024'
+
+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 {
+  width: 20px;
+  height: 20px;
+  fill: #fff;
+  transform: rotate(45deg);
+}
+
+@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;
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 7084831a..f50c8bc9 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -11,12 +11,13 @@ import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
 // import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
+import VueMasteryBanner from './components/VueMasteryBanner.vue'
 
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore
     return h(VPTheme.Layout, null, {
-      // banner: () => h(Banner),
+      banner: () => h(VueMasteryBanner),
       'sidebar-top': () => h(PreferenceSwitch),
       'aside-mid': () => h(SponsorsAside)
     })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c87c4384..74de8e59 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ dependencies:
     version: 4.1.2
   '@vue/theme':
     specifier: ^2.2.5
-    version: 2.2.5(vitepress@1.1.3)(vue@3.4.25)
+    version: 2.2.5(vitepress@1.1.4)(vue@3.4.26)
   dynamics.js:
     specifier: ^1.1.5
     version: 1.1.5
@@ -22,10 +22,10 @@ dependencies:
     version: 3.9.0
   vitepress:
     specifier: ^1.1.0
-    version: 1.1.3(@types/node@20.10.1)(terser@5.14.2)
+    version: 1.1.4(@types/node@20.10.1)(terser@5.14.2)
   vue:
     specifier: ^3.4.0
-    version: 3.4.25
+    version: 3.4.26
 
 devDependencies:
   '@types/markdown-it':
@@ -683,64 +683,64 @@ packages:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: false
 
-  /@vitejs/plugin-vue@5.0.0-beta.1(vite@5.2.9)(vue@3.4.25):
+  /@vitejs/plugin-vue@5.0.0-beta.1(vite@5.2.10)(vue@3.4.26):
     resolution: {integrity: sha512-zFAHH6RJH2w/LQlFyqrml96yjYmT8n8e3O4esRxHzCn250uOlkuc0IAqFJWqdxLmQquEM4q5/ECnQJRGsKjoIw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.9(@types/node@20.10.1)(terser@5.14.2)
-      vue: 3.4.25
+      vite: 5.2.10(@types/node@20.10.1)(terser@5.14.2)
+      vue: 3.4.26
     dev: false
 
-  /@vue/compiler-core@3.4.25:
-    resolution: {integrity: sha512-Y2pLLopaElgWnMNolgG8w3C5nNUVev80L7hdQ5iIKPtMJvhVpG0zhnBG/g3UajJmZdvW0fktyZTotEHD1Srhbg==}
+  /@vue/compiler-core@3.4.26:
+    resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
     dependencies:
       '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.25
+      '@vue/shared': 3.4.26
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
     dev: false
 
-  /@vue/compiler-dom@3.4.25:
-    resolution: {integrity: sha512-Ugz5DusW57+HjllAugLci19NsDK+VyjGvmbB2TXaTcSlQxwL++2PETHx/+Qv6qFwNLzSt7HKepPe4DcTE3pBWg==}
+  /@vue/compiler-dom@3.4.26:
+    resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
     dependencies:
-      '@vue/compiler-core': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-core': 3.4.26
+      '@vue/shared': 3.4.26
     dev: false
 
-  /@vue/compiler-sfc@3.4.25:
-    resolution: {integrity: sha512-m7rryuqzIoQpOBZ18wKyq05IwL6qEpZxFZfRxlNYuIPDqywrXQxgUwLXIvoU72gs6cRdY6wHD0WVZIFE4OEaAQ==}
+  /@vue/compiler-sfc@3.4.26:
+    resolution: {integrity: sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==}
     dependencies:
       '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.25
-      '@vue/compiler-dom': 3.4.25
-      '@vue/compiler-ssr': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-core': 3.4.26
+      '@vue/compiler-dom': 3.4.26
+      '@vue/compiler-ssr': 3.4.26
+      '@vue/shared': 3.4.26
       estree-walker: 2.0.2
       magic-string: 0.30.10
       postcss: 8.4.38
       source-map-js: 1.2.0
     dev: false
 
-  /@vue/compiler-ssr@3.4.25:
-    resolution: {integrity: sha512-H2ohvM/Pf6LelGxDBnfbbXFPyM4NE3hrw0e/EpwuSiYu8c819wx+SVGdJ65p/sFrYDd6OnSDxN1MB2mN07hRSQ==}
+  /@vue/compiler-ssr@3.4.26:
+    resolution: {integrity: sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==}
     dependencies:
-      '@vue/compiler-dom': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/compiler-dom': 3.4.26
+      '@vue/shared': 3.4.26
     dev: false
 
-  /@vue/devtools-api@7.0.27(vue@3.4.25):
+  /@vue/devtools-api@7.0.27(vue@3.4.26):
     resolution: {integrity: sha512-BFCFCusSDcw2UcOFD/QeK7OxD1x2C/m+uAN30Q7jLKECSW53hmz0urzJmX834GuWDZX/hIxkyUKnLLfEIP1c/w==}
     dependencies:
-      '@vue/devtools-kit': 7.0.27(vue@3.4.25)
+      '@vue/devtools-kit': 7.0.27(vue@3.4.26)
     transitivePeerDependencies:
       - vue
     dev: false
 
-  /@vue/devtools-kit@7.0.27(vue@3.4.25):
+  /@vue/devtools-kit@7.0.27(vue@3.4.26):
     resolution: {integrity: sha512-/A5xM38pPCFX5Yhl/lRFAzjyK6VNsH670nww2WbjFKWqlu3I+lMxWKzQkCW6A1V8bduITgl2kHORfg2gTw6QaA==}
     peerDependencies:
       vue: ^3.0.0
@@ -750,7 +750,7 @@ packages:
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      vue: 3.4.25
+      vue: 3.4.26
     dev: false
 
   /@vue/devtools-shared@7.0.27:
@@ -759,56 +759,56 @@ packages:
       rfdc: 1.3.1
     dev: false
 
-  /@vue/reactivity@3.4.25:
-    resolution: {integrity: sha512-mKbEtKr1iTxZkAG3vm3BtKHAOhuI4zzsVcN0epDldU/THsrvfXRKzq+lZnjczZGnTdh3ojd86/WrP+u9M51pWQ==}
+  /@vue/reactivity@3.4.26:
+    resolution: {integrity: sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==}
     dependencies:
-      '@vue/shared': 3.4.25
+      '@vue/shared': 3.4.26
     dev: false
 
   /@vue/repl@4.1.2:
     resolution: {integrity: sha512-h5JQ5NRN9HOCNfE4QCbZsFgAFS7/A21V3zrltxV2Uag1JIvtQb68qfmj795CPFjMBnRNpCddOBi34AKlq5yHbg==}
     dev: false
 
-  /@vue/runtime-core@3.4.25:
-    resolution: {integrity: sha512-3qhsTqbEh8BMH3pXf009epCI5E7bKu28fJLi9O6W+ZGt/6xgSfMuGPqa5HRbUxLoehTNp5uWvzCr60KuiRIL0Q==}
+  /@vue/runtime-core@3.4.26:
+    resolution: {integrity: sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==}
     dependencies:
-      '@vue/reactivity': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/reactivity': 3.4.26
+      '@vue/shared': 3.4.26
     dev: false
 
-  /@vue/runtime-dom@3.4.25:
-    resolution: {integrity: sha512-ode0sj77kuwXwSc+2Yhk8JMHZh1sZp9F/51wdBiz3KGaWltbKtdihlJFhQG4H6AY+A06zzeMLkq6qu8uDSsaoA==}
+  /@vue/runtime-dom@3.4.26:
+    resolution: {integrity: sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==}
     dependencies:
-      '@vue/runtime-core': 3.4.25
-      '@vue/shared': 3.4.25
+      '@vue/runtime-core': 3.4.26
+      '@vue/shared': 3.4.26
       csstype: 3.1.3
     dev: false
 
-  /@vue/server-renderer@3.4.25(vue@3.4.25):
-    resolution: {integrity: sha512-8VTwq0Zcu3K4dWV0jOwIVINESE/gha3ifYCOKEhxOj6MEl5K5y8J8clQncTcDhKF+9U765nRw4UdUEXvrGhyVQ==}
+  /@vue/server-renderer@3.4.26(vue@3.4.26):
+    resolution: {integrity: sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==}
     peerDependencies:
-      vue: 3.4.25
+      vue: 3.4.26
     dependencies:
-      '@vue/compiler-ssr': 3.4.25
-      '@vue/shared': 3.4.25
-      vue: 3.4.25
+      '@vue/compiler-ssr': 3.4.26
+      '@vue/shared': 3.4.26
+      vue: 3.4.26
     dev: false
 
-  /@vue/shared@3.4.25:
-    resolution: {integrity: sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA==}
+  /@vue/shared@3.4.26:
+    resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
     dev: false
 
-  /@vue/theme@2.2.5(vitepress@1.1.3)(vue@3.4.25):
+  /@vue/theme@2.2.5(vitepress@1.1.4)(vue@3.4.26):
     resolution: {integrity: sha512-UUPD0XxlRa69Ytely8JEU/cu8Pae5f4UqZNIXANPN8KT6j/O23dCbOfp1cKlSn+Q/xXLYp0K+vRh4IqZjt/9BQ==}
     peerDependencies:
       vitepress: ^1.0.0-alpha.60
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2
-      '@vueuse/core': 9.13.0(vue@3.4.25)
+      '@vueuse/core': 9.13.0(vue@3.4.26)
       body-scroll-lock: 3.1.5
       normalize.css: 8.0.1
-      vitepress: 1.1.3(@types/node@20.10.1)(terser@5.14.2)
+      vitepress: 1.1.4(@types/node@20.10.1)(terser@5.14.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -819,31 +819,31 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/core@10.9.0(vue@3.4.25):
+  /@vueuse/core@10.9.0(vue@3.4.26):
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.25)
-      vue-demi: 0.14.7(vue@3.4.25)
+      '@vueuse/shared': 10.9.0(vue@3.4.26)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/core@9.13.0(vue@3.4.25):
+  /@vueuse/core@9.13.0(vue@3.4.26):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.4.25)
-      vue-demi: 0.14.6(vue@3.4.25)
+      '@vueuse/shared': 9.13.0(vue@3.4.26)
+      vue-demi: 0.14.6(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.25):
+  /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.26):
     resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
     peerDependencies:
       async-validator: '*'
@@ -884,10 +884,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.25)
-      '@vueuse/shared': 10.9.0(vue@3.4.25)
+      '@vueuse/core': 10.9.0(vue@3.4.26)
+      '@vueuse/shared': 10.9.0(vue@3.4.26)
       focus-trap: 7.5.4
-      vue-demi: 0.14.7(vue@3.4.25)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -901,19 +901,19 @@ packages:
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
     dev: false
 
-  /@vueuse/shared@10.9.0(vue@3.4.25):
+  /@vueuse/shared@10.9.0(vue@3.4.26):
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.25)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@9.13.0(vue@3.4.25):
+  /@vueuse/shared@9.13.0(vue@3.4.26):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.25)
+      vue-demi: 0.14.7(vue@3.4.26)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1147,8 +1147,8 @@ packages:
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
-  /vite@5.2.9(@types/node@20.10.1)(terser@5.14.2):
-    resolution: {integrity: sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==}
+  /vite@5.2.10(@types/node@20.10.1)(terser@5.14.2):
+    resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -1184,8 +1184,8 @@ packages:
       fsevents: 2.3.3
     dev: false
 
-  /vitepress@1.1.3(@types/node@20.10.1)(terser@5.14.2):
-    resolution: {integrity: sha512-hGrIYN0w9IHWs0NQSnlMjKV/v/HLfD+Ywv5QdvCSkiT32mpNOOwUrZjnqZv/JL/WBPpUc94eghTUvmipxw0xrA==}
+  /vitepress@1.1.4(@types/node@20.10.1)(terser@5.14.2):
+    resolution: {integrity: sha512-bWIzFZXpPB6NIDBuWnS20aMADH+FcFKDfQNYFvbOWij03PR29eImTceQHIzCKordjXYBhM/TjE5VKFTUJ3EheA==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4
@@ -1201,16 +1201,16 @@ packages:
       '@shikijs/core': 1.3.0
       '@shikijs/transformers': 1.3.0
       '@types/markdown-it': 14.0.1
-      '@vitejs/plugin-vue': 5.0.0-beta.1(vite@5.2.9)(vue@3.4.25)
-      '@vue/devtools-api': 7.0.27(vue@3.4.25)
-      '@vueuse/core': 10.9.0(vue@3.4.25)
-      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.25)
+      '@vitejs/plugin-vue': 5.0.0-beta.1(vite@5.2.10)(vue@3.4.26)
+      '@vue/devtools-api': 7.0.27(vue@3.4.26)
+      '@vueuse/core': 10.9.0(vue@3.4.26)
+      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.26)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
       shiki: 1.3.0
-      vite: 5.2.9(@types/node@20.10.1)(terser@5.14.2)
-      vue: 3.4.25
+      vite: 5.2.10(@types/node@20.10.1)(terser@5.14.2)
+      vue: 3.4.26
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -1239,7 +1239,7 @@ packages:
       - universal-cookie
     dev: false
 
-  /vue-demi@0.14.6(vue@3.4.25):
+  /vue-demi@0.14.6(vue@3.4.26):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
     hasBin: true
@@ -1251,10 +1251,10 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.25
+      vue: 3.4.26
     dev: false
 
-  /vue-demi@0.14.7(vue@3.4.25):
+  /vue-demi@0.14.7(vue@3.4.26):
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
@@ -1266,20 +1266,20 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.25
+      vue: 3.4.26
     dev: false
 
-  /vue@3.4.25:
-    resolution: {integrity: sha512-HWyDqoBHMgav/OKiYA2ZQg+kjfMgLt/T0vg4cbIF7JbXAjDexRf5JRg+PWAfrAkSmTd2I8aPSXtooBFWHB98cg==}
+  /vue@3.4.26:
+    resolution: {integrity: sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.4.25
-      '@vue/compiler-sfc': 3.4.25
-      '@vue/runtime-dom': 3.4.25
-      '@vue/server-renderer': 3.4.25(vue@3.4.25)
-      '@vue/shared': 3.4.25
+      '@vue/compiler-dom': 3.4.26
+      '@vue/compiler-sfc': 3.4.26
+      '@vue/runtime-dom': 3.4.26
+      '@vue/server-renderer': 3.4.26(vue@3.4.26)
+      '@vue/shared': 3.4.26
     dev: false
diff --git a/src/about/privacy.md b/src/about/privacy.md
index 3720aebf..a442542f 100644
--- a/src/about/privacy.md
+++ b/src/about/privacy.md
@@ -1,10 +1,10 @@
-# Vue.js Privacy Policy
+# Vue.js Privacy Policy {#vue.js-privacy-policy}
 
-> Effective Date: April 26, 2024
+> Effective Date: May 3, 2024
 
 This Privacy Policy describes the Vue.js organization ("Vue", "we", "us" or "our") practices for handling your information in connection with this website (https://vuejs.org) and our open source-related websites ("Websites") and any content, related documentation, information and services (e.g. tutorials, tools to support the developer workflow, access to resources, etc.) made available to you on this website (collectively, the "Services"). This Privacy Policy describes the personal information we process to support our Services.
 
-For clarity, this Privacy Policy only applies to the Websites and does not apply to any:
+For clarity, this Privacy Policy does not apply to any:
 
 1. Use of open source code, documentation or specifications made available on GitHub (https://github.com/), which are governed by the terms of the applicable open source license;
 
@@ -12,11 +12,13 @@ For clarity, this Privacy Policy only applies to the Websites and does not apply
 
 3. Usage statistics of our published packages on NPM (https://npmjs.com/), which are governed by NPM's terms and conditions; or
 
-4. Usage statistics of our published browser extensions, which are collected by the browser vendors and governed by their respective terms and conditions.
+4. Usage statistics of our published browser / IDE extensions collected by the browser / IDE vendors. Such statistics are governed by the vendors' respective terms and conditions.
 
-## What Kinds of Information Do We Collect?
+## What Kinds of Information Do We Collect? {#what-kinds-of-information-do-we-collect}
 
-We do not collect or store any type of personal data, but may collect anonymized data via 3rd party services integrated in our websites:
+We do **not** collect or store any type of personal data, whether through our websites or through our published npm packages or browser / IDE extensions.
+
+We may collect anonymized data via 3rd party services integrated in our websites:
 
 - **Visitor data to our websites.** Our website analytics is powered by [Fathom Analytics](https://usefathom.com/), which doesn't use cookies and complies with the GDPR, ePrivacy (including PECR), COPPA and CCPA. Using this privacy-friendly website analytics software, your IP address is only briefly processed, and we (running this website) have no way of identifying you. As per the CCPA, your personal information is de-identified. You can read more about this on Fathom Analytics' website.
 
@@ -27,14 +29,14 @@ We do not collect or store any type of personal data, but may collect anonymized
   - Algolia's privacy policy: https://www.algolia.com/policies/privacy/
   - Algolia's security and privacy compliance: https://www.algolia.com/distributed-secure/security-compliance/
 
-## How Do We Use Information?
+## How Do We Use Information? {#how-do-we-use-information}
 
 The sole purpose of collecting the aforementioned data is to understand our website traffic and usage in the most privacy-friendly way possible so that we can continually improve our website and documentation quality. The lawful basis as per the GDPR is "Article 6(1)(f); where our legitimate interests are to improve our website and business continually." As per the explanation, no personal data is stored over time.
 
-## Data Retention
+## Data Retention {#data-retention}
 
 All data collected are stored on aforementioned 3rd party services and are subject to the services' respective data retention policies.
 
-## Questions
+## Questions {#questions}
 
 If you have any questions about this Privacy Policy or our practices, please contact us via email at hello@vuejs.org.
diff --git a/src/api/component-instance.md b/src/api/component-instance.md
index d3caa305..f48f3fe6 100644
--- a/src/api/component-instance.md
+++ b/src/api/component-instance.md
@@ -212,10 +212,10 @@
 
 - **جزئیات**
 
-  اولین آرگومان منبع watch است که می‌تواند یک string نام متعلق به یک پراپرتی از یک کامپوننت، یک dot-delimited path string، یک string ساده و یا یک تابع getter باشد.
+  اولین آرگومان منبع watch است که می‌تواند یک string نام متعلق به یک پراپرتی از یک کامپوننت، یک dot-delimited path string، یک string ساده و یا یک [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) باشد.
 
   دومین آرگومان یک تابع callback است. این تابع مقدار جدید و قدیم متعلق به منبع watch را دریافت می‌کند.
-  
+
   - **`immediate`**: تابع callback را بلافاصله در موقع ساخت watcher فراخوانی می‌کند. در فراخوانی اول مقدار قدیمی `undefined` خواهد بود.
   - **`deep`**: اگر منبع یک آبجکت باشد پیمایش عمیق (deep traversal) را روی آن تحمیل می‌کند و تابع callback هنگام تغییرات عمیق (deep mutations) روی آبجکت فراخوانی می‌شود. همچنین [Deep Watchers](/guide/essentials/watchers#deep-watchers) را مطالعه کنید.
   - **`flush`**: زمانبندی flush مربوط به تابع  callback را تنظیم می‌کند. همچنین [Callback Flush Timing](/guide/essentials/watchers#callback-flush-timing) و [`()watchEffect`](/api/reactivity-core#watcheffect) را مطالعه کنید.
diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md
index 273e9f25..39df0fab 100644
--- a/src/api/reactivity-core.md
+++ b/src/api/reactivity-core.md
@@ -45,7 +45,7 @@
 
 ## computed()‎ {#computed}
 
-یک تابع getter می‌گیرد و به ازای مقدار بازگشت داده شده از getter یک آبجکت [ref](#ref) که readonly و reactive است را برمی‌گرداند. همچنین می‌تواند یک آبجکت با تابع‌های `get` و `set` برای ایجاد یک آبجکت ref که writable است را بگیرد.
+یک [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) می‌گیرد و به ازای مقدار بازگشت داده شده از getter یک آبجکت [ref](#ref) که readonly و reactive است را برمی‌گرداند. همچنین می‌تواند یک آبجکت با تابع‌های `get` و `set` برای ایجاد یک آبجکت ref که writable است را بگیرد.
 
 - **تایپ (Type)**
 
diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md
index 5bd15b1f..ca6ed5c5 100644
--- a/src/api/reactivity-utilities.md
+++ b/src/api/reactivity-utilities.md
@@ -236,7 +236,7 @@
 - **تایپ (Type)**
 
   ```ts
-  function isProxy(value: unknown): boolean
+  function isProxy(value: any): boolean
   ```
 
 ## isReactive() {#isreactive}
diff --git a/src/glossary/index.md b/src/glossary/index.md
index 6125b5f5..8e3a4d66 100644
--- a/src/glossary/index.md
+++ b/src/glossary/index.md
@@ -275,7 +275,7 @@ In a Vue context, reactivity is used to describe a collection of features. Those
 
 There are various different ways that a reactivity system could be implemented. For example, it could be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system.
 
-Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and getter/setter functions for properties.
+Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) functions for properties.
 
 For more details see:
 - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html)
diff --git a/src/guide/best-practices/accessibility.md b/src/guide/best-practices/accessibility.md
index c2ae131f..0f136988 100644
--- a/src/guide/best-practices/accessibility.md
+++ b/src/guide/best-practices/accessibility.md
@@ -154,8 +154,6 @@ watch(
 </form>
 ```
 
-<!-- <common-codepen-snippet title="Simple Form" slug="dyNzzWZ" :height="368" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 توجه کنید که می‌توانید `autocomplete='on'‎` را روی عنصر form قرار دهید و این ویژگی برای تمام inputهای فرم اعمال می‌شود. همچنین می‌توانید برای هر input [مقدار متفاوتی برای ویژگی autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) تعیین کنید.
 
 ### Labels {#labels}
@@ -167,8 +165,6 @@ watch(
 <input type="text" name="name" id="name" v-model="name" />
 ```
 
-<!-- <common-codepen-snippet title="Form Label" slug="XWpaaaj" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 اگر این عنصر را در DevTools کروم خود بررسی کنید و تب Accessibility را درون تب Elements باز کنید، خواهید دید که چگونه input نام خود را از لیبل دریافت می کند:
 
 ![Chrome Developer Tools showing input accessible name from label](./images/AccessibleLabelChromeDevTools.png)
@@ -201,8 +197,6 @@ watch(
 />
 ```
 
-<!-- <common-codepen-snippet title="Form ARIA label" slug="NWdvvYQ" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 این عنصر را در ابزارهای توسعه‌دهنده کروم بررسی کنید تا ببینید چگونه نام تغییر کرده است:
 
 ![Chrome Developer Tools showing input accessible name from aria-label](./images/AccessibleARIAlabelDevTools.png)
@@ -233,8 +227,6 @@ watch(
 </form>
 ```
 
-<!-- <common-codepen-snippet title="Form ARIA labelledby" slug="MWJvvBe" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 ![Chrome Developer Tools showing input accessible name from aria-labelledby](./images/AccessibleARIAlabelledbyDevTools.png)
 
 #### `aria-describedby` {#aria-describedby}
@@ -265,8 +257,6 @@ watch(
 </form>
 ```
 
-<!-- <common-codepen-snippet title="Form ARIA describedby" slug="gOgxxQE" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 شما می‌توانید description را با بررسی Chrome DevTools ببینید:
 
 ![Chrome Developer Tools showing input accessible name from aria-labelledby and description with aria-describedby](./images/AccessibleARIAdescribedby.png)
@@ -352,8 +342,6 @@ watch(
 </fieldset>
 ```
 
-<!-- <common-codepen-snippet title="Form Instructions" slug="WNREEqv" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 ### پنهان کردن محتوا {#hiding-content}
 
 معمولاً توصیه نمی‌شود label ها را پنهان کرد، حتی اگر input مقدار accessible name را داشته باشد. با این حال، اگر عملکرد ورودی با محتوای اطراف آن قابل درک باشد، می‌توانیم label را بطور بصری پنهان کنیم.
@@ -386,8 +374,6 @@ watch(
 }
 ```
 
-<!-- <common-codepen-snippet title="Form Search" slug="QWdMqWy" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 #### `aria-hidden="true"‎` {#aria-hidden-true}
 
 اضافه کردن `aria-hidden="true"‎` عنصر را از دید فناوری کمکی پنهان می‌کند اما آن را به صورت بصری برای سایر کاربران در دسترس نگه می‌دارد. از آن روی عناصر قابل focus استفاده نکنید، صرفاً روی محتوای تزئینی، تکراری یا خارج از صفحه استفاده کنید.
@@ -414,8 +400,6 @@ watch(
 </form>
 ```
 
-<!-- <common-codepen-snippet title="Form Buttons" slug="JjEyrYZ" :height="467" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 ### Functional Images {#functional-images}
 
 می‌توانید از این تکنیک برای ایجاد تصاویر عملکردی استفاده کنید.
@@ -450,8 +434,6 @@ watch(
 </form>
 ```
 
-<!-- <common-codepen-snippet title="Functional Images" slug="jOyLGqM" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
-
 ## استانداردها {#standards}
 
 کنسرسیوم جهانی وب (W3C) و کارگروه دسترس‌پذیری وب (WAI) استانداردهای دسترس‌پذیری وب را برای قسمت‌های مختلف توسعه می‌دهد:
diff --git a/src/guide/built-ins/keep-alive-demos/CompA.vue b/src/guide/built-ins/keep-alive-demos/CompA.vue
index e910c021..08c8fd3b 100644
--- a/src/guide/built-ins/keep-alive-demos/CompA.vue
+++ b/src/guide/built-ins/keep-alive-demos/CompA.vue
@@ -5,6 +5,6 @@ const count = ref(0)
 
 <template>
   <p> کامپوننت فعلی: A </p>
-  <span style="margin-right: 20px">count: {{ count }}</span>
+  <span style="margin-right: 20px">Count: {{ count }}</span>
   <button @click="count++">+</button>
 </template>
diff --git a/src/guide/components/attrs.md b/src/guide/components/attrs.md
index d5a2bf39..45d24fc3 100644
--- a/src/guide/components/attrs.md
+++ b/src/guide/components/attrs.md
@@ -14,7 +14,7 @@ outline: deep
 
 ```vue-html
 <!-- template of <MyButton> -->
-<button>click me</button>
+<button>Click Me</button>
 ```
 
 و یک والد که از این کامپوننت به شکل زیر استفاده می‌کند:
@@ -26,7 +26,7 @@ outline: deep
 DOM نهایی رندر شده به این صورت خواهد بود:
 
 ```html
-<button class="large">click me</button>
+<button class="large">Click Me</button>
 ```
 
 در اینجا، `<MyButton>`  ویژگی `class` را به عنوان یک prop پذیرفته شده اعلام نکرده است. بنابراین، `class` به عنوان یک ویژگی fallthrough در نظر گرفته شده و به طور خودکار به root element کامپوننت `<MyButton>` اضافه می‌شود.
@@ -37,13 +37,13 @@ DOM نهایی رندر شده به این صورت خواهد بود:
 
 ```vue-html
 <!-- template of <MyButton> -->
-<button class="btn">click me</button>
+<button class="btn">Click Me</button>
 ```
 
 سپس DOM نهایی رندر شده به این صورت خواهد بود:
 
 ```html
-<button class="btn large">click me</button>
+<button class="btn large">Click Me</button>
 ```
 
 ### ارث‌بری listenerهای `v-on` {#v-on-listener-inheritance}
@@ -112,7 +112,7 @@ defineOptions({
 
 ```vue-html
 <div class="btn-wrapper">
-  <button class="btn">click me</button>
+  <button class="btn">Click Me</button>
 </div>
 ```
 
@@ -120,7 +120,7 @@ defineOptions({
 
 ```vue-html{2}
 <div class="btn-wrapper">
-  <button class="btn" v-bind="$attrs">click me</button>
+  <button class="btn" v-bind="$attrs">Click Me</button>
 </div>
 ```
 
diff --git a/src/guide/components/events.md b/src/guide/components/events.md
index 5f40da90..cdab7ca8 100644
--- a/src/guide/components/events.md
+++ b/src/guide/components/events.md
@@ -32,7 +32,7 @@ if (typeof window !== 'undefined') {
 
 ```vue-html
 <!-- MyComponent -->
-<button @click="$emit('someEvent')">click me</button>
+<button @click="$emit('someEvent')">Click Me</button>
 ```
 
 <div class="options-api">
diff --git a/src/guide/components/props.md b/src/guide/components/props.md
index 8902c4e2..88e6318a 100644
--- a/src/guide/components/props.md
+++ b/src/guide/components/props.md
@@ -567,7 +567,7 @@ export default {
 
 Vue از `instanceof Person` برای اعتبارسنجی اینکه آیا مقدار پراپ `author` واقعا یک نمونه از تایپ کلاس `Person` هست یا خیر استفاده می‌کند.
 
-### تایپ Nullable
+### تایپ Nullable {#nullable-type}
 
 اگر به تایپ نیاز دارید اما متغیر قابل null شدن است، می‌توانید از دستور آرایه استفاده کنید که شامل `null` می‌شود:
 
diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md
index 23b02ba0..7954829a 100644
--- a/src/guide/components/slots.md
+++ b/src/guide/components/slots.md
@@ -302,8 +302,8 @@ function BaseLayout(slots) {
 
 می‌توانید از پراپرتی [‎$slots](/api/component-instance.html#slots) در ترکیب با [v-if](/guide/essentials/conditional.html#v-if) برای رسیدن به این هدف استفاده کنید.
 
-در مثال زیر یک کامپوننت کارت را با دو اسلات شرطی تعریف می‌کنیم: `header` و `footer`.
-زمانی که هدر / فوتر حضور داشته باشد، می‌خواهیم آنها را با یک المنت جدا بپیچیم تا استایل اضافی اعمال شود:
+در مثال زیر یک کامپوننت کارت را با سه اسلات شرطی تعریف می‌کنیم: `header` و `footer` و یک `default`.
+زمانی که header / footer / default  حضور داشته باشد، می‌خواهیم آنها را با یک المنت جدا بپیچیم تا استایل اضافی اعمال شود:
 
 ```vue-html
 <template>
@@ -312,7 +312,7 @@ function BaseLayout(slots) {
       <slot name="header" />
     </div>
     
-    <div class="card-content">
+    <div v-if="$slots.default" class="card-content">
       <slot />
     </div>
     
@@ -323,7 +323,7 @@ function BaseLayout(slots) {
 </template>
 ```
 
-[آن را در Playground امتحان کنید](https://play.vuejs.org/#eNqFVD1v2zAQ/SsEWyBLIjVoJlcN0AYZ2qEt2oxaaOkkMaZIgqRcGYH/e4+kqFi26wAejvfevfu0XugXrbPtAHRFC1sZrh2x4AZ9X0rea2UceWCmJo1RPbnKcv/w9KtSFnnkIxMfDnotmAN8EVJ4WrDQTgh51wGrwUx+RLrb+6eOW4I/1wGJcJGjewrND1RP1Gpo2CB8+klOL9QqJR1IV+S+lbfVGqXcYW3QL9QiXOToPqPmn1PLCz+9ps5iIQ1vs2erJA75xbNLWqlecwHmp3ZcSVvSFQmIx5gQ6u/34HNmgOvkrzqoNmf8z3b0vpL+MmDBbKGkM+aYacFF+PHPDxjRnsFe1YNA9gXwN1glBl9jpH0dZI1lH/BCtd/CqXDZPtnHEcduU1O+UM/cB35J8XQeLrT+Wu7H7C7ElXKPU0xn5690Ofeab0klmLWfcUDIKmlakEe2N7xB4L0VytksHlhJFwE3yfu6e88mkvWAlDkmnxePwpN9kGkhOd3eieYbGstq48kdV5u856udY04zJevob1BYtxNxlplPkHaxVgb7XpFbPRI8AV6TtWDV5lNENatr3PaKfAgO3NIsMM1z1sGg1ig8G5yKUKhoN7u1GOBY6U6Pp1rTIJPYZXJs/v+JBW871xq2u5g6fNjCTOj+H/sTpqs=)
+[آن را در Playground امتحان کنید](https://play.vuejs.org/#eNqVVMtu2zAQ/BWCLZBLIjVoTq4aoA1yaA9t0eaoCy2tJcYUSZCUKyPwv2dJioplOw4C+EDuzM4+ONYT/aZ1tumBLmhhK8O1IxZcr29LyTutjCN3zNRkZVRHLrLcXzz9opRFHvnIxIuDTgvmAG+EFJ4WTnhOCPnQAqvBjHFE2uvbh5Zbgj/XAolwkWN4TM33VI/UalixXvjyo5yeqVVKOpCuyP0ob6utlHL7vUE3U4twkWP4hJq/jiPP4vSSOouNrHiTPVolcclPnl3SSnWaCzC/teNK2pIuSEA8xoRQ/3+GmDM9XKZ41UK1PhF/tIOPlfSPAQtmAyWdMMdMAy7C9/9+wYDnCexU3QtknwH/glWi9z1G2vde1tj2Hi90+yNYhcvmwd4PuHabhvKNeuYu8EuK1rk7M/pLu5+zm5BXyh1uMdnOu3S+95pvSCWYtV9xQcgqaXogj2yu+AqBj1YoZ7NosJLOEq5S9OXtPZtI1gFSppx8engUHs+vVhq9eVhq9ORRrXdpRyseSqfo6SmmnONK6XTw9yis24q448wXSG+0VAb3sSDXeiBoDV6TpWDV+ktENatrdMGCfAoBfL1JYNzzpINJjVFoJ9yKUKho19ul6OFQ6UYPx1rjIpPYeXIc/vXCgjetawzbni0dPnhhJ3T3DMVSruI=)
 
 ## نام‌ دهی اسلات بصورت پویا {#dynamic-slot-names}
 
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index 6e7e3343..336e1751 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -19,7 +19,7 @@ function update() {
 </script>
 
 <template>
-  <div>parent bound v-model is: {{ model }}</div>
+  <div>Parent bound v-model is: {{ model }}</div>
 </template>
 ```
 
@@ -53,12 +53,13 @@ const model = defineModel()
 
 `defineModel` یک ماکرو میانبر است. کامپایلر آن را برای موارد زیر توسعه می‌دهد:
 
-- یک پراپ به نام `modelValue` که مقدار ref محلی با آن همگام‌سازی می‌شود؛
+- یک پراپ به نام `modelValue` که مقدار ref محلی با آن همگام‌سازی می‌شود.
 - یک رویداد به نام `update:modelValue` که هنگام تغییر مقدار ref محلی ارسال می‌شود.
 
 روش پیاده‌سازی همان کامپوننت فرزند نشان داده شده در بالا قبل از نسخه 3.4 به این صورت است:
 
 ```vue
+<!-- Child.vue -->
 <script setup>
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
@@ -72,6 +73,16 @@ const emit = defineEmits(['update:modelValue'])
 </template>
 ```
 
+سپس `v-model="modelValue"‎` در کامپوننت والد کامپایل می‌شود به:
+
+```vue-html
+<!-- Parent.vue -->
+<Child
+  :modelValue="foo"
+  @update:modelValue="$event => (foo = $event)"
+/>
+```
+
 همان‌طور که می‌بینید، کمی طولانی‌تر است. با این حال، درک آنچه در زیر پوسته اتفاق می‌افتد مفید است.
 
 از آن‌جا که `defineModel` یک پراپ تعریف می‌کند، بنابراین می‌توانید آپشن‌های زیرین پراپ را با پاس دادن آن به `defineModel` اعلام کنید:
@@ -190,7 +201,7 @@ export default {
 
 </div>
 
-## آرگومان‌های v-model {#v-model-arguments}
+## آرگومان‌های `v-model` {#v-model-arguments}
 
 همچنین `v-model` روی کامپوننت می‌تواند آرگومان بپذیرد:
 
@@ -213,7 +224,7 @@ const title = defineModel('title')
 </template>
 ```
 
-[آزمایش این مورد در Playground](https://play.vuejs.org/#eNqFkl9PwjAUxb9K05dhglsMb2SQqOFBE9Soj31Zxh0Uu7bpHxxZ9t29LWOiQXzaes7p2a+9a+mt1unOA53S3JaGa0csOK/nTPJaK+NISwxUpCOVUTVJMJoM1nJ/r/BNgnS9nWYnWujFMCFMlkpaRxx3AsgsFI6S3XWtViBIYda+Dg3QFLUWkFwxmWcHFqTAhQPUCwe4IiTf3Mzbtq/qujzDddRPYfruaUzNGI1PRkmG0Twb+uiY/sI9cw0/0VdQcQnL0D5KovgfL5fa4/69jiDQOOTo+S6SOYtfrvg63VolkauNN0lLxOUCzLN2HMkYnZLoBK8QQn0+Rs0ZD+OjXm6g/Dijb20TNEZfDFgwOwQZPIdzAWQN9uLtKXIPJtL7gH3BfAWrhA+Mh9idlyvEPslF2of4J3G5freLxoG0x0MF0JDsYp5RHE6Y1F9H/8adpJO4j8mOdl/Hw/nf)
+[آزمایش این مورد در Playground](https://play.vuejs.org/#eNqFU9tu2zAM/RVBKOAWyGIM25PhFbugDxuwC7a+VX3wEiZ1K0uCRHkuDP/7SKlxk16BILbIQ/KcQ3mUn5xb9hFkJeuw8q3DU2XazlmP4vvtF0tvBgyKjbedKJblXozLCmWUgSHB17BpokYxKiPEaocKlRgPOk0Lzq8bbI5PMlYIDxi92Z2E+GvtzXmLGipR9G86uwYtGr+NHTeAoemc5tEMnfhBf/Sry1kBHRAI1SDQSYj66u3pON73FdNUlxRLuX12d9MqZNQHJecKJUVJ8Lqc+8qFfODGgYlPueK8dWTIRZHaF5fJCuhadumiiI5cgTy6uHxVUmtcxGwC3jomizCgkjlU9Y2OKZjZ5+jHVETRI556fDhyIY6gZylIXgMp4g4nufSxdgwrazbtdnkdrCHlSaCSvPhWg//psLUmKEn7z7OVbLS2/76lGPoISX2quYLVzRPx6zBwTMlfHgL4nmTMucwxp8/+/EjK5yTtMLLoF5K/IVgdmWOGfY5mTbT3cInt1/QptGZ7Hs4GBBN2ophounoJryStn+/Cc9Lv6b5bvt9dWTn9B6F1Lrs=)
 
 اگر آپشن‌های پراپ نیز مورد نیاز است، باید پس از نام مدل پاس داده شوند:
 
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 012b19b0..e38c18e4 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -130,7 +130,7 @@ const publishedBooksMessage = computed(() => {
 
 [آن را در Playground امتحان کنید](https://play.vuejs.org/#eNp1kE9Lw0AQxb/KI5dtoTainkoaaREUoZ5EEONhm0ybYLO77J9CCfnuzta0vdjbzr6Zeb95XbIwZroPlMySzJW2MR6OfDB5oZrWaOvRwZIsfbOnCUrdmuCpQo+N1S0ET4pCFarUynnI4GttMT9PjLpCAUq2NIN41bXCkyYxiZ9rrX/cDF/xDYiPQLjDDRbVXqqSHZ5DUw2tg3zP8lK6pvxHe2DtvSasDs6TPTAT8F2ofhzh0hTygm5pc+I1Yb1rXE3VMsKsyDm5JcY/9Y5GY8xzHI+wnIpVw4nTI/10R2rra+S4xSPEJzkBvvNNs310ztK/RDlLLjy1Zic9cQVkJn+R7gIwxJGlMXiWnZEq77orhH3Pq2NH9DjvTfpfSBSbmA==)
 
-در اینجا یک پراپرتی computed به نام `publishedBooksMessage` تعریف کرده‌ایم. تابع `computed()‎` انتظار دارد که یک تابع به عنوان ورودی دریافت کند که مقدار بازگشتی آن از نوع **computed ref** باشد. مشابه ref های عادی، شما می‌توانید به نتیجه محاسبه شده با عنوان `publishedBooksMessage.value` دسترسی پیدا کنید. computed ref ها همچنین در تمپلیت‌ها به صورت خودکار باز می‌شوند، بنابراین می‌توانید بدون نیاز به `‎.value` به آنها دسترسی پیدا کنید.
+در اینجا یک پراپرتی computed به نام `publishedBooksMessage` تعریف کرده‌ایم. تابع `computed()‎` انتظار دارد که یک [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) به عنوان ورودی دریافت کند که مقدار بازگشتی آن از نوع **computed ref** باشد. مشابه ref های عادی، شما می‌توانید به نتیجه محاسبه شده با عنوان `publishedBooksMessage.value` دسترسی پیدا کنید. computed ref ها همچنین در تمپلیت‌ها به صورت خودکار باز می‌شوند، بنابراین می‌توانید بدون نیاز به `‎.value` به آنها دسترسی پیدا کنید.
 
 یک پراپرتی computed به طور خودکار وابستگی‌های reactive خود را دنبال می‌کند. Vue می‌داند که محاسبه `publishedBooksMessage` به `author.books` وابستگی دارد، بنابراین هنگامی که `author.books` تغییر می‌کند، هر اتصالی که به `publishedBooksMessage` وابسته باشد، به‌روزرسانی می‌شود.
 
diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md
index c26ebcbc..6bd9ccc8 100644
--- a/src/guide/essentials/watchers.md
+++ b/src/guide/essentials/watchers.md
@@ -79,6 +79,7 @@ const question = ref('')
 const answer = ref('.سوالی که مینویسید باید شامل علامت سوال (؟) باشد')
 const loading = ref(false)
 
+// watch works directly on a ref
 watch(question, async (newQuestion, oldQuestion) => {
   if (newQuestion.includes('?')) {
     loading.value = true
@@ -108,7 +109,7 @@ watch(question, async (newQuestion, oldQuestion) => {
 
 ### تایپ‌های منابع نظارتی {#watch-source-types}
 
-اولین آرگومان `watch` می‌تواند تایپ‌های مختلفی از «منابع» reactive باشد: می‌تواند یک ref (شامل computed refs)، یک reactive object، یک تابع getter یا آرایه‌ باشد:
+اولین آرگومان `watch` می‌تواند تایپ‌های مختلفی از «منابع» reactive باشد: می‌تواند یک ref (شامل computed refs)، یک reactive object، یک [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) یا آرایه‌ باشد:
 
 ```js
 const x = ref(0)
@@ -140,7 +141,7 @@ const obj = reactive({ count: 0 })
 // پاس می‌دهیم watch() را به number کار نمی‌کند زیرا داریم یک
 
 watch(obj.count, (count) => {
-  console.log(`count is: ${count}`)
+  console.log(`Count is: ${count}`)
 })
 ```
 
@@ -152,7 +153,7 @@ watch(obj.count, (count) => {
 watch(
   () => obj.count,
   (count) => {
-    console.log(`count is: ${count}`)
+    console.log(`Count is: ${count}`)
   }
 )
 ```
@@ -272,13 +273,12 @@ watch(
 
 </div>
 
-
 ## Once Watchers <sup class="vt-badge" data-text="3.4+" /> {#once-watchers}
 
 هر زمانی که منبع داده ناظر تغییر کند ناظر کالبک خود را فراخوانی می‌کند. اگر می‌خواهید کالبک ناظر فقط یک بار در زمان تغییر داده صدا زده شود، از آپشن `once: true` استفاده کنید.
 
 <div class="options-api">
-  
+
 ```js
 export default {
   watch: {
diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md
index 09cc72f4..8c294c23 100644
--- a/src/guide/extras/reactivity-in-depth.md
+++ b/src/guide/extras/reactivity-in-depth.md
@@ -67,7 +67,7 @@ whenDepsChange(update)
 
 در واقع نمی‌توانیم مانند مثال بالا متغیرهای محلی را ردیابی کنیم. در جاوااسکریپت ساده هیچ مکانیزمی برای انجام این کار وجود ندارد. اما آنچه **می‌توانیم** انجام دهیم رهگیری خواندن و نوشتن **خواص شیء** است.
 
-دو روش برای رهگیری دسترسی به خاصیت در جاوااسکریپت وجود دارد: آنها [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)/[setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) و [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) هستند. Vue 2 به دلیل محدودیت‌های پشتیبانی مرورگرها فقط از getter / setters استفاده می‌کرد. در Vue 3 از پراکسی برای شی‌های واکنش‌پذیر (reactive objects) و از getter / setters برای رف‌ها (ref) استفاده می‌شود. شبه‌کد زیر نحوه کار آن‌ها را نشان می‌دهد:
+دو روش برای رهگیری دسترسی به خاصیت در جاوااسکریپت وجود دارد: آنها [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description)/[setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) و [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) هستند. Vue 2 به دلیل محدودیت‌های پشتیبانی مرورگرها فقط از getter / setters استفاده می‌کرد. در Vue 3 از پراکسی برای شی‌های واکنش‌پذیر (reactive objects) و از getter / setters برای رف‌ها (ref) استفاده می‌شود. شبه‌کد زیر نحوه کار آن‌ها را نشان می‌دهد:
 
 ```js{4,9,17,22}
 function reactive(obj) {
@@ -191,7 +191,7 @@ import { ref, watchEffect } from 'vue'
 const count = ref(0)
 
 watchEffect(() => {
-  document.body.innerHTML = `count is: ${count.value}`
+  document.body.innerHTML = `Count is: ${count.value}`
 })
 
 // را بروز می‌کند DOM
@@ -409,7 +409,7 @@ export function useMachine(options) {
 
 از نظر اصولی، سیگنال‌ها همان نوع ابتدایی واکنش‌پذیری مثل refs در Vue هستند. یک کانتینر که ردیابی وابستگی را در دسترسی و فعال‌سازی افکت جانبی در تغییر فراهم می‌کند. این پارادایم مبتنی بر اصول واکنش‌پذیری مفهوم جدیدی در دنیای فرانت‌اند نیست: به پیاده‌سازی‌هایی مثل [observables در Knockout](https://knockoutjs.com/documentation/observables.html) و [Tracker در Meteor](https://docs.meteor.com/api/tracker.html) بیش از یک دهه پیش برمی‌گردد. Options API در Vue و کتابخانه مدیریت state React به نام [MobX](https://mobx.js.org/) نیز بر همان اصول مبتنی هستند.
 
-اگرچه لزومی برای تعریف چیزی به عنوان سیگنال نیست، امروزه این مفهوم اغلب در کنار مدل رندرینگی مطرح می‌شود که به‌روزرسانی‌ها از طریق اشتراک‌های ظریف‌تر انجام می‌شود. به دلیل استفاده از DOM مجازی، Vue در حال حاضر به [کامپایلرها برای دستیابی به بهینه‌سازی‌های مشابه متکی است](/guide/extras/rendering-mechanism#compiler-informed-virtual-dom). با این حال، ما همچنین در حال بررسی یک استراتژی کامپایل جدید الهام گرفته از Solid (حالت Vapor) هستیم که به DOM مجازی متکی نیست و از سیستم واکنش‌پذیری درونی Vue بیشتر استفاده می‌کند.
+اگرچه لزومی برای تعریف چیزی به عنوان سیگنال نیست، امروزه این مفهوم اغلب در کنار مدل رندرینگی مطرح می‌شود که به‌روزرسانی‌ها از طریق اشتراک‌های ظریف‌تر انجام می‌شود. به دلیل استفاده از DOM مجازی، Vue در حال حاضر به [کامپایلرها برای دستیابی به بهینه‌سازی‌های مشابه متکی است](/guide/extras/rendering-mechanism#compiler-informed-virtual-dom). با این حال، ما همچنین در حال بررسی یک استراتژی کامپایل جدید الهام گرفته از Solid ([حالت Vapor](https://github.com/vuejs/core-vapor)) هستیم که به DOM مجازی متکی نیست و از سیستم واکنش‌پذیری درونی Vue بیشتر استفاده می‌کند.
 
 ### بده بستان طراحی API {#api-design-trade-offs}
 
diff --git a/src/guide/extras/render-function.md b/src/guide/extras/render-function.md
index 24b8145d..ad01e367 100644
--- a/src/guide/extras/render-function.md
+++ b/src/guide/extras/render-function.md
@@ -367,7 +367,7 @@ h(
       /* ... */
     }
   },
-  'click me'
+  'Click Me'
 )
 ```
 
@@ -377,7 +377,7 @@ h(
     /* ... */
   }}
 >
-  click me
+  Click Me
 </button>
 ```
 
diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md
index 08783c8a..acdc49fa 100644
--- a/src/guide/quick-start.md
+++ b/src/guide/quick-start.md
@@ -394,7 +394,7 @@ export default {
   data() {
     return { count: 0 }
   },
-  template: `<div>count is {{ count }}</div>`
+  template: `<div>Count is: {{ count }}</div>`
 }
 ```
 
@@ -409,7 +409,7 @@ export default {
     const count = ref(0)
     return { count }
   },
-  template: `<div>count is {{ count }}</div>`
+  template: `<div>Count is: {{ count }}</div>`
 }
 ```
 
diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md
index 7bcd0881..242d4cef 100644
--- a/src/guide/reusability/composables.md
+++ b/src/guide/reusability/composables.md
@@ -199,7 +199,7 @@ const { data, error } = useFetch(url)
 url.value = '/new-url'
 ```
 
-یا یک تابع دریافت کننده (getter) را قبول کند:
+یا یک [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) را قبول کند:
 
 ```js
 // تغییر کرد، دوباره درخواست بزند props.id وقتی
@@ -386,4 +386,4 @@ export default {
 - [reactivity در عمق](/guide/extras/reactivity-in-depth): برای درک نحوه عملکرد سیستم reactivity در Vue در سطح پایین‌تر
 - [State Management](/guide/scaling-up/state-management): برای الگوهای مدیریت state که توسط چندین کامپوننت مشترک هستند
 - [تست Composables](/guide/scaling-up/testing#testing-composables): نکاتی در مورد تست واحدهای Composables
-- [VueUse](https://vueuse.org/): مجموعه ای در حال رشد از Vue composables. کد منبع نیز یک منبع یادگیری عالی است.
\ No newline at end of file
+- [VueUse](https://vueuse.org/): مجموعه ای در حال رشد از Vue composables. کد منبع نیز یک منبع یادگیری عالی است.
diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md
index 92968b1a..e29bb57f 100644
--- a/src/guide/reusability/custom-directives.md
+++ b/src/guide/reusability/custom-directives.md
@@ -210,6 +210,10 @@ app.directive('demo', (el, binding) => {
 
 ## کاربرد در کامپوننت‌‌ها {#usage-on-components}
 
+:::warning توصیه نمی‌شود
+استفاده از دایرکتیوهای سفارشی بر روی کامپوننت‌ها توصیه نمی‌شود. زمانی که یک کامپوننت دارای چندین گره ریشه باشد ممکن است رفتار غیرمنتظره‌ای رخ دهد.
+:::
+
 دایرکتیوهای سفارشی همانند [Fallthrough Attributes](/guide/components/attrs) برای استفاده در کامپوننت‌‌ها باید در نود ریشه (root node) به کار روند.
 
 ```vue-html
@@ -224,4 +228,4 @@ app.directive('demo', (el, binding) => {
 </div>
 ```
 
-توجه داشته باشید که کامپوننت‌‌ها به طور بالقوه می‌توانند بیشتر از یک نود ریشه داشته باشند. یک دایرکتیو هنگامی که بر کامپوننتی با چندین نود ریشه اعمال می‌شود نادیده گرفته خواهد شد و اخطار داده می‌شود. دایرکتیوها برخلاف اتریبیوت‌ها نمی‌توانند با استفاده از `v-bind="$attrs"‎` به المنت دیگری ارسال شوند. به طور کلی، توصیه می‌شود که از دایرکتیوهای سفارشی درون کامپوننت‌‌ها استفاده **نکنید**.
+توجه داشته باشید که کامپوننت‌‌ها می‌توانند بیشتر از یک نود ریشه داشته باشند. یک دایرکتیو هنگامی که بر کامپوننتی با چندین نود ریشه اعمال می‌شود نادیده گرفته خواهد شد و اخطار داده می‌شود. دایرکتیوها برخلاف اتریبیوت‌ها نمی‌توانند با استفاده از `v-bind="$attrs"‎` به المنت دیگری ارسال شوند.
diff --git a/src/public/logo-uwu.png b/src/public/logo-uwu.png
new file mode 100644
index 00000000..f26a64e8
Binary files /dev/null and b/src/public/logo-uwu.png differ
diff --git a/src/public/vuemastery/background-bubbles-vuemastery.svg b/src/public/vuemastery/background-bubbles-vuemastery.svg
new file mode 100644
index 00000000..ca24160c
--- /dev/null
+++ b/src/public/vuemastery/background-bubbles-vuemastery.svg
@@ -0,0 +1,110 @@
+<svg width="3840" height="250" viewBox="0 0 3840 250" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="3840" height="250">
+    <rect width="3840" height="250" fill="#C4C4C4"/>
+  </mask>
+  <g mask="url(#mask0)">
+    <path d="M3125.99 67.667C3143.38 67.667 3157.48 53.5685 3157.48 36.177C3157.48 18.7856 3143.38 4.68701 3125.99 4.68701C3108.59 4.68701 3094.5 18.7856 3094.5 36.177C3094.5 53.5685 3108.59 67.667 3125.99 67.667Z" fill="url(#paint0_radial)"/>
+    <path d="M3012.62 403.625C3090.01 403.625 3152.74 340.895 3152.74 263.513C3152.74 186.131 3090.01 123.401 3012.62 123.401C2935.24 123.401 2872.51 186.131 2872.51 263.513C2872.51 340.895 2935.24 403.625 3012.62 403.625Z" fill="url(#paint1_radial)"/>
+    <path d="M3290.39 194.64C3335.33 194.64 3371.77 158.205 3371.77 113.26C3371.77 68.315 3335.33 31.8799 3290.39 31.8799C3245.44 31.8799 3209.01 68.315 3209.01 113.26C3209.01 158.205 3245.44 194.64 3290.39 194.64Z" fill="url(#paint2_radial)"/>
+    <path d="M3125.99 86.584C3153.83 86.584 3176.39 64.016 3176.39 36.177C3176.39 8.338 3153.83 -14.23 3125.99 -14.23C3098.15 -14.23 3075.58 8.338 3075.58 36.177C3075.58 64.016 3098.15 86.584 3125.99 86.584Z" fill="url(#paint3_radial)"/>
+    <path d="M3264.55 280.843C3278.82 280.843 3290.39 269.276 3290.39 255.008C3290.39 240.74 3278.82 229.173 3264.55 229.173C3250.29 229.173 3238.72 240.74 3238.72 255.008C3238.72 269.276 3250.29 280.843 3264.55 280.843Z" fill="url(#paint4_radial)"/>
+    <path d="M3290.39 162.458C3317.56 162.458 3339.59 140.431 3339.59 113.26C3339.59 86.0887 3317.56 64.062 3290.39 64.062C3263.22 64.062 3241.19 86.0887 3241.19 113.26C3241.19 140.431 3263.22 162.458 3290.39 162.458Z" fill="url(#paint5_radial)"/>
+    <path d="M3840 -123V75.159C3805.25 83.968 3768.87 88.652 3731.39 88.652C3571.9 88.652 3432.22 3.909 3354.88 -122.999H3840V-123Z" fill="url(#paint6_radial)"/>
+    <path d="M3012.62 339.162C3054.4 339.162 3088.27 305.293 3088.27 263.513C3088.27 221.733 3054.4 187.864 3012.62 187.864C2970.84 187.864 2936.97 221.733 2936.97 263.513C2936.97 305.293 2970.84 339.162 3012.62 339.162Z" fill="url(#paint7_radial)"/>
+    <path opacity="0.4" d="M2799.73 -18.148C2799.73 128.954 2680.48 248.203 2533.37 248.203C2522.84 248.203 2512.45 247.592 2502.24 246.401V-123H2778.29C2792.09 -90.822 2799.73 -55.377 2799.73 -18.148Z" fill="url(#paint8_radial)"/>
+    <path opacity="0.4" d="M297.487 -18.148C297.487 128.954 178.238 248.203 31.135 248.203C20.601 248.203 10.212 247.592 -0.00195312 246.401V-123H276.053C289.849 -90.822 297.487 -55.377 297.487 -18.148Z" fill="url(#paint9_radial)"/>
+  </g>
+  <defs>
+    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3255.35 217.009) scale(336.602)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3166.4 134.019) scale(316.126 316.126)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3217.22 280.475) scale(324.18)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3092.55 128.065) scale(177.13)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3155.24 95.6988) scale(385.786 385.786)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3238 210.242) scale(189.699)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3426.57 342.694) scale(683.391)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3142.04 136.356) scale(248.948 248.948)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(3411.9 247.332) scale(897.876)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(825.658 231.332) scale(897.876)">
+      <stop stop-color="white"/>
+      <stop offset="0.0932" stop-color="#E5FFFF" stop-opacity="0.9068"/>
+      <stop offset="0.3294" stop-color="#AAFFFF" stop-opacity="0.6706"/>
+      <stop offset="0.5466" stop-color="#7BFFFF" stop-opacity="0.4534"/>
+      <stop offset="0.7377" stop-color="#59FFFF" stop-opacity="0.2623"/>
+      <stop offset="0.8954" stop-color="#44FFFF" stop-opacity="0.1046"/>
+      <stop offset="1" stop-color="#3DFFFF" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+</svg>
diff --git a/src/public/vuemastery/lock-vuemastery.svg b/src/public/vuemastery/lock-vuemastery.svg
new file mode 100644
index 00000000..cfed57eb
--- /dev/null
+++ b/src/public/vuemastery/lock-vuemastery.svg
@@ -0,0 +1,232 @@
+<svg width="2593" height="250" viewBox="0 0 2593 250" fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g filter="url(#filter0_d)">
+    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="3840" height="250">
+      <rect width="3840" height="250" fill="#C4C4C4"/>
+    </mask>
+    <g mask="url(#mask0)">
+      <path d="M2002.33 205.278C2002.33 207.683 2000.38 209.633 1997.98 209.633H1865.24C1862.84 209.633 1860.89 207.683 1860.89 205.278V114.129C1860.89 111.723 1862.84 109.773 1865.24 109.773H1997.98C2000.38 109.773 2002.33 111.723 2002.33 114.129V205.278Z" fill="url(#paint0_radial)"/>
+      <path d="M1978.14 109.773H1963.73V67.0161C1963.73 57.6141 1956.08 49.9641 1946.68 49.9641H1916.53C1907.13 49.9641 1899.48 57.6131 1899.48 67.0161V109.772H1885.08V67.0161C1885.08 58.6141 1888.35 50.7131 1894.29 44.7721C1900.23 38.8301 1908.13 35.5581 1916.53 35.5581H1946.68C1955.08 35.5581 1962.98 38.8301 1968.93 44.7721C1974.87 50.7131 1978.14 58.6141 1978.14 67.0161V109.773Z" fill="url(#paint1_radial)"/>
+      <path d="M1876.6 186.818C1877.92 186.818 1878.99 185.751 1878.99 184.434C1878.99 183.117 1877.92 182.05 1876.6 182.05C1875.29 182.05 1874.22 183.117 1874.22 184.434C1874.22 185.751 1875.29 186.818 1876.6 186.818Z" fill="#00FFAF"/>
+      <path d="M1876.6 195.723C1877.92 195.723 1878.99 194.656 1878.99 193.339C1878.99 192.022 1877.92 190.955 1876.6 190.955C1875.29 190.955 1874.22 192.022 1874.22 193.339C1874.22 194.656 1875.29 195.723 1876.6 195.723Z" fill="#00FFAF"/>
+      <path d="M1871.53 209.635H1865.24C1862.83 209.635 1860.88 207.683 1860.88 205.277V114.13C1860.88 111.723 1862.83 109.773 1865.24 109.773H1871.53C1869.12 109.773 1867.17 111.724 1867.17 114.13V205.277C1867.17 207.684 1869.12 209.635 1871.53 209.635Z" fill="url(#paint2_radial)"/>
+      <path d="M2002.33 114.129V205.276C2002.33 207.683 2000.38 209.634 1997.97 209.634H1991.43C1993.83 209.634 1995.78 207.682 1995.78 205.276V114.129C1995.78 111.722 1993.83 109.772 1991.43 109.772H1997.97C2000.38 109.772 2002.33 111.723 2002.33 114.129Z" fill="url(#paint3_radial)"/>
+      <path d="M2002.33 202.658V205.277C2002.33 207.684 2000.38 209.635 1997.97 209.635H1865.24C1862.83 209.635 1860.88 207.683 1860.88 205.277V202.658C1860.88 205.065 1862.83 207.016 1865.24 207.016H1997.97C2000.38 207.016 2002.33 205.065 2002.33 202.658Z" fill="url(#paint4_radial)"/>
+      <path d="M2002.33 114.129V116.749C2002.33 114.343 2000.38 112.392 1997.97 112.392H1865.24C1862.83 112.392 1860.88 114.344 1860.88 116.749V114.129C1860.88 111.722 1862.83 109.772 1865.24 109.772H1997.97C2000.38 109.772 2002.33 111.723 2002.33 114.129Z" fill="url(#paint5_radial)"/>
+      <path d="M1932.72 109.773H1930.5V207.016H1932.72V109.773Z" fill="url(#paint6_radial)"/>
+      <path d="M1972.15 207.016H1969.92V157.74C1969.92 152.635 1974.07 148.483 1979.18 148.483H2002.33V150.709H1979.18C1975.3 150.709 1972.15 153.863 1972.15 157.74V207.016Z" fill="url(#paint7_radial)"/>
+      <path d="M2002.33 196.98H1990.76C1985.65 196.98 1981.5 192.826 1981.5 187.723V168.624C1981.5 163.52 1985.65 159.367 1990.76 159.367H2002.33V161.594H1990.76C1986.88 161.594 1983.73 164.748 1983.73 168.624V187.723C1983.73 191.599 1986.88 194.752 1990.76 194.752H2002.33V196.98Z" fill="url(#paint8_radial)"/>
+      <path d="M2002.33 135.555H1979.18C1974.07 135.555 1969.92 131.402 1969.92 126.297V109.773H1972.15V126.297C1972.15 130.175 1975.3 133.328 1979.18 133.328H2002.33V135.555Z" fill="url(#paint9_radial)"/>
+      <path d="M1958.79 207.016H1956.56V184.099C1956.56 180.222 1953.41 177.068 1949.53 177.068H1938.01V174.842H1949.53C1954.63 174.842 1958.79 178.995 1958.79 184.099V207.016V207.016Z" fill="url(#paint10_radial)"/>
+      <path d="M1905.99 145.607H1894.46C1889.36 145.607 1885.21 141.453 1885.21 136.35V109.773H1887.43V136.35C1887.43 140.227 1890.59 143.38 1894.46 143.38H1905.99V145.607Z" fill="url(#paint11_radial)"/>
+      <path d="M1890.46 207.016H1888.23V174.931C1888.23 171.056 1885.08 167.901 1881.2 167.901H1860.88V165.675H1881.2C1886.3 165.675 1890.46 169.828 1890.46 174.931V207.016Z" fill="url(#paint12_radial)"/>
+      <path d="M1907.8 207.016H1905.57V170.61C1905.57 165.505 1909.72 161.353 1914.83 161.353H1923.73V163.578H1914.83C1910.95 163.578 1907.8 166.732 1907.8 170.61V207.016Z" fill="url(#paint13_radial)"/>
+      <path d="M1907.8 109.773H1905.57V134.522H1907.8V109.773Z" fill="url(#paint14_radial)"/>
+      <path d="M1886.32 133.328H1860.88V135.555H1886.32V133.328Z" fill="url(#paint15_radial)"/>
+      <path d="M1949.69 134.521L1931.61 166.194L1913.52 134.521H1900.35L1931.61 189.83L1962.86 134.521H1949.69Z" fill="#54FFFF"/>
+      <g opacity="0.6">
+        <rect x="1864" y="98" width="135" height="128" fill="url(#pattern0)"/>
+      </g>
+      <path d="M1978.14 86.5342H1963.73V109.773H1978.14V86.5342Z" fill="url(#paint16_radial)"/>
+      <path d="M1899.48 86.5342H1885.08V109.773H1899.48V86.5342Z" fill="url(#paint17_radial)"/>
+      <rect x="1838" y="146" width="77" height="77" fill="url(#pattern1)"/>
+      <rect x="1838" y="154" width="77" height="78" fill="url(#pattern2)"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_d" x="1834" y="35.5581" width="172.332" height="204.442" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <use xlink:href="#image0"/>
+    </pattern>
+    <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <use xlink:href="#image1"/>
+    </pattern>
+    <pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
+      <use xlink:href="#image2"/>
+    </pattern>
+    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1936.15 357.624) scale(321.01 321.01)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1939.01 300.975) scale(262.157)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1952.85 208.23) scale(136.302 136.304)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.41 208.23) scale(139.661 139.661)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1928.99 211.414) scale(361.34 361.339)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1931.96 236.061) scale(132.647)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF3"/>
+      <stop offset="0.2471" stop-color="#00ADC2"/>
+      <stop offset="0.4375" stop-color="#00779A"/>
+      <stop offset="0.6131" stop-color="#004D7A"/>
+      <stop offset="0.7708" stop-color="#002E64"/>
+      <stop offset="0.9051" stop-color="#001C56"/>
+      <stop offset="1" stop-color="#001551"/>
+    </radialGradient>
+    <radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.692) scale(142.263 142.272)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.692) scale(142.32 142.32)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.692) scale(142.328 142.328)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.69) scale(142.322 142.321)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.691) scale(142.313 142.313)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.691) scale(142.317 142.317)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.691) scale(142.313)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint13_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.691) scale(142.326 142.327)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint14_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.23 208.689) scale(142.319 142.316)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint15_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1930.22 208.684) scale(142.308 142.307)">
+      <stop stop-color="#00FFFF"/>
+      <stop offset="0.0472" stop-color="#00EEF5"/>
+      <stop offset="0.2471" stop-color="#00ADCF"/>
+      <stop offset="0.4375" stop-color="#0077B0"/>
+      <stop offset="0.6131" stop-color="#004D97"/>
+      <stop offset="0.7708" stop-color="#002E86"/>
+      <stop offset="0.9051" stop-color="#001C7B"/>
+      <stop offset="1" stop-color="#001577"/>
+    </radialGradient>
+    <radialGradient id="paint16_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1980.16 155.992) scale(25.7584 18.6826)">
+      <stop stop-color="#002551"/>
+      <stop offset="0.2276" stop-color="#00194B"/>
+      <stop offset="0.6795" stop-color="#000743"/>
+      <stop offset="1" stop-color="#000040"/>
+    </radialGradient>
+    <radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1980.16 155.992) scale(25.7579 18.6822)">
+      <stop stop-color="#002551"/>
+      <stop offset="0.2276" stop-color="#00194B"/>
+      <stop offset="0.6795" stop-color="#000743"/>
+      <stop offset="1" stop-color="#000040"/>
+    </radialGradient>
+    <image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACACAYAAAAh4nqyAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+    <image id="image1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAYAAADjCemwAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+    <image id="image2" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+  </defs>
+</svg>
diff --git a/src/public/vuemastery/unlock-vuemastery.svg b/src/public/vuemastery/unlock-vuemastery.svg
new file mode 100644
index 00000000..a709ebc0
--- /dev/null
+++ b/src/public/vuemastery/unlock-vuemastery.svg
@@ -0,0 +1,285 @@
+<svg width="2571" height="249" viewBox="0 0 2571 249" fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink">
+	<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="3840" height="250">
+		<rect y="-1" width="3840" height="250" fill="#C4C4C4"/>
+	</mask>
+	<g mask="url(#mask0)">
+		<path d="M1980.33 213.994C1980.33 216.402 1978.38 218.354 1975.97 218.354H1843.1C1840.69 218.354 1838.74 216.401 1838.74 213.994V122.748C1838.74 120.34 1840.69 118.387 1843.1 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.748V213.994Z" fill="url(#paint0_radial)"/>
+		<path d="M1956.12 53.1011V118.387H1941.7V53.1011C1941.7 43.6881 1934.04 36.0311 1924.63 36.0311H1894.45C1885.04 36.0311 1877.38 43.6891 1877.38 53.1011V80.6801L1873.59 84.4651L1877.38 88.2491V95.9041H1862.96V53.1011C1862.96 44.6901 1866.23 36.7811 1872.18 30.8331C1878.13 24.8851 1886.04 21.6091 1894.45 21.6091H1924.63C1933.04 21.6091 1940.95 24.8851 1946.9 30.8331C1952.84 36.7811 1956.12 44.6901 1956.12 53.1011Z" fill="url(#paint1_radial)"/>
+		<path d="M1854.47 195.514C1855.79 195.514 1856.86 194.445 1856.86 193.127C1856.86 191.809 1855.79 190.74 1854.47 190.74C1853.15 190.74 1852.09 191.809 1852.09 193.127C1852.09 194.445 1853.15 195.514 1854.47 195.514Z" fill="#00FFAF"/>
+		<path d="M1854.47 204.429C1855.79 204.429 1856.86 203.36 1856.86 202.042C1856.86 200.724 1855.79 199.655 1854.47 199.655C1853.15 199.655 1852.09 200.724 1852.09 202.042C1852.09 203.36 1853.15 204.429 1854.47 204.429Z" fill="#00FFAF"/>
+		<path d="M1980.33 122.749V125.371C1980.33 122.963 1978.38 121.009 1975.97 121.009H1843.1C1840.69 121.009 1838.74 122.963 1838.74 125.371V122.749C1838.74 120.34 1840.69 118.387 1843.1 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.749Z" fill="url(#paint2_radial)"/>
+		<path d="M1956.12 86.312H1941.7V118.387H1956.12V86.312Z" fill="url(#paint3_radial)"/>
+		<rect x="1816" y="154" width="77" height="78" fill="url(#pattern0)"/>
+		<rect x="1816" y="163" width="77" height="78" fill="url(#pattern1)"/>
+		<path d="M1910.65 118.387H1908.42V215.733H1910.65V118.387Z" fill="url(#paint4_radial)"/>
+		<path d="M1950.12 215.733H1947.89V166.405C1947.89 161.295 1952.04 157.137 1957.15 157.137H1980.33V159.366H1957.15C1953.27 159.366 1950.12 162.524 1950.12 166.405V215.733Z" fill="url(#paint5_radial)"/>
+		<path d="M1980.33 205.687H1968.75C1963.64 205.687 1959.48 201.529 1959.48 196.42V177.301C1959.48 172.192 1963.64 168.034 1968.75 168.034H1980.33V170.264H1968.75C1964.86 170.264 1961.71 173.421 1961.71 177.301V196.42C1961.71 200.301 1964.86 203.457 1968.75 203.457H1980.33V205.687Z" fill="url(#paint6_radial)"/>
+		<path d="M1980.33 144.197H1957.15C1952.04 144.197 1947.89 140.04 1947.89 134.929V118.387H1950.12V134.929C1950.12 138.811 1953.27 141.967 1957.15 141.967H1980.33V144.197Z" fill="url(#paint7_radial)"/>
+		<path d="M1936.74 215.733H1934.51V192.793C1934.51 188.912 1931.36 185.754 1927.48 185.754H1915.94V183.526H1927.48C1932.59 183.526 1936.75 187.683 1936.75 192.793V215.733H1936.74Z" fill="url(#paint8_radial)"/>
+		<path d="M1883.89 154.26H1872.35C1867.25 154.26 1863.09 150.102 1863.09 144.993V118.388H1865.31V144.993C1865.31 148.875 1868.47 152.031 1872.35 152.031H1883.89V154.26H1883.89Z" fill="url(#paint9_radial)"/>
+		<path d="M1868.34 215.733H1866.11V183.614C1866.11 179.734 1862.96 176.576 1859.07 176.576H1838.74V174.347H1859.07C1864.18 174.347 1868.34 178.504 1868.34 183.614V215.733V215.733Z" fill="url(#paint10_radial)"/>
+		<path d="M1885.7 215.733H1883.47V179.288C1883.47 174.178 1887.63 170.022 1892.74 170.022H1901.65V172.25H1892.74C1888.86 172.25 1885.7 175.408 1885.7 179.289V215.733H1885.7Z" fill="url(#paint11_radial)"/>
+		<path d="M1885.7 118.387H1883.47V143.162H1885.7V118.387Z" fill="url(#paint12_radial)"/>
+		<path d="M1864.2 141.967H1838.74V144.196H1864.2V141.967Z" fill="url(#paint13_radial)"/>
+		<path opacity="0.5" d="M1909.67 328.667C1994.02 328.667 2062.4 260.288 2062.4 175.938C2062.4 91.5881 1994.02 23.209 1909.67 23.209C1825.32 23.209 1756.94 91.5881 1756.94 175.938C1756.94 260.288 1825.32 328.667 1909.67 328.667Z" fill="url(#paint14_radial)"/>
+		<path opacity="0.4" d="M1849.39 218.355H1843.1C1840.69 218.355 1838.74 216.401 1838.74 213.992V122.749C1838.74 120.34 1840.69 118.387 1843.1 118.387H1849.39C1846.99 118.387 1845.03 120.34 1845.03 122.749V213.992C1845.03 216.401 1846.98 218.355 1849.39 218.355Z" fill="url(#paint15_linear)"/>
+		<path opacity="0.4" d="M1980.33 122.749V213.992C1980.33 216.401 1978.38 218.355 1975.97 218.355H1969.42C1971.83 218.355 1973.78 216.401 1973.78 213.992V122.749C1973.78 120.34 1971.83 118.387 1969.42 118.387H1975.97C1978.38 118.387 1980.33 120.34 1980.33 122.749Z" fill="url(#paint16_linear)"/>
+		<path d="M1980.33 211.37V213.992C1980.33 216.401 1978.38 218.355 1975.97 218.355H1843.1C1840.69 218.355 1838.74 216.401 1838.74 213.992V211.37C1838.74 213.78 1840.69 215.733 1843.1 215.733H1975.97C1978.38 215.733 1980.33 213.78 1980.33 211.37Z" fill="url(#paint17_radial)"/>
+		<path d="M1941.7 53.101C1941.7 43.688 1934.04 36.031 1924.62 36.031H1894.45C1885.03 36.031 1877.38 43.689 1877.38 53.101V49.642C1877.38 40.23 1885.03 32.572 1894.45 32.572H1924.62C1934.04 32.572 1941.7 40.23 1941.7 49.642V53.101Z" fill="url(#paint18_radial)"/>
+		<path d="M1956.11 53.1011V56.5591C1956.11 48.1491 1952.84 40.2401 1946.89 34.2911C1940.94 28.3441 1933.03 25.0671 1924.62 25.0671H1894.44C1886.03 25.0671 1878.12 28.3431 1872.18 34.2911C1866.23 40.2391 1862.95 48.1481 1862.95 56.5591V53.1011C1862.95 44.6901 1866.23 36.7811 1872.18 30.8331C1878.12 24.8851 1886.03 21.6091 1894.44 21.6091H1924.62C1933.03 21.6091 1940.94 24.8851 1946.89 30.8331C1952.84 36.7811 1956.11 44.6901 1956.11 53.1011Z" fill="url(#paint19_radial)"/>
+		<path opacity="0.4" d="M1982.98 378.306L1981.68 378.766L1836.66 -29.696L1837.96 -30.157L1982.98 378.306Z" fill="url(#paint20_radial)"/>
+		<path opacity="0.4" d="M1707.56 252.155L1706.54 249.463L2112.08 96.4551L2113.1 99.1461L1707.56 252.155Z" fill="url(#paint21_radial)"/>
+		<path d="M1909.82 112.621C1876.43 112.621 1849.36 139.689 1849.36 173.079C1849.36 206.471 1876.43 233.54 1909.82 233.54C1943.21 233.54 1970.28 206.471 1970.28 173.079C1970.28 139.689 1943.21 112.621 1909.82 112.621ZM1909.82 232.688C1876.9 232.688 1850.21 206 1850.21 173.079C1850.21 140.16 1876.9 113.471 1909.82 113.471C1942.74 113.471 1969.43 140.159 1969.43 173.079C1969.43 206 1942.74 232.688 1909.82 232.688Z" fill="url(#paint22_radial)"/>
+		<path opacity="0.1" d="M1996.74 263.364C2004.14 263.364 2010.15 257.36 2010.15 249.953C2010.15 242.546 2004.14 236.542 1996.74 236.542C1989.33 236.542 1983.32 242.546 1983.32 249.953C1983.32 257.36 1989.33 263.364 1996.74 263.364Z" fill="#5BFFFF"/>
+		<g opacity="0.1">
+			<rect x="1718" width="177" height="178" fill="url(#pattern2)"/>
+		</g>
+		<g opacity="0.1">
+			<rect x="1915" y="158" width="218" height="218" fill="url(#pattern3)"/>
+		</g>
+		<path opacity="0.2" d="M1818.81 148.837L1829.53 108.855L1869.51 98.1431L1898.78 127.411L1888.06 167.393L1848.08 178.105L1818.81 148.837Z" fill="#5BFFFF"/>
+		<path opacity="0.2" d="M1890.91 199.089L1901.62 159.108L1941.61 148.395L1970.87 177.664L1960.16 217.646L1920.18 228.358L1890.91 199.089Z" fill="#5BFFFF"/>
+		<path opacity="0.2" d="M1934.36 225.131L1942.33 195.379L1972.08 187.408L1993.86 209.188L1985.89 238.939L1956.14 246.911L1934.36 225.131Z" fill="#5BFFFF"/>
+		<path opacity="0.2" d="M1828.32 131.704C1838.86 131.704 1847.41 123.16 1847.41 112.621C1847.41 102.082 1838.86 93.5381 1828.32 93.5381C1817.78 93.5381 1809.24 102.082 1809.24 112.621C1809.24 123.16 1817.78 131.704 1828.32 131.704Z" fill="#5BFFFF"/>
+		<path opacity="0.2" d="M1802.2 98.6581C1807.4 98.6581 1811.6 94.4504 1811.6 89.2601C1811.6 84.0697 1807.4 79.8621 1802.2 79.8621C1797.01 79.8621 1792.81 84.0697 1792.81 89.2601C1792.81 94.4504 1797.01 98.6581 1802.2 98.6581Z" fill="#5BFFFF"/>
+		<path opacity="0.2" d="M1726.2 35.1551C1731.39 35.1551 1735.59 30.9479 1735.59 25.7581C1735.59 20.5683 1731.39 16.3611 1726.2 16.3611C1721.01 16.3611 1716.8 20.5683 1716.8 25.7581C1716.8 30.9479 1721.01 35.1551 1726.2 35.1551Z" fill="#5BFFFF"/>
+		<path opacity="0.3" d="M1909.82 39.2891C1835.93 39.2891 1776.03 99.1881 1776.03 173.079C1776.03 246.973 1835.93 306.872 1909.82 306.872C1983.71 306.872 2043.61 246.973 2043.61 173.079C2043.61 99.1881 1983.71 39.2891 1909.82 39.2891ZM1909.82 306.053C1836.38 306.053 1776.84 246.518 1776.84 173.078C1776.84 99.6411 1836.38 40.1061 1909.82 40.1061C1983.26 40.1061 2042.79 99.6411 2042.79 173.078C2042.79 246.519 1983.26 306.053 1909.82 306.053Z" fill="url(#paint23_radial)"/>
+		<rect x="1842" y="107" width="135" height="128" fill="url(#pattern4)"/>
+		<path d="M1927.64 143.163L1909.53 174.868L1891.43 143.163H1878.25L1909.53 198.528L1940.82 143.163H1927.64Z" fill="white"/>
+	</g>
+	<defs>
+		<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image0"/>
+		</pattern>
+		<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image0"/>
+		</pattern>
+		<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image1"/>
+		</pattern>
+		<pattern id="pattern3" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image2"/>
+		</pattern>
+		<pattern id="pattern4" patternContentUnits="objectBoundingBox" width="1" height="1">
+			<use xlink:href="#image3"/>
+		</pattern>
+		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.08 171.254) scale(98.5972)">
+			<stop stop-color="#00B6FF"/>
+			<stop offset="0.0695" stop-color="#00A6EF"/>
+			<stop offset="0.283" stop-color="#0079C2"/>
+			<stop offset="0.4888" stop-color="#00569F"/>
+			<stop offset="0.6819" stop-color="#003D86"/>
+			<stop offset="0.8576" stop-color="#002E77"/>
+			<stop offset="1" stop-color="#002972"/>
+		</radialGradient>
+		<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1913.3 290.081) scale(303.059 303.059)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0472" stop-color="#00EEF3"/>
+			<stop offset="0.2471" stop-color="#00ADC2"/>
+			<stop offset="0.4375" stop-color="#00779A"/>
+			<stop offset="0.6131" stop-color="#004D7A"/>
+			<stop offset="0.7708" stop-color="#002E64"/>
+			<stop offset="0.9051" stop-color="#001C56"/>
+			<stop offset="1" stop-color="#001551"/>
+		</radialGradient>
+		<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1909.89 244.799) scale(132.779)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0472" stop-color="#00EEF3"/>
+			<stop offset="0.2471" stop-color="#00ADC2"/>
+			<stop offset="0.4375" stop-color="#00779A"/>
+			<stop offset="0.6131" stop-color="#004D7A"/>
+			<stop offset="0.7708" stop-color="#002E64"/>
+			<stop offset="0.9051" stop-color="#001C56"/>
+			<stop offset="1" stop-color="#001551"/>
+		</radialGradient>
+		<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1951.59 51.4336) scale(160.486 160.486)">
+			<stop stop-color="#002551"/>
+			<stop offset="0.2276" stop-color="#00194B"/>
+			<stop offset="0.6795" stop-color="#000743"/>
+			<stop offset="1" stop-color="#000040"/>
+		</radialGradient>
+		<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.185 117.196)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.193 117.193)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.195 117.195)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.19 117.19)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.197 117.197)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.191)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.033) scale(117.195)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.034) scale(117.197 117.196)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.14 169.034) scale(117.215 117.215)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint13_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.13 169.038) scale(117.2 117.201)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.1647" stop-color="#00CEE9"/>
+			<stop offset="0.4721" stop-color="#0077C3"/>
+			<stop offset="0.7234" stop-color="#0037A6"/>
+			<stop offset="0.9055" stop-color="#000F95"/>
+			<stop offset="1" stop-color="#00008E"/>
+		</radialGradient>
+		<radialGradient id="paint14_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1909.67 175.938) scale(152.729)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0258" stop-color="#00F9FF" stop-opacity="0.9742"/>
+			<stop offset="0.1593" stop-color="#00DFFF" stop-opacity="0.8407"/>
+			<stop offset="0.3065" stop-color="#00CAFF" stop-opacity="0.6935"/>
+			<stop offset="0.4724" stop-color="#00BCFF" stop-opacity="0.5276"/>
+			<stop offset="0.6724" stop-color="#00B4FF" stop-opacity="0.3276"/>
+			<stop offset="1" stop-color="#00B1FF" stop-opacity="0"/>
+		</radialGradient>
+		<linearGradient id="paint15_linear" x1="1844.06" y1="288.025" x2="1844.06" y2="115.88" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#00ACFF"/>
+			<stop offset="0.1331" stop-color="#008BDA"/>
+			<stop offset="0.3503" stop-color="#005AA5"/>
+			<stop offset="0.5531" stop-color="#00337B"/>
+			<stop offset="0.7353" stop-color="#00175C"/>
+			<stop offset="0.8904" stop-color="#00064A"/>
+			<stop offset="1" stop-color="#000043"/>
+		</linearGradient>
+		<linearGradient id="paint16_linear" x1="1974.87" y1="288.025" x2="1974.87" y2="115.88" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#00ACFF"/>
+			<stop offset="0.1331" stop-color="#008BDA"/>
+			<stop offset="0.3503" stop-color="#005AA5"/>
+			<stop offset="0.5531" stop-color="#00337B"/>
+			<stop offset="0.7353" stop-color="#00175C"/>
+			<stop offset="0.8904" stop-color="#00064A"/>
+			<stop offset="1" stop-color="#000043"/>
+		</linearGradient>
+		<radialGradient id="paint17_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1906.92 220.136) scale(361.715)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0472" stop-color="#00EEF3"/>
+			<stop offset="0.2471" stop-color="#00ADC2"/>
+			<stop offset="0.4375" stop-color="#00779A"/>
+			<stop offset="0.6131" stop-color="#004D7A"/>
+			<stop offset="0.7708" stop-color="#002E64"/>
+			<stop offset="0.9051" stop-color="#001C56"/>
+			<stop offset="1" stop-color="#001551"/>
+		</radialGradient>
+		<radialGradient id="paint18_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1910.64 102.811) scale(113.891 113.891)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0472" stop-color="#00EEF3"/>
+			<stop offset="0.2471" stop-color="#00ADC2"/>
+			<stop offset="0.4375" stop-color="#00779A"/>
+			<stop offset="0.6131" stop-color="#004D7A"/>
+			<stop offset="0.7708" stop-color="#002E64"/>
+			<stop offset="0.9051" stop-color="#001C56"/>
+			<stop offset="1" stop-color="#001551"/>
+		</radialGradient>
+		<radialGradient id="paint19_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1912 163.444) scale(129.055 129.055)">
+			<stop stop-color="#00FFFF"/>
+			<stop offset="0.0472" stop-color="#00EEF3"/>
+			<stop offset="0.2471" stop-color="#00ADC2"/>
+			<stop offset="0.4375" stop-color="#00779A"/>
+			<stop offset="0.6131" stop-color="#004D7A"/>
+			<stop offset="0.7708" stop-color="#002E64"/>
+			<stop offset="0.9051" stop-color="#001C56"/>
+			<stop offset="1" stop-color="#001551"/>
+		</radialGradient>
+		<radialGradient id="paint20_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1903.85 158.281) scale(204.297)">
+			<stop stop-color="white"/>
+			<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+			<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+			<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+			<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+			<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+			<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+			<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+		</radialGradient>
+		<radialGradient id="paint21_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1911.12 170.215) scale(213.176)">
+			<stop stop-color="white"/>
+			<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+			<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+			<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+			<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+			<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+			<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+			<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+		</radialGradient>
+		<radialGradient id="paint22_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2016.99 299.678) scale(350.849)">
+			<stop stop-color="white"/>
+			<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+			<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+			<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+			<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+			<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+			<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+			<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+		</radialGradient>
+		<radialGradient id="paint23_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2146.98 453.229) scale(776.406)">
+			<stop stop-color="white"/>
+			<stop offset="0.036" stop-color="#F2FFFF" stop-opacity="0.964"/>
+			<stop offset="0.2466" stop-color="#A9FFFF" stop-opacity="0.7534"/>
+			<stop offset="0.4447" stop-color="#6DFFFF" stop-opacity="0.5553"/>
+			<stop offset="0.6247" stop-color="#3EFFFF" stop-opacity="0.3753"/>
+			<stop offset="0.7829" stop-color="#1CFFFF" stop-opacity="0.2171"/>
+			<stop offset="0.9134" stop-color="#07FFFF" stop-opacity="0.0866"/>
+			<stop offset="1" stop-color="#00FFFF" stop-opacity="0"/>
+		</radialGradient>
+		<image id="image0" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+		<image id="image1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAACyCAYAAAANvS5rAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+		<image id="image2" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAADaCAYAAADAHVzbAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+		<image id="image3" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACACAYAAAAh4nqyAAAACXBIWXMAAAsSAAALEgHS3X78AAAA"/>
+	</defs>
+</svg>
diff --git a/src/public/vuemastery/vuemastery-white.svg b/src/public/vuemastery/vuemastery-white.svg
new file mode 100644
index 00000000..bf97acde
--- /dev/null
+++ b/src/public/vuemastery/vuemastery-white.svg
@@ -0,0 +1,32 @@
+<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>
diff --git a/src/tutorial/src/step-11/App/composition.js b/src/tutorial/src/step-11/App/composition.js
index 464d263d..e059be9c 100644
--- a/src/tutorial/src/step-11/App/composition.js
+++ b/src/tutorial/src/step-11/App/composition.js
@@ -1,3 +1,3 @@
 export default {
-  // register component
+  // register child component
 }
diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md
index 5e08783a..d5320271 100644
--- a/src/tutorial/src/step-2/description.md
+++ b/src/tutorial/src/step-2/description.md
@@ -63,7 +63,7 @@ setup() {‎
 
 ```vue-html
 <h1>{{ message }}</h1>
-<p>count is: {{ counter.count }}</p>
+<p>Count is: {{ counter.count }}</p>
 ```
 
 توجه کنید که نیازی به استفاده از `‎.value` هنگام دسترسی به `message` که ref است در تمپلیت‌ها نیست: به طور خودکار برای کوتاه‌سازی تبدیل می‌شود.
diff --git a/src/tutorial/src/step-4/App/template.html b/src/tutorial/src/step-4/App/template.html
index 226879ca..6e1e32ad 100644
--- a/src/tutorial/src/step-4/App/template.html
+++ b/src/tutorial/src/step-4/App/template.html
@@ -1,2 +1,2 @@
 <!-- make this button work -->
-<button>count is: {{ count }}</button>
+<button>Count is: {{ count }}</button>
diff --git a/src/tutorial/src/step-4/_hint/App/template.html b/src/tutorial/src/step-4/_hint/App/template.html
index c5e27442..f98cca45 100644
--- a/src/tutorial/src/step-4/_hint/App/template.html
+++ b/src/tutorial/src/step-4/_hint/App/template.html
@@ -1 +1 @@
-<button @click="increment">count is: {{ count }}</button>
+<button @click="increment">Count is: {{ count }}</button>
diff --git a/src/tutorial/src/step-6/App/template.html b/src/tutorial/src/step-6/App/template.html
index fe169f66..e2d8b5b0 100644
--- a/src/tutorial/src/step-6/App/template.html
+++ b/src/tutorial/src/step-6/App/template.html
@@ -1,3 +1,3 @@
-<button @click="toggle">toggle</button>
+<button @click="toggle">Toggle</button>
 <h1>Vue is awesome!</h1>
 <h1>Oh no 😢</h1>
diff --git a/src/tutorial/src/step-6/_hint/App/template.html b/src/tutorial/src/step-6/_hint/App/template.html
index 6a1daffe..15a031d1 100644
--- a/src/tutorial/src/step-6/_hint/App/template.html
+++ b/src/tutorial/src/step-6/_hint/App/template.html
@@ -1,3 +1,3 @@
-<button @click="toggle">toggle</button>
+<button @click="toggle">Toggle</button>
 <h1 v-if="awesome">Vue is awesome!</h1>
 <h1 v-else>Oh no 😢</h1>
diff --git a/src/tutorial/src/step-9/App/template.html b/src/tutorial/src/step-9/App/template.html
index 7e66d451..0c876e44 100644
--- a/src/tutorial/src/step-9/App/template.html
+++ b/src/tutorial/src/step-9/App/template.html
@@ -1 +1 @@
-<p ref="pElementRef">hello</p>
+<p ref="pElementRef">Hello</p>