change design

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

components/ArchievCard.vue

@@ -8,7 +8,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="font-ibmmono px-10 mb-4 text-slate-800 group">
+  <div
+    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
+  >
     <div class="flex items-center space-x-3 space-y-2">
       <icon name="ant-design:arrow-right-outlined" />
       <div>

components/FooterCom.vue

@@ -4,7 +4,7 @@ const theme = ref("light");
 
 <template>
   <footer class="p-3 mt-10 bg-[#a2d9ff] font-ibmmono">
-    <div class="container px-4 mx-auto max-w-6xl flex justify-center">
+    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
       <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>Copyright &#169; 2022 - Present</li>
         <li>|</li>
@@ -15,18 +15,24 @@ const theme = ref("light");
             target="_blank"
             to="https://nurriyad.xyz"
           >
-            Al Asad Nur Riyad
+            Riyad
           </nuxt-link>
         </li>
-        <li>|</li>
+      </ul>
+      <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>
-          Site source on
-          <nuxt-link
-            class="underline"
-            target="_blank"
-            to="https://github.com/nurRiyad/blogs"
-          >
-            GitHub.
+          <nuxt-link to="/">
+            <icon size="22px" name="uil:github" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="22px" name="uil:linkedin" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="22px" name="mdi:stackoverflow" />
           </nuxt-link>
         </li>
       </ul>

components/IndexHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="text-center text-stone-800 font-ibmmono bg-[#a2d9ff]">
+    <h1 class="text-4xl pt-16 pb-2 font-bold">Al Asad Nur Riyad</h1>
+    <p class="mt-3 max-w-md mx-auto text-base">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum
+      nam magni rem. Nihil reprehenderit dolorum quas, facere soluta commodi.
+    </p>
+  </div>
+</template>

components/ListHero.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const title = computed(() => {
+  const path = route.fullPath;
+  const splitPath = path.split("/");
+  const name = splitPath.at(1);
+
+  if (name === "blogs") return "All Blogs Post";
+  else if (name === "tags") return "All Tags";
+  else return "About Me";
+});
+</script>
+
+<template>
+  <div class="text-center text-stone-800 bg-[#a2d9ff] mb-5 font-ibmmono">
+    <h1 class="text-4xl p-16 font-bold">{{ title }}</h1>
+  </div>
+</template>

components/NavbarCom.vue

@@ -16,20 +16,20 @@ const activeNavbar = computed(() => {
       class="container px-4 mx-auto max-w-6xl flex justify-between text-slate-800"
     >
       <ul class="flex space-x-8 items-end justify-start">
-        <li class="align">
+        <li>
           <nuxt-link
-            class="font-semibold text-xl"
+            class="font-semibold text-base"
             :class="{ underline: activeNavbar === '' }"
             to="/"
           >
-            RafKhata
+            NurRiyad
           </nuxt-link>
         </li>
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'latest' }"
-            to="/latest"
-            >Latest</nuxt-link
+            :class="{ underline: activeNavbar === 'blogs' }"
+            to="/blogs"
+            >Blogs</nuxt-link
           >
         </li>
         <li>
@@ -37,30 +37,16 @@ const activeNavbar = computed(() => {
             >Tags</nuxt-link
           >
         </li>
+      </ul>
+      <ul class="flex space-x-8 items-end">
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'archive' }"
-            to="/archive"
-            >Archive</nuxt-link
+            :class="{ underline: activeNavbar === 'about' }"
+            to="/about"
+            >About</nuxt-link
           >
         </li>
-      </ul>
-      <ul class="flex space-x-3 items-end">
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:github" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:linkedin" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="mdi:stackoverflow" />
-          </nuxt-link>
-        </li>
+
         <li v-show="theme === 'light'" @click="theme = 'dark'">
           <nuxt-link to="/">
             <icon size="25px" name="ph:sun-dim" />

components/OneLineCard.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  path: String,
-});
-</script>
-
-<template>
-  <div class="group font-semibold antialiased text-slate-800 font-ibmmono">
-    <nuxt-link class="flex items-baseline space-x-3" :to="path">
-      <div class="group-hover:scale-125 transition">
-        <icon name="ant-design:arrow-right-outlined" />
-      </div>
-      <h4 class="group-hover:underline">
-        {{ title }}
-      </h4>
-    </nuxt-link>
-  </div>
-</template>

components/TopicCard.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 const router = useRouter();
 
 const onClick = () => {
-  router.push(`/tags/${props.title}`);
+  router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
 };
 </script>