Move the use-case index onto Learn so the pilot stories stay reachable, and make share images resolve on the host that serves the page.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/pages/learn.test.tsx

@@ -69,42 +69,80 @@ describe("LearnPage", () => {
     vi.mocked(getAllBlogPosts).mockReturnValue(mockPosts);
   });
 
-  it("renders content lockup and ask organizer copy", () => {
+  it("renders the learn sections, with the guide first and the FAQ open", () => {
     render(<LearnPage />);
 
+    expect(
+      screen.getByRole("heading", { name: /See how groups use/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "View Boulder Street Medics use case" }),
+    ).toHaveAttribute("href", "/use-cases/boulder-county-street-medics");
+    expect(
+      screen.getByRole("heading", { name: "Who is this for?" }),
+    ).toBeInTheDocument();
     expect(screen.getByText("Organizing is hard")).toBeInTheDocument();
     expect(
       screen.getByText(
-        /Find answers to your questions and see how other groups/,
+        /Find answers to your questions and see how other communities/,
       ),
     ).toBeInTheDocument();
+    const guideLinks = screen.getAllByRole("link", { name: "Read the guide" });
+    expect(guideLinks.length).toBeGreaterThan(0);
+    for (const link of guideLinks) {
+      expect(link).toHaveAttribute("href", "/how-it-works");
+    }
+    expect(
+      screen.getByRole("heading", {
+        name: "Why horizontal communities need CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Transparent, inclusive decisions"),
+    ).toBeInTheDocument();
+
+    const faq = screen.getByRole("region", {
+      name: "Get answers to your questions",
+    });
+    expect(faq).toHaveAttribute("id", "faq");
+    expect(
+      within(faq).getByRole("button", {
+        name: "Do we have to start from a blank page?",
+      }),
+    ).toHaveAttribute("aria-expanded", "true");
+
     expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
     expect(screen.getByText("Still have questions?")).toBeInTheDocument();
   });
 
-  it("renders one card per post (single responsive grid, no duplication)", () => {
+  it("renders the guide and one card per post, without a duplicate grid", () => {
     render(<LearnPage />);
 
     const grid = screen.getByTestId("learn-article-grid");
     expect(grid).toHaveClass("smd:justify-center", "smd:flex-wrap");
 
     const links = within(grid).getAllByRole("link");
-    expect(links).toHaveLength(mockPosts.length);
+    expect(links).toHaveLength(mockPosts.length + 1);
 
-    expect(links[0]).toHaveAttribute(
+    expect(links[0]).toHaveAttribute("href", "/how-it-works");
+    expect(links[1]).toHaveAttribute(
       "href",
       "/blog/resolving-active-conflicts",
     );
-    expect(links[1]).toHaveAttribute(
+    expect(links[2]).toHaveAttribute(
       "href",
       "/blog/operational-security-mutual-aid",
     );
+    expect(within(grid).queryByText("April 15, 2025")).not.toBeInTheDocument();
 
-    // <picture> with a smd source provides the orientation swap without a
-    // duplicate card per breakpoint.
-    const sources = grid?.querySelectorAll(
+    const sources = grid.querySelectorAll(
       "picture source[media='(min-width: 530px)']",
     );
-    expect(sources?.length).toBe(mockPosts.length);
+    expect(sources.length).toBe(mockPosts.length + 1);
+
+    const icons = grid.querySelectorAll("img");
+    for (const icon of icons) {
+      expect(icon).toHaveAttribute("alt", "");
+    }
   });
 });