add category page

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

components/category/card.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps({
+  title: String,
+})
+
+let color = [
+  '#dc2626',
+  '#d97706',
+  '#65a30d',
+  '#059669',
+  '#0891b2',
+  '#0284c7',
+  '#4f46e5',
+  '#7c3aed',
+  '#c026d3',
+  '#db2777',
+]
+
+const getRandomInt = (min: number, max: number) => {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+const randbgcolor = ref(`${color.at(getRandomInt(0, 8))}`)
+</script>
+
+<template>
+  <div class="text-white px-5 py-3 rounded hover:underline randbgcolor">
+    <NuxtLink to="/" class="text-xl font-extrabold">
+      <h1>#{{ title }}</h1>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.randbgcolor {
+  background-color: v-bind(randbgcolor);
+}
+</style>

components/category/hero.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="container mx-auto">
+    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
+      <div class="px-6">
+        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">Categories</h1>
+        <p>
+          Blow All the topics are listed on which either I have written a blog or will write a blog
+          in near future.
+        </p>
+      </div>
+      <div class="px-6 justify-self-center">
+        <LogoDogs />
+      </div>
+    </div>
+  </div>
+</template>