docs: add link to free Vue School course on homepage [skip ci] (#1089)

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 2e0dd2f879b1cd6fc6c875142d3d8f3c4fe7f260..b6a7b34e0d502a9b44827e95fd3e9e8eb2981eef 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -16,6 +16,19 @@ export const Layout = defineComponent({
         Theme.Layout,
         {},
         {
+          'home-hero': ()=>(
+            h("div", {
+              class: "vue-school-homepage-link",
+            }, [
+              h("a", {
+                  href: "https://vueschool.io/lessons/introduction-to-pinia?friend=vuerouter&utm_source=pinia&utm_medium=link&utm_campaign=homepage",
+                  target:"_blank",
+                  rel:"noopener"
+                },
+                [h("span", "Watch Video Introduction")]
+              )
+            ])
+          ),
           'sidebar-top': () =>
             h('div', { class: 'sponsors sponsors-top' }, [
               h('span', 'Platinum Sponsors'),

diff --git a/packages/docs/.vitepress/theme/custom.css b/packages/docs/.vitepress/theme/custom.css
index 331e09a8fb1c18d99b683efbddd86911c2a95ec8..7247ba93361268f31dc7f0e6f83f4ba50b1f8d8d 100644 (file)
--- a/packages/docs/.vitepress/theme/custom.css
+++ b/packages/docs/.vitepress/theme/custom.css
@@ -211,3 +211,38 @@ code {
   width: auto;
   max-width: 150px;
 }
+.vue-school-homepage-link{
+  text-align: center; margin-top: -40px;
+}
+.vue-school-homepage-link a{
+  position: relative;
+  padding-left: 23px;
+}
+.vue-school-homepage-link a::before{
+  content: '';
+  position: absolute;
+  display: block;
+  width: 20px;
+  height: 20px;
+  top: calc(50% - 10px);
+  left: -4px;
+  border-radius: 50%;
+  border: 1px solid var(--c-brand);
+}
+.vue-school-homepage-link a::after{
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 4px);
+  left: 4px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid var(--c-brand);
+}
+@media screen and (max-width: 720px){
+  .vue-school-homepage-link{
+    text-align: center; margin-top: -20px;
+  }
+}