Problem
The stitch reference samples include a 4-column stats bar directly below the hero:
- 500+ VAs Trained
- Php50M+ Ads Spend Managed
- 60% Completion Rate
- 4.8/5 Operative Rating
The live landing page (src/app/page.tsx) has no equivalent. Social proof is the strongest conversion lever for a Php3k-Php10k purchase. The data exists.
Implementation
Add a <section> between the hero and pain points sections in src/app/page.tsx. Use the .cards-mobile grid or a simple 4-column CSS grid. Each stat should show:
- Large number in
var(--font-mono) (JetBrains Mono) with var(--accent) color
- Small uppercase label in
var(--text-xs) with var(--ink-500) color
- 1px border dividers between columns on desktop, stacked on mobile
Reference: stitch_amph_v2/stitch_amph_v2/landing_page/code.html lines 171-193.
Specs
- Stats: 500+, Php50M+, 60%, 4.8/5
- Layout: 4-col grid on desktop, 2-col on mobile
- Styling: match design brief tokens (mono font, accent color, subtle dividers)
- Section border:
border-bottom: 1px solid var(--border) top and bottom
- Background:
var(--surface-2) for subtle differentiation
Severity: Required — highest-ROI landing page improvement
Problem
The stitch reference samples include a 4-column stats bar directly below the hero:
The live landing page (
src/app/page.tsx) has no equivalent. Social proof is the strongest conversion lever for a Php3k-Php10k purchase. The data exists.Implementation
Add a
<section>between the hero and pain points sections insrc/app/page.tsx. Use the.cards-mobilegrid or a simple 4-column CSS grid. Each stat should show:var(--font-mono)(JetBrains Mono) withvar(--accent)colorvar(--text-xs)withvar(--ink-500)colorReference:
stitch_amph_v2/stitch_amph_v2/landing_page/code.htmllines 171-193.Specs
border-bottom: 1px solid var(--border)top and bottomvar(--surface-2)for subtle differentiationSeverity: Required — highest-ROI landing page improvement