docs: up cert

diff --git a/packages/docs/.vitepress/theme/components/AsideSponsors.vue b/packages/docs/.vitepress/theme/components/AsideSponsors.vue
index bf847762f88e85b022e761239c1f71d8a51207ec..e9277cb9bae51c7a07bc3cd57b0d1637444790d8 100644 (file)
--- a/packages/docs/.vitepress/theme/components/AsideSponsors.vue
+++ b/packages/docs/.vitepress/theme/components/AsideSponsors.vue
@@ -1,7 +1,7 @@
 <template>
   <a
-    class="mp-banner"
-    href="https://masteringpinia.com/?utm_source=affiliate&utm_medium=vuerouter&utm_campaign=VueRouter_MP&utm_content=sidebar"
+    class="banner mp"
+    href="https://masteringpinia.com?utm=pinia-sidebar"
     target="_blank"
   >
     <img width="22" height="22" src="/mp-pinia-logo.svg" />
@@ -13,21 +13,22 @@
   </a>
 
   <a
-    class="banner"
-    href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=router_vuejs&utm_medium=link&utm_campaign=router_vuejs_links&utm_content=sidebar"
+    class="banner cert"
+    href="https://certificates.dev/vuejs/?friend=VUEROUTER&utm_source=pinia_vuejs&utm_medium=link&utm_campaign=pinia_vuejs_links&utm_content=sidebar"
     target="_blank"
   >
-    <img src="/banners/vuejs-certification.svg" alt="Vue.js Certification" />
+    <img width="22" height="22" src="/vue-cert-logo.svg" />
+    <span>
+      <p class="extra-info">The official</p>
+      <p class="heading">Vue.js Certification</p>
+      <p class="extra-info">Get certified!</p>
+    </span>
   </a>
 </template>
 
 <style scoped>
 .banner {
-  margin-bottom: 0.5rem;
-}
-
-.mp-banner {
-  margin: 1rem 0;
+  margin: 0.25rem 0;
   padding: 0.4rem 0;
   border-radius: 14px;
   position: relative;
@@ -44,19 +45,27 @@
   transition: border-color 0.5s;
 }
 
-.mp-banner:hover {
+.banner:last-of-type {
+  margin-bottom: 1rem;
+}
+
+.banner:hover {
   border: 2px solid var(--vp-c-brand-1);
 }
 
-.mp-banner img {
+.banner.cert:hover {
+  border: 2px solid var(--vp-c-green-1);
+}
+
+.banner img {
   transition: transform 0.5s;
   transform: scale(1.25);
 }
-.mp-banner:hover img {
+.banner:hover img {
   transform: scale(1.75);
 }
 
-.mp-banner .extra-info {
+.banner .extra-info {
   color: var(--vp-c-text-1);
   opacity: 0;
   font-size: 0.7rem;
@@ -64,7 +73,7 @@
   transition: opacity 0.5s;
 }
 
-.mp-banner .heading {
+.banner .heading {
   background-image: linear-gradient(
     120deg,
     var(--vp-c-brand-3) 16%,
@@ -76,7 +85,16 @@
   -webkit-text-fill-color: transparent;
 }
 
-.mp-banner:hover .extra-info {
+.banner.cert .heading {
+  background-image: linear-gradient(
+    120deg,
+    var(--vp-c-green-3) 16%,
+    var(--vp-c-green-2),
+    var(--vp-c-green-1)
+  );
+}
+
+.banner:hover .extra-info {
   opacity: 0.9;
 }
 </style>

diff --git a/packages/docs/public/vue-cert-logo.svg b/packages/docs/public/vue-cert-logo.svg
new file mode 100644 (file)
index 0000000..e01247d
--- /dev/null
+++ b/packages/docs/public/vue-cert-logo.svg
@@ -0,0 +1,5 @@
+<svg fill="none" viewBox="0 0 82 84" height="84" width="82" xmlns="http://www.w3.org/2000/svg" alt="Logo" class="hidden h-[50px] w-[50px] dark:block"><title xmlns="http://www.w3.org/2000/svg">Home</title>
+<path xmlns="http://www.w3.org/2000/svg" d="M0 36.2975L4.54024 42.2261L0 48.1495L6.0213 52.5485L3.31963 59.519L10.3317 62.0341L9.69332 69.4872L17.1242 69.9183L18.6053 77.2482L25.8574 75.5543L29.3302 82.1707L35.8112 78.4904L41 83.8543L46.1888 78.4904L52.6698 82.1707L56.1426 75.5543L63.3947 77.2482L64.8758 69.9183L72.3067 69.4872L71.6683 62.0341L78.6804 59.519L75.9787 52.5485L82 48.1495L77.4598 42.2261L82 36.2975L75.9787 31.8986L78.6804 24.9281L71.6683 22.4129L72.3067 14.9599L64.8758 14.5339L63.3947 7.20401L56.1426 8.89275L52.6698 2.28151L46.1888 5.9567L41 0.592773L35.8112 5.9567L29.3302 2.28151L25.8574 8.89275L18.6053 7.20401L17.1242 14.5339L9.69332 14.9599L10.3317 22.4129L3.31963 24.9281L6.0213 31.8986L0 36.2975Z" fill="white"></path>
+<path xmlns="http://www.w3.org/2000/svg" d="M20.9512 26.7803L40.691 60.3675L60.4309 26.7803L52.535 26.7803L40.691 46.9326L28.7484 26.7803L20.9512 26.7803Z" fill="#3DD491"></path>
+<path xmlns="http://www.w3.org/2000/svg" d="M28.8452 26.7803L40.7383 47.196L52.5331 26.7803L45.2596 26.7803L40.7383 34.6325L36.1187 26.7803L28.8452 26.7803Z" fill="#2C3D4F"></path>
+</svg>