feat: refactor blog components

src/components/cards/CategoryCard.astro

@@ -0,0 +1,63 @@
+---
+interface Props {
+  slug: string;
+  title: string;
+  description: string;
+  count: number;
+  publishDate: string;
+}
+
+const { slug, title, description, count, publishDate } = Astro.props;
+---
+
+<div class="smooth-reveal-cards group h-full">
+  <a
+    class="card-base flex flex-col h-full min-h-55"
+    href={`/categories/${slug}/`}
+    data-astro-prefetch
+  >
+    <div class="relative grow overflow-hidden">
+      <div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
+        <div class="overflow-hidden">
+          <h3 class="card-text-title-major card-hover-text-title whitespace-nowrap mb-4">
+            {title}
+          </h3>
+          <p class="card-text-description mb-4">
+            {description}
+          </p>
+        </div>
+        <div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
+            </svg>
+            {count}
+          </span>
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+            {publishDate}
+          </span>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>