add hero component to examples

examples/Components/Hero/index.vue

@@ -0,0 +1,14 @@
+<template>
+	<div class="hero">
+		<div class="hero__inner">
+			<h1>
+				tiptap – a renderless rich-text editor toolkit for Vue.js
+			</h1>
+			<p>
+				This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
+			</p>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

examples/Components/Hero/style.scss

@@ -0,0 +1,15 @@
+@import "~variables";
+
+.hero {
+
+	background-color: $color-black;
+	color: $color-white;
+	text-align: center;
+	padding: 3rem 1rem;
+
+	&__inner {
+		margin: 0 auto;
+		max-width: 30rem;
+	}
+
+}