From b9129c843dba43f6491a79b461996539e3987f3d Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 10 Dec 2020 16:07:52 +0100
Subject: [PATCH] add a note about tiptap 2 to the website

---
 examples/Components/App/index.vue     |  4 ++++
 examples/Components/Banner/index.vue  | 10 ++++++++++
 examples/Components/Banner/style.scss | 25 +++++++++++++++++++++++++
 3 files changed, 39 insertions(+)
 create mode 100644 examples/Components/Banner/index.vue
 create mode 100644 examples/Components/Banner/style.scss

diff --git a/examples/Components/App/index.vue b/examples/Components/App/index.vue
index 57d872843..9649db1ef 100644
--- a/examples/Components/App/index.vue
+++ b/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,
diff --git a/examples/Components/Banner/index.vue b/examples/Components/Banner/index.vue
new file mode 100644
index 000000000..e313eab7d
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Banner/style.scss b/examples/Components/Banner/style.scss
new file mode 100644
index 000000000..7ba6001d0
--- /dev/null
+++ b/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;
+    }
+  }
+}
+