feat(ui): redesign blog post teasers to premium large format

apps/web/src/components/MediumCard.tsx

@@ -26,64 +26,62 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
   });
 
   return (
-    <Link href={`/blog/${slug}`} className="group block w-full">
-      <Card
-        variant="glass"
-        padding="normal"
-        techBorder={false}
-        className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
-      >
-        <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 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"
-              />
-            )}
+    <Link href={`/blog/${slug}`} className="group block w-full h-full outline-none">
+      <article className="relative overflow-hidden transition-all duration-500 border border-slate-200/50 hover:border-slate-300/80 bg-white/60 hover:bg-white/80 backdrop-blur-xl rounded-[2rem] shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] flex flex-col md:flex-row h-full">
+        {/* Premium Large Thumbnail Section */}
+        <div className="w-full md:w-[42%] aspect-[16/9] md:aspect-auto md:min-h-[280px] overflow-hidden relative bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100/50 shrink-0">
+          {post.thumbnail ? (
+            <img
+              src={post.thumbnail}
+              alt={title}
+              className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 ease-out"
+            />
+          ) : (
+            <BlogThumbnailSVG
+              slug={slug}
+              variant="square"
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
+            />
+          )}
+          {/* Subtle inset shadow over the image */}
+          <div className="absolute inset-0 ring-1 ring-inset ring-slate-900/5 rounded-t-[2rem] md:rounded-l-[2rem] md:rounded-tr-none pointer-events-none" />
+        </div>
+
+        {/* Content Section */}
+        <div className="flex-1 flex flex-col p-6 md:p-8 lg:p-10">
+          <div className="flex items-center justify-between mb-5">
+            <time className="text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] text-slate-400">
+              {formattedDate}
+            </time>
+            <div className="flex flex-wrap gap-2 justify-end">
+              {tags?.slice(0, 3).map((tag) => (
+                <span
+                  key={tag}
+                  className="px-2.5 py-1 bg-slate-100/50 rounded-md text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-wider"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
           </div>
 
-          <div className="flex-1 space-y-3 md:space-y-4 min-w-0">
-            <div className="flex items-center justify-between">
-              <time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
-                {formattedDate}
-              </time>
-              <div className="flex gap-1.5 md:gap-2">
-                {tags?.slice(0, 2).map((tag) => (
-                  <span
-                    key={tag}
-                    className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
-                  >
-                    #{tag}
-                  </span>
-                ))}
-              </div>
-            </div>
+          <div className="space-y-4 flex-1">
+            <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-[1.1] group-hover:text-black transition-colors">
+              {title}
+            </h3>
+            <p className="text-base md:text-lg text-slate-500 font-serif italic leading-relaxed line-clamp-3">
+              {description}
+            </p>
+          </div>
 
-            <div className="space-y-1.5 md:space-y-2">
-              <h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
-                {title}
-              </h3>
-              <p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
-                {description}
-              </p>
-            </div>
-
-            <div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
-              <span>Beitrag öffnen</span>
-              <ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
+          <div className="pt-6 mt-6 flex items-center justify-between text-[11px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-all border-t border-slate-100/50">
+            <span>Read Article</span>
+            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100 group-hover:bg-slate-900 group-hover:text-white transition-colors duration-300">
+              <ArrowRight className="w-4 h-4 translate-x-0 group-hover:translate-x-0.5 transition-transform" />
             </div>
           </div>
         </div>
-      </Card>
+      </article>
     </Link>
   );
 };