Create Hero component

components/Hero.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
+    <Logo />
+    <h1 class="font-mono text-2xl">
+      wazo-lab.io
+    </h1>
+    <div class="mt-4">
+      <a
+        href="#projects"
+        target="_self"
+        rel="noopener noreferrer"
+        class="button--green"
+      >
+        Projects
+      </a>
+      <a
+        href="#contact-me"
+        target="_self"
+        rel="noopener noreferrer"
+        class="button--grey"
+      >
+        Contact Me
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

pages/index.vue

@@ -1,78 +1,13 @@
 <template>
-  <div class="container">
+  <div
-    <div>
+    class="h-screen bg-gradient-to-r from-blue-300 to-blue-700 flex items-center"
-      <Logo />
-      <h1 class="title">
-        wazo-lab
-      </h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
   >
-          Documentation
+    <Hero />
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-export default {}
+export default {};
 </script>
 
-<style>
+<style></style>
-/* Sample `apply` at-rules with Tailwind CSS
-.container {
-@apply min-h-screen flex justify-center items-center text-center mx-auto;
-}
-*/
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family:
-    'Quicksand',
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
-</style>