make index page dynamic

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

components/BlogCard.vue

@@ -1,15 +1,25 @@
+<script setup lang="ts">
+const props = defineProps({
+  title: String,
+  description: String,
+  path: String,
+});
+</script>
+
 <template>
   <div class="space-y-2 my-5 text-slate-800 group">
-    <h3 class="text-xl font-semibold group-hover:text-sky-500">
-      This is a blog title
-    </h3>
+    <nuxt-link
+      :to="path"
+      class="text-xl font-semibold group-hover:text-sky-500"
+    >
+      {{ title }}
+    </nuxt-link>
     <p class="text-slate-600">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, deserunt
-      esse tenetur iusto dolor unde. Aliquam quidem ab qui velit?
+      {{ description }}
     </p>
-    <p class="font-semibold group-hover:text-sky-500">
+    <nuxt-link :to="path" class="font-semibold group-hover:text-sky-500">
       Read more
       <span class="hidden group-hover:inline"> ->> </span>
-    </p>
+    </nuxt-link>
   </div>
 </template>