feat(Blog): add blog section with featured + secondary post cards
Fine 1px #d9d9d9 border with rounded-xl on all cards. Featured card uses overflow-hidden to clip thumbnail flush left; secondary cards give each thumbnail its own rounded-xl so it sits neatly inside the py-2 padded wrapper. Arrow uses standard → instead of unsupported U+1F816. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
@@ -0,0 +1,139 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const featured = {
|
||||
thumbnail: "/blog-featured.jpg",
|
||||
category: "Fokus",
|
||||
readTime: "5 Min",
|
||||
title: "Der Feierabend-Knopf",
|
||||
excerpt:
|
||||
"So schaffst du deinen Tag wirklich im Feierabend und nicht, wenn der Laptop zu ist. Feierabend, wenn du ihn lebst",
|
||||
href: "/blog/feierabend-knopf",
|
||||
};
|
||||
|
||||
const secondary = [
|
||||
{
|
||||
thumbnail: "/blog-post-1.jpg",
|
||||
category: "Methoden",
|
||||
readTime: "6 Min",
|
||||
title: "Die 2-Minuten-Regel richtig anwenden",
|
||||
excerpt:
|
||||
"Warum sie wirklich funktioniert – und wie du sie in deinem Alltag clever nutzt.",
|
||||
href: "/blog/2-minuten-regel",
|
||||
},
|
||||
{
|
||||
thumbnail: "/blog-post-2.jpg",
|
||||
category: "Tools",
|
||||
readTime: "4 Min",
|
||||
title: "Die Promodoro-Technik für deinen Alltag",
|
||||
excerpt:
|
||||
"Effektives Zeitmanagement in vier kleinen Schritten, die dir helfen, fokussiert und mit mehr Energie zu arbeiten.",
|
||||
href: "/blog/promodoro-technik",
|
||||
},
|
||||
];
|
||||
|
||||
export function Blog() {
|
||||
return (
|
||||
<div className="flex flex-col gap-[3rem] items-start pb-[4rem] w-full bg-[#f5f0e8]">
|
||||
|
||||
{/* Section header */}
|
||||
<div className="flex flex-col gap-[0.5rem] items-start px-[5rem] w-full">
|
||||
<p className="font-bold text-[#f6a701] text-[1.25rem]">
|
||||
Neue Impulse
|
||||
</p>
|
||||
<p
|
||||
className="font-semibold text-[#222221] text-[1.75rem] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
>
|
||||
Gedanken, Methoden & Impulse
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Posts grid */}
|
||||
<div className="flex flex-col gap-[2.5rem] items-start px-[5rem] w-full">
|
||||
|
||||
{/* Featured post — thumbnail flush left, card clips with overflow-hidden */}
|
||||
<div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex">
|
||||
<div className="relative h-[220px] shrink-0 w-[60%]">
|
||||
<img
|
||||
alt=""
|
||||
src={featured.thumbnail}
|
||||
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-between px-2 py-4 min-w-0">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
|
||||
<span>{featured.category}</span>
|
||||
<span>•</span>
|
||||
<span>{featured.readTime}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-[#222221]">
|
||||
<p
|
||||
className="font-semibold text-[1.75rem] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
>
|
||||
{featured.title}
|
||||
</p>
|
||||
<p className="font-normal text-[1rem] leading-6">
|
||||
{featured.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={featured.href}
|
||||
className="font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
||||
>
|
||||
→ Zum Beitrag
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary posts — thumbnail with own rounded-xl, card py-2 only */}
|
||||
<div className="flex gap-3 w-full">
|
||||
{secondary.map((post) => (
|
||||
<div
|
||||
key={post.title}
|
||||
className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-2 h-[230px] items-center py-2"
|
||||
>
|
||||
{/* Thumbnail: own border-radius so it sits neatly inside the padded card */}
|
||||
<div className="rounded-xl overflow-hidden shrink-0 h-full w-[14.7rem]">
|
||||
<img
|
||||
alt=""
|
||||
src={post.thumbnail}
|
||||
className="w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-between h-full min-w-0 p-2 text-[#222221]">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
|
||||
<span>{post.category}</span>
|
||||
<span>•</span>
|
||||
<span>{post.readTime}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<p
|
||||
className="font-semibold text-[1.25rem] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
>
|
||||
{post.title}
|
||||
</p>
|
||||
<p className="font-normal text-[1rem] leading-6">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={post.href}
|
||||
className="font-bold text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
||||
>
|
||||
→ Zum Beitrag
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user