Implement how it works page

tests/components/ContentBanner.test.tsx

@@ -60,4 +60,26 @@ describe("ContentBanner", () => {
     render(<ContentBanner post={mockPost} />);
     expect(screen.getByText("Test description")).toBeInTheDocument();
   });
+
+  it("renders guide variant with left-aligned copy and logo mark", () => {
+    const { container } = render(
+      <ContentBanner post={mockPost} variant="guide" />,
+    );
+    expect(
+      screen.getByRole("heading", { name: "Test Article" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Test description")).toBeInTheDocument();
+    expect(screen.queryByText("Test Author")).not.toBeInTheDocument();
+
+    const bannerRow = container.querySelector('[data-node-id="19189:9358"]');
+    expect(bannerRow).toHaveClass("md:flex-row");
+
+    const logoMark = container.querySelector(
+      '[data-node-id="22078:806960"] img',
+    );
+    expect(logoMark).toHaveAttribute(
+      "src",
+      expect.stringContaining("guide-banner-logo-arrow.svg"),
+    );
+  });
 });

tests/e2e/critical-journeys.spec.ts

@@ -15,11 +15,13 @@ test.describe("Critical User Journeys", () => {
     ).toBeVisible();
 
     // 3. User clicks CTA to learn more
-    const learnButton = page
-      .locator('button:has-text("Learn how CommunityRule works")')
+    const learnCta = page
+      .getByRole("link", { name: /Learn how CommunityRule works/i })
+      .or(page.getByRole("button", { name: /Learn how CommunityRule works/i }))
       .first();
-    if ((await learnButton.count()) > 0 && (await learnButton.isVisible())) {
-      await learnButton.click();
+    if ((await learnCta.count()) > 0 && (await learnCta.isVisible())) {
+      await learnCta.click();
+      await expect(page).toHaveURL(/\/how-it-works/);
     }
 
     // 4. User scrolls to CardSteps section (home)

tests/e2e/edge-cases.spec.ts

@@ -61,27 +61,28 @@ test.describe("Edge Cases and Error Scenarios", () => {
     // Page should continue to function
     await expect(page.locator("text=Collaborate")).toBeVisible();
 
-    const learnButtons = page.locator(
-      'button:has-text("Learn how CommunityRule works")',
-    );
-    const buttonCount = await learnButtons.count();
-    let visibleButton = null;
+    const learnCta = page
+      .getByRole("link", { name: /Learn how CommunityRule works/i })
+      .or(page.getByRole("button", { name: /Learn how CommunityRule works/i }));
+    const ctaCount = await learnCta.count();
+    let visibleCta = null;
 
-    for (let i = 0; i < buttonCount; i++) {
-      const button = learnButtons.nth(i);
-      if (await button.isVisible()) {
-        visibleButton = button;
+    for (let i = 0; i < ctaCount; i++) {
+      const cta = learnCta.nth(i);
+      if (await cta.isVisible()) {
+        visibleCta = cta;
         break;
       }
     }
 
-    if (!visibleButton) {
+    if (!visibleCta) {
       throw new Error(
-        'No visible "Learn how CommunityRule works" button found',
+        'No visible "Learn how CommunityRule works" CTA found',
       );
     }
 
-    await visibleButton.click();
+    await visibleCta.click();
+    await expect(page).toHaveURL(/\/how-it-works/);
   });
 
   test("handles missing images gracefully", async ({ page }) => {
@@ -97,26 +98,27 @@ test.describe("Edge Cases and Error Scenarios", () => {
     // Page should still function without images
     await expect(page.locator("text=Collaborate")).toBeVisible();
 
-    const learnButtons = page.locator(
-      'button:has-text("Learn how CommunityRule works")',
-    );
-    const buttonCount = await learnButtons.count();
-    let visibleButton = null;
+    const learnCta = page
+      .getByRole("link", { name: /Learn how CommunityRule works/i })
+      .or(page.getByRole("button", { name: /Learn how CommunityRule works/i }));
+    const ctaCount = await learnCta.count();
+    let visibleCta = null;
 
-    for (let i = 0; i < buttonCount; i++) {
-      const button = learnButtons.nth(i);
-      if (await button.isVisible()) {
-        visibleButton = button;
+    for (let i = 0; i < ctaCount; i++) {
+      const cta = learnCta.nth(i);
+      if (await cta.isVisible()) {
+        visibleCta = cta;
         break;
       }
     }
 
-    if (!visibleButton) {
+    if (!visibleCta) {
       throw new Error(
-        'No visible "Learn how CommunityRule works" button found',
+        'No visible "Learn how CommunityRule works" CTA found',
       );
     }
 
-    await visibleButton.click();
+    await visibleCta.click();
+    await expect(page).toHaveURL(/\/how-it-works/);
   });
 });

tests/pages/home.test.jsx

@@ -68,6 +68,10 @@ describe("Page", () => {
     expect(
       screen.getAllByText("Learn how CommunityRule works").length,
     ).toBeGreaterThan(0);
+    const learnLinks = screen.getAllByRole("link", {
+      name: "Learn how CommunityRule works",
+    });
+    expect(learnLinks[0]).toHaveAttribute("href", "/how-it-works");
   });
 
   test("renders CardSteps section with correct data", async () => {

tests/pages/how-it-works.test.jsx

@@ -0,0 +1,66 @@
+import { describe, test, expect, vi } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import { renderWithProviders as render } from "../utils/test-utils";
+import HowItWorksPage from "../../app/(marketing)/how-it-works/page";
+import messages from "../../messages/en/index";
+
+vi.mock("next/dynamic", () => ({
+  default: (importFn) => {
+    const Component = vi.fn(() => (
+      <section data-testid="related-articles">Related articles</section>
+    ));
+    return Component;
+  },
+}));
+
+vi.mock("../../app/components/sections/ContentBanner", () => ({
+  default: ({ post, variant }) => (
+    <section data-testid="content-banner" data-variant={variant}>
+      <h1>{post.frontmatter.title}</h1>
+      <p>{post.frontmatter.description}</p>
+    </section>
+  ),
+}));
+
+vi.mock("../../app/components/sections/AskOrganizer", () => ({
+  default: ({ title, subtitle, buttonText }) => (
+    <section data-testid="ask-organizer">
+      <h2>{title}</h2>
+      <p>{subtitle}</p>
+      <button type="button">{buttonText}</button>
+    </section>
+  ),
+}));
+
+describe("HowItWorksPage", () => {
+  const page = messages.pages.howItWorks;
+
+  test("renders banner, body sections, related articles, and ask organizer", async () => {
+    render(<HowItWorksPage />);
+
+    expect(screen.getByTestId("content-banner")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: page.banner.title }),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("content-banner")).toHaveAttribute(
+      "data-variant",
+      "guide",
+    );
+    expect(screen.getByText(page.banner.description)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("related-articles")).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
+    expect(
+      screen.getByText(messages.pages.home.askOrganizer.title),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/How the Platform Works: From Chaos to Clarity/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/mutual aid network, manage an open-source project/),
+    ).toBeInTheDocument();
+  });
+});