add a note about tiptap 2 to the website

examples/Components/App/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="page" spellcheck="false">
 
+    <banner />
+
     <navigation />
 
     <hero />
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import Banner from 'Components/Banner'
 import Navigation from 'Components/Navigation'
 import Hero from 'Components/Hero'
 import Subnavigation from 'Components/Subnavigation'
@@ -31,6 +34,7 @@ import Icon from 'Components/Icon'
 
 export default {
   components: {
+    Banner,
     Navigation,
     Hero,
     Subnavigation,

examples/Components/Banner/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="banner">
+    We’re about to release <a href="https://blog.ueber.io/post/our-plan-for-tiptap-2/">tiptap 2</a>. Become a sponsor to get early access!
+    <a href="https://github.com/sponsors/ueberdosis" class="banner__action">
+      Sponsor 💖
+    </a>
+  </div>
+</template>
+
+<style lang="scss" src="./style.scss"></style>

examples/Components/Banner/style.scss

@@ -0,0 +1,25 @@
+@import "~variables";
+
+.banner {
+  font-size: 0.9rem;
+  background-color: $color-black;
+  color: $color-white;
+  border-bottom: 1px solid $color-grey;
+  text-align: center;
+  padding: 1rem;
+
+  &__action {
+    background-color: $color-white;
+    transition: 0.1s ease-in-out all;
+    color: $color-black;
+    text-decoration: none;
+    padding: 0.4rem 0.7rem;
+    margin: 0.5rem;
+    border-radius: 5px;
+
+    &:hover {
+      background-color: $color-grey;
+    }
+  }
+}
+