[UI/UX] Implement Mobile-First Onboarding and Transaction Flows

[Queenode]

🟡 Priority: High
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files: src/app/(mobile)/, src/components/mobile/
Labels: enhancement, priority:high, mobile

Requirements

1. Mobile Experience Translation

   • Build the dedicated Mobile Experience screens from Figma: User onboarding, Wallet balance, Savings group overview, Contribution confirmation, Notifications, and Payout confirmations.

2. Touch-Optimized Interactions

   • Ensure all buttons and interactive elements meet Apple/Google tap target guidelines (minimum 44x44px).
   • Implement swipe-to-dismiss for notifications and bottom-sheet modals for transaction confirmations instead of desktop-style center modals.

3. Testing

   • Run tests on real mobile devices or BrowserStack to verify touch interactions and viewport height (100dvh) handling.

---

[GBOYEE]

Hey team — I'd like to take this on ([UI/UX] Implement Mobile-First Onboarding and Transaction Fl). I'll build the UI per the acceptance criteria. I'll get a PR up for this as soon as I'm assigned.

[Primex-hub]

I would love to solve this issue and I can submit within 24hrs