## Summary
- Replaced the broken `fade-bottom` header with a floating **pill menu**
on mobile (matching the dashboard bottom nav style)
- Fixed landing screenshot images using `w-full` instead of `h-full
w-auto` for proper aspect ratio on mobile
- Reduced skew/rotation transforms on mobile for better readability
- Removed unused `fade-bottom` CSS class
## Changes
### Header (`header.tsx`)
- **Mobile** (`< sm`): Floating pill with `rounded-full`, glassmorphism
(`bg-background/70 backdrop-blur-xl`), positioned at `top-4` with
margin. Compact logo + auth buttons with `size="sm"` and `rounded-full`.
- **Desktop** (`sm+`): Clean fixed header with `bg-background/5
backdrop-blur-lg` (unchanged from original). All nav items (Github,
Discord, auth) preserved.
### Landing images (`welcome.tsx`)
- Changed images from `h-full w-auto` to `w-full` for proper responsive
aspect ratio
- Added `max-sm:` variants to reduce rotation/skew on mobile (`-16deg/8`
instead of `-24deg/12`)
### CSS (`app.css`)
- Removed unused `.fade-bottom` class
## Screenshots
### Mobile (390x844) — Pill Header
<img
src="https://raw.githubusercontent.com/whisper-money/whisper-money/fix/welcome-page-mobile-ios/.github/pr-screenshots/pr-mobile-hero.png"
width="300" />
### Mobile — Images Section
<img
src="https://raw.githubusercontent.com/whisper-money/whisper-money/fix/welcome-page-mobile-ios/.github/pr-screenshots/pr-mobile-images.png"
width="300" />
### Desktop (1440x900)
<img
src="https://raw.githubusercontent.com/whisper-money/whisper-money/fix/welcome-page-mobile-ios/.github/pr-screenshots/pr-desktop.png"
width="800" />
## Test plan
- [ ] Verify pill header displays correctly on iOS Safari (physical
device or simulator)
- [ ] Verify header buttons (Log in, Register) work on mobile
- [ ] Verify desktop header is unchanged with all buttons (Github,
Discord, Log in, Register)
- [ ] Verify landing images display with correct aspect ratio on mobile
- [ ] Verify dark mode works for both mobile pill header and desktop
header
Víctor Falcón
