Reorder case study tabs: Landing Page, Form UX, Dashboard

Put stronger examples first.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-08 13:12:12 -08:00
co-authored by Claude Opus 4.5
parent c981e1b9ea
commit df02f9c158
+27 -27
View File
@@ -243,37 +243,14 @@
<div class="transformations-tabbed" data-reveal>
<!-- Tab buttons -->
<div class="transformation-tabs" role="tablist">
<button class="transformation-tab active" role="tab" aria-selected="true" data-tab="0">Dashboard</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Landing Page</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Form UX</button>
<button class="transformation-tab active" role="tab" aria-selected="true" data-tab="0">Landing Page</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Form UX</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Dashboard</button>
</div>
<!-- Tab panels -->
<div class="transformation-panels">
<article class="transformation-panel active" role="tabpanel" data-panel="0">
<div class="transformation-images">
<figure class="transformation-before">
<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">
<img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Dashboard Redesign</h3>
<p class="transformation-desc">Generic analytics dashboard transformed into a distinctive, scannable interface.</p>
<div class="transformation-commands">
<span class="transformation-command">/audit</span>
<span class="transformation-command">/normalize</span>
<span class="transformation-command">/bolder</span>
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="1">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
@@ -296,7 +273,7 @@
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="2">
<article class="transformation-panel" role="tabpanel" data-panel="1">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
@@ -318,6 +295,29 @@
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="2">
<div class="transformation-images">
<figure class="transformation-before">
<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">
<img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Dashboard Redesign</h3>
<p class="transformation-desc">Generic analytics dashboard transformed into a distinctive, scannable interface.</p>
<div class="transformation-commands">
<span class="transformation-command">/audit</span>
<span class="transformation-command">/normalize</span>
<span class="transformation-command">/bolder</span>
</div>
</div>
</article>
</div>
</div>