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>

components/logo/arrow.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="w-4 h-4 ml-2 transform group-hover:translate-x-2 duration-300"
+  >
+    <path d="M5 12h14"></path>
+    <path d="M12 5l7 7-7 7"></path>
+  </svg>
+</template>

components/logo/date.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-4 h-4 mr-2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+    ></path>
+  </svg>
+</template>

components/logo/tag.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-4 h-4 mr-2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+    ></path>
+  </svg>
+</template>

components/main/header.vue

@@ -3,7 +3,7 @@ let isDark = ref(false)
 </script>
 
 <template>
-  <div class="py-5 font-spacegrotesk border-b text-zinc-600">
+  <div class="py-5 border-b text-zinc-700">
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
       <ul class="flex items-baseline space-x-5">
         <li class="">

components/main/hero.vue

@@ -2,7 +2,7 @@
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
-        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl mb-5">
+        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
           Welcome To My Blog Site
         </h1>
         <p>