display article description after title (#4)

inspired by https://p.atrick.org

src/components/ShowcaseProject.astro

@@ -0,0 +1,51 @@
+---
+import { Image } from "astro:assets";
+import FormattedDate from "@components/FormattedDate.astro";
+
+type Props = {
+  collection: any;
+};
+
+const { collection } = Astro.props;
+---
+
+<li>
+  <article
+    class="group relative isolate mx-auto flex w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
+  >
+    <Image
+      src={collection.data.image.url}
+      alt={collection.data.image.alt}
+      title={collection.data.title}
+      loading="eager"
+      class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
+      fit="cover"
+    />
+    <div
+      class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
+    >
+    </div>
+    <a
+      class="absolute inset-0 z-20"
+      href={`/${collection.collection}/${collection.slug}`}
+      aria-label={collection.data.title}></a>
+    <h3
+      class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
+    >
+      {collection.data.title}
+    </h3>
+    <div
+      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
+    >
+      {
+        collection.data.collection ? (
+          <span>
+            <FormattedDate date={collection.data.date} /> &bull; Collection
+          </span>
+        ) : (
+          <FormattedDate date={collection.data.date} />
+        )
+      }
+    </div>
+  </article>
+</li>