From d3202bc133f6f263a70ebdfefbb66c69d7159b11 Mon Sep 17 00:00:00 2001
From: Israel Ugbodaga <israelugbodaga@gmail.com>
Date: Thu, 31 Mar 2022 01:13:22 +0100
Subject: [PATCH] feat: add vuemastery migration graphical link (#11)

---
 src/index.md | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/src/index.md b/src/index.md
index b68c166..a0a3a09 100644
--- a/src/index.md
+++ b/src/index.md
@@ -6,6 +6,87 @@ sidebar: false
 
 This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** The recommended way to learn Vue 3 is by reading the [new documentation](https://vuejs.org).
 
+<!-- VueMastery Start -->
+<style>
+.vue-mastery-link {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+}
+
+.vue-mastery-link a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.vue-mastery-link .banner {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  width:96px;
+  height:56px;
+  object-fit: cover;
+}
+
+.vue-mastery-link .description {
+  flex: 1;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #213547;
+  margin: 0 0 0 16px;
+}
+
+.vue-mastery-link .description span {
+  color: #42b883;
+}
+
+.vue-mastery-link .logo-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vue-mastery-link .logo-wrapper img {
+  width: 25px;
+  object-fit: contain;
+}
+
+@media (max-width: 576px) {
+  .vue-mastery-link .banner {
+    width:56px;
+  }
+
+  .vue-mastery-link .description {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .vue-mastery-link .logo-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>
+
+<div class="vue-mastery-link">
+  <a href="https://www.vuemastery.com/migration-guide-cheat-sheet/" target="_blank">
+    <div class="banner-wrapper">
+      <img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
+    </div>
+    <p class="description">Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span></p>
+    <div class="logo-wrapper">
+        <img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
+    </div>
+  </a>
+</div>
+<!-- VueMastery End -->
+
 ## Notable New Features
 
 Some of the new features to keep an eye on in Vue 3 include: