add category page

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

pages/categories/[category].vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    {{ $route.params }}
+    <h1>Categories</h1>
   </div>
 </template>

pages/categories/index.vue

@@ -1,3 +1,35 @@
+<script lang="ts" setup>
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content: 'Home',
+    },
+  ],
+  titleTemplate: "Elon's Blog - %s",
+})
+const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
+
+let ar = [
+  'javascript',
+  'typescript',
+  'git',
+  'docker',
+  'kubernetes',
+  'vue',
+  'nuxt',
+  'pinia',
+  'cypress',
+]
+</script>
 <template>
-  <div>All categories will be here</div>
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <CategoryHero />
+    <div class="flex flex-wrap px-6 mt-12 gap-3">
+      <template v-for="n in ar" :key="n">
+        <CategoryCard :title="n" />
+      </template>
+    </div>
+  </main>
 </template>