From fdb6328807ef528677d9e52cc7728b0d7c17367d Mon Sep 17 00:00:00 2001
From: enricobuehler <enrico.buehler@unom.io>
Date: Tue, 26 May 2026 19:13:50 +0200
Subject: [PATCH] landing: tagline below logo + 'Aus dem Blog' section with 2
 latest posts

- Hero shrinks from 100vh to 90vh so a slice of below-fold content peeks.
- Logo is now in a normal flex column with the tagline 'Kreative
  Webentwicklung aus Rottweil' centered beneath it.
- New LatestPosts section reads the two most recent posts from CMS via
  the SDK and skips entirely if posts.length === 0 (so the section
  doesn't materialize while the blog is empty).
---
 src/routes/index.tsx         | 19 ++++++++++++++++++-
 src/sections/Landing.tsx     | 17 ++++++++++-------
 src/sections/LatestPosts.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 src/sections/LatestPosts.tsx

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index af32748..b39e731 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,18 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { findPosts } from "@/lib/cms";
 import Landing from "@/sections/Landing";
+import LatestPosts from "@/sections/LatestPosts";
 
 export const Route = createFileRoute("/")({
+	loader: async () => {
+		// Soft-fail on CMS hiccups so the hero still renders.
+		try {
+			const { docs } = await findPosts("de", 2);
+			return { posts: docs };
+		} catch {
+			return { posts: [] };
+		}
+	},
 	component: HomePage,
 	head: () => ({
 		meta: [{ title: "unom - Kreative Webentwicklung" }],
@@ -9,5 +20,11 @@ export const Route = createFileRoute("/")({
 });
 
 function HomePage() {
-	return <Landing />;
+	const { posts } = Route.useLoaderData();
+	return (
+		<>
+			<Landing />
+			<LatestPosts posts={posts} />
+		</>
+	);
 }
diff --git a/src/sections/Landing.tsx b/src/sections/Landing.tsx
index 63b9c04..3f4ec16 100644
--- a/src/sections/Landing.tsx
+++ b/src/sections/Landing.tsx
@@ -3,19 +3,22 @@ import bgDark from "@/assets/unom_Logo_5_Dark.webp";
 
 export default function Landing() {
 	return (
-		<div className="w-full h-screen object-cover">
-			<div className="w-full h-full flex items-center justify-center absolute">
-				<div className="w-[200px]">
-					<LogoQuadBG />
-				</div>
-			</div>
+		<div className="relative w-full h-[90vh] overflow-hidden">
 			<img
-				className="h-full w-full object-cover"
+				className="absolute inset-0 h-full w-full object-cover"
 				src={bgDark}
 				width={3840}
 				height={2160}
 				alt="Ein 3D Rendering des unom Logos"
 			/>
+			<div className="relative h-full flex flex-col items-center justify-center gap-8 px-section-main-x text-center">
+				<div className="w-[200px]">
+					<LogoQuadBG />
+				</div>
+				<p className="max-w-md text-lg md:text-xl text-main">
+					Kreative Webentwicklung aus Rottweil.
+				</p>
+			</div>
 		</div>
 	);
 }
diff --git a/src/sections/LatestPosts.tsx b/src/sections/LatestPosts.tsx
new file mode 100644
index 0000000..5d829ae
--- /dev/null
+++ b/src/sections/LatestPosts.tsx
@@ -0,0 +1,24 @@
+import PostCard from "@/components/PostCard";
+import Section from "@/components/Section";
+import type { Post } from "@/lib/cms";
+import { Link } from "@tanstack/react-router";
+
+export default function LatestPosts({ posts }: { posts: Post[] }) {
+	if (posts.length === 0) return null;
+
+	return (
+		<Section>
+			<div className="flex items-baseline justify-between mb-6">
+				<h2>Aus dem Blog</h2>
+				<Link to="/blog" className="text-secondary text-sm">
+					Alle Beiträge →
+				</Link>
+			</div>
+			<div className="grid gap-6 md:grid-cols-2">
+				{posts.map((post) => (
+					<PostCard key={post.id} post={post} />
+				))}
+			</div>
+		</Section>
+	);
+}