fix card design

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

components/archive/card.vue

@@ -17,17 +17,17 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
-    <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-5">
+  <article class="group border m-2 rounded-2xl overflow-hidden shadow-md text-zinc-700">
+    <NuxtLink :to="link" class="grid grid-cols-1 sm:grid-cols-9 gap-3">
       <div class="sm:col-span-2">
         <img
-          class="lg:h-48 md:h-36 sm:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+          class="md:h-full sm:h-36 w-full object-cover object-center rounded-l-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
           :src="`${link}/cover.jpg`"
           :alt="title"
         />
       </div>
-      <div class="sm:col-span-7">
-        <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
+      <div class="sm:col-span-7 p-5">
+        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-2">

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>

content/blogs/1. hello-world.md

@@ -1,8 +1,8 @@
 ---
-title: 'Title of the page'
+title: 'How to create a blog size with nuxt3 and nuxt-content-v2'
 description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
 time: 10Jan2022
-tags: ['sdf', 'sdf', 'nuxt']
+tags: ['sdf', 'javascript', 'nuxt']
 ---
 
 ::CustomTitle

content/blogs/2. hello-man.md

@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 2Jan2022
-tags: ['vue']
+tags: ['vue', 'javascript']
 ---
 
 # BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

content/blogs/3. intro-to-nuxt.md

@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 4Nov2022
-tags: ['cypress']
+tags: ['cypress', 'javascript']
 ---
 
 # CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCc

content/blogs/5. intro-to-ts.md

@@ -2,7 +2,7 @@
 title: 'Title of the page'
 description: 'meta description of the page'
 time: 1Jan2023
-tags: ['firebase']
+tags: ['firebase', 'javascript']
 ---
 
 # Hello man

pages/blogs/index.vue

@@ -14,7 +14,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
-    <div>
+    <div class="space-y-5 my-5">
       <template v-for="post in data" :key="n">
         <ArchiveCard
           :title="post.title"