All Docs
FeaturesDepositClearUpdated March 15, 2026

MOB-16: Improving the Landing Hero on Mobile Viewports

MOB-16: Improving the Landing Hero on Mobile Viewports

Release: v0.1.346
Category: Images & Media

Background

The landing page hero section includes a CSS-rendered dashboard mockup — complete with browser chrome, KPI summary cards, and a scrollable work queue — designed to give visitors an immediate, visual sense of the product. The mockup is constrained to w-full max-w-5xl, which works well at desktop widths but presents a legibility problem at mobile viewport sizes.

The Problem

At 375px (a standard baseline mobile width), the max-w-5xl mockup scales down significantly. The simulated text inside KPI cards and work queue rows — rendered at text-xs and text-sm — becomes too small to read. This undermines the core intent of the hero visual: demonstrating the product's clarity and usefulness at a glance.

While the work queue badge labels already handled this partially (using hidden sm:inline-flex to suppress them on small screens), no mobile-specific layout or simplified view existed for the broader mockup.

The Fix

The hero section in src/app/page.tsx now handles mobile viewports explicitly. There are three approaches available, all aimed at ensuring the mockup communicates its value effectively regardless of screen size:

Option 1 — Hide & Replace

The full dashboard mockup is hidden on mobile using hidden sm:block. In its place, a lightweight 2-card stat strip (marked sm:hidden) is shown — preserving the social proof signal without the complexity of the full mockup at small sizes.

<!-- Full mockup: visible from sm breakpoint up -->
<div class="hidden sm:block">
  <!-- dashboard mockup -->
</div>

<!-- Simplified stat strip: mobile only -->
<div class="sm:hidden">
  <!-- 2-card KPI strip -->
</div>

Option 2 — Scale Transform

A CSS scale transform is applied to the mockup container, reducing it proportionally on mobile while keeping the full layout intact:

<div class="scale-75 sm:scale-100 origin-top">
  <!-- dashboard mockup -->
</div>

This is the lowest-effort approach and preserves the visual fidelity of the mockup, though text may still be small depending on the device.

Option 3 — Responsive Text & Grid

The internal layout of the mockup is made responsive by increasing KPI card text size and adjusting the column grid:

  • KPI card text increased from text-xs to text-sm
  • Grid changed from grid-cols-2 md:grid-cols-4 to grid-cols-2 within the mockup, so cards stack to a 2-column layout on all viewports
<!-- Before -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">

<!-- After -->
<div class="grid grid-cols-2 gap-2">

Affected File

FileChange
src/app/page.tsxHero section updated for mobile viewport handling

Notes

  • The hidden sm:inline-flex badge label behaviour in the work queue rows is unchanged — this was already correct.
  • Any of the three options above satisfies the MOB-16 requirement. The chosen implementation may combine elements from more than one approach.