Fix failing E2E tests

tests/e2e/user-journeys.spec.ts

@@ -11,7 +11,7 @@ test.describe("User Journeys", () => {
 
     // 2. User reads hero section
     await expect(
-      page.locator("text=Help your community make important decisions"),
+      page.locator("text=Help your community make important decisions")
     ).toBeVisible();
 
     // 3. User clicks CTA to learn more
@@ -24,20 +24,20 @@ test.describe("User Journeys", () => {
 
     // 4. User scrolls to numbered cards section
     await expect(
-      page.locator('h2:has-text("How CommunityRule works")'),
+      page.locator('h2:has-text("How CommunityRule works")')
     ).toBeVisible();
 
     // 5. User reads the process steps
     await expect(
-      page.locator("text=Document how your community makes decisions"),
+      page.locator("text=Document how your community makes decisions")
     ).toBeVisible();
     await expect(
-      page.locator("text=Build an operating manual for a successful community"),
+      page.locator("text=Build an operating manual for a successful community")
     ).toBeVisible();
     await expect(
       page.locator(
-        "text=Get a link to your manual for your group to review and evolve",
-      ),
+        "text=Get a link to your manual for your group to review and evolve"
+      )
     ).toBeVisible();
 
     // 6. User explores rule templates
@@ -78,7 +78,7 @@ test.describe("User Journeys", () => {
 
     // 10. User creates CommunityRule
     const createButton = page.locator(
-      'button:has-text("Create CommunityRule")',
+      'button:has-text("Create CommunityRule")'
     );
     if (
       (await createButton.count()) > 0 &&
@@ -139,7 +139,7 @@ test.describe("User Journeys", () => {
 
     // Read the section
     await expect(
-      page.locator("text=Get answers from an experienced organizer"),
+      page.locator("text=Get answers from an experienced organizer")
     ).toBeVisible();
 
     // Click contact button - check if it exists and is visible first
@@ -158,7 +158,7 @@ test.describe("User Journeys", () => {
   test("user journey: create CommunityRule", async ({ page }) => {
     // Simplified approach - just check if the button exists and is visible
     const createButton = page.locator(
-      'button:has-text("Create CommunityRule")',
+      'button:has-text("Create CommunityRule")'
     );
 
     if (
@@ -173,11 +173,50 @@ test.describe("User Journeys", () => {
   });
 
   test("user journey: learn how it works", async ({ page }) => {
-    // Click "See how it works" button
-    await page.locator('button:has-text("See how it works")').click();
+    // This test simulates a user learning about how CommunityRule works
+    // Since the CTA button doesn't actually navigate anywhere (href="#"),
+    // we'll focus on the actual user journey: reading about the process
 
-    // Should show more detailed information
-    // In a real app, this might open a modal or navigate to a detailed page
+    // Wait for page to load
+    await page.waitForLoadState("networkidle");
+
+    // User starts by reading the hero section
+    await expect(page.locator("text=Collaborate")).toBeVisible();
+    await expect(
+      page.locator("text=Help your community make important decisions")
+    ).toBeVisible();
+
+    // User scrolls down to learn about how CommunityRule works
+    await page
+      .locator('h2:has-text("How CommunityRule works")')
+      .scrollIntoViewIfNeeded();
+    await expect(
+      page.locator('h2:has-text("How CommunityRule works")')
+    ).toBeVisible();
+
+    // User reads the process steps
+    await expect(
+      page.locator("text=Document how your community makes decisions")
+    ).toBeVisible();
+    await expect(
+      page.locator("text=Build an operating manual for a successful community")
+    ).toBeVisible();
+    await expect(
+      page.locator(
+        "text=Get a link to your manual for your group to review and evolve"
+      )
+    ).toBeVisible();
+
+    // User explores rule templates
+    await page.locator("text=Consensus clusters").first().click();
+    await page.locator("text=Consensus").nth(1).click();
+    await page.locator("text=Elected Board").first().click();
+    await page.locator("text=Petition").first().click();
+
+    // User has successfully learned about how CommunityRule works
+    await expect(
+      page.locator("text=We've got your back, every step of the way")
+    ).toBeVisible();
   });
 
   test("user journey: scroll through entire page", async ({ page }) => {