Match Home, top nav, hero, and logo wall to the current marketing frames.

Puts Workshops in the header, pairs the hero with a static rule card and breakpoint CTAs, and shows the three pilot marks with no wall label.

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

tests/components/HeroBanner.test.tsx

@@ -20,8 +20,6 @@ const config: ComponentTestSuiteConfig<HeroBannerProps> = {
   optionalProps: {
     subtitle: "Subtitle",
     description: "Description",
-    ctaText: "CTA",
-    ctaHref: "/link",
   },
   primaryRole: "region",
   testCases: {
@@ -50,18 +48,29 @@ describe("HeroBanner (behavioral tests)", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders hero image", () => {
+  it("renders the team Rule card instead of a hero photograph", () => {
     render(<HeroBanner title="Test" />);
     expect(
-      screen.getByRole("img", { name: "Hero illustration" }),
+      screen.getByRole("heading", { name: "CommunityRule Creative Team" }),
     ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("img", { name: "Hero illustration" }),
+    ).not.toBeInTheDocument();
   });
 
-  it("renders CTA with the inverse (black) filled palette", () => {
-    render(<HeroBanner title="Test" ctaText="Get Started" ctaHref="/start" />);
-    const cta = screen.getAllByRole("link", { name: "Get Started" })[0];
+  it("sends Talk to a facilitator to the workshops page", () => {
+    render(<HeroBanner title="Test" />);
+    const cta = screen.getAllByRole("link", { name: "Talk to a facilitator" })[0];
+    expect(cta).toHaveAttribute("href", "/workshops");
     expect(cta?.className).toContain(
       "bg-[var(--color-surface-default-primary)]",
     );
   });
+
+  it("renders Create rule as a button for large screens", () => {
+    render(<HeroBanner title="Test" />);
+    expect(
+      screen.getAllByRole("button", { name: "Create rule" }).length,
+    ).toBeGreaterThan(0);
+  });
 });