docs: better mp banner

diff --git a/packages/docs/.vitepress/theme/components/AsideSponsors.vue b/packages/docs/.vitepress/theme/components/AsideSponsors.vue
index c3681808e185a2009818bd22941cc30e9431265b..bdb3d20c1b4691bad431a32fd9a74bff00f4df93 100644 (file)
--- a/packages/docs/.vitepress/theme/components/AsideSponsors.vue
+++ b/packages/docs/.vitepress/theme/components/AsideSponsors.vue
@@ -1,38 +1,82 @@
-<script setup>
-const banners = [
-  {
-    id: 1,
-    name: 'Vue.js Certification',
-    link: 'https://certificates.dev/vuejs?friend=VUEROUTER',
-    image: '/banners/vuejs-certification.svg',
-  },
-  {
-    id: 2,
-    name: 'Mastering Pinia',
-    link: 'https://masteringpinia.com',
-    image: '/banners/mastering-pinia.png',
-  },
-]
-</script>
-
 <template>
   <a
-    v-for="banner in banners"
-    :key="banner.id"
-    :href="banner.link"
+    class="mp-banner"
+    href="https://masteringpinia.com?utm=pinia-sidebar"
     target="_blank"
-    :class="`banner_image_${banner.id}`"
   >
-    <img :src="banner.image" :alt="banner.name" />
+    <img width="22" height="22" src="/mp-pinia-logo.svg" />
+    <span>
+      <p class="extra-info">Complete guide to</p>
+      <p class="heading">Mastering Pinia</p>
+      <p class="extra-info">written by its author</p>
+    </span>
+  </a>
+
+  <a
+    class="banner"
+    href="https://certificates.dev/vuejs?friend=VUEROUTER"
+    target="_blank"
+  >
+    <img src="/banners/vuejs-certification.svg" alt="Vue.js Certification" />
   </a>
 </template>
 
 <style scoped>
