Add 'Proof, from the field' section — real before/after work + client testimonials
Two case studies pulled from the reference build: Innovative Aluminum Systems (dealer pricing tool) and OnDek Vinyl Worx (customer order form), each showing a before/after screenshot pair plus the client's quote and headshot. Side-by-side with an arrow on desktop; stacks with the arrow hidden on mobile. Framed to OC's adoption thesis (systems stick because the people were brought along). Assets in assets/work/ + assets/people/. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+84
@@ -176,6 +176,90 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="band light field" data-bg="light" id="work-proof">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Proof, from the field</p>
|
||||
<h2>Built to be <em>actually used.</em></h2>
|
||||
<p class="section-intro">These are systems we built for real Canadian shops. The reason they stuck isn't the software — it's that the people who had to use them were brought along. Same rigor, same soul.</p>
|
||||
|
||||
<div class="field-cases">
|
||||
<article class="field-case">
|
||||
<header class="field-case-header">
|
||||
<div class="field-case-meta">
|
||||
<p class="field-case-client">Innovative Aluminum Systems</p>
|
||||
<p class="field-case-type">Dealer Pricing Tool · 2026 Price List</p>
|
||||
</div>
|
||||
<div class="field-outcome-pills">
|
||||
<span class="field-pill">Reseller self-reliance</span>
|
||||
<span class="field-pill">Staff time reclaimed</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="field-shots-sidebyside">
|
||||
<figure class="field-shot-wrap">
|
||||
<figcaption class="field-shot-label">Before · Excel workbook</figcaption>
|
||||
<div class="field-shot"><img src="assets/work/ias-before.png" alt="IAS dealer pricing before: a multi-tab Excel workbook with manual price columns" width="1735" height="808" loading="lazy" decoding="async"></div>
|
||||
</figure>
|
||||
<div class="field-shot-arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="14 5 21 12 14 19"/></svg>
|
||||
</div>
|
||||
<figure class="field-shot-wrap">
|
||||
<figcaption class="field-shot-label">After · Hosted web app</figcaption>
|
||||
<div class="field-shot"><img src="assets/work/ias-after.png" alt="IAS dealer pricing after: a filterable product catalog with live discount logic and order export" width="1919" height="953" loading="lazy" decoding="async"></div>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="field-case-body">
|
||||
<blockquote class="field-quote">“We've been imagining something like this for years. Our catalog used to live in a spreadsheet we'd email back and forth — now our dealers can filter products, build orders in their own pricing, and send them through electronically. Mike built exactly what we needed.”</blockquote>
|
||||
<div class="field-attribution">
|
||||
<div class="field-headshot"><img src="assets/people/fred-hobeyn.webp" alt="Fred Hobeyn" width="160" height="160" loading="lazy" decoding="async"></div>
|
||||
<div class="field-attribution-text">
|
||||
<p class="field-name">Fred Hobeyn</p>
|
||||
<p class="field-role">Owner · Innovative Aluminum Systems</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="field-divider" aria-hidden="true"></div>
|
||||
|
||||
<article class="field-case">
|
||||
<header class="field-case-header">
|
||||
<div class="field-case-meta">
|
||||
<p class="field-case-client">OnDek Vinyl Worx</p>
|
||||
<p class="field-case-type">Customer Order Form · November 2025</p>
|
||||
</div>
|
||||
<div class="field-outcome-pills">
|
||||
<span class="field-pill">Self-serve ordering</span>
|
||||
<span class="field-pill">Fewer pricing errors</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="field-shots-sidebyside">
|
||||
<figure class="field-shot-wrap">
|
||||
<figcaption class="field-shot-label">Before · Printed Excel sheet</figcaption>
|
||||
<div class="field-shot"><img src="assets/work/ondek-before.png" alt="OnDek order form before: a printed Excel sheet with manual product and quantity columns" width="895" height="715" loading="lazy" decoding="async"></div>
|
||||
</figure>
|
||||
<div class="field-shot-arrow" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><polyline points="14 5 21 12 14 19"/></svg>
|
||||
</div>
|
||||
<figure class="field-shot-wrap">
|
||||
<figcaption class="field-shot-label">After · Web order form</figcaption>
|
||||
<div class="field-shot"><img src="assets/work/ondek-after.png" alt="OnDek order form after: a web-based order form with price tiers, pattern selector, and live totals" width="1546" height="806" loading="lazy" decoding="async"></div>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="field-case-body">
|
||||
<blockquote class="field-quote">“I've been in this industry long enough to be skeptical of tech promises. This wasn't that. Michael took the time to understand our process first, then built something that fits. It's a massive leap forward for us.”</blockquote>
|
||||
<div class="field-attribution">
|
||||
<div class="field-headshot"><img src="assets/people/jim-szlabon.webp" alt="Jim Szlabon" width="160" height="160" loading="lazy" decoding="async"></div>
|
||||
<div class="field-attribution-text">
|
||||
<p class="field-name">Jim Szlabon</p>
|
||||
<p class="field-role">Senior Sales · OnDek Vinyl Worx</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="band light who" data-bg="light" id="who">
|
||||
<div class="wrap narrow">
|
||||
<p class="eyebrow">Who we are</p>
|
||||
|
||||
Reference in New Issue
Block a user