docs: add home links

diff --git a/packages/docs/.vitepress/theme/styles/home-links.css b/packages/docs/.vitepress/theme/styles/home-links.css
new file mode 100644 (file)
index 0000000..87cdb06
--- /dev/null
+++ b/packages/docs/.vitepress/theme/styles/home-links.css
@@ -0,0 +1,65 @@
+/* Style to get the cheat sheet link in the home page */
+
+a.cta {
+  text-align: center;
+  border-radius: 8px;
+}
+
+a.cta:hover {
+  border-color: var(--vp-c-brand);
+  background-color: var(--c-bg-accent);
+}
+
+a.cta.vue-mastery::before {
+  content: '';
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background-image: url('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');
+  background-size: 25px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  margin-right: 0.5em;
+}
+
+a.cta.vueschool {
+  position: relative;
+  color: currentColor;
+  padding-left: 38px !important;
+}
+a.cta.vueschool::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 20px;
+  height: 20px;
+  top: calc(50% - 10px);
+  left: 12px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+}
+
+a.cta.vueschool::after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 4px);
+  left: 20px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid currentColor;
+}
+
+@media (max-width: 420px) {
+  a.cta.cta.vue-mastery {
+    max-width: 320px;
+    line-height: 1.5em;
+    white-space: normal;
+    display: block;
+    padding-bottom: 10px;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}

diff --git a/packages/docs/index.md b/packages/docs/index.md
index 7a43ec5a292d0bcb94bc2cec907d29d1beb5a874..0d1e07bcdb35ff3de1369227a5f2198c7b8744ed 100644 (file)
--- a/packages/docs/index.md
+++ b/packages/docs/index.md
@@ -18,7 +18,12 @@ hero:
     - theme: alt
       text: Demo
       link: https://stackblitz.com/github/piniajs/example-vue-3-vite
-
+    - theme: cta vueschool
+      text: Watch Video Introduction
+      link: https://vueschool.io/lessons/introduction-to-pinia?friend=vuerouter&utm_source=pinia&utm_medium=link&utm_campaign=homepage
+    - theme: cta vue-mastery
+      text: Get the Pinia Cheat Sheet
+      link: https://www.vuemastery.com/pinia?coupon=PINIA-DOCS&via=eduardo
 
 features:
   - title: 💡 Intuitive
@@ -37,6 +42,7 @@ features:
 
 <script setup>
 import HomeSponsors from './.vitepress/theme/components/HomeSponsors.vue'
+import './.vitepress/theme/styles/home-links.css'
 </script>
 
 <HomeSponsors />