update category

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

components/CategoryCard.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg">
+  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg group text-slate-800">
-    <nuxt-link to="/category/js" class="hover:underline">
+    <nuxt-link to="/category/js" class="group-hover:text-sky-500">
       <div class="flex items-center">
-        <h4 class="text-2xl text-slate-800 font-medium py-1">Typescript</h4>
+        <h4 class="text-2xl font-medium py-1">Typescript</h4>
       </div>
     </nuxt-link>
 
@@ -14,8 +14,10 @@
       <p>433</p>
     </div>
 
-    <nuxt-link class="hover:underline" to="/">
+    <nuxt-link class="group-hover:text-sky-500" to="/">
-      <p class="font-medium">All Js Post</p>
+      <p class="font-medium text-sm">
+        Read All Post <span class="hidden group-hover:inline"> ->> </span>
+      </p>
     </nuxt-link>
   </div>
 </template>

components/LatestBlogCard.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg">
+  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg group">
-    <nuxt-link to="/" class="hover:underline">
+    <nuxt-link to="/" class="group-hover:text-sky-500">
-      <h4 class="text-xl text-slate-800 font-medium py-1">
+      <h4 class="text-xl font-medium py-1">This is latest blog card</h4>
-        This is latest blog card
-      </h4>
     </nuxt-link>
     <div class="text-xs text-slate-500 pb-3 flex space-x-4">
       <div class="flex items-center space-x-1">
@@ -21,8 +19,11 @@
       reprehenderit sit possimus quibusdam ad facilis, consectetur beatae
       inventore sunt non.
     </p>
-    <nuxt-link class="hover:underline" to="/">
+    <nuxt-link class="group-hover:text-sky-500" to="/">
-      <p class="font-medium">Read More</p>
+      <p class="font-medium">
+        Read More
+        <span class="hidden group-hover:inline"> ->> </span>
+      </p>
     </nuxt-link>
   </div>
 </template>

components/NavbarCom.vue

@@ -12,11 +12,13 @@ const activeNavbar = computed(() => {
 
 <template>
   <header class="sticky top-0 p-3 bg-[#a2d9ff] font-ibmmono">
-    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
+    <div
+      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">
           <nuxt-link
-            class="font-semibold text-xl text-slate-800"
+            class="font-semibold text-xl"
             :class="{ underline: activeNavbar === '' }"
             to="/"
           >

pages/index.vue

@@ -7,22 +7,16 @@ let x = ref(10);
     class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased"
   >
     <div class="flex-1">
-      <h1 class="text-xl pb-8 tracking-wide text-[#e60067]">
+      <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
-        RECENTLY PUBLISHED
-      </h1>
       <div class="space-y-8">
         <blog-card v-for="n in 7" :key="n" />
       </div>
     </div>
     <div class="max-w-[400px]">
       <div>
-        <h2 class="text-xl pb-8 tracking-wide text-[#e60067]">
+        <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
-          TOP CATEGORIES
-        </h2>
         <topic-card />
-        <h2 class="text-xl py-8 tracking-wide text-[#e60067]">
+        <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
-          POPULAR CONTENT
-        </h2>
         <div class="space-y-5">
           <one-line-card v-for="n in 5" :key="n" />
         </div>