A modern, mobile-first fintech application built with Next.js 16 and React 19, featuring a comprehensive suite of financial services built exclusively around the native ACBU (AFK) currency.

The application uses a 5-tab mobile navigation system for primary feature access:

┌─ Home       ─ Dashboard & overview
├─ Send       ─ P2P transfers, international, history
├─ Mint       ─ Create/redeem AFK currency
├─ Business   ─ SME, payroll, enterprise tools
└─ Me         ─ Account, settings, security

app/
├── page.tsx                 # Home dashboard
├── send/
│   └── page.tsx            # P2P transfers (main)
│   └── international/      # International transfers
│   └── history/            # Transfer history
├── mint/
│   └── page.tsx            # Mint/Burn hub
├── business/
│   ├── page.tsx            # Business hub
│   ├── sme/                # SME services
│   ├── salary/             # Payroll management
│   ├── enterprise/         # Enterprise features
│   └── gateway/            # Payment gateway
├── me/
│   ├── page.tsx            # Account overview
│   ├── profile/            # User profile
│   ├── settings/           # Account settings
│   ├── kyc/                # KYC verification
│   ├── recovery/           # Account recovery
│   ├── wallet/             # Wallet management
│   ├── activity/           # Activity history
│   └── 2fa/                # Two-factor auth
├── savings/                # Savings accounts
├── lending/                # Lending products
├── bills/                  # Bill payments
└── auth/
    ├── signin/             # Sign in
    └── 2fa/                # 2FA verification

components/
├── mobile-nav.tsx          # Bottom navigation
├── app-layout.tsx          # Main layout wrapper
└── ui/                     # shadcn/ui components

docs/
├── ARCHITECTURE.md         # Detailed architecture
├── ROUTES.md              # Complete routing guide
└── README.md              # This file

• Primary: Purple/Indigo (oklch(0.35 0.12 280))
• Accent: Teal/Cyan (oklch(0.55 0.15 160))
• Neutrals: Grayscale (white, grays, black)
• Currency: AFK only (no USD, Stellar, or external references)

• Headings: Use font-sans for consistency
• Body: Consistent 14px+ font sizes
• Line Height: 1.4-1.6 for readability

• Mobile-First: Optimized for mobile devices
• Flexbox: Primary layout method
• Max Width: 28rem (md breakpoint) for content
• Bottom Padding: 24 (96px) for mobile nav visibility

The application uses AFK (ACBU) as the only currency:

• All balances displayed in AFK
• All transactions in AFK
• All fees in AFK
• Stellar network for blockchain operations
• No USD, USDC, or external currency conversions

• 1 AFK = 1 unit of native ACBU
• Network fee: Free (Stellar protocol)
• Processing fees: 0.50-1.00 AFK per operation
• Exchange displayed in rates tabs (informational only)

• Mock authentication (ready for integration)
• Placeholder user data
• 2FA flow structure ready
• KYC verification workflow

• Input validation on all forms
• Error handling for API operations
• Secure session management pattern
• Ready for API.acbu.io integration

• P2P Transfers: Send money between wallets with frequent recipient management
• Mint/Burn: Create and redeem AFK currency
• Business Services: Complete suite for SME, payroll, and enterprise
• Account Management: Profile, settings, KYC, recovery
• Savings & Lending: Interest-bearing accounts and loan products
• Bill Payments: Utilities, airtime, and services

Features are grouped logically with internal navigation:

• Send page includes tabs for P2P, Mint/Burn, International, History
• Mint page includes tabs for Mint, Burn, Rates
• Business page includes cards for all business services

• 5-item bottom tab bar: Persistent across all pages
• Active state: Current route highlighted in primary color
• Touch-friendly: Large tap targets (56px minimum)
• Icon + Label: Clear identification

• Mobile-first design: Optimized for 375px-430px width
• Max width: 28rem for content containers
• Proper spacing: Consistent 16px padding
• Safe area: Bottom padding for iOS notch support

All pages include mock data structures ready for real API calls:

Base URL: https://api.acbu.io

Key Endpoints (to be implemented):
POST   /send              # Create transfer
GET    /send/history      # Get transfers
POST   /mint              # Mint operation
POST   /burn              # Burn operation
GET    /account           # User account
GET    /business          # Business services
POST   /kyc/start         # Start KYC
GET    /bills/catalog     # Bill catalog
POST   /bills/pay         # Pay bill

• Framework: Next.js 16 with App Router
• UI Library: React 19 with shadcn/ui
• Styling: Tailwind CSS v4
• Icons: Lucide React
• State: React hooks (SWR ready)

• /components/mobile-nav.tsx - Navigation configuration
• /components/app-layout.tsx - Layout wrapper
• /app/globals.css - Design tokens and theme
• /docs/ROUTES.md - Complete routing reference
• /docs/ARCHITECTURE.md - Architecture details

• ARCHITECTURE.md - System design and principles
• ROUTES.md - Complete routing guide with examples
• README.md - This file

1. API Integration: Connect to api.acbu.io endpoints
2. Authentication: Replace mock auth with real implementation
3. Database: Set up transaction and user data persistence
4. Testing: Add unit and integration tests
5. Deployment: Deploy to Vercel with environment variables

• Currency: All USD references have been removed; AFK is the only currency
• Navigation: New mobile nav with 5 primary tabs (Home, Send, Mint, Business, Me)
• Structure: Organized architecture makes it easy to add new features
• Scalability: Each section is modular and can grow independently
• Accessibility: WCAG 2.1 compliant with semantic HTML