Match the marketing homepage and About page to the latest Figma: black hero CTA, spaces in word-split headings, redesigned feature grid, and cited About statistics.

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

tests/components/FeatureGrid.test.tsx

@@ -41,33 +41,33 @@ describe("FeatureGrid (behavioral tests)", () => {
     expect(
       screen.getByRole("heading", { name: "Test Title" }),
     ).toBeInTheDocument();
+    expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
     expect(
-      screen.getByRole("heading", { name: "Test Subtitle" }),
-    ).toBeInTheDocument();
+      screen.queryByRole("heading", { name: "Test Subtitle" }),
+    ).not.toBeInTheDocument();
   });
 
   it("renders all four feature cards as static tiles", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
-    expect(screen.getByText("Decision-making")).toBeInTheDocument();
-    expect(screen.getByText("Values alignment")).toBeInTheDocument();
-    expect(screen.getByText("Membership")).toBeInTheDocument();
-    expect(screen.getByText("Conflict resolution")).toBeInTheDocument();
+    expect(screen.getByText("Choose how you decide")).toBeInTheDocument();
+    expect(screen.getByText("Name your values")).toBeInTheDocument();
+    expect(screen.getByText("Define membership")).toBeInTheDocument();
+    expect(screen.getByText("Plan for conflict")).toBeInTheDocument();
     expect(
-      screen.queryByRole("link", { name: "Decision-making support tools" }),
+      screen.queryByRole("link", { name: "Choose how you decide" }),
     ).not.toBeInTheDocument();
   });
 
-  it("sends Learn more to the Learn page", () => {
+  it("sends Explore the toolkit to the Learn page", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
-    expect(screen.getByRole("link", { name: "Learn more" })).toHaveAttribute(
-      "href",
-      "/learn",
-    );
+    expect(
+      screen.getByRole("link", { name: "Explore the toolkit" }),
+    ).toHaveAttribute("href", "/learn");
   });
 
   it("does not apply a focus ring to the entire grid shell", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
-    const shell = document.querySelector('[data-figma-node="18847-22410"]');
+    const shell = document.querySelector('[data-figma-node="18632-10668"]');
     expect(shell?.className).not.toContain("focus-within:ring-2");
   });
 
@@ -83,11 +83,11 @@ describe("FeatureGrid (behavioral tests)", () => {
     expect(section).toBeInTheDocument();
   });
 
-  it("uses Figma invert surface colors on mini tiles", () => {
+  it("uses Figma invert surface colors on feature cards", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
     expect(
       document.querySelector(
-        '[class*="bg-[var(--color-surface-invert-brand-royal)]"]',
+        '[class*="bg-[var(--color-surface-invert-brand-lavender)]"]',
       ),
     ).toBeInTheDocument();
     expect(
@@ -110,7 +110,7 @@ describe("FeatureGrid (behavioral tests)", () => {
   it("marks the content block with the Figma node id", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
     expect(
-      document.querySelector('[data-figma-node="18847-22410"]'),
+      document.querySelector('[data-figma-node="18632-10668"]'),
     ).toBeInTheDocument();
   });
 
@@ -119,35 +119,19 @@ describe("FeatureGrid (behavioral tests)", () => {
     const title = screen.getByRole("heading", { name: "Test Title" });
     expect(title.className).toMatch(/text-\[18px\]/);
     expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/);
-    const subtitle = screen.getByRole("heading", { name: "Test Subtitle" });
+    const subtitle = screen.getByText("Test Subtitle");
+    expect(subtitle.tagName).toBe("P");
     expect(subtitle).toHaveClass("text-small-paragraph", "md:text-medium-paragraph");
   });
 
-  it("applies grain texture to feature grid icons", () => {
+  it("renders 40px decorative icons from Figma", () => {
     render(<FeatureGrid title="Test" subtitle="Test" />);
     const icons = document.querySelectorAll("section img");
-    expect(icons.length).toBeGreaterThanOrEqual(4);
+    expect(icons.length).toBe(4);
     icons.forEach((icon) => {
-      expect(icon.getAttribute("style")).toContain("#grain");
+      expect(icon).toHaveAttribute("width", "40");
+      expect(icon).toHaveAttribute("height", "40");
+      expect(icon).toHaveAttribute("alt", "");
     });
   });
-
-  it("preserves per-icon aspect ratios from Figma layout", () => {
-    render(<FeatureGrid title="Test" subtitle="Test" />);
-    const icons = Array.from(document.querySelectorAll("section img"));
-    expect(icons.map((icon) => icon.getAttribute("width"))).toEqual([
-      "48",
-      "55",
-      "56",
-      "50",
-    ]);
-    expect(icons.map((icon) => icon.getAttribute("height"))).toEqual([
-      "48",
-      "48",
-      "39",
-      "47",
-    ]);
-    expect(icons[3]?.className).toContain("rotate-180");
-    expect(icons[3]?.className).toContain("-scale-x-100");
-  });
 });

tests/components/HeroBanner.test.tsx

@@ -57,10 +57,11 @@ describe("HeroBanner (behavioral tests)", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders CTA link when provided", () => {
+  it("renders CTA with the inverse (black) filled palette", () => {
     render(<HeroBanner title="Test" ctaText="Get Started" ctaHref="/start" />);
-    expect(
-      screen.getAllByRole("link", { name: "Get Started" }).length,
-    ).toBeGreaterThan(0);
+    const cta = screen.getAllByRole("link", { name: "Get Started" })[0];
+    expect(cta?.className).toContain(
+      "bg-[var(--color-surface-default-primary)]",
+    );
   });
 });

tests/components/SectionHeader.test.tsx

@@ -78,4 +78,21 @@ describe("SectionHeader rule stack title max width", () => {
       }),
     ).toHaveClass("md:max-w-[571px]");
   });
