resign card component

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

components/blog/card.vue

@@ -8,20 +8,35 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="grid shadow-xl group overflow-hidden rounded max-w-md p-5 m-5 bg-slate-700 text-white"
-  >
-    <h1 class="text-xl">
-      {{ title }}
-    </h1>
-
-    <p class="text-sm">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores labore cupiditate ducimus,
-      ipsam harum, adipisci laudantium similique voluptate officiis sunt nesciunt dolorem repellat
-      cumque obcaecati nulla, sed dolore unde. Atque!
-    </p>
-    <nuxt-link class="underline" :to="slug">
-      {{ slug }}
-    </nuxt-link>
-  </div>
+  <article class="group border p-5 m-5 rounded-2xl shadow-lg text-zinc-700">
+    <NuxtLink to="/home" class="">
+      <img
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-105 transition-all"
+        src="/blogs/hello-world/riyad.jpg"
+        alt="card photo"
+      />
+      <div class="text-black text-sm pt-4 pb-2">
+        <div class="flex items-center">
+          <LogoDate />
+          3rd July 2022
+        </div>
+        <div class="flex items-center gap-1 flex-wrap">
+          <LogoTag />
+          <span>JavaScript</span>
+          <span>Typescript</span>
+          <span>Clean</span>
+        </div>
+      </div>
+      <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
+        This is the card title
+      </h2>
+      <p class="text-ellipsis line-clamp-3">
+        {{ excerpt }}
+      </p>
+      <div class="flex group-hover:underline text-sky-600 items-center pt-2">
+        <p>Read More</p>
+        <LogoArrow />
+      </div>
+    </NuxtLink>
+  </article>
 </template>

components/blog/oldcard.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+defineProps<{
+  title: string
+  excerpt?: string
+  image?: string
+  slug?: string
+}>()
+</script>
+
+<template>
+  <article class="group py-4 sm:p-4 w-full">
+    <NuxtLink
+      :to="slug"
+      class="block h-full rounded-3xl overflow-hidden border dark:border-gray-600 transform group-hover:-translate-y-2 duration-300 p-5"
+    >
+      <img
+        src="https://res.cloudinary.com/jahiddev/images/f_auto,q_auto/v1670084907/tips-to-write-better-javascript/tips-to-write-better-javascript.jpg?_i=AA"
+        alt="5 Pro Tips for Writing Better JavaScript in 2023"
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:shadow-xl"
+      />
+      <h2 class="tracking-widest text-xs title-font mb-1 mt-5">
+        <p class="uppercase text-xs">
+          <span class="inline-flex pr-2">
+            <LogoDate />
+            3rd Dec 2022</span
+          >
+          <span class="inline-flex flex-wrap">
+            <span>
+              <LogoTag />
+            </span>
+            <span class="mr-2">Clean Code </span>
+            <span class="mr-2">JavaScript </span>
+          </span>
+        </p>
+      </h2>
+      <h3 class="title-font text-lg mb-3">5 Pro Tips for Writing Better JavaScript in 2023</h3>
+      <p class="leading-relaxed mb-3">
+        Learn how to write better JavaScript code with these five pro tips. From using code linting
+        tools to...
+      </p>
+      <span
+        class="mt-3 text-primary-500 inline-flex items-center md:mb-2 lg:mb-0 group-hover:underline duration-300"
+      >
+        Read more
+        <LogoArrow />
+      </span>
+    </NuxtLink>
+  </article>
+</template>