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/footer/connect.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { footerData, seoData } from '~/data'
+</script>
+
+<template>
+  <div>
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Connect With Me</p>
+    <p class="dark:text-zinc-300">
+      {{ footerData.authorInterest }}
+    </p>
+
+    <a
+      :href="`mailto: ${seoData.mailAddress}`"
+      class="block text-center w-full bg-sky-700 p-2 rounded-lg text-[#F1F2F4] mt-3 text-sm"
+    >
+      Sent Mail
+    </a>
+  </div>
+</template>

app/components/footer/developer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { footerData, socialLinks } from '~/data'
+</script>
+
+<template>
+  <div>
+    <p class="text-black dark:text-zinc-300 text-2xl py-1 font-semibold">
+      {{ footerData.author }}
+    </p>
+    <p class="py-2 dark:text-zinc-300">
+      {{ footerData.aboutAuthor }}
+    </p>
+    <div class="my-3 space-x-3 pb-3">
+      <NuxtLink
+        :to="socialLinks.githubLink"
+        target="_blank"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
+        aria-label="Github"
+      >
+        <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
+      </NuxtLink>
+      <NuxtLink
+        :to="socialLinks.linkedinLink"
+        target="_blank"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
+        aria-label="LinkedIn"
+      >
+        <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
+      </NuxtLink>
+      <NuxtLink
+        :to="socialLinks.twitterLink"
+        target="_blank"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
+        aria-label="Twitter"
+      >
+        <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
+      </NuxtLink>
+      <NuxtLink
+        :to="socialLinks.stackoverflowLink"
+        target="_blank"
+        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
+        aria-label="StackOverflow"
+      >
+        <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>

app/components/footer/link.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col dark:text-zinc-300 my-5 md:my-0 md:justify-self-center">
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Quick Link</p>
+    <NuxtLink to="/" class="hover:underline"> Home </NuxtLink>
+    <NuxtLink to="/blogs" class="hover:underline"> Blogs </NuxtLink>
+    <NuxtLink to="/categories" class="hover:underline"> Categories </NuxtLink>
+    <NuxtLink to="/about" class="hover:underline"> About Me </NuxtLink>
+  </div>
+</template>

app/components/footer/site.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { footerData } from '~/data'
+</script>
+
+<template>
+  <div>
+    <p class="text-black dark:text-zinc-300 text-base py-1 font-semibold">About This Site</p>
+    <p class="py-2 dark:text-zinc-300">
+      {{ footerData.aboutTheSite }}
+    </p>
+  </div>
+</template>