Learn page default breakpoint

app/components/ContentLockup.js

@@ -49,7 +49,8 @@ const ContentLockup = ({
         "w-[20px] h-[20px] md:w-[24px] md:h-[24px] lg:w-[28px] lg:h-[28px]",
     },
     learn: {
-      container: "flex flex-col gap-[var(--spacing-scale-012)] relative z-10",
+      container:
+        "flex flex-col gap-[var(--spacing-scale-012)] relative z-10 pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)]",
       textContainer: "flex flex-col gap-[var(--spacing-scale-012)]",
       titleGroup: "flex flex-col gap-[var(--spacing-scale-012)]",
       titleContainer: "flex gap-[var(--spacing-scale-008)] items-center",

app/learn/page.js

@@ -1,5 +1,6 @@
 import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
 import ContentLockup from "../components/ContentLockup";
+import AskOrganizer from "../components/AskOrganizer";
 import { getAllBlogPosts, getRecentBlogPosts } from "../../lib/content";
 
 export default function LearnPage() {
@@ -7,49 +8,39 @@ export default function LearnPage() {
   const allPosts = getAllBlogPosts();
   const recentPosts = getRecentBlogPosts(3);
 
+  const contentLockupData = {
+    title: "Organizing is hard",
+    subtitle:
+      "Find answers to your questions and see how other groups have solved similar challenges.",
+    variant: "learn",
+    alignment: "left",
+  };
+
+  const askOrganizerData = {
+    title: "Still have questions?",
+    subtitle: "Get answers from an experienced organizer",
+    description:
+      "Our community of organizers is here to help you navigate the challenges of building and maintaining effective community organizations.",
+    buttonText: "Ask an organizer",
+    buttonHref: "/contact",
+    variant: "centered",
+  };
+
   return (
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
-      {/* Content Lockup Header */}
+      <ContentLockup {...contentLockupData} />
-      <div className="pt-[var(--spacing-scale-016)] pb-[var(--spacing-scale-016)] px-[var(--spacing-scale-020)] gap-[var(--spacing-scale-016)]">
+
-        <ContentLockup
+      <div className="space-y-[var(--spacing-scale-002)]">
-          title="Organizing is hard"
+        {allPosts.slice(0, 3).map((post, index) => (
-          subtitle="Find answers to your questions and see how other groups have solved similar challenges."
+          <ContentThumbnailTemplate
-          variant="learn"
+            key={post.slug}
-          alignment="left"
+            post={post}
-        />
+            variant="horizontal"
+          />
+        ))}
       </div>
 
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      <AskOrganizer {...askOrganizerData} />
-        <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"
-                />
-              ))}
-            </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&apos;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>
   );
 }