fix card design

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

components/blog/card.vue

@@ -17,35 +17,37 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
+  <article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
     <NuxtLink :to="link">
       <img
-        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
         :src="`${link}/cover.jpg`"
         :alt="title"
       />
-      <div class="text-black text-sm pt-4 pb-2">
-        <div class="flex items-center">
-          <LogoDate />
-          {{ time }}
+      <div class="p-5">
+        <div class="text-black text-sm pt-4 pb-2">
+          <div class="flex items-center">
+            <LogoDate />
+            {{ time }}
+          </div>
+          <div class="flex items-center gap-1 flex-wrap">
+            <LogoTag />
+            <template v-for="tag in tags" :key="tag">
+              <span>{{ tag }}</span>
+            </template>
+          </div>
         </div>
-        <div class="flex items-center gap-1 flex-wrap">
-          <LogoTag />
-          <template v-for="tag in tags" :key="tag">
-            <span>{{ tag }}</span>
-          </template>
+        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
+          {{ title }}
+        </h2>
+        <p class="text-ellipsis line-clamp-3">
+          {{ description }}
+        </p>
+        <div class="flex group-hover:underline text-sky-600 items-center pt-2">
+          <p>Read More</p>
+          <LogoArrow />
         </div>
       </div>
-      <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
-        {{ title }}
-      </h2>
-      <p class="text-ellipsis line-clamp-3">
-        {{ description }}
-      </p>
-      <div class="flex group-hover:underline text-sky-600 items-center pt-2">
-        <p>Read More</p>
-        <LogoArrow />
-      </div>
     </NuxtLink>
   </article>
 </template>