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