feat: build reader signup page

[davedumto]

Feature: Complete Wallet Onboarding Flow

closes #41

Summary

Implements a comprehensive wallet connection onboarding experience for ChainLib readers with responsive design, smooth animations, and step-by-step guidance.

What's New

• Multi-step onboarding flow with 7 distinct states
• Responsive design with desktop/mobile layouts
• Animated transitions using Framer Motion
• QR code integration for mobile wallet connections
• TypeScript implementation with proper type safety

Flow Steps

1. Wallet Selection - Choose between Bravos/Argent wallets
2. QR Scan - Scan QR code with mobile app or use website
3. Connecting - Loading state while establishing connection
4. Sign Message - Prompt user to sign authentication message
5. Signing - Processing signature verification
6. Connected - Success confirmation with proceed option
7. Failure state -

Design Features

• Left panel branding with dynamic content based on current step
• Smooth animations for loaders, success states, and page transitions
• Mobile-first responsive design with proper breakpoints
• Consistent spacing and modern UI components
• Back navigation support throughout the flow

Technical Implementation

• Built with Next.js 14 and TypeScript
• Framer Motion for premium animations
• Tailwind CSS for styling
• Modular components to avoid code repetition
• Proper state management with React hooks

Responsive Behavior

• Desktop: Side-by-side layout with branded left panel
• Mobile: Stacked layout with back navigation header
• Consistent UX across all device sizes

Animation Features

• Spinning loaders with smooth rotation
• Spring animations for success states
• Page transitions with fade and slide effects
• CSS fallback for animation compatibility

Screenshots

[davedumto]

hi @Iwueseiter I opened this new PR kindly look through

[Iwueseiter]

@davedumto, Great work!