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>

app/components/Blog.tsx

@@ -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 &amp; 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>
+  );
+}

app/page.tsx

@@ -1,6 +1,7 @@
 import { Hero } from "./components/Hero";
 import { Divider } from "./components/Divider";
 import { Tools } from "./components/Tools";
+import { Blog } from "./components/Blog";
 
 export default function Home() {
   return (
@@ -8,6 +9,7 @@ export default function Home() {
       <Hero />
       <Divider />
       <Tools />
+      <Blog />
     </main>
   );
 }