Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

app/components/archive/card.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+interface Props {
+  path?: string
+  title?: string
+  date?: string
+  description?: string
+  image?: string
+  alt?: string
+  ogImage?: string
+  tags?: Array<string>
+  published?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  path: '/',
+  title: 'no-title',
+  date: 'no-date',
+  description: 'no-description',
+  image: '/blogs-img/blog.jpg',
+  alt: 'no-alt',
+  ogImage: '/blogs-img/blog.jpg',
+  tags: () => [],
+  published: false,
+})
+</script>
+
+<template>
+  <article
+    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300"
+  >
+    <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
+      <div class="sm:col-span-3">
+        <NuxtImg
+          class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500"
+          width="300"
+          :src="image"
+          :alt="alt"
+        />
+      </div>
+      <div class="sm:col-span-7 p-5">
+        <h2
+          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
+          {{ title }}
+        </h2>
+        <p class="text-ellipsis line-clamp-2">
+          {{ description }}
+        </p>
+        <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
+          <div class="flex items-center">
+            <LogoDate class="-translate-y-[10%]" />
+            <p>{{ date }}</p>
+          </div>
+          <div class="flex items-center gap-1 flex-wrap">
+            <LogoTag />
+            <p
+              v-for="tag in tags"
+              :key="tag"
+              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold"
+            >
+              {{ tag }}
+            </p>
+          </div>
+        </div>
+        <div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center pt-2">
+          <p>Read More</p>
+          <LogoArrow />
+        </div>
+      </div>
+    </NuxtLink>
+  </article>
+</template>

app/components/archive/hero.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { blogsPage } from '~/data'
+</script>
+
+<template>
+  <div class="container mx-auto mb-5">
+    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
+      <div class="px-6">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
+          {{ blogsPage.title }}
+        </h1>
+        <p class="dark:text-zinc-300">
+          {{ blogsPage.description }}
+        </p>
+      </div>
+      <div class="px-6 justify-self-center">
+        <LogoDogpow />
+      </div>
+    </div>
+  </div>
+</template>