From 620df97db9f2e74dffd5c9c01eac9b8dc28c3a54 Mon Sep 17 00:00:00 2001
From: Israel Ugbodaga <israelugbodaga@gmail.com>
Date: Mon, 11 Nov 2024 03:45:49 +0100
Subject: [PATCH] add vuemastery banner black friday 2024

---
 .../theme/components/VueMasteryBanner.vue     | 253 ++++++++++++++++++
 .vitepress/theme/index.ts                     |   6 +-
 .../background-bubbles-vuemastery.svg         | 110 ++++++++
 src/public/vuemastery/vuemastery-white.svg    |  32 +++
 4 files changed, 399 insertions(+), 2 deletions(-)
 create mode 100644 .vitepress/theme/components/VueMasteryBanner.vue
 create mode 100644 src/public/vuemastery/background-bubbles-vuemastery.svg
 create mode 100644 src/public/vuemastery/vuemastery-white.svg

diff --git a/.vitepress/theme/components/VueMasteryBanner.vue b/.vitepress/theme/components/VueMasteryBanner.vue
new file mode 100644
index 0000000000..0b42c4e691
--- /dev/null
+++ b/.vitepress/theme/components/VueMasteryBanner.vue
@@ -0,0 +1,253 @@
+<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/black-friday" 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">BLACK FRIDAY</h1>
+          <p class="vm-banner-sub">Get 60% off a year of Vue Mastery</p>
+        </div>
+        <button id="vm-banner-cta">CLAIM DISCOUNT</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-BLACK-FRIDAY-NOV-20-DEC-4-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%;
+}
+
+#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 9ea1fb93ff..212b41382b 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -10,14 +10,16 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
-import Banner from './components/Banner.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(Banner),
+      banner: () => h(VueMasteryBanner),
       'sidebar-top': () => h(PreferenceSwitch),
       'sidebar-bottom': () => h(SecurityUpdateBtn),
       'aside-mid': () => h(SponsorsAside)
diff --git a/src/public/vuemastery/background-bubbles-vuemastery.svg b/src/public/vuemastery/background-bubbles-vuemastery.svg
new file mode 100644
index 0000000000..886d9e89bb
--- /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/vuemastery-white.svg b/src/public/vuemastery/vuemastery-white.svg
new file mode 100644
index 0000000000..bf97acdeba
--- /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>