Implement marketingReality slide type with improved two-column layout

🤖 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

@@ -177,6 +177,69 @@
   color: #51cf66;
 }
 
+/* Marketing vs Reality - Translation Pattern */
+.marketingReality {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1em, 2vw, 1.5em);
+  margin: 1em 0;
+  max-height: calc(100vh - 18rem);
+}
+
+.metaphorColumn,
+.realityColumn {
+  padding: clamp(0.7em, 1.5vw, 1em);
+  border-radius: 8px;
+  overflow-y: auto;
+}
+
+.metaphorColumn {
+  background: rgba(124, 58, 237, 0.1); /* --brand-primary with alpha */
+  border: 2px solid rgba(124, 58, 237, 0.3);
+}
+
+.realityColumn {
+  background: rgba(109, 40, 217, 0.12); /* --brand-primary-dark with alpha */
+  border: 2px solid rgba(109, 40, 217, 0.35);
+}
+
+.metaphorHeading {
+  color: #8b5cf6; /* --brand-primary-light */
+  font-size: clamp(0.9rem, 1.8vw, 1em);
+  margin-bottom: 0.3em;
+  font-weight: 600;
+}
+
+.realityHeading {
+  color: #7c3aed; /* --brand-primary */
+  font-size: clamp(0.9rem, 1.8vw, 1em);
+  margin-bottom: 0.3em;
+  font-weight: 600;
+}
+
+.marketingReality ul {
+  text-align: left;
+  font-size: clamp(0.65rem, 1.3vw, 0.75em);
+  list-style: none;
+  padding: 0;
+}
+
+.marketingReality li {
+  margin: 0.35em 0;
+  padding-left: 1.2em;
+  position: relative;
+  line-height: 1.4;
+}
+
+.metaphorColumn li::before,
+.realityColumn li::before {
+  content: "→";
+  position: absolute;
+  left: 0;
+  color: #8b5cf6; /* --brand-primary-light */
+  font-weight: 600;
+}
+
 .visualContainer {
   margin: 2em 0;
   display: flex;

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -20,7 +20,7 @@ interface SpeakerNotes {
 }
 
 interface Slide {
-  type: 'title' | 'concept' | 'code' | 'comparison' | 'visual' | 'takeaway';
+  type: 'title' | 'concept' | 'code' | 'comparison' | 'visual' | 'takeaway' | 'marketingReality';
   title: string;
   subtitle?: string;
   content?: string[];
@@ -30,6 +30,8 @@ interface Slide {
   component?: string;
   left?: { label: string; content: string[] };
   right?: { label: string; content: string[] };
+  metaphor?: { label: string; content: string[] };
+  reality?: { label: string; content: string[] };
   speakerNotes?: SpeakerNotes;
 }
 
@@ -197,6 +199,35 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
           </section>
         );
 
+      case 'marketingReality':
+        return (
+          <section key={key} data-notes={formatSpeakerNotes(slide.speakerNotes)}>
+            <h2>{slide.title}</h2>
+            <div className={styles.marketingReality}>
+              {slide.metaphor && (
+                <div className={styles.metaphorColumn}>
+                  <h3 className={styles.metaphorHeading}>{slide.metaphor.label}</h3>
+                  <ul>
+                    {slide.metaphor.content.map((item, i) => (
+                      <li key={i} className="fragment" data-fragment-index={i * 2}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              {slide.reality && (
+                <div className={styles.realityColumn}>
+                  <h3 className={styles.realityHeading}>{slide.reality.label}</h3>
+                  <ul>
+                    {slide.reality.content.map((item, i) => (
+                      <li key={i} className="fragment" data-fragment-index={i * 2 + 1}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </section>
+        );
+
       case 'visual':
         const VisualComponent = slide.component ? VISUAL_COMPONENTS[slide.component] : null;
         return (