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 { createFileRoute } from "@tanstack/react-router";
|
||||||
|
import { findPosts } from "@/lib/cms";
|
||||||
import Landing from "@/sections/Landing";
|
import Landing from "@/sections/Landing";
|
||||||
|
import LatestPosts from "@/sections/LatestPosts";
|
||||||
|
|
||||||
export const Route = createFileRoute("/")({
|
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,
|
component: HomePage,
|
||||||
head: () => ({
|
head: () => ({
|
||||||
meta: [{ title: "unom - Kreative Webentwicklung" }],
|
meta: [{ title: "unom - Kreative Webentwicklung" }],
|
||||||
@@ -9,5 +20,11 @@ export const Route = createFileRoute("/")({
|
|||||||
});
|
});
|
||||||
|
|
||||||
function HomePage() {
|
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() {
|
export default function Landing() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-screen object-cover">
|
<div className="relative w-full h-[90vh] overflow-hidden">
|
||||||
<div className="w-full h-full flex items-center justify-center absolute">
|
|
||||||
<div className="w-[200px]">
|
|
||||||
<LogoQuadBG />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
className="h-full w-full object-cover"
|
className="absolute inset-0 h-full w-full object-cover"
|
||||||
src={bgDark}
|
src={bgDark}
|
||||||
width={3840}
|
width={3840}
|
||||||
height={2160}
|
height={2160}
|
||||||
alt="Ein 3D Rendering des unom Logos"
|
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>
|
</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