diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx new file mode 100644 index 0000000..f728a3f --- /dev/null +++ b/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 ( +
+ + {/* Section header */} +
+

+ Neue Impulse +

+

+ Gedanken, Methoden & Impulse +

+
+ + {/* Posts grid */} +
+ + {/* Featured post — thumbnail flush left, card clips with overflow-hidden */} +
+
+ +
+
+
+
+ {featured.category} + • + {featured.readTime} +
+
+

+ {featured.title} +

+

+ {featured.excerpt} +

+
+
+ + → Zum Beitrag + +
+
+ + {/* Secondary posts — thumbnail with own rounded-xl, card py-2 only */} +
+ {secondary.map((post) => ( +
+ {/* Thumbnail: own border-radius so it sits neatly inside the padded card */} +
+ +
+
+
+
+ {post.category} + • + {post.readTime} +
+
+

+ {post.title} +

+

+ {post.excerpt} +

+
+
+ + → Zum Beitrag + +
+
+ ))} +
+ +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index a2f5356..7228981 100644 --- a/app/page.tsx +++ b/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() { + ); } diff --git a/public/blog-featured.jpg b/public/blog-featured.jpg new file mode 100644 index 0000000..512b6cf Binary files /dev/null and b/public/blog-featured.jpg differ diff --git a/public/blog-post-1.jpg b/public/blog-post-1.jpg new file mode 100644 index 0000000..5b7956b Binary files /dev/null and b/public/blog-post-1.jpg differ diff --git a/public/blog-post-2.jpg b/public/blog-post-2.jpg new file mode 100644 index 0000000..e52211d Binary files /dev/null and b/public/blog-post-2.jpg differ