Add hero component

src/App.vue

@@ -1,6 +1,13 @@
 <template>
   <div id="app" class="text-black">
     <navbar :name="title" />
+
+    <div class="h-48 flex items-center justify-center bg-yellow">
+      <div class="p-4 text-center">
+        <h1 class="text-4xl leading-none font-bold">{{ title }}</h1>
+        <p class="mt-5 text-sm">{{ description }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -16,7 +23,8 @@ export default {
 
   data() {
     return {
-      title: 'Bristol JS'
+      title: 'Bristol JS',
+      description: 'We host monthly JavaScript meetings in the beautiful city of Bristol, UK.'
     }
   }
 }