From 94dcbfcbddd6e1140d46a5bad05929658decf6d7 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Mon, 19 Dec 2022 02:22:32 +0600
Subject: [PATCH] update category

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/CategoryCard.vue   | 12 +++++++-----
 components/LatestBlogCard.vue | 15 ++++++++-------
 components/NavbarCom.vue      |  6 ++++--
 pages/index.vue               | 12 +++---------
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/components/CategoryCard.vue b/components/CategoryCard.vue
index 471e25d..d2e09d9 100644
--- a/components/CategoryCard.vue
+++ b/components/CategoryCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg">
-    <nuxt-link to="/category/js" class="hover:underline">
+  <div class="bg-white mx-5 my-2 p-6 rounded-md shadow-lg group text-slate-800">
+    <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="/">
-      <p class="font-medium">All Js Post</p>
+    <nuxt-link class="group-hover:text-sky-500" to="/">
+      <p class="font-medium text-sm">
+        Read All Post <span class="hidden group-hover:inline"> ->> </span>
+      </p>
     </nuxt-link>
   </div>
 </template>
diff --git a/components/LatestBlogCard.vue b/components/LatestBlogCard.vue
index e15a3f8..e983b14 100644
--- a/components/LatestBlogCard.vue
+++ b/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">
-    <nuxt-link to="/" class="hover:underline">
-      <h4 class="text-xl text-slate-800 font-medium py-1">
-        This is latest blog card
-      </h4>
+  <div class="bg-white mx-5 my-2 p-5 max-w-[530px] rounded-md shadow-lg group">
+    <nuxt-link to="/" class="group-hover:text-sky-500">
+      <h4 class="text-xl font-medium py-1">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="/">
-      <p class="font-medium">Read More</p>
+    <nuxt-link class="group-hover:text-sky-500" to="/">
+      <p class="font-medium">
+        Read More
+        <span class="hidden group-hover:inline"> ->> </span>
+      </p>
     </nuxt-link>
   </div>
 </template>
diff --git a/components/NavbarCom.vue b/components/NavbarCom.vue
index ebd91b3..d60fe8a 100644
--- a/components/NavbarCom.vue
+++ b/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="/"
           >
diff --git a/pages/index.vue b/pages/index.vue
index b37e044..f9954d3 100644
--- a/pages/index.vue
+++ b/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]">
-        RECENTLY PUBLISHED
-      </h1>
+      <h1 class="text-xl pb-8 text-[#e60067]">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]">
-          TOP CATEGORIES
-        </h2>
+        <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
         <topic-card />
-        <h2 class="text-xl py-8 tracking-wide text-[#e60067]">
-          POPULAR CONTENT
-        </h2>
+        <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
         <div class="space-y-5">
           <one-line-card v-for="n in 5" :key="n" />
         </div>