add hero component

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

components/main/header.vue

@@ -3,10 +3,10 @@ let isDark = ref(false)
 </script>
 
 <template>
-  <div class="py-5 px-4 border-b text-zinc-600">
-    <div class="flex container max-w-5xl justify-between mx-auto items-baseline">
+  <div class="py-5 font-spacegrotesk border-b text-zinc-600">
+    <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
       <ul class="flex items-baseline space-x-5">
-        <li>
+        <li class="">
           <NuxtLink to="/" class="text-2xl text-black font-bold"> Home </NuxtLink>
         </li>
         <li>

components/main/hero.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="container mx-auto">
+    <div class="grid grid-cols-1 items-center md:grid-cols-2">
+      <div class="px-6">
+        <h1 class="text-black text-4xl font-semibold md:text-5xl mb-5 leading-tight">
+          Welcome To My Blog Site
+        </h1>
+        <p>
+          Get Web Development, Javascript, Typescript, NodeJs, Vue and Nuxt, Related Articles, Tips,
+          Learning resource and more.
+        </p>
+      </div>
+      <div class="px-6 max-w-[400px] flex justify-center">
+        <LogoDog />
+      </div>
+    </div>
+  </div>
+</template>