28f9432af4
## 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 |
||
|---|---|---|
| .. | ||
| app.css | ||
