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,13 +17,14 @@ 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="p-5">
         <div class="text-black text-sm pt-4 pb-2">
           <div class="flex items-center">
             <LogoDate />
@@ -36,7 +37,7 @@ withDefaults(defineProps<Props>(), {
             </template>
           </div>
         </div>
-      <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
+        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-600">
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-3">
@@ -46,6 +47,7 @@ withDefaults(defineProps<Props>(), {
           <p>Read More</p>
           <LogoArrow />
         </div>
+      </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"