Neutral mode for code comparison slide

Author: ofriw

scripts/generate-presentation.js

@@ -590,6 +590,21 @@ INCORRECT: Putting the better option on the left will show it with RED ✗ styli
       },
       "speakerNotes": { ... }
     },
+
+CODE COMPARISON SLIDE (codeComparison):
+
+Like regular comparison slides, codeComparison also supports the "neutral" flag:
+
+1. EVALUATIVE (default, neutral=false or omitted):
+   - LEFT side → RED background, RED heading (ineffective/worse code)
+   - RIGHT side → GREEN background, GREEN heading (effective/better code)
+   - Use when one code example is clearly inferior
+
+2. NEUTRAL (neutral=true):
+   - BOTH sides → PURPLE background, PURPLE heading (both valid approaches)
+   - Use when comparing valid code alternatives with different trade-offs
+   - Examples: "Imperative vs Functional", "Optimized for Speed vs Readability"
+
     {
       "type": "codeComparison",
       "title": "Prompt Example: Ineffective vs Effective",
@@ -605,6 +620,22 @@ INCORRECT: Putting the better option on the left will show it with RED ✗ styli
       },
       "speakerNotes": { ... }
     },
+    {
+      "type": "codeComparison",
+      "title": "Code Style Trade-offs: Imperative vs Functional",
+      "neutral": true,                 // OPTIONAL: Use neutral=true for valid alternatives (PURPLE neutral styling)
+      "leftCode": {
+        "label": "Imperative Style",   // Both styles valid - neutral styling
+        "language": "javascript",
+        "code": "const result = [];\nfor (let i = 0; i < items.length; i++) {\n  if (items[i] > 10) {\n    result.push(items[i] * 2);\n  }\n}\nreturn result;"
+      },
+      "rightCode": {
+        "label": "Functional Style",   // Both styles valid - neutral styling
+        "language": "javascript",
+        "code": "return items\n  .filter(x => x > 10)\n  .map(x => x * 2);"
+      },
+      "speakerNotes": { ... }
+    },
     {
       "type": "marketingReality",
       "title": "Marketing vs Reality: What Actually Happens",

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -312,8 +312,18 @@ export default function RevealSlideshow({
             <h2>{slide.title}</h2>
             <div className={`${styles.comparison} ${styles.comparisonCode}`}>
               {slide.leftCode && (
-                <div className={styles.comparisonLeft}>
-                  <h3 className={styles.ineffective}>{slide.leftCode.label}</h3>
+                <div
+                  className={
+                    slide.neutral ? styles.neutralLeft : styles.comparisonLeft
+                  }
+                >
+                  <h3
+                    className={
+                      slide.neutral ? styles.neutralHeading : styles.ineffective
+                    }
+                  >
+                    {slide.leftCode.label}
+                  </h3>
                   <pre className={styles.codeBlockSmall}>
                     <code
                       className={`language-${slide.leftCode.language || 'text'}`}
@@ -324,8 +334,18 @@ export default function RevealSlideshow({
                 </div>
               )}
               {slide.rightCode && (
-                <div className={styles.comparisonRight}>
-                  <h3 className={styles.effective}>{slide.rightCode.label}</h3>
+                <div
+                  className={
+                    slide.neutral ? styles.neutralRight : styles.comparisonRight
+                  }
+                >
+                  <h3
+                    className={
+                      slide.neutral ? styles.neutralHeading : styles.effective
+                    }
+                  >
+                    {slide.rightCode.label}
+                  </h3>
                   <pre className={styles.codeBlockSmall}>
                     <code
                       className={`language-${slide.rightCode.language || 'text'}`}