-.banner_image_1 {
-  padding: 25px 10px 0px 0px;
+.banner {
+  margin-bottom: 0.5rem;
+}
+
+.mp-banner {
+  margin: 1rem 0;
+  padding: 0.4rem 0;
+  border-radius: 14px;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 1rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+
+.mp-banner:hover {
+  border: 2px solid var(--vp-c-brand-1);
+}
+
+.mp-banner img {
+  transition: transform 0.5s;
+  transform: scale(1.25);
+}
+.mp-banner:hover img {
+  transform: scale(1.75);
+}
+
+.mp-banner .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+
+.mp-banner .heading {
+  background-image: linear-gradient(
+    120deg,
+    var(--vp-c-brand-3) 16%,
+    var(--vp-c-brand-2),
+    var(--vp-c-brand-1)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-.banner_image_2 {
-  padding: 15px 10px 15px 0px;
+.mp-banner:hover .extra-info {
+  opacity: 0.9;
 }
 </style>

diff --git a/packages/docs/public/banners/mastering-pinia.png b/packages/docs/public/banners/mastering-pinia.png
deleted file mode 100644 (file)
index 32d147c..0000000
Binary files a/packages/docs/public/banners/mastering-pinia.png and /dev/null differ

diff --git a/packages/docs/public/mp-pinia-logo.svg b/packages/docs/public/mp-pinia-logo.svg
new file mode 100644 (file)
index 0000000..2acb24f
--- /dev/null
+++ b/packages/docs/public/mp-pinia-logo.svg
@@ -0,0 +1,30 @@
+<svg width="25" height="31" viewBox="0 0 25 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.38789 12.1437C8.47603 14.5334 10.9402 15.7499 12.8915 14.8606C14.8427 13.972 15.5428 11.3145 14.4546 8.92551C13.3665 6.53656 8.77085 0.638059 6.81896 1.52666C4.86775 2.41527 6.29974 9.75474 7.38789 12.1437Z" fill="#62A50A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8321 12.1437C14.7439 14.5334 12.2797 15.7499 10.3285 14.8606C8.37728 13.972 7.67716 11.3145 8.76531 8.92551C9.85346 6.53656 14.4498 0.638059 16.401 1.52666C18.3522 2.41527 16.9202 9.75474 15.8321 12.1437Z" fill="#62A50A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4225 10.3983C15.4225 13.0241 13.684 15.152 11.5401 15.152C9.39626 15.152 7.65771 13.0234 7.65771 10.3983C7.65771 7.77319 9.39557 0.5 11.5401 0.5C13.6846 0.5 15.4225 7.7725 15.4225 10.3983Z" fill="#79C90F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3529 30.4993C18.0919 30.4993 22.7462 28.8319 22.7462 21.2715C22.7462 13.711 18.0919 7.50732 12.3529 7.50732C6.61388 7.50732 1.96301 13.7117 1.96301 21.2721C1.96301 28.8326 6.61388 30.4993 12.3529 30.4993Z" fill="url(#paint0_linear_1627_2)"/>
+<path d="M12.4985 21.8438C12.4032 21.8438 12.3059 21.8383 12.2078 21.8266C11.5622 21.7527 11.0748 21.4772 10.7579 21.0077C10.6937 20.9131 10.7192 20.784 10.8138 20.7198C10.9091 20.6563 11.0375 20.6811 11.1017 20.7757C11.351 21.1451 11.728 21.3543 12.2548 21.4144C12.7878 21.4751 13.2435 21.3446 13.6488 21.0153C13.7372 20.9428 13.8677 20.9566 13.9402 21.0457C14.012 21.1348 13.9988 21.2646 13.9098 21.3371C13.4955 21.674 13.0219 21.8438 12.4985 21.8438Z" fill="#010101"/>
+<path d="M8.98884 27.2245L7.13705 25.2975L8.44269 23.909C8.55662 23.7875 8.55109 23.5969 8.42957 23.4823C8.30805 23.3684 8.11749 23.3739 8.00288 23.4954L6.71864 24.8618L4.929 22.999C4.81369 22.8788 4.62244 22.8747 4.5023 22.9907C4.38216 23.106 4.37802 23.2972 4.49401 23.4174L6.30506 25.3023L5.42405 26.2393C5.31013 26.3608 5.31565 26.5513 5.43717 26.6659C5.49517 26.7205 5.56973 26.7481 5.64361 26.7481C5.7237 26.7481 5.80449 26.7164 5.86387 26.6528L6.72347 25.738L8.55385 27.6429C8.61323 27.7044 8.69194 27.7355 8.77135 27.7355C8.8466 27.7355 8.92186 27.7071 8.98055 27.6512C9.10069 27.5359 9.10483 27.3447 8.98884 27.2245Z" fill="#ECB732"/>
+<path d="M20.1375 22.9907C20.0174 22.8754 19.8261 22.8788 19.7108 22.999L17.9212 24.8618L16.6369 23.4954C16.523 23.3739 16.3318 23.3677 16.2102 23.4823C16.0887 23.5962 16.0832 23.7875 16.1971 23.909L17.5028 25.2975L15.651 27.2245C15.5357 27.3447 15.5391 27.5359 15.6593 27.6512C15.7179 27.7072 15.7932 27.7355 15.8685 27.7355C15.9479 27.7355 16.0266 27.7044 16.086 27.6429L17.9163 25.738L18.7759 26.6528C18.8353 26.7164 18.9154 26.7481 18.9962 26.7481C19.0701 26.7481 19.1446 26.7212 19.2026 26.666C19.3242 26.552 19.3297 26.3608 19.2158 26.2393L18.3347 25.3023L20.1458 23.4174C20.2611 23.2973 20.2577 23.106 20.1375 22.9907Z" fill="#ECB732"/>
+<path d="M14.1225 9.94949C14.0113 9.83764 13.8304 9.83764 13.7186 9.94949L12.3888 11.2793L11.059 9.94949C10.9478 9.83764 10.7669 9.83764 10.6551 9.94949C10.5432 10.0607 10.5432 10.2416 10.6551 10.3534L11.9849 11.6832L11.1743 12.4938C11.0624 12.605 11.0624 12.7859 11.1743 12.8977C11.2302 12.9536 11.3034 12.9813 11.3759 12.9813C11.4484 12.9813 11.5223 12.9536 11.5775 12.8977L12.3881 12.0871L13.1987 12.8977C13.2546 12.9536 13.3278 12.9813 13.4003 12.9813C13.4728 12.9813 13.5467 12.9536 13.6019 12.8977C13.7137 12.7865 13.7137 12.6056 13.6019 12.4938L12.7913 11.6832L14.1211 10.3534C14.233 10.2422 14.233 10.0613 14.1211 9.94949H14.1225Z" fill="#ECB732"/>
+<path d="M18.2388 14.9504C18.2388 14.9504 14.5864 15.3336 14.1804 16.5737C13.7744 17.8137 14.4959 19.9783 16.8186 20.1585C19.1406 20.3387 21.0124 20.0459 21.5986 18.5124C22.1848 16.9796 22.2269 15.8949 22.162 15.4234C22.0715 14.7695 19.3215 14.7474 18.2388 14.9504Z" fill="#101217"/>
+<path d="M6.47011 14.9504C5.38817 14.7474 2.63742 14.7702 2.54698 15.424C2.48207 15.8949 2.52419 16.9796 3.11038 18.5131C3.69657 20.0459 5.56769 20.3393 7.89036 20.1591C10.2123 19.9789 10.9339 17.8144 10.5286 16.5743C10.1226 15.3343 6.47011 14.9504 6.47011 14.9504Z" fill="#101217"/>
+<path d="M20.7417 13.8008C19.1862 13.8457 15.0379 14.793 13.7979 15.1085C13.1862 15.2639 12.6953 15.2825 12.3549 15.2618C12.0145 15.2832 11.5236 15.2646 10.9118 15.1085C9.67177 14.793 5.52356 13.8457 3.96798 13.8008C2.41239 13.7559 1.17235 13.4853 1.19513 14.7025C1.21792 15.9198 2.48006 18.8286 2.48006 18.8286C2.48006 18.8286 3.1567 20.3842 4.71228 20.7226C6.26786 21.0609 8.71136 20.929 9.78501 20.0238C10.9346 19.0544 11.3406 17.1605 11.3406 17.1605C11.3406 17.1605 11.5236 16.5902 12.3555 16.6303C13.1869 16.5902 13.3698 17.1605 13.3698 17.1605C13.3698 17.1605 13.7758 19.0544 14.9254 20.0238C15.999 20.929 18.4426 21.0609 19.9981 20.7226C21.5537 20.3842 22.2304 18.8286 22.2304 18.8286C22.2304 18.8286 23.4932 15.9205 23.5153 14.7025C23.5381 13.4853 22.2973 13.7559 20.7417 13.8008ZM7.89042 20.1585C5.56844 20.3387 3.69663 20.0459 3.11044 18.5124C2.52425 16.9796 2.48213 15.8949 2.54703 15.4234C2.63748 14.7695 5.38754 14.7467 6.47016 14.9497C6.47016 14.9497 10.1226 15.3329 10.5286 16.573C10.9346 17.813 10.2131 19.9783 7.89042 20.1585ZM21.5986 18.5124C21.0124 20.0452 19.1413 20.3387 16.8186 20.1585C14.4966 19.9782 13.7751 17.8137 14.1804 16.5736C14.5864 15.3336 18.2389 14.9504 18.2389 14.9504C19.3208 14.7474 22.0716 14.7702 22.162 15.424C22.2269 15.8949 22.1848 16.9789 21.5986 18.5124Z" fill="#2E3442"/>
+<path opacity="0.2" d="M21.5734 17.0783C21.791 16.5165 21.6927 15.9546 21.3538 15.8234C21.0149 15.6921 20.5638 16.0412 20.3462 16.603C20.1287 17.1649 20.227 17.7267 20.5659 17.858C20.9047 17.9892 21.3558 17.6401 21.5734 17.0783Z" fill="white"/>
+<path opacity="0.2" d="M19.7558 17.953C19.8975 17.587 19.8334 17.2211 19.6126 17.1356C19.3917 17.0501 19.0979 17.2774 18.9562 17.6433C18.8145 18.0092 18.8786 18.3751 19.0994 18.4606C19.3202 18.5461 19.6141 18.3189 19.7558 17.953Z" fill="white"/>
+<path opacity="0.2" d="M20.3522 18.3317C20.4195 18.1579 20.3758 17.9788 20.2546 17.9319C20.1333 17.8849 19.9804 17.9878 19.9131 18.1617C19.8457 18.3356 19.8894 18.5146 20.0107 18.5616C20.1319 18.6085 20.2848 18.5056 20.3522 18.3317Z" fill="white"/>
+<path d="M11.1411 2.51123L0 7.64127V7.88914L8.91922 9.80375L22.0384 4.67303V4.42516L11.1411 2.51123Z" fill="#7B859B"/>
+<path d="M21.5235 4.81244C21.9819 6.2175 22.0675 7.73304 21.763 9.1816C21.888 9.22372 21.9902 9.3259 22.0261 9.46261C22.072 9.63836 21.9954 9.81682 21.8496 9.90827C21.895 9.95816 21.9343 10.0167 21.9669 10.0833C22.0663 10.2884 22.0981 10.5639 22.038 10.8511C22.009 10.9892 21.9365 11.1114 21.8454 11.2164C21.8095 11.2585 21.7694 11.2978 21.7287 11.3344C21.6755 11.3814 21.6203 11.4242 21.5657 11.4622C21.429 11.5567 21.2985 11.621 21.2288 11.6527C21.1957 11.6679 21.1756 11.6755 21.1756 11.6755C21.1756 11.6755 21.157 11.6569 21.1266 11.6223C21.0755 11.5643 20.9913 11.4628 20.9112 11.3351C20.8767 11.2799 20.8428 11.2198 20.8131 11.1556C20.7938 11.1142 20.7759 11.0707 20.7607 11.0272C20.7096 10.8829 20.6854 10.7268 20.7179 10.5742C20.7793 10.2808 20.925 10.0364 21.1038 9.89C21.1604 9.84374 21.2212 9.80646 21.2827 9.7816C21.2851 9.7806 21.2876 9.77962 21.29 9.77866C21.2692 9.74508 21.253 9.70787 21.2425 9.66768C21.1858 9.45088 21.3156 9.22993 21.5317 9.17331C21.5746 9.16227 21.6174 9.15812 21.6595 9.16089C21.8549 8.23707 21.8929 7.28425 21.7672 6.34662C21.6968 5.82188 21.5752 5.31163 21.4088 4.82141L21.5235 4.81244Z" fill="#FFD908"/>
+<path d="M11.1418 2.75916L0 7.88919L8.91922 9.80381L22.0384 4.67308L11.1418 2.75916Z" fill="#576073"/>
+<path d="M4.40908 12.6885C5.25074 12.219 7.85939 10.8124 11.6298 10.5281C17.02 10.1216 18.254 10.8837 19.1357 11.1267C19.4022 11.1999 19.5561 11.2986 19.5741 11.4236L16.8385 5.63625C16.4843 4.9062 14.5156 4.53121 11.3281 4.62496C8.14064 4.81246 5.60942 6.68743 5.44752 7.29885L3.96996 13.1587C3.94993 13.0165 4.10805 12.857 4.40908 12.6885Z" fill="url(#paint1_linear_1627_2)"/>
+<defs>
+<linearGradient id="paint0_linear_1627_2" x1="12.3546" y1="7.50732" x2="12.3546" y2="30.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE66D"/>
+<stop offset="1" stop-color="#FFD66D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1627_2" x1="18.3499" y1="8.12533" x2="4.23302" y2="9.67262" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C879C"/>
+<stop offset="1" stop-color="#626D83"/>
+</linearGradient>
+</defs>
+</svg>