From 662c7daaf3a614d2fc74fe06cda13593cfa103c0 Mon Sep 17 00:00:00 2001
From: Ashley Marques <marques.ashley@gmail.com>
Date: Fri, 1 Dec 2023 01:40:41 -0300
Subject: [PATCH] add vue 2 nes banner (#2581)

---
 .../inlined-scripts/restorePreference.js      |   4 +-
 .vitepress/theme/components/Banner.vue        | 355 +++++++++++++++++-
 .vitepress/theme/index.ts                     |   4 +-
 3 files changed, 340 insertions(+), 23 deletions(-)

diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js
index 5e18b50ffa..265db2737a 100644
--- a/.vitepress/inlined-scripts/restorePreference.js
+++ b/.vitepress/inlined-scripts/restorePreference.js
@@ -8,6 +8,6 @@
   restore('vue-docs-prefer-composition', 'prefer-composition', true)
   restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
-  // window.__VUE_BANNER_ID__ = ''
-  // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
+  window.__VUE_BANNER_ID__ = 'herodevs-vue2-nes'
+  restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()
diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue
index 6730fcd48d..e60de21c8d 100644
--- a/.vitepress/theme/components/Banner.vue
+++ b/.vitepress/theme/components/Banner.vue
@@ -22,24 +22,168 @@ function dismiss() {
 
 <template>
   <div class="banner" v-if="open">
-    <a target="_blank"></a>
-    <button @click="dismiss">
-      <VTIconPlus class="close" />
-    </button>
+    <a
+      class="banner__container"
+      target="_blank"
+      href="https://www.herodevs.com/support/nes-vue?utm_source=vuejs-org&utm_medium=banner&utm_campaign=eol-by-eoy"
+    >
+      <svg
+        id="herodevs_logo"
+        width="158"
+        height="39"
+        viewBox="0 0 158 39"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.0452 15.5193C8.1975 14.0655 8.74561 26.7218 14.3969 23.2543C16.0279 22.2534 18.1777 20.8149 20.7508 20.8149C23.0721 20.8149 24.3422 23.3645 26.6636 23.3645C30.0074 22.9956 29.8636 16.5603 27.6048 16.3521C25.2295 16.3521 23.283 20.4188 20.2091 19.4631C17.555 18.6381 14.831 16.0547 13.0452 15.5193ZM13.7012 13.4791C16.1773 14.2216 18.3342 16.6238 20.8343 17.4009C21.0378 17.4642 21.2109 17.4657 21.4157 17.4094C21.8943 17.278 22.4424 16.8688 22.8353 16.5673C24.2855 15.4544 25.6192 14.217 27.5513 14.217H27.648L27.7443 14.226C32.7224 14.6849 32.6743 25.0216 26.8475 25.6646L26.7326 25.6773H26.5887C26.4046 25.6773 26.2198 25.6718 26.0371 25.6488C24.5381 25.4602 23.5156 24.7725 22.4515 24.017C22.0279 23.7162 21.2961 23.146 20.7465 23.146C18.8428 23.146 17.127 24.2838 15.5473 25.2532C13.9924 26.2072 12.1797 26.5528 10.5301 25.6194C8.58366 24.518 7.7455 22.1024 7.65976 19.9244C7.5707 17.6642 8.27368 15.0092 10.304 13.8251C11.3583 13.2102 12.5503 13.1339 13.7012 13.4791Z"
+          fill="url(#paint0_linear_4505_2379)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M17.9497 5.17539C-1.0205 3.91536 11.1694 5.09879 6.92234 10.7882C5.11346 13.2134 4.03283 16.2561 4.03283 19.5726C4.03283 27.5238 10.2637 33.9694 17.9497 33.9694C23.6403 33.9694 28.5326 30.436 30.6896 25.3756C32.035 22.664 32.8455 18.7261 30.7129 13.9061C28.5649 8.93155 23.6514 5.55449 17.9497 5.17539ZM18.0955 2.83086C26.825 3.41051 34.1384 10.2482 34.1384 19.5726C34.1384 28.8209 26.8897 36.3191 17.9497 36.3191C9.01046 36.3191 1.76172 28.8203 1.76172 19.5726C1.76172 15.8637 2.93322 12.2892 5.12439 9.35235C5.44884 8.91764 5.75017 8.44702 5.55872 7.89451C5.13486 6.67308 4.23897 6.01743 4.77682 4.40303C5.44097 2.40924 7.60847 2.36038 9.2898 2.36973C12.1915 2.38602 15.198 2.63844 18.0955 2.83086Z"
+          fill="url(#paint1_linear_4505_2379)"
+        />
+        <path
+          id="hero_text1"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M106.486 26.8296C103.804 26.8296 101.453 24.5983 101.453 21.1085V21.0513C101.453 17.4754 103.721 15.3587 106.486 15.3587C109.141 15.3587 111.657 17.647 111.657 21.0513V21.1085C111.657 24.5124 109.141 26.8296 106.486 26.8296ZM118.417 20.2487C118.697 17.3281 120.597 15.1597 123.113 15.1597C125.992 15.1597 127.501 17.5306 127.724 20.2487H118.417ZM123.532 29.0552C126.272 29.0552 128.032 27.9275 129.486 26.2504L128.144 25.0073C126.97 26.2794 125.573 27.1178 123.588 27.1178C121.017 27.1178 118.809 25.2963 118.502 22.0582H129.961C129.989 21.798 129.989 21.6245 129.989 21.3352C129.989 16.9692 127.529 13.4418 123.253 13.4418C119.256 13.4418 116.322 16.9115 116.322 21.2194V21.2775C116.322 25.9035 119.564 29.0552 123.532 29.0552ZM136.272 28.6932H138.175L144.47 13.6138H142.148L137.251 26.0301L132.383 13.6138H130.005L136.272 28.6932ZM150.535 28.858C153.414 28.858 155.679 27.2096 155.679 24.3755V24.3581C155.679 21.6377 153.247 20.7308 150.985 20.0288C149.034 19.4145 147.224 18.8589 147.224 17.4256V17.3822C147.224 16.1555 148.3 15.2428 149.982 15.2428C151.361 15.2428 152.877 15.7846 154.201 16.669L155.166 15.0143C153.704 14.0161 151.774 13.3884 150.037 13.3884C147.224 13.3884 145.184 15.0717 145.184 17.6104V17.6682C145.184 20.4381 147.72 21.2542 150.003 21.925C151.919 22.4785 153.638 23.0619 153.638 24.5777V24.607C153.638 26.0528 152.38 26.978 150.647 26.978C148.942 26.978 147.209 26.284 145.644 25.0695L144.554 26.66C146.174 28.019 148.467 28.858 150.535 28.858ZM106.079 28.8068C108.755 28.8068 110.474 27.2745 111.657 25.4821V28.3916H113.698V9.69315H111.657V16.403C110.53 14.7261 108.784 13.2225 106.079 13.2225C102.586 13.2225 99.1211 16.1141 99.1211 21.0002V21.0583C99.1211 25.9734 102.586 28.8068 106.079 28.8068Z"
+          fill="url(#paint2_linear_4505_2379)"
+        />
+        <path
+          id="hero_text2"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M64.0917 28.9232C62.9737 28.9232 61.9347 28.7305 60.9752 28.345C60.0158 27.9594 59.1867 27.4099 58.4876 26.697C57.7887 25.9835 57.2439 25.1402 56.8526 24.1668C56.4614 23.1935 56.2658 22.1092 56.2658 20.914V20.8562C56.2658 19.7576 56.4474 18.7168 56.8106 17.7336C57.1742 16.7505 57.682 15.8925 58.3339 15.1604C58.9861 14.4278 59.7642 13.8494 60.6679 13.4252C61.5717 13.0015 62.5731 12.7893 63.6725 12.7893C64.9211 12.7893 66.0016 13.0204 66.9146 13.4833C67.8277 13.9457 68.5869 14.5675 69.1927 15.3482C69.7982 16.1289 70.2454 17.0253 70.5343 18.0372C70.8227 19.049 70.9676 20.1046 70.9676 21.2032C70.9676 21.3766 70.9629 21.5597 70.9536 21.7526C70.9439 21.9452 70.9302 22.1478 70.9116 22.3599H60.4863C60.6913 23.3622 61.1152 24.1185 61.758 24.6294C62.4005 25.1402 63.1973 25.3958 64.1477 25.3958C64.8555 25.3958 65.489 25.2704 66.0482 25.0197C66.6074 24.7692 67.1849 24.3645 67.7811 23.8054L70.2128 26.0316C69.5046 26.9376 68.6472 27.6462 67.6411 28.1568C66.6351 28.6676 65.4517 28.9232 64.0917 28.9232ZM66.6969 19.6456C66.5663 18.6627 66.231 17.8674 65.6905 17.2602C65.15 16.653 64.4328 16.3494 63.5384 16.3494C62.644 16.3494 61.9218 16.6482 61.3723 17.246C60.8227 17.8435 60.4639 18.6433 60.2962 19.6456H66.6969ZM72.3002 13.0107H76.6732V16.0713C77.0912 15.032 77.6641 14.2011 78.3918 13.5776C79.1191 12.954 80.1013 12.6706 81.3377 12.7274V17.2329H81.1194C79.7375 17.2329 78.6507 17.6672 77.8597 18.5364C77.0685 19.4053 76.6732 20.756 76.6732 22.5883V28.3916H72.3002V13.0107ZM90.0558 28.9724C88.892 28.9724 87.8133 28.7637 86.8186 28.3465C85.8242 27.9289 84.9656 27.3563 84.2429 26.6281C83.5204 25.9004 82.9528 25.0461 82.5403 24.066C82.1272 23.0856 81.9208 22.0324 81.9208 20.9065V20.8483C81.9208 19.7223 82.1272 18.6692 82.5403 17.689C82.9528 16.7085 83.5251 15.8494 84.2569 15.112C84.9889 14.3743 85.8521 13.7916 86.8469 13.3646C87.8413 12.9377 88.9296 12.7242 90.112 12.7242C91.2756 12.7242 92.3542 12.9329 93.3489 13.3501C94.3434 13.7677 95.2022 14.3402 95.9247 15.0684C96.6471 15.7961 97.2144 16.6504 97.6272 17.6306C98.0403 18.611 98.2467 19.6642 98.2467 20.7901V20.8483C98.2467 21.9743 98.0403 23.0274 97.6272 24.0075C97.2144 24.9881 96.6424 25.8469 95.9107 26.5846C95.1786 27.3223 94.3154 27.9049 93.3207 28.3317C92.3265 28.7588 91.2379 28.9724 90.0558 28.9724ZM89.966 25.1524C90.5846 25.1524 91.1327 25.0408 91.6105 24.8179C92.0884 24.5949 92.4962 24.2895 92.8335 23.9019C93.1708 23.514 93.4285 23.0634 93.6064 22.5495C93.7848 22.0357 93.8737 21.4882 93.8737 20.9064V20.8483C93.8737 20.2668 93.7801 19.7189 93.5924 19.2051C93.4052 18.6912 93.1332 18.2358 92.7772 17.8383C92.421 17.4409 91.9994 17.126 91.5123 16.8931C91.0248 16.6606 90.491 16.5442 89.9097 16.5442C89.2914 16.5442 88.743 16.6557 88.2655 16.8786C87.7873 17.1016 87.3798 17.407 87.0425 17.7947C86.7052 18.1825 86.4474 18.6332 86.269 19.147C86.0912 19.6609 86.0023 20.2083 86.0023 20.7902V20.8483C86.0023 21.4298 86.0959 21.9777 86.2833 22.4915C86.4708 23.005 86.7428 23.4608 87.0987 23.8583C87.455 24.2556 87.8716 24.5705 88.3497 24.8034C88.8275 25.036 89.3663 25.1524 89.966 25.1524ZM45.1875 9.69321V15.4124C45.4335 15.0797 45.7029 14.7666 45.9965 14.463C46.2898 14.1641 46.6157 13.8992 46.9754 13.6629C47.3346 13.4316 47.7323 13.2486 48.1672 13.1086C48.6025 12.9737 49.0943 12.9064 49.6427 12.9064C51.289 12.9064 52.5612 13.4172 53.46 14.4387C54.3586 15.4605 54.8081 16.8675 54.8081 18.6604V28.6932H50.4351V20.0673C50.4351 19.0312 50.2106 18.2457 49.7616 17.7206C49.3127 17.1905 48.6768 16.9255 47.8533 16.9255C47.0305 16.9255 46.3801 17.1905 45.9032 17.7206C45.4259 18.2457 45.1875 19.0312 45.1875 20.0673V28.3916H40.8145V9.69321H45.1875Z"
+          fill="white"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_4505_2379"
+            x1="7.65234"
+            y1="20.2175"
+            x2="31.358"
+            y2="20.0106"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F926E1" />
+            <stop offset="1" stop-color="#2AB5FB" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_4505_2379"
+            x1="1.76172"
+            y1="20.6498"
+            x2="34.1437"
+            y2="20.5032"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F926E1" />
+            <stop offset="1" stop-color="#2AB5FB" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_4505_2379"
+            x1="99.1211"
+            y1="20.1189"
+            x2="155.678"
+            y2="19.3345"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F926E1" />
+            <stop offset="1" stop-color="#2AB5FB" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <div class="banner__middle">
+        <div class="title gradient_text">
+          Haven't migrated to Vue 3 yet?
+        </div>
+        <div class="separator"></div>
+        <div class="subtitle white_text">
+          Explore Never-Ending Support for Vue 2 by HeroDevs
+        </div>
+        <div class="cta_button_container">
+          <button class="cta_button">Learn more</button>
+        </div>
+      </div>
+      <svg
+        id="vuenes_logo"
+        width="175"
+        height="35"
+        viewBox="0 0 175 35"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M27.5598 0.343994L22.9235 8.19587L18.2872 0.343994H2.84766L22.9235 34.344L42.9993 0.343994H27.5598Z"
+          fill="url(#paint0_linear_4505_2374)"
+        />
+        <path
+          d="M27.5587 0.344048L22.9224 8.19593L18.2862 0.344048H10.877L22.9224 20.7437L34.9679 0.344048H27.5587Z"
+          fill="#34495E"
+        />
+        <path
+          id="vuenes_text"
+          d="M51.5644 7.88399H55.8024L60.7684 22.054L65.7084 7.88399H69.7904L62.7704 26.344H58.5844L51.5644 7.88399ZM71.0634 12.616H74.7034V20.286C74.7034 21.924 75.4574 23.458 77.3034 23.458C79.1494 23.458 79.9034 21.924 79.9034 20.286V12.616H83.5434V20.208C83.5434 23.952 81.2294 26.734 77.2514 26.734C73.4034 26.734 71.0634 24.082 71.0634 20.208V12.616ZM85.9301 19.454C85.9301 15.554 88.6601 12.226 92.7681 12.226C96.9541 12.226 99.4761 15.32 99.4761 19.48V20.39H89.6221C89.9081 22.21 91.0001 23.666 92.9761 23.666C94.2761 23.666 95.2641 23.042 95.9401 21.95L99.1901 22.99C98.2021 25.46 95.5241 26.734 92.9501 26.734C88.8161 26.734 85.9301 23.614 85.9301 19.454ZM92.7681 15.034C91.0261 15.034 89.9861 16.334 89.6741 17.946H95.7321C95.4981 16.334 94.5101 15.034 92.7681 15.034ZM106.649 13.136C107.273 10.042 109.821 8.01399 112.993 8.01399C116.347 8.01399 119.051 10.328 119.051 13.838C119.051 14.618 118.921 15.346 118.635 16.048C117.595 18.596 114.423 21.352 112.369 23.068H119.363V26.344H106.831V23.64L108.651 22.08C110.471 20.52 112.291 18.934 113.825 17.062C114.605 16.1 115.229 15.164 115.229 13.89C115.229 12.408 114.423 11.316 112.863 11.316C111.381 11.316 110.497 12.382 110.159 13.734L106.649 13.136ZM127.665 7.88399H131.019L139.573 20.104V7.88399H143.317V26.344H139.963L131.409 14.124V26.344H127.665V7.88399ZM146.708 7.88399H158.278V11.186H150.452V15.216H157.446V18.518H150.452V23.042H158.538V26.344H146.708V7.88399ZM160.571 21.898L164.185 21.118C164.679 22.574 165.849 23.38 167.383 23.38C168.787 23.38 170.191 22.652 170.191 21.066C170.191 19.558 168.657 19.09 167.435 18.804L166.603 18.622C163.717 17.998 161.039 16.516 161.039 13.214C161.039 9.70399 164.081 7.49399 167.461 7.49399C170.425 7.49399 173.129 9.18399 173.779 12.226L170.217 13.006C170.009 12.304 169.645 11.784 169.151 11.394C168.631 11.03 168.033 10.848 167.357 10.848C166.135 10.848 164.887 11.576 164.887 12.954C164.887 14.436 166.499 14.878 167.669 15.138L168.501 15.32C171.465 15.97 174.065 17.348 174.065 20.754C174.065 24.498 170.945 26.734 167.331 26.734C164.289 26.734 161.299 25.018 160.571 21.898Z"
+          fill="white"
+        />
+        <path
+          d="M51.5644 7.88399H55.8024L60.7684 22.054L65.7084 7.88399H69.7904L62.7704 26.344H58.5844L51.5644 7.88399ZM71.0634 12.616H74.7034V20.286C74.7034 21.924 75.4574 23.458 77.3034 23.458C79.1494 23.458 79.9034 21.924 79.9034 20.286V12.616H83.5434V20.208C83.5434 23.952 81.2294 26.734 77.2514 26.734C73.4034 26.734 71.0634 24.082 71.0634 20.208V12.616ZM85.9301 19.454C85.9301 15.554 88.6601 12.226 92.7681 12.226C96.9541 12.226 99.4761 15.32 99.4761 19.48V20.39H89.6221C89.9081 22.21 91.0001 23.666 92.9761 23.666C94.2761 23.666 95.2641 23.042 95.9401 21.95L99.1901 22.99C98.2021 25.46 95.5241 26.734 92.9501 26.734C88.8161 26.734 85.9301 23.614 85.9301 19.454ZM92.7681 15.034C91.0261 15.034 89.9861 16.334 89.6741 17.946H95.7321C95.4981 16.334 94.5101 15.034 92.7681 15.034ZM106.649 13.136C107.273 10.042 109.821 8.01399 112.993 8.01399C116.347 8.01399 119.051 10.328 119.051 13.838C119.051 14.618 118.921 15.346 118.635 16.048C117.595 18.596 114.423 21.352 112.369 23.068H119.363V26.344H106.831V23.64L108.651 22.08C110.471 20.52 112.291 18.934 113.825 17.062C114.605 16.1 115.229 15.164 115.229 13.89C115.229 12.408 114.423 11.316 112.863 11.316C111.381 11.316 110.497 12.382 110.159 13.734L106.649 13.136ZM127.665 7.88399H131.019L139.573 20.104V7.88399H143.317V26.344H139.963L131.409 14.124V26.344H127.665V7.88399ZM146.708 7.88399H158.278V11.186H150.452V15.216H157.446V18.518H150.452V23.042H158.538V26.344H146.708V7.88399ZM160.571 21.898L164.185 21.118C164.679 22.574 165.849 23.38 167.383 23.38C168.787 23.38 170.191 22.652 170.191 21.066C170.191 19.558 168.657 19.09 167.435 18.804L166.603 18.622C163.717 17.998 161.039 16.516 161.039 13.214C161.039 9.70399 164.081 7.49399 167.461 7.49399C170.425 7.49399 173.129 9.18399 173.779 12.226L170.217 13.006C170.009 12.304 169.645 11.784 169.151 11.394C168.631 11.03 168.033 10.848 167.357 10.848C166.135 10.848 164.887 11.576 164.887 12.954C164.887 14.436 166.499 14.878 167.669 15.138L168.501 15.32C171.465 15.97 174.065 17.348 174.065 20.754C174.065 24.498 170.945 26.734 167.331 26.734C164.289 26.734 161.299 25.018 160.571 21.898Z"
+          fill="url(#paint1_linear_4505_2374)"
+          fill-opacity="0.024"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_4505_2374"
+            x1="2.84766"
+            y1="18.6517"
+            x2="43.0054"
+            y2="18.4265"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F926E1" />
+            <stop offset="1" stop-color="#2AB5FB" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_4505_2374"
+            x1="51"
+            y1="16.2671"
+            x2="174.968"
+            y2="18.8737"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#F926E1" />
+            <stop offset="1" stop-color="#2AB5FB" />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <button id="dismiss_button" @click.stop.prevent="dismiss">
+        <VTIconPlus class="close" />
+      </button>
+    </a>
   </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
-  --vt-banner-height: 30px;
+  --vt-banner-height: 72px;
 }
 </style>
 
 <style scoped>
 .banner {
+  --gradient_text_size: 13px;
+  --white_text_size: 10px;
+  --banner_container_gap: 0;
+
   position: fixed;
   z-index: var(--vp-z-index-banner);
   box-sizing: border-box;
+  padding: 12px;
   top: 0;
   left: 0;
   right: 0;
@@ -51,22 +195,114 @@ html:not(.banner-dismissed) {
   color: #fff;
   background-color: var(--vt-c-green);
   background: linear-gradient(
-    90deg,
-    rgba(66, 184, 131, 1) 0%,
-    rgba(39, 179, 137, 1) 19%,
-    rgba(100, 126, 255, 1) 100%
-  );
+      0deg,
+      rgba(13, 13, 13, 0.76) 0%,
+      rgba(13, 13, 13, 0.76) 100%
+    ),
+    linear-gradient(90deg, #f926e1 0.22%, #2ab5fb 99.76%);
 }
 
-.banner-dismissed .banner {
+.banner__container {
+  cursor: pointer;
+  text-decoration: none;
+  display: flex;
+  height: 46px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--banner_container_gap);
+}
+
+.banner__container .banner__middle {
+  display: grid;
+  width: 100%;
+  max-height: 100%;
+  grid-template-columns: [text-col] 1fr [button-col] 0.2fr [end];
+  grid-template-rows: [title] 0.95fr [subtitle] 0.95fr [end];
+  gap: 8px;
+}
+
+.banner__middle .title {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  letter-spacing: 2px;
+  grid-column-start: text-col;
+  grid-column-end: button-col;
+  grid-row-start: title;
+  grid-row-end: subtitle;
+}
+
+.banner__middle .subtitle {
+  grid-row: subtitle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gradient_text {
+  font-size: var(--gradient_text_size);
+  font-style: normal;
+  font-weight: 800;
+  line-height: var(--gradient_text_size); /* 100% */
+  text-transform: uppercase;
+  text-decoration: none;
+  background: linear-gradient(90deg, #f926e1 0.22%, #2ab5fb 99.76%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.white_text {
+  color: var(--vt-c-white, #fff);
+  text-align: center;
+  font-size: var(--white_text_size);
+  font-style: normal;
+  font-weight: 700;
+  line-height: var(--white_text_size);
+}
+
+.separator {
   display: none;
+  width: 0;
+  height: 32px;
+  border-left: 2px solid rgba(255, 255, 255, 0.09);
+}
+.cta_button_container {
+  grid-column: button-col;
+  grid-row: title / end;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.cta_button {
+  width: 106px;
+  min-width: 88px;
+  height: 40px;
+  border-radius: 100px;
+  color: var(--vt-c-dark, #0d0d0d);
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 200% */
+  border-radius: 100px;
+  background: var(--vt-c-white, #fff);
+  transition: box-shadow 350ms ease-in-out;
 }
 
-a:hover {
-  text-decoration: underline;
+.banner__container:hover {
+  .cta_button {
+    box-shadow: 0px 0px 12px 5px #f04cc5;
+  }
 }
 
-button {
+.banner-dismissed .banner {
+  display: none;
+}
+
+button#dismiss_button {
   position: absolute;
   right: 0;
   top: 0;
@@ -79,10 +315,91 @@ button {
   fill: #fff;
   transform: rotate(45deg);
 }
-/*
-@media (max-width: 720px) {
-  a > span {
-    display: none;
+
+#herodevs_logo,
+#hero_text2,
+#hero_text1,
+#vuenes_logo,
+#vuenes_text {
+  display: none;
+}
+
+@media (min-width: 320px) {
+  .banner {
+    --gradient_text_size: 14px;
+    --white_text_size: 10px;
+    --banner_container_gap: 0;
+  }
+}
+@media (min-width: 480px) {
+  .banner {
+    --gradient_text_size: 15px;
+    --white_text_size: 12px;
+    --banner_container_gap: 0;
+  }
+}
+@media (min-width: 600px) {
+  .banner {
+    --gradient_text_size: 18px;
+    --white_text_size: 14px;
+    --banner_container_gap: 0;
+  }
+  .banner {
+    --banner_container_gap: 0;
+  }
+  .cta_button {
+    width: 124px;
+  }
+}
+@media (min-width: 801px) {
+  .banner {
+    --gradient_text_size: 22px;
+    --white_text_size: 16px;
+    --banner_container_gap: 0;
+  }
+  .banner__container {
+    padding: 0 72px;
+  }
+}
+@media (min-width: 910px) {
+  #herodevs_logo {
+    display: block;
   }
-} */
+}
+@media (min-width: 1025px) {
+  #hero_text2,
+  #hero_text1 {
+    display: block;
+  }
+  .banner {
+    --banner_container_gap: 40px;
+  }
+}
+@media (min-width: 1281px) {
+  #vuenes_logo,
+  #vuenes_text {
+    display: block;
+    margin-left: 0;
+  }
+  .banner {
+    --gradient_text_size: 24px;
+    --white_text_size: 18px;
+    --banner_container_gap: 80px;
+  }
+}
+
+@media (min-width: 1380px) {
+  .banner {
+    --gradient_text_size: 28px;
+  }
+  .banner__container .banner__middle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+  }
+  .separator {
+    display: block;
+  }
+}
 </style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 7084831abc..11dd675691 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -9,14 +9,14 @@ 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'
 
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore
     return h(VPTheme.Layout, null, {
-      // banner: () => h(Banner),
+      banner: () => h(Banner),
       'sidebar-top': () => h(PreferenceSwitch),
       'aside-mid': () => h(SponsorsAside)
     })