# MyTelco Design Improvement Task

## Goal
Improve the React Native app's design to match the premium reference design at https://files.winds-os.com/mytelco/ (HTML mockup saved at /tmp/mytelco-reference.html).

## Reference Design Key Features (from the HTML mockup)
The reference is a premium Airtel-style telecom app with these design characteristics:

### Visual Style
- **Font**: Inter (use system font in RN, closest match)
- **Primary**: #E40000 (red) with gradient `135deg, #E40000 → #FF6B35` (orange-red gradient, not just flat red)
- **Background**: Light gray #F5F5F5
- **Cards**: White with `border-radius: 24px`, subtle shadows (`0 2px 12px rgba(0,0,0,0.08)`)
- **Glass effects**: `rgba(0,0,0,0.04)` backgrounds with `rgba(0,0,0,0.08)` borders

### Home Screen (Reference)
- Red gradient header with greeting + data usage ring (SVG circle, animated)
- **Quick Actions**: 4-icon grid (Recharge ⚡, Bills 📄, Usage 📊, Offers 🎁) with colored background circles
- **Current Plan card**: Shows data/validity/calls in a horizontal layout, with data progress bar (gradient red)
- **Action rows**: Transactions, Refer & Earn, Help — each with icon, label, and `›` chevron
- **Special Offers**: Horizontal scroll of gradient cards (purple, red, green)

### Recharge Screen (Reference)
- Tab pills (Popular, Data, Talktime, Combo) as horizontal scrollable pill buttons — active = white bg + red text, inactive = transparent + white text
- Plan cards: Each has a red gradient price badge on left, plan details (data, validity, calls, benefits) on right, chevron arrow
- Tags like "Best Value", "Popular" as gold gradient badges
- Bottom sticky "Browse All Plans" button

### Explore Screen (Reference)
- Section headers: "🎬 Entertainment", "🎮 Gaming", "🔧 Utilities"
- Horizontal scrollable gradient cards (160px wide, 112px tall) with icon + title + subtitle
- Each category has its own color scheme

### Account Screen (Reference)
- Full-width red gradient profile card with avatar circle (white bg, red initial letter), name, phone, badges (Prepaid, Delhi)
- Edit button (pencil icon) top-right
- Grouped nav sections: "Account" (My Plan, DTH, Store Locator) and "Settings" (Settings, About)
- Each row: icon in gray bg circle + label + chevron

### Login Screen (Reference)
- Full-screen gradient (red → dark)
- Large emoji 📡 in glass bg circle
- "Welcome to MyTelco" big white text
- Phone input: glass bg with +91 prefix, divider, number input
- OTP: 4 separate glass boxes, focused box has white border
- White CTA button at bottom with red text
- Terms text at very bottom

## Current App State
The app already has these screens implemented with basic styling using NativeWind (TailwindCSS for RN). The structure is there but needs polish.

## What To Improve

### 1. Theme & Styling (theme.ts)
- Keep current colors, they already match
- Add gradient definitions, shadow presets, spacing constants

### 2. HomeScreen.tsx — NEEDS MOST WORK
Current: Basic but functional. Already has data ring, quick actions, plan card, offers scroll.
Improvements needed:
- Add rounded bottom corners to header gradient (already has `rounded` but verify `borderBottomLeftRadius: 32, borderBottomRightRadius: 32`)
- Quick actions: Make icon backgrounds more vibrant, increase size to w-16 h-16
- Plan card: Add "Active" green badge, horizontal stat layout, data progress bar with gradient
- Offers: Make cards taller (h-36), wider (w-52), with better spacing
- Action rows: Add subtle dividers, larger tap targets
- Add subtle entry animations (fade + slide up) — already partially there

### 3. RechargeScreen.tsx
Current: Has tabs and plan list. 
Improvements:
- Make tab pills scrollable with proper active/inactive styling
- Plan cards: Add gradient price badge on left side (like reference)
- Add "Best Value" / "Popular" gold badges on applicable plans
- Sticky bottom CTA button

### 4. ExploreScreen.tsx
Current: Basic horizontal card scrolls.
Improvements:
- Add emoji category headers (🎬 Entertainment, 🎮 Gaming, 🔧 Utilities)
- Cards: 160px wide, proper gradient colors, icon + title + subtitle layout
- Add padding/spacing between sections

### 5. AccountScreen.tsx
Current: Has profile card and nav rows.
Improvements:
- Profile card: Full-width with rounded corners, edit button, avatar with initial
- Add Prepaid/Circle badges
- Grouped sections with section headers (uppercase, gray, small)
- Add Logout button at bottom (red outline style)

### 6. LoginScreen.tsx
Current: Already quite good with glass effects.
Improvements:
- Ensure OTP boxes have glass styling (bg-white/15, border-white/30)
- Focused OTP box: bg-white/25, border-2 border-white
- Smooth transitions between phone input and OTP view

### 7. App.tsx — Tab Bar
Current: Basic emoji tab icons.
Improvements:
- Custom tab bar with:
  - Active tab: red icon + red text + subtle red bg circle behind icon
  - Inactive: gray icon + gray text
  - Tab bar height: 70px with proper padding
  - Subtle top border or shadow
  - Safe area padding at bottom

### 8. SplashScreen.tsx
- Red gradient background
- Animated logo (scale + fade in)
- "MyTelco" text + "Stay Connected" subtitle

## Tech Stack
- React Native 0.84 + TypeScript
- NativeWind v4 (TailwindCSS)
- react-native-linear-gradient
- react-native-svg
- react-native-reanimated (available but not heavily used yet)
- react-navigation (bottom tabs + native stack)

## Important Rules
1. Keep ALL existing API calls and data fetching logic unchanged
2. Keep ALL existing navigation structure unchanged  
3. Only modify visual styling, layout, and animations
4. Use NativeWind className for styling where possible
5. Use StyleSheet.create for complex styles that NativeWind can't handle (shadows, specific dimensions)
6. Test that the app still compiles — no import errors
7. Make it look premium and polished, matching the reference design quality

## Files to Modify
- `/home/usr1/code2/mytelco/app/src/theme.ts` — Add gradient presets, shadows, spacing
- `/home/usr1/code2/mytelco/app/App.tsx` — Improve tab bar styling
- `/home/usr1/code2/mytelco/app/src/screens/HomeScreen.tsx` — Major polish
- `/home/usr1/code2/mytelco/app/src/screens/RechargeScreen.tsx` — Plan card redesign
- `/home/usr1/code2/mytelco/app/src/screens/ExploreScreen.tsx` — Category + card polish
- `/home/usr1/code2/mytelco/app/src/screens/AccountScreen.tsx` — Profile card + sections
- `/home/usr1/code2/mytelco/app/src/screens/LoginScreen.tsx` — Glass effects + OTP polish
- `/home/usr1/code2/mytelco/app/src/screens/SplashScreen.tsx` — Animated splash

## Reference HTML
The full reference HTML is saved at `/tmp/mytelco-reference.html` — read it for exact CSS values, spacing, colors, and layout details.
