Add codeComparison slide type for side-by-side code examples

Introduces new slide type specifically for comparing code snippets (e.g., ineffective vs effective prompts).
Includes GPU-optimized rendering with proper syntax highlighting via RevealHighlight plugin.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ofriw

website/src/components/PresentationMode/RevealSlideshow.module.css

@@ -1,3 +1,10 @@
+/* GPU optimization for smooth slide transitions - shared utility */
+.gpuOptimized {
+  will-change: transform;
+  contain: layout paint;
+  transform: translateZ(0);
+}
+
 .presentationOverlay {
   position: fixed;
   top: 0;
@@ -96,23 +103,43 @@
 }
 
 .codeBlock {
+  composes: gpuOptimized;
   font-size: 0.8em;
   line-height: 1.4;
   margin: 0;
   border-radius: 8px;
   background: #1e1e1e;
-  padding: 1em;
+  padding: 1.2em;
   text-align: left;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: auto;
   height: 100%;
-  display: flex;
-  align-items: center;
+  white-space: pre;
 }
 
 .codeBlock code {
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
 }
 
+.codeBlockSmall {
+  composes: gpuOptimized;
+  font-size: 0.65em;
+  line-height: 1.3;
+  margin: 0.5em 0 0 0;
+  border-radius: 6px;
+  background: #1e1e1e;
+  padding: 1em;
+  text-align: left;
+  overflow-y: auto;
+  overflow-x: auto;
+  max-height: 400px;
+  white-space: pre;
+}
+
+.codeBlockSmall code {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+}
+
 .caption {
   font-size: clamp(0.8rem, 1.5vw, 0.95em);
   line-height: 1.4;
@@ -134,6 +161,7 @@
 
 .comparisonLeft,
 .comparisonRight {
+  composes: gpuOptimized;
   padding: clamp(0.7em, 1.5vw, 1em);
   border-radius: 8px;
   overflow-y: auto;
@@ -203,6 +231,7 @@
 
 .metaphorColumn,
 .realityColumn {
+  composes: gpuOptimized;
   padding: clamp(0.7em, 1.5vw, 1em);
   border-radius: 8px;
   overflow-y: auto;
@@ -301,6 +330,7 @@
 
 /* Code Execution Flow Styles */
 .executionFlow {
+  composes: gpuOptimized;
   text-align: left;
   max-width: 90%;
   margin: 0 auto;
@@ -496,7 +526,7 @@
   margin-left: auto;
   margin-right: auto;
   height: 100%;
-  display: flex;
+  display: flex !important;
   flex-direction: column;
   justify-content: flex-start;
   padding: 1em 0 2.5em 0;
@@ -527,15 +557,15 @@
 }
 
 /* Caption area - fixed at bottom when present */
-.slideCaption {
+:global(.reveal) .slideCaption {
   margin-top: auto;
-  margin-bottom: 0;
+  margin-bottom: 2em;
   flex-shrink: 0;
   padding-top: 0.5em;
   padding-bottom: 0;
 }
 
-:global(.reveal p),
+:global(.reveal p:not(.slideCaption)),
 :global(.reveal ul),
 :global(.reveal ol) {
   max-width: 90%;

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import Reveal from 'reveal.js';
+import RevealHighlight from 'reveal.js/plugin/highlight/highlight';
 import 'reveal.js/dist/reveal.css';
 import 'reveal.js/dist/theme/black.css';
+import 'reveal.js/plugin/highlight/monokai.css';
 import styles from './RevealSlideshow.module.css';
 
 // Import visual components that might be used in presentations
@@ -28,7 +30,7 @@ interface CodeExecutionStep {
 }
 
 interface Slide {
-  type: 'title' | 'concept' | 'code' | 'comparison' | 'visual' | 'takeaway' | 'marketingReality' | 'codeExecution';
+  type: 'title' | 'concept' | 'code' | 'comparison' | 'codeComparison' | 'visual' | 'takeaway' | 'marketingReality' | 'codeExecution';
   title: string;
   subtitle?: string;
   content?: string[];
@@ -38,6 +40,8 @@ interface Slide {
   component?: string;
   left?: { label: string; content: string[] };
   right?: { label: string; content: string[] };
+  leftCode?: { label: string; language: string; code: string };
+  rightCode?: { label: string; language: string; code: string };
   metaphor?: { label: string; content: string[] };
   reality?: { label: string; content: string[] };
   steps?: CodeExecutionStep[];
@@ -102,7 +106,7 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
       loop: false,
 
       // Plugins
-      plugins: [],
+      plugins: [RevealHighlight],
     });
 
     deck.initialize().then(() => {
@@ -233,6 +237,35 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
           </section>
         );
 
+      case 'codeComparison':
+        return (
+          <section key={key} data-notes={formatSpeakerNotes(slide.speakerNotes)}>
+            <h2>{slide.title}</h2>
+            <div className={styles.comparison}>
+              {slide.leftCode && (
+                <div className={styles.comparisonLeft}>
+                  <h3 className={styles.ineffective}>{slide.leftCode.label}</h3>
+                  <pre className={styles.codeBlockSmall}>
+                    <code className={`language-${slide.leftCode.language || 'text'}`}>
+                      {slide.leftCode.code}
+                    </code>
+                  </pre>
+                </div>
+              )}
+              {slide.rightCode && (
+                <div className={styles.comparisonRight}>
+                  <h3 className={styles.effective}>{slide.rightCode.label}</h3>
+                  <pre className={styles.codeBlockSmall}>
+                    <code className={`language-${slide.rightCode.language || 'text'}`}>
+                      {slide.rightCode.code}
+                    </code>
+                  </pre>
+                </div>
+              )}
+            </div>
+          </section>
+        );
+
       case 'marketingReality':
         return (
           <section key={key} data-notes={formatSpeakerNotes(slide.speakerNotes)}>