From c981e1b9ea8cb5176b7340be7c91e646b3229420 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Thu, 8 Jan 2026 13:07:46 -0800
Subject: [PATCH] Add case study images for dashboard, landing, and form

Replaced placeholder divs with actual before/after webp images
for all three transformation examples.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 public/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index de7e95e92..4de2a2615 100644
--- a/public/index.html
+++ b/public/index.html
@@ -253,12 +253,12 @@
           <article class="transformation-panel active" role="tabpanel" data-panel="0">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/dashboard.before.webp" alt="Dashboard before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>
@@ -276,12 +276,12 @@
           <article class="transformation-panel" role="tabpanel" data-panel="1">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/landing.after.webp" alt="Landing page after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>
@@ -299,12 +299,12 @@
           <article class="transformation-panel" role="tabpanel" data-panel="2">
             <div class="transformation-images">
               <figure class="transformation-before">
-                <div class="transformation-placeholder">Before screenshot</div>
+                <img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
                 <figcaption>Before</figcaption>
               </figure>
               <span class="transformation-arrow">→</span>
               <figure class="transformation-after">
-                <div class="transformation-placeholder">After screenshot</div>
+                <img src="assets/form.after.webp" alt="Form after transformation" loading="lazy">
                 <figcaption>After</figcaption>
               </figure>
             </div>