Refine mobile hero spacing and investor logo rotation

Merged
WI
1mo ago
+77-20

Summary

Improve the mobile hero hierarchy on the home and Flows pages with larger headlines, smaller supporting text, and consistent spacing: 14px between headline and copy, 28px before buttons, 40px before investors, and 12px between the investor label and logos.

Show two investor logos at a time on mobile, fading between pairs every five seconds and starting with Y Combinator and Cortical Ventures. Preserve desktop logo order and use a static list for reduced-motion users. Tighten the investor label-to-logo gap on all sizes.

Validation

  • Local Playwright checks at 375px, 600px, 680px, and 1280px across the affected layouts.
  • Verified paired logo visibility, desktop visibility, reduced-motion fallback, and no horizontal overflow.
  • Measured the 14px / 28px / 40px / 12px spacing on both mobile heroes.
  • git diff --check passed.

[!NOTE]
Low Risk
Presentation-only CSS and marketing component changes with no auth, data, or API impact.

Overview
Refines mobile hero hierarchy on the landing and Flows pages: larger headlines (clamp(2.75rem, 12vw, 4rem)), tighter supporting copy (0.95rem), and explicit spacing for copy blocks, CTAs, and the investor strip via --investor-strip-padding-top (40px on Flows, 2.5rem on the home hero section).

Changes InvestorStrip for small screens by showing two logos at a time with a CSS fade rotation (~5s per pair), while desktop keeps the full row. Logo markup is centralized in a logos array reused by both layouts; prefers-reduced-motion restores the static desktop row on mobile.

Reviewed by Cursor Bugbot for commit 5a09abc97f6837a7366794ce5ad75eb8bc720c22. Bugbot is set up for automated code reviews on this repo. Configure here.

Summary by cubic

Refines the home and Flows mobile heroes with larger headlines, more compact supporting text, and consistent spacing: 14px between headline and copy, 28px before buttons, 40px before investors, and 12px between the investor label and logos. On screens up to 680px, the investor strip now shows two logos at a time, starting with Y Combinator and Cortical Ventures and fading to the next pair every five seconds.

Details

  • Desktop investor order remains unchanged.
  • Reduced-motion users see the full investor list without animation.