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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions