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).
This commit is contained in:
+18
-1
@@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user