adilallo
60 lines
2.2 KiB
JavaScript
60 lines
2.2 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="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="space-y-12">
|
|
{/* More Articles */}
|
|
<section>
|
|
<h2 className="text-2xl font-semibold text-[var(--color-content-inverse-primary)] mb-6">
|
|
More Articles
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{allPosts.slice(0, 3).map((post, index) => (
|
|
<ContentThumbnailTemplate
|
|
key={post.slug}
|
|
post={post}
|
|
variant="horizontal"
|
|
slugOrder={slugOrder}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Coming Soon */}
|
|
<section className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg shadow">
|
|
<h2 className="text-xl font-semibold text-[var(--color-content-inverse-primary)] mb-4">
|
|
More Content Coming Soon
|
|
</h2>
|
|
<p className="text-[var(--color-content-inverse-secondary)]">
|
|
We're working on adding more educational content to help you
|
|
build better communities. Check back soon for new articles and
|
|
resources.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|