landing: tagline below logo + 'Aus dem Blog' section with 2 latest posts
Build & Deploy unom website / build (push) Successful in 18s
Build & Deploy unom website / deploy (push) Successful in 4s

- 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).
This commit is contained in:
2026-05-26 19:13:50 +02:00
parent f19457337d
commit fdb6328807
3 changed files with 52 additions and 8 deletions
+18 -1
View File
@@ -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} />
</>
);
}
+10 -7
View File
@@ -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>
);
}
+24
View File
@@ -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>
);
}