Add gradient background to Hero component

components/Hero.vue

@@ -1,26 +1,30 @@
 <template>
-  <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
+  <div
-    <Logo />
+    class="h-screen rounded-b-3xl shadow-xl bg-gradient-to-r from-blue-300 to-blue-700 flex items-center"
-    <h1 class="font-mono text-2xl">
+  >
-      wazo-lab.io
+    <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
-    </h1>
+      <Logo />
-    <div class="mt-4">
+      <h1 class="font-mono text-2xl">
-      <a
+        wazo-lab.io
-        href="#projects"
+      </h1>
-        target="_self"
+      <div class="mt-4">
-        rel="noopener noreferrer"
+        <a
-        class="button--green"
+          href="#projects"
-      >
+          target="_self"
-        Projects
+          rel="noopener noreferrer"
-      </a>
+          class="button--green"
-      <a
+        >
-        href="#contact-me"
+          Projects
-        target="_self"
+        </a>
-        rel="noopener noreferrer"
+        <a
-        class="button--grey"
+          href="#contact-me"
-      >
+          target="_self"
-        Contact Me
+          rel="noopener noreferrer"
-      </a>
+          class="button--grey"
+        >
+          Contact Me
+        </a>
+      </div>
     </div>
   </div>
 </template>