add hero component

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

pages/index.vue

@@ -12,7 +12,8 @@ useHead({
 const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
 </script>
 <template>
-  <main class="container mx-auto">
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <MainHero />
     <div class="flex m-5 p-3 flex-wrap">
       <template v-for="n in data" :key="n">
         <BlogCard :title="n.title || ''" :excerpt="n.description" image="sdlfkj" :slug="n._path" />