Add gradient background to Hero component

components/Hero.vue

@@ -1,4 +1,7 @@
 <template>
+  <div
+    class="h-screen rounded-b-3xl shadow-xl bg-gradient-to-r from-blue-300 to-blue-700 flex items-center"
+  >
     <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
       <Logo />
       <h1 class="font-mono text-2xl">
@@ -23,6 +26,7 @@
         </a>
       </div>
     </div>
+  </div>
 </template>
 
 <script>