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>

app/components/cards/Rule/Rule.container.tsx

@@ -43,6 +43,7 @@ const RuleContainer = memo<RuleProps>(
     logoAlt,
     communityInitials,
     hideCategoryAddButton = false,
+    interactive,
     hasBottomLinks = false,
     bottomStatusLabel,
     bottomLinks,
@@ -53,12 +54,13 @@ const RuleContainer = memo<RuleProps>(
     surfaceColor,
   }) => {
     const size = sizeProp ?? "L";
+    const isInteractive = interactive ?? !hasBottomLinks;
     const t = useTranslation("ruleCard");
     const cardAriaLabel = t("ariaLabel")?.replace("{title}", title) || title;
     const recommendedLabel = t("recommendedLabel");
 
     const handleClick = () => {
-      if (hasBottomLinks) return;
+      if (!isInteractive || hasBottomLinks) return;
       // Basic analytics event tracking
       if (typeof window !== "undefined" && window.gtag) {
         window.gtag("event", "template_selected", {
@@ -79,7 +81,7 @@ const RuleContainer = memo<RuleProps>(
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (hasBottomLinks) return;
+      if (!isInteractive || hasBottomLinks) return;
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         handleClick();
@@ -98,9 +100,11 @@ const RuleContainer = memo<RuleProps>(
         icon={icon}
         backgroundColor={backgroundColor}
         className={className}
-        href={hasBottomLinks ? undefined : href}
-        onClick={hasBottomLinks ? undefined : handleClick}
-        onKeyDown={hasBottomLinks || href ? undefined : handleKeyDown}
+        href={isInteractive && !hasBottomLinks ? href : undefined}
+        onClick={isInteractive && !hasBottomLinks ? handleClick : undefined}
+        onKeyDown={
+          isInteractive && !hasBottomLinks && !href ? handleKeyDown : undefined
+        }
         expanded={expanded}
         size={size}
         categories={categories}
@@ -108,6 +112,7 @@ const RuleContainer = memo<RuleProps>(
         logoAlt={logoAlt}
         communityInitials={communityInitials}
         hideCategoryAddButton={hideCategoryAddButton}
+        interactive={isInteractive}
         hasBottomLinks={hasBottomLinks}
         bottomStatusLabel={bottomStatusLabel}
         bottomLinks={bottomLinks}

app/components/cards/Rule/Rule.types.ts

@@ -63,6 +63,11 @@ export interface RuleProps {
   communityInitials?: string;
   /** Hide the per-category "+" add chip affordance (e.g. read-only template review). */
   hideCategoryAddButton?: boolean;
+  /**
+   * When false, the card is a static article (Home hero). Default follows
+   * {@link hasBottomLinks}: interactive unless bottom links are shown.
+   */
+  interactive?: boolean;
   /**
    * Figma `Card / Rule` variant: description + optional status chip + text links
    * (e.g. Duplicate / Delete, or Continue / Start new rule). When set, the card
@@ -117,6 +122,7 @@ export interface RuleViewProps {
   logoAlt?: string;
   communityInitials?: string;
   hideCategoryAddButton?: boolean;
+  interactive?: boolean;
   hasBottomLinks?: boolean;
   bottomStatusLabel?: string;
   bottomLinks?: RuleBottomLink[];

app/components/cards/Rule/Rule.view.tsx

@@ -29,6 +29,7 @@ export function RuleView({
   logoAlt,
   communityInitials,
   hideCategoryAddButton = false,
+  interactive,
   hasBottomLinks = false,
   bottomStatusLabel,
   bottomLinks,
@@ -41,7 +42,7 @@ export function RuleView({
   recommendedLabel,
 }: RuleViewProps) {
   const ariaLabel = cardAriaLabel;
-  const interactiveCard = !hasBottomLinks;
+  const interactiveCard = interactive ?? !hasBottomLinks;
 
   // Size-based styling
   const isLarge = size === "L";