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");
-  });
 });