38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
|
|
import ContentLockup from "../components/ContentLockup";
|
|
import { getAllBlogPosts, getRecentBlogPosts } from "../../lib/content";
|
|
|
|
export default function LearnPage() {
|
|
// Get real blog posts from the content system
|
|
const allPosts = getAllBlogPosts();
|
|
const recentPosts = getRecentBlogPosts(3);
|
|
|
|
// Create slug order for consistent background cycling
|
|
const slugOrder = allPosts.map((post) => post.slug);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
|
{/* Content Lockup Header */}
|
|
<div className="pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)] gap-[var(--spacing-scale-016)]">
|
|
<ContentLockup
|
|
title="Organizing is hard"
|
|
subtitle="Find answers to your questions and see how other groups have solved similar challenges."
|
|
variant="learn"
|
|
alignment="left"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{allPosts.slice(0, 3).map((post, index) => (
|
|
<ContentThumbnailTemplate
|
|
key={post.slug}
|
|
post={post}
|
|
variant="horizontal"
|
|
slugOrder={slugOrder}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|