+
+  it("keeps spaces between stacked desktop title lines", () => {
+    render(
+      <SectionHeader
+        title="How CommunityRule helps"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        stackedDesktopLines={["How", "CommunityRule", "helps"]}
+      />,
+    );
+
+    const heading = screen.getByRole("heading", {
+      name: /How CommunityRule helps/,
+    });
+    expect(heading.textContent).toMatch(/How CommunityRule helps/);
+    expect(heading.textContent).not.toMatch(/HowCommunityRulehelps/);
+  });
 });

tests/components/cards/Stat.test.tsx

@@ -16,4 +16,24 @@ describe("Stat", () => {
     expect(screen.getByText("open source projects")).toBeInTheDocument();
     expect(screen.getByText("as of June 30, 2024")).toBeInTheDocument();
   });
+
+  it("links the as-of year when a source is provided", () => {
+    render(
+      <Stat
+        value="420M+"
+        label="open source projects"
+        asOfPrefix="as of"
+        asOf="2025"
+        sourceHref="https://github.blog/news-insights/octoverse/octoverse-a-new-developer-joins-github-every-second-as-ai-leads-typescript-to-1/"
+        sourceName="GitHub Octoverse"
+      />,
+    );
+
+    expect(
+      screen.getByRole("link", { name: /2025/ }),
+    ).toHaveAttribute(
+      "href",
+      "https://github.blog/news-insights/octoverse/octoverse-a-new-developer-joins-github-every-second-as-ai-leads-typescript-to-1/",
+    );
+  });
 });

tests/components/type/AboutHeader.test.tsx

@@ -16,6 +16,27 @@ describe("AboutHeader", () => {
     expect(
       screen.getByRole("heading", { name: /CommunityRule helps/i }),
     ).toBeInTheDocument();
+    expect(screen.getByRole("heading").textContent).toMatch(
+      /CommunityRule helps/,
+    );
+    expect(screen.getByRole("heading").textContent).not.toMatch(
+      /CommunityRulehelps/,
+    );
+  });
+
+  it("keeps spaces when icons sit between words", () => {
+    render(
+      <AboutHeader
+        segments={[
+          { type: "word", text: "CommunityRule" },
+          { type: "icon", icon: "arrow" },
+          { type: "word", text: "is" },
+          { type: "word", text: "a" },
+        ]}
+      />,
+    );
+
+    expect(screen.getByRole("heading").textContent).toMatch(/CommunityRule is a/);
   });
 
   it("sizes inline marks to the 320 / 640 / 1440 About Header variants", () => {

tests/components/type/ContentLockup.test.tsx

@@ -25,6 +25,24 @@ describe("ContentLockup", () => {
     ).toBeInTheDocument();
   });
 
+  it("uses the inverse filled palette on the hero CTA", () => {
+    renderWithProviders(
+      <ContentLockup
+        variant="hero"
+        title="Collaborate"
+        ctaText="Learn how CommunityRule works"
+        ctaHref="/how-it-works"
+      />,
+    );
+
+    const cta = screen.getAllByRole("link", {
+      name: "Learn how CommunityRule works",
+    })[0];
+    expect(cta?.className).toContain(
+      "bg-[var(--color-surface-default-primary)]",
+    );
+  });
+
   it("uses Display line-height and Small/Paragraph on the hero lockup", () => {
     renderWithProviders(
       <ContentLockup

tests/e2e/critical-journeys.spec.ts

@@ -52,10 +52,10 @@ test.describe("Critical User Journeys", () => {
 
     // 7. User checks out features
     const features = [
-      "Decision-making support",
-      "Values alignment exercises",
-      "Membership guidance",
-      "Conflict resolution tools",
+      "Choose how you decide",
+      "Name your values",
+      "Define membership",
+      "Plan for conflict",
     ];
 
     for (const feature of features) {
@@ -96,7 +96,7 @@ test.describe("Critical User Journeys", () => {
     await expect(howItWorksHeading).toBeVisible();
 
     await expect(
-      page.locator("h1").filter({ hasText: "We've got your back" }),
+      page.locator("h1").filter({ hasText: "Tools for the parts that get hard" }),
     ).toBeVisible();
 
     // Check key components are rendered
@@ -108,33 +108,32 @@ test.describe("Critical User Journeys", () => {
   test("feature grid section functionality", async ({ page }) => {
     // Check section header
     await expect(
-      page.locator('h1:has-text("We\'ve got your back")'),
+      page.locator('h1:has-text("Tools for the parts that get hard")'),
     ).toBeVisible();
     await expect(
       page.locator(
-        "text=Use our toolkit to improve, document, and evolve your organization",
+        "text=Every group runs into the same knots. CommunityRule gives you a way through",
       ),
     ).toBeVisible();
 
     // Check all four feature cards - FeatureGrid uses section with grid layout
     const featureSection = page.locator(
-      'section[aria-label="Feature tools and services"], section:has-text("We\'ve got your back")',
+      'section[aria-label="Feature tools and services"], section:has-text("Tools for the parts that get hard")',
     );
-    await expect(featureSection.locator("text=Decision-making")).toBeVisible();
-    await expect(featureSection.locator("text=Values alignment")).toBeVisible();
-    await expect(featureSection.locator("text=Membership")).toBeVisible();
+    await expect(featureSection.locator("text=Choose how you decide")).toBeVisible();
+    await expect(featureSection.locator("text=Name your values")).toBeVisible();
+    await expect(featureSection.locator("text=Define membership")).toBeVisible();
     await expect(
-      featureSection.locator("text=Conflict resolution"),
+      featureSection.locator("text=Plan for conflict"),
     ).toBeVisible();
 
-    // Feature tiles are presentational — only the lockup "Learn more" is a link
+    // Feature tiles are presentational — only the lockup "Explore the toolkit" is a link
     await expect(
       featureSection.locator('a[href="#decision-making"]'),
     ).toHaveCount(0);
-    await expect(featureSection.getByRole("link", { name: "Learn more" })).toHaveAttribute(
-      "href",
-      "/learn",
-    );
+    await expect(
+      featureSection.getByRole("link", { name: "Explore the toolkit" }),
+    ).toHaveAttribute("href", "/learn");
   });
 
   test("header navigation functionality", async ({ page }) => {

tests/pages/about.test.tsx

@@ -63,4 +63,27 @@ describe("AboutPage", () => {
       }),
     ).toHaveAttribute("href", getAssetPath(governanceBookletPath()));
   });
+
+  test("shows sourced About statistics with as-of years", () => {
+    render(<AboutPage />);
+    const page = messages.pages.about;
+
+    expect(screen.getByText("420M+")).toBeInTheDocument();
+    expect(screen.getByText("24%")).toBeInTheDocument();
+    expect(screen.getByText("45%")).toBeInTheDocument();
+    expect(screen.getByText("800+")).toBeInTheDocument();
+    expect(screen.queryByText("8000+")).not.toBeInTheDocument();
+    expect(screen.queryByText("27%")).not.toBeInTheDocument();
+
+    for (const item of page.stats.items) {
+      expect(screen.getByText(item.label)).toBeInTheDocument();
+      if (item.sourceHref) {
+        expect(
+          screen.getAllByRole("link").some(
+            (link) => link.getAttribute("href") === item.sourceHref,
+          ),
+        ).toBe(true);
+      }
+    }
+  });
 });

tests/pages/home.test.jsx

@@ -35,13 +35,13 @@ describe("Page", () => {
     // FeatureGrid is next/dynamic — wait like other code-split sections
     await waitFor(() => {
       expect(
-        screen.getAllByText("We've got your back, every step of the way")
+        screen.getAllByText("Tools for the parts that get hard")
           .length,
       ).toBeGreaterThan(0);
     });
     expect(
       screen.getAllByText(
-        "Use our toolkit to improve, document, and evolve your organization.",
+        "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
       ).length,
     ).toBeGreaterThan(0);
 
@@ -111,16 +111,18 @@ describe("Page", () => {
     // Wait for dynamically imported FeatureGrid component to load
     await waitFor(() => {
       expect(
-        screen.getAllByText("We've got your back, every step of the way")
+        screen.getAllByText("Tools for the parts that get hard")
           .length,
       ).toBeGreaterThan(0);
     });
     expect(
       screen.getAllByText(
-        "Use our toolkit to improve, document, and evolve your organization.",
+        "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
       ).length,
     ).toBeGreaterThan(0);
-    const learnMore = screen.getAllByRole("link", { name: "Learn more" });
+    const learnMore = screen.getAllByRole("link", {
+      name: "Explore the toolkit",
+    });
     expect(learnMore[0]).toHaveAttribute("href", "/learn");
   });
 
@@ -157,7 +159,7 @@ describe("Page", () => {
     // FeatureGrid
     await waitFor(() => {
       expect(
-        screen.getAllByText("We've got your back, every step of the way")
+        screen.getAllByText("Tools for the parts that get hard")
           .length,
       ).toBeGreaterThan(0);
     });
@@ -211,7 +213,7 @@ describe("Page", () => {
     await waitFor(() => {
       expect(
         screen.getAllByText(
-          "Use our toolkit to improve, document, and evolve your organization.",
+          "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
         ).length,
       ).toBeGreaterThan(0);
     });
@@ -236,7 +238,7 @@ describe("Page", () => {
     });
     await waitFor(() => {
       expect(
-        screen.getAllByText("We've got your back, every step of the way")
+        screen.getAllByText("Tools for the parts that get hard")
           .length,
       ).toBeGreaterThan(0);
     });
@@ -285,7 +287,7 @@ describe("Page", () => {
     await waitFor(() => {
       expect(
         screen.getAllByText(
-          "Use our toolkit to improve, document, and evolve your organization.",
+          "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
         ).length,
       ).toBeGreaterThan(0);
     });

tests/pages/page-flow.test.jsx

@@ -90,13 +90,13 @@ describe("Page Flow Integration", () => {
     await waitFor(() => {
       expect(
         screen.getByRole("heading", {
-          name: "We've got your back, every step of the way",
+          name: "Tools for the parts that get hard",
         }),
       ).toBeInTheDocument();
     });
     expect(
       screen.getByText(
-        "Use our toolkit to improve, document, and evolve your organization.",
+        "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
       ),
     ).toBeInTheDocument();
 
@@ -233,7 +233,7 @@ describe("Page Flow Integration", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("We've got your back, every step of the way"),
+        screen.getByText("Tools for the parts that get hard"),
       ).toBeInTheDocument();
     });
 

tests/pages/user-journey.test.jsx

@@ -151,12 +151,12 @@ describe("User Journey Integration", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("We've got your back, every step of the way"),
+        screen.getByText("Tools for the parts that get hard"),
       ).toBeInTheDocument();
     });
     expect(
       screen.getByText(
-        "Use our toolkit to improve, document, and evolve your organization.",
+        "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
       ),
     ).toBeInTheDocument();
 
@@ -206,7 +206,7 @@ describe("User Journey Integration", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("We've got your back, every step of the way"),
+        screen.getByText("Tools for the parts that get hard"),
       ).toBeInTheDocument();
     });