Merge pull request 'Fix blog cover images on blog cards' (#3) from fix/blog-card-cover-images into main

Reviewed-on: #3

src/components/BlogCard.tsx

@@ -16,8 +16,20 @@ export function BlogCard({ blog, index }: { blog: BlogPostSummary; index?: numbe
   return (
     <Link
       href={`/blogs/${blog.slug}`}
-      className="group flex h-full flex-col rounded-[1.75rem] border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
+      className="group flex h-full flex-col overflow-hidden rounded-[1.75rem] border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
     >
+      {blog.coverImageUrl ? (
+        <div className="mb-5 overflow-hidden rounded-[1.25rem] border border-white/10 bg-black/30">
+          {/* External CMS image URLs are stored directly, so a plain img is the least brittle option here. */}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={blog.coverImageUrl}
+            alt={blog.title}
+            className="h-48 w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+          />
+        </div>
+      ) : null}
+
       <div className="mb-5 flex items-start justify-between gap-4">
         <div className="space-y-2">
           {index !== undefined ? (