fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/MediumCard.tsx

@@ -10,6 +10,7 @@ interface Post {
   date: string;
   slug: string;
   tags?: string[];
+  thumbnail?: string;
 }
 
 interface MediumCardProps {
@@ -34,12 +35,20 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
       >
         <div className="flex gap-4 md:gap-5 items-center">
           {/* Thumbnail */}
-          <div className="flex-shrink-0 w-[56px] h-[56px] md:w-[80px] md:h-[80px] rounded-lg overflow-hidden border border-slate-100 group-hover:border-slate-200 transition-colors">
-            <BlogThumbnailSVG
-              slug={slug}
-              variant="square"
-              className="w-full h-full"
-            />
+          <div className="flex-shrink-0 w-[56px] h-[56px] md:w-[80px] md:h-[80px] rounded-lg overflow-hidden border border-slate-100 group-hover:border-slate-200 transition-colors bg-slate-50 relative">
+            {post.thumbnail ? (
+              <img
+                src={post.thumbnail}
+                alt={title}
+                className="w-full h-full object-cover grayscale-[0.5] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700"
+              />
+            ) : (
+              <BlogThumbnailSVG
+                slug={slug}
+                variant="square"
+                className="w-full h-full"
+              />
+            )}
           </div>
 
           <div className="flex-1 space-y-3 md:space-y-4 min-w-0">