feat: refactor blog components

src/components/cards/BlogCard.astro

@@ -0,0 +1,58 @@
+---
+import { Icon } from 'astro-icon/components';
+
+import type { Post } from '@lib/directusTypes';
+
+import Image from '@components/ui/images/Image.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
+
+interface Props {
+  post: Post;
+}
+
+const { post } = Astro.props;
+---
+
+<div class="smooth-reveal-cards group flex flex-col">
+  <a
+    class="card-base"
+    href={`/blog/${post.slug}/`}
+    data-astro-prefetch
+  >
+    <div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
+      <Image
+        class="rounded-t-xl h-auto w-full"
+        src={getDirectusImageURL(post.image)}
+        alt={post.image_alt}
+        draggable="false"
+        loading="eager"
+        format="webp"
+      />
+    </div>
+    <div class="rounded-xl p-4 md:p-5">
+      <h3 class="card-text-title text-xl">
+        {post.title}
+      </h3>
+      <div class="ml-6 flex">
+        <div class="relative inline-block w-full">
+          <div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
+            <span class="relative inline-block overflow-hidden ml-2">
+              Read more
+            </span>
+            <Icon
+              name="mdi:keyboard-arrow-right"
+              class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+            />
+            <p class="card-text-description text-sm ml-auto">
+              {new Date(post.published_date).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>