Skip to content

Show hero stat (₱60k–₱80k/mo) on mobile viewport #54

Description

@projectamazonph

Problem

In src/app/home.module.css, .heroDecorative { display: none } hides the ₱60k–₱80k/mo stat box below 768px. This is the strongest social proof on the page — and most Filipino VAs browse on phones.

Current behavior

  • ≥768px: Stat box visible as a side panel in the hero (flex-direction: row)
  • <768px: Completely hidden

Proposed fix

On mobile, show the stat below the CTA buttons in a compact horizontal layout:

[₱60k–₱80k/mo]
 market rate, specialist Amazon PPC VAs

Add a mobile-specific rule inside the @media (max-width: 767px) block:

.heroDecorative {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.heroDecorativeCaption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-500);
  white-space: normal;
}

The desktop rule at @media (min-width: 768px) already shows it as a vertical panel — no changes needed there.

Severity: Required — strongest social proof invisible on primary viewport

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions