mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign blog post teasers to premium large format
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Details
Build & Deploy / 🏗️ Build (push) Failing after 16s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m48s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 18:29:43 +01:00
parent c3fa10dd53
commit f3224f600d
1 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
apps/web/src/components/MediumCard.tsx
View File

@@ -26,64 +26,62 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
}); });
return ( return (
<Link href={`/blog/${slug}`} className="group block w-full"> <Link href={`/blog/${slug}`} className="group block w-full h-full outline-none">
<Card <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">
variant="glass" {/* Premium Large Thumbnail Section */}
padding="normal" <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">
techBorder={false} {post.thumbnail ? (
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" <img
> src={post.thumbnail}
<div className="flex gap-4 md:gap-5 items-center"> alt={title}
{/* Thumbnail */} className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 ease-out"
<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 <BlogThumbnailSVG
src={post.thumbnail} slug={slug}
alt={title} variant="square"
className="w-full h-full object-cover grayscale-[0.5] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out"
/> />
) : ( )}
<BlogThumbnailSVG {/* Subtle inset shadow over the image */}
slug={slug} <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" />
variant="square" </div>
className="w-full h-full"
/> {/* 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>
<div className="flex-1 space-y-3 md:space-y-4 min-w-0"> <div className="space-y-4 flex-1">
<div className="flex items-center justify-between"> <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">
<time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400"> {title}
{formattedDate} </h3>
</time> <p className="text-base md:text-lg text-slate-500 font-serif italic leading-relaxed line-clamp-3">
<div className="flex gap-1.5 md:gap-2"> {description}
{tags?.slice(0, 2).map((tag) => ( </p>
<span </div>
key={tag}
className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
>
#{tag}
</span>
))}
</div>
</div>
<div className="space-y-1.5 md:space-y-2"> <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">
<h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors"> <span>Read Article</span>
{title} <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">
</h3> <ArrowRight className="w-4 h-4 translate-x-0 group-hover:translate-x-0.5 transition-transform" />
<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> </div>
</div> </div>
</div> </div>
</Card> </article>
</Link> </Link>
); );
}; };