Pennyzo-webapp-frontend/WEB_APP_REPLICATION_PROMPT.md

# Pennyzo Web App Replication Prompt for GitHub Copilot

## 🎯 Objective

Create a React/TypeScript web application that **exactly replicates** the design, components, theme, and user experience of the existing Pennyzo React Native mobile app.

---

## 🎨 Design System & Theme

### Color Palette

```typescript
const colors = {
  // Background colors - Deep emerald/teal theme
  background: '#041815', // Primary dark background
  surface: '#06231F', // Card/container surfaces
  surfaceAlt: '#0B312A', // Alternative surface (lighter)
  accent: '#1A4036', // Accent containers
  primary: '#0E5F4F', // Primary emerald

  // Highlight colors - Luxurious gold
  highlight: '#CBA951', // Primary gold
  highlightAlt: '#F2E5B5', // Light cream gold

  // Text colors
  textPrimary: '#F8F5EB', // Primary text (cream white)
  textSecondary: '#C8D9D4', // Secondary text (light teal)

  // Borders & decorative
  border: 'rgba(203, 169, 81, 0.35)', // Subtle gold border
  borderStrong: 'rgba(203, 169, 81, 0.6)', // Strong gold border

  // Shadows & effects
  shadow: 'rgba(0, 0, 0, 0.4)',
  shadowLight: 'rgba(0, 0, 0, 0.2)',
  glowGold: 'rgba(203, 169, 81, 0.25)',
  glowEmerald: 'rgba(14, 95, 79, 0.3)',

  // Special colors
  tabIconInactive: '#6C7D78',
  overlayDark: 'rgba(4, 24, 21, 0.6)',
};
```

### Typography System

```typescript
const typography = {
  // Display - Hero sections
  display: {
    fontSize: '38px',
    fontWeight: 900,
    letterSpacing: '1px',
    lineHeight: '46px',
  },

  // Headings
  h1: {
    fontSize: '32px',
    fontWeight: 800,
    letterSpacing: '0.8px',
    lineHeight: '40px',
  },
  h2: {
    fontSize: '26px',
    fontWeight: 800,
    letterSpacing: '0.6px',
    lineHeight: '34px',
  },
  h3: {
    fontSize: '22px',
    fontWeight: 700,
    letterSpacing: '0.5px',
    lineHeight: '30px',
  },
  h4: {
    fontSize: '18px',
    fontWeight: 700,
    letterSpacing: '0.4px',
    lineHeight: '26px',
  },

  // Body text
  body: {
    fontSize: '15px',
    fontWeight: 400,
    letterSpacing: '0.2px',
    lineHeight: '22px',
  },
  bodyBold: {
    fontSize: '15px',
    fontWeight: 700,
    letterSpacing: '0.3px',
    lineHeight: '22px',
  },

  // Supporting text
  caption: {
    fontSize: '13px',
    fontWeight: 600,
    letterSpacing: '0.2px',
    lineHeight: '18px',
  },

  // Buttons
  button: {
    fontSize: '16px',
    fontWeight: 800,
    letterSpacing: '0.8px',
    textTransform: 'uppercase',
  },
  buttonSmall: {
    fontSize: '14px',
    fontWeight: 700,
    letterSpacing: '0.6px',
    textTransform: 'uppercase',
  },

  // Tab labels
  tabLabel: {
    fontSize: '11px',
    fontWeight: 700,
    letterSpacing: '0.5px',
    textTransform: 'uppercase',
  },
};
```

### Spacing System

```typescript
const spacing = {
  xs: '4px',
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  xxxl: '32px',
  huge: '40px',
  massive: '48px',
};
```

### Border Radius

```typescript
const borderRadius = {
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  xxl: '24px',
  round: '999px',
};
```

### Icon Sizes

```typescript
const iconSizes = {
  xs: '16px',
  sm: '20px',
  md: '24px',
  lg: '28px',
  xl: '32px',
  xxl: '40px',
};
```

### Shadow System

```typescript
const shadows = {
  sm: {
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
  },
  md: {
    boxShadow: '0 8px 12px rgba(0, 0, 0, 0.3)',
  },
  lg: {
    boxShadow: '0 12px 16px rgba(0, 0, 0, 0.4)',
  },
  xl: {
    boxShadow: '0 16px 20px rgba(0, 0, 0, 0.5)',
  },
  glow: {
    boxShadow: '0 8px 12px rgba(203, 169, 81, 0.4)',
  },
  glowStrong: {
    boxShadow: '0 12px 20px rgba(203, 169, 81, 0.6)',
  },
};
```

---

## 🧩 Core Components Library

### 1. Screen Container Component

**Purpose**: Main wrapper for all pages with optional background image

**Features**:

- Optional scrollable content
- Background image with blur effect (8px) and dark overlay (rgba(4, 24, 21, 0.75))
- Background image: Uses "bg pennyzo.png" (emerald/teal themed background)
- Safe area padding
- Floating AI assistant button
- Default padding: 24px horizontal, 32px top, 100px bottom

**Props**:

```typescript
interface ScreenProps {
  children: ReactNode;
  scrollable?: boolean;
  contentStyle?: CSSProperties;
  showBackground?: boolean;
  showAssistant?: boolean;
}
```

**Styling**:

- Background overlay: `rgba(4, 24, 21, 0.75)`
- Blur on background: 8px
- Content gap: 24px

---

### 2. PrimaryButton Component

**Variants**: `filled` (gold background) | `outline` (translucent with gold border)

**Filled Style**:

- Background: `#CBA951` (gold)
- Text color: `#041815` (dark background color)
- Border: 2px solid `rgba(203, 169, 81, 0.6)`
- Height: 56px
- Border radius: 28px (fully rounded)
- Shadow: Strong elevation shadow
- Font: 17px, weight 800, uppercase, 0.8px letter-spacing

**Outline Style**:

- Background: `rgba(26, 64, 54, 0.92)`
- Text color: `#F2E5B5` (light gold)
- Border: 2px solid `rgba(203, 169, 81, 0.6)`
- Same dimensions as filled

**Hover/Press Effects**:

- Opacity: 0.85
- Scale: 0.98

---

### 3. AgentCard Component

**Design**: Vertical card with avatar, name, role, and status badge

**Structure**:

```
┌─────────────────┐
│   Avatar (80px) │
│  with glow ring │
│   status badge  │
│                 │
│   Agent Name    │
│    Role Text    │
│  [Status Badge] │
└─────────────────┘
```

**Styling**:

- Card: `#0B312A` background, 2px gold border, 16px padding
- Border radius: 20px
- Avatar: 80px × 80px with glow effect
- Status indicator: 24px circle, positioned bottom-right of avatar
- Status colors:
  - Active: `#4ADE80` (green)
  - Idle: `#FBBF24` (yellow)
  - Busy: `#F87171` (red)
- Shadows: Medium elevation

---

### 4. StatCard Component

**Design**: Compact metric display with icon, value, label, and optional trend

**Layout**:

```
┌──────────────────┐
│ [Icon] [Trend↑]  │
│                  │
│   Large Value    │
│   Small Label    │
└──────────────────┘
```

**Styling**:

- Background: `#0B312A`
- Border: 2px gold
- Icon wrapper: 44px × 44px, colored background (22% opacity of icon color)
- Value: h2 typography, gold color
- Trend badge: Green/red background with icon and percentage
- Padding: 16px

---

### 5. QuickActionCard Component

**Design**: Horizontal card with icon, label, description, and arrow

**Layout**:

```
┌─────────────────────────────────┐
│ [Icon] Label          [Arrow→] │
│        Description               │
│        [Badge if present]        │
└─────────────────────────────────┘
```

**Styling**:

- Background: `#0B312A`
- Icon container: 56px × 56px, rounded, with colored background
- Badge: Top-right of icon, red background `#EF4444`
- Chevron right: Gold color
- Padding: 16px

---

### 6. SectionCard Component

**Purpose**: Container for grouped content with header and optional footer

**Styling**:

- Background: `rgba(6, 35, 31, 0.95)`
- Border: 2px strong gold border
- Border radius: 24px
- Padding: 22px vertical, 24px horizontal
- Strong shadow elevation (14)
- Gap: 16px between sections

---

### 7. SummaryCard Component

**Design**: List of items with icons, labels, and count badges

**Structure**:

- Title with info icon
- Divider line
- List of items (icon + label + count badge)

**Item Layout**:

```
[Icon 36×36] Label Text    [Count Badge]
```

**Styling**:

- Count badge: Rounded, `#1A4036` background, gold border
- Icons: 20px size in colored containers

---

### 8. TaskHeader Component

**Features**: Title, caption, and tab navigation

**Tab Pills**:

- Inactive: Transparent, gray text
- Active: `#1A4036` background, gold border, gold text
- Border radius: 18px
- Padding: 8px vertical, 18px horizontal
- Glow effect on active tab

---

### 9. ListButton Component

**Design**: Horizontal button with optional icon, label, and chevron

**Styling**:

- Background: `#0B312A`
- Icon container: 40px × 40px
- Chevron right indicator
- 2px gold border
- Padding: 16px

---

### 10. FloatingAssistantButton Component

**Special Features**:

- **Position**: Fixed bottom-right (90px from bottom, 20px from right)
- **Size**: 72px × 72px circular button
- **Design**: Gold background with company logo
- **Effects**:
  - Continuous pulse animation (1.0 → 1.15 scale, 1500ms duration)
  - Glow animation (opacity pulse)
  - Pulse ring behind button (fades out as it scales)
  - Microphone indicator badge (bottom-right, green `#4ADE80`)
  - "Ask AI Assistant" label (shows for 5 seconds, then hides)
- **Label**: Positioned to left of button, with arrow pointing to button
- **Interactions**: Opens ChatbotModal on click

**Animation Specs**:

```typescript
// Pulse animation - continuous loop
scale: 1.0 → 1.15 (1500ms ease-in-out)
// Glow animation
opacity: 0 → 1 (2000ms ease-in-out)
```

---

### 11. ChatbotModal Component

**Design**: Full-screen modal with chat interface

**Layout**:

```
┌─────────────────────────────┐
│  Header (Avatar + Title)    │
│  [Close button]             │
├─────────────────────────────┤
│                             │
│  Chat Messages Area         │
│  (Scrollable)               │
│                             │
├─────────────────────────────┤
│ [Audio Visualization]       │ ← Shows when recording/thinking
├─────────────────────────────┤
│ [🎤] [Text Input] [Send →] │
└─────────────────────────────┘
```

**Message Bubbles**:

- User messages: Right-aligned, gold background, dark text
- AI messages: Left-aligned, with AI icon, teal background, light text
- Timestamps: Small, below each message
- Thinking indicator: Three pulsing dots

**Audio Visualization**:

- 5 vertical bars with wave animation
- Heights: 24px, 32px, 40px, 32px, 24px
- Opacity animation: 0.3 ↔ 1.0

**Input Area**:

- Voice button: Gold when active, outlined when inactive
- Text input: Flexible height (max 100px)
- Send button: Gold background, disabled when empty

---

### 12. LanguageSelector Component

**Design**: Modal with language list

**Languages Supported**:

1. English
2. Hindi (हिन्दी)
3. Bengali (বাংলা)
4. Telugu (తెలుగు)
5. Marathi (मराठी)
6. Tamil (தமிழ்)
7. Gujarati (ગુજરાતી)
8. Kannada (ಕನ್ನಡ)
9. Malayalam (മലയാളം)
10. Punjabi (ਪੰਜਾਬੀ)

**List Item**:

- Language name (English)
- Native name (in native script)
- Checkmark icon when selected
- Selected: `#1A4036` background

---

## 📱 Screen Layouts

### Welcome Screen

**Layout**: Centered vertical stack

```
┌─────────────────────────┐
│                         │
│     [Company Logo]      │
│       200 × 200         │
│                         │
│   Your AI team for      │
│   business growth       │
│                         │
│   Subtitle text here    │
│                         │
│   [Sign Up Button]      │
│   [Log In Button]       │
│                         │
└─────────────────────────┘
```

**Key Elements**:

- Logo: 200px × 200px centered
- Hero title: 34px, weight 900, gold color, center-aligned
- Subtitle: 16px, gray color
- Gap between sections: 48px
- Buttons: Full width with 16px gap

---

### Home Screen

**Structure & Components**:

1. **Top Bar** (Flex row)

- `Text` greeting using `typography.h2`
- Action buttons: Profile (`ListButton` styling), Language selector trigger, Notifications with badge
- All buttons reuse shared styles: 44px square, `colors.surfaceAlt` background, `borderRadius.md`

2. **Company Selector Card**

- Reuse `SectionCard` styling condensed to 72px height
- Contains logo image, company name (`typography.h4`), industry label (`typography.caption`)
- Chevron icon from MaterialCommunityIcons

3. **Decorative Divider**

- 1px `colors.highlight` line, 50% opacity, full width

4. **Quick Stats Row**

- Horizontal `ScrollView`/`div` with 16px gap
- Render three `StatCard` components (Revenue, Employees, Growth)
- Provide trend data: `{ value: '+18%', isPositive: true }`

5. **AI Insights Summary**

- Single `SummaryCard` with items array (Invoices, HR approvals, Renewals)
- Each item uses icon, color accent, count

6. **Suggested Actions**

- Header text block (title + subtitle)
- Vertical stack of `QuickActionCard` components (Send Salary Slips, Renew Vendor Contract, Review P&L Report)

**Sample Prompt**:

> "Using the design tokens, build the Home screen with a top greeting bar, company selector card, stat cards (revenue, employees, growth), AI insights `SummaryCard`, and three `QuickActionCard`s. Use the data structures defined in the RN HomeScreen.tsx file for copy and counts."

**Color Accents**: Green `#4ADE80`, Yellow `#FBBF24`, Red `#EF4444`

---

### Agents Screen

**Hero Row**:

- Title (`typography.h1`) + subtitle (`typography.body`)
- Add Agent button: 48px square, `colors.highlight` background, `shadows.glow`

**Status Summary Bar**:

- Container uses `SectionCard` skeleton with `flexDirection: 'row'`
- Three segments separated by 1px divider (`colors.border`)
- Each segment: dot indicator (8px), label text from i18n: Active (3), Idle (2), Busy (1)

**Available Agents Grid**:

- Responsive grid (mobile: 2 columns, desktop: auto-fill min 220px)
- Render `AgentCard` for each entry (Evelyn, Malik, Aria, Marcus, Sofia, Alex)
- Use avatar URLs from original RN screen (`https://i.pravatar.cc/120?img=X`)

**Quick Actions Row**:

- Two pill buttons using `QuickActionCard` styling reduced to 180px width
- Icons: `message-text`, `history`

**Sample Prompt**:

> "Recreate the Agents screen: header with title, subtitle, and gold add button; status summary bar showing Active/Idle/Busy counts; responsive grid of `AgentCard`s using the exact agent list from AgentsScreen.tsx; and two `QuickActionCard`-style buttons for Chat and Reports."

---

### Tasks Screen

**Features**:

- TaskHeader with 3 tabs: HR | CRM | Strategy
- Tab content fades in/out on switch (140ms fade out, 180ms fade in)
- Each tab has distinct content sections

**Shared Layout Rules**:

- Wrap tab content inside `Animated.View` with fade transitions
- Section headers use `typography.caption` uppercase with 1.2px letter-spacing
- 16px vertical gaps between sections; inner cards reuse `StatCard`, `SummaryCard`, and `QuickActionCard`

**HR Tab Composition**:

1. Overview: Three `StatCard`s for Headcount, Present, On leave
2. Team Directory: `SummaryCard` with leadership/product/operations counts
3. Actions: Three `QuickActionCard`s (Process payroll, Send salary slips, Generate reports)
4. Insights: Custom `SectionCard` with icon (`lightbulb-outline`) and narrative text

**CRM Tab Composition**:

1. Performance Stats: `StatCard`s for Pipeline value, Conversion rate, Escalations (red accent)
2. Pipeline Summary: `SummaryCard` listing Follow-ups, Contracts, Responses
3. Actions: `QuickActionCard`s for Client concierge and Launch campaign
4. Insights: `SectionCard` with `chart-areaspline` icon and copy from translations

**Strategy Tab Composition**:

1. Progress Stats: `StatCard`s for OKRs, Initiatives, Markets
2. SWOT Grid: Four `SectionCard`-like cells (Strengths, Weaknesses, Opportunities, Threats)
3. Actions: `QuickActionCard`s for Executive summary and Steering committee

**Sample Prompt**:

> "Implement the Tasks screen with a `TaskHeader` controlling HR/CRM/Strategy tabs. Each tab reuses the same data and copy from TasksScreen.tsx: stat cards up top, summary cards, quick actions, and insights/SWOT sections. Include the fade animation between tabs and maintain the uppercase section labels."

---

### Business Setup Screen

**Multi-step onboarding** (3 steps):

**Progress Bar**:

- 6px height
- Gold fill animates: 33% → 66% → 100%
- Step counter: "Step X of 3"

**Step 1 - Company Name**:

- Office building icon (60px, gold)
- Title: "Welcome to Pennyzo! 👋"
- Text input for company name
- Optional: Company logo upload
  - Dashed border button (3px, gold, dashed)
  - Image preview: 200px × 200px
  - Change/Remove buttons

**Step 2 - Industry**:

- Domain icon (60px)
- Title: "Choose your industry"
- Grid: 2 columns of industry cards
  - Each card: Icon + label
  - Selected: Gold background

**Industries**:

- Retail, Services, Manufacturing, Tech, Healthcare, Education, Hospitality, Other

**Step 3 - Agents**:

- Robot icon (60px)
- Title: "Select your AI team"
- Vertical list of agent cards
  - Icon (50px), Name, Description
  - Checkbox (28px)
  - Selected: Gold border + glow

**Footer**:

- Back button (if not first step)
- Continue button (full width, gold)
- Finish button on last step

---

### Documents Screen

**Header**:

- Title (`typography.h1`) and subtitle (`typography.body`)

**Overview Stack**:

- Use three `StatCard`s for document counts (Auto-prepped, Contracts, Legal) mirroring RN layout

**Recent Activity**:

- `SectionCard` containing list of activity rows
- Each row: icon bubble (MaterialCommunityIcons), description text from i18n, timestamp chip (`typography.caption`)
- Divider between rows using `colors.border`

**Quick Actions**:

- Two `QuickActionCard`s: Search Documents, Bulk Upload

**Sample Prompt**:

> "Build the Documents screen using the same copy as DocumentsScreen.tsx: header, stat cards for overview, recent activity list inside a `SectionCard`, and quick actions for Search Documents and Bulk Upload with their icons."

---

### Generate Screen

**Hero Block**:

- Title + subtitle, optional CTA button (reuse `PrimaryButton` outline variant)

**Seasonal Campaigns Carousel**:

- Horizontal scroll of `QuickActionCard`-style tiles (Diwali, New Year) with badges `AI generated`

**Content Templates Grid**:

- 2×2 grid on desktop (Blog Post, Email Campaign, Social Media, Design Assets)
- Each tile uses `SectionCard` mini variant with icon, title, short description

**Brand Voice Section**:

- `SectionCard` with sliders or badges referencing brand tone, using `ListButton` entries for editing voice presets

**Sample Prompt**:

> "Recreate the Generate screen: hero copy, seasonal campaigns row, four content template cards, and a brand voice `SectionCard`. Use the template names and descriptions straight from GenerateScreen.tsx."

---

### Profile Screen

**Header Card**:

- `SectionCard` with avatar circle (96px), user name (`typography.h2`), role, company stats badges (Member since 2022)

**Menu Grid**:

- Use `ListButton` components for User Info, Subscription, Integrations, Settings, Help, Logout
- Each includes icon mapping from RN file

**Generate & Language Shortcuts**:

- Secondary `SectionCard` linking to Generate content and Language selector modal

**Sample Prompt**:

> "Mirror the Profile screen: top `SectionCard` for the user profile (John Doe, Executive Director, Member since 2022) and a list of `ListButton`s for User Info, Subscription, Integrations, Settings, Help, Logout."

---

## 🎭 Animations & Interactions

### Button Press Animation

```css
transition: all 150ms ease;
&:active {
  opacity: 0.85;
  transform: scale(0.98);
}
```

### Card Hover (for web)

```css
transition: all 200ms ease;
&:hover {
  transform: translateY(-2px);
  box-shadow: [enhanced shadow];
}
```

### Fade In Animation

```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
animation: fadeIn 300ms ease;
```

### Tab Switching

```typescript
// Fade out current (140ms) → Switch content → Fade in new (180ms)
opacity: 1 → 0 (140ms) → [change] → 0 → 1 (180ms)
```

---

## 🌐 Navigation Structure

### Root Stack (Auth Flow)

1. **Welcome** → Login / Signup
2. **Login** → MainTabs
3. **Signup** → BusinessSetup
4. **BusinessSetup** → MainTabs

### Main Navigation (Mobile vs Web)

- **Mobile/Tablet**: Bottom tab bar identical to the native app for consistency.
- **Desktop/Web**: Persistent **left sidebar** that replaces the bottom tabs. The same five primary destinations map directly to sidebar buttons.

### Sidebar Navigation (Web Primary Navigation)

1. **Home** – Dashboard & insights (`home`, `home-outline`)
2. **Agents** – AI team management (`robot`, `robot-outline`)
3. **Tasks** – HR, CRM, Strategy tabs (`clipboard-text`, `clipboard-text-outline`)
4. **Documents** – File management (`file-document`, `file-document-outline`)
5. **More** – Secondary hub (Profile, Generate, Settings) (`dots-horizontal-circle`, `dots-horizontal-circle-outline`)

**Sidebar Layout Specs**:

- Width: 280px expanded, 92px collapsed (hover-reveal for labels).
- Background: `#06231F` top-to-bottom gradient overlay on `colors.surface`.
- Border: Right edge 1.5px solid `rgba(203, 169, 81, 0.35)`.
- Padding: 28px top, 20px horizontal, 24px bottom.
- Item spacing: 14px vertical gap between navigation buttons.
- Sticky: Fixed to left, full height, scrolls independently if needed.
- Logo area: 72px tall header block with app logo (`ic_launcher_foreground.png`) and "Pennyzo" wordmark in `typography.h4`.

**Navigation Item Styling**:

- Container: 56px height pill button, border radius 18px.
- Active state: Background `rgba(203, 169, 81, 0.18)`, left accent bar 4px wide in `colors.highlight`, icon/text color `colors.highlightAlt`, bold label.
- Inactive state: Background transparent, icon `colors.tabIconInactive`, label `colors.textSecondary`.
- Hover: Background `rgba(26, 64, 54, 0.6)`, subtle glow shadow `shadows.sm`.
- Icon size: 24px (inactive), 26px (active).
- Label typography: `typography.tabLabel` (uppercase, 0.5px letter-spacing).
- Notifications: Optional badge (same spec as mobile) positioned top-right of button.

**Sidebar Footer**:

- Add `ListButton`-style entries for Support, Settings, and Sign Out (if required by web IA).
- Include language selector trigger (opens `LanguageSelector` modal) in footer area.

**Responsive Behavior**:

- ≤1024px: Sidebar collapses to 92px rail with icons only; labels show on hover tooltips.
- ≤768px: Slide-in drawer triggered by hamburger button; bottom tab bar appears for phones.
- ≥1440px: Sidebar remains expanded; main content receives 48px left padding to account for sidebar.

**Routing**:

- Each nav item routes to the respective screen component described in this document (`HomeScreen`, `AgentsScreen`, `TasksScreen`, `DocumentsScreen`, `ProfileScreen / GenerateScreen` under the "More" umbrella).
- Active route highlights the corresponding sidebar button.

> ✅ **Important**: The content, names, and styling for each sidebar destination must exactly match the mobile screens described above. Reuse the same component structure (StatCard, QuickActionCard, etc.) when rendering the desktop views.

---

## 🔤 Internationalization (i18n)

**Setup**: React i18next with AsyncStorage persistence

**Supported Languages**: 10 Indian languages + English

**Key Translation Keys** (sample):

```typescript
{
  home: 'Home',
  agents: 'Agents',
  tasks: 'Tasks',
  yourAiTeam: 'Your AI team',
  forBusinessGrowth: 'for business growth',
  homeScreen: {
    greeting: { morning, afternoon, evening },
    stats: { revenue, employees, growth },
    actions: { sendSalarySlips, renewVendorContract, ... }
  },
  agentsScreen: { ... },
  tasksScreen: { ... },
  // ... etc
}
```

**Implementation**:

- Use `useTranslation()` hook
- Store language preference in localStorage/AsyncStorage
- Language selector modal component
- All text must be wrapped in `t('key')`

---

## 📦 Required Dependencies

```json
{
  "dependencies": {
    "react": "^18.x",
    "react-dom": "^18.x",
    "react-router-dom": "^6.x",
    "i18next": "^23.x",
    "react-i18next": "^13.x",
    "framer-motion": "^10.x", // For animations
    "react-icons": "^4.x", // Material Design icons
    "@emotion/react": "^11.x", // Or styled-components
    "@emotion/styled": "^11.x"
  }
}
```

---

## 🎯 Implementation Checklist

### Phase 1: Foundation

- [ ] Set up theme system (colors, typography, spacing)
- [ ] Create base Screen component with background
- [ ] Implement PrimaryButton component
- [ ] Set up routing structure
- [ ] Add background image and overlay system

### Phase 2: Core Components

- [ ] AgentCard component
- [ ] StatCard component
- [ ] QuickActionCard component
- [ ] SectionCard component
- [ ] SummaryCard component
- [ ] TaskHeader component
- [ ] ListButton component

### Phase 3: Special Components

- [ ] FloatingAssistantButton with animations
- [ ] ChatbotModal with message system
- [ ] LanguageSelector modal
- [ ] Audio visualization component

### Phase 4: Screens

- [ ] Welcome screen
- [ ] Login screen
- [ ] Signup screen
- [ ] BusinessSetup screen (multi-step)
- [ ] Home screen
- [ ] Agents screen
- [ ] Tasks screen (with tabs)
- [ ] Documents screen
- [ ] Generate screen
- [ ] Profile screen

### Phase 5: Features

- [ ] i18n setup (10 languages)
- [ ] Unified navigation (sidebar on web, bottom tabs on mobile)
- [ ] Modal system
- [ ] Animation system
- [ ] State management
- [ ] LocalStorage/API integration

### Phase 6: Polish

- [ ] Responsive design (mobile, tablet, desktop)
- [ ] Accessibility (ARIA labels, keyboard navigation)
- [ ] Loading states
- [ ] Error handling
- [ ] Performance optimization

---

## 🧭 Sidebar Implementation Steps

1. **Scaffold Layout Shell**

- Create `AppShell` with `Sidebar` component on the left and `MainContent` on the right.
- Reserve 280px for the sidebar on desktop, handle collapsed and mobile drawer states.

2. **Build Sidebar Component**

- Implement logo header, navigation list, and footer actions using the specs in _Sidebar Navigation_.
- Use the icon mapping provided and wire each button to its route via React Router.

3. **Wire Active State Logic**

- Highlight active route (left accent bar + filled background + larger icon).
- Add hover/tap transitions using `framer-motion` or CSS transitions.

4. **Integrate Screen Components**

- For each nav destination, reuse the screen content defined above (HomeScreen, AgentsScreen, etc.).
- Ensure the screen components sit inside `Screen` wrapper so background/assistant features remain consistent.

5. **Responsive Behavior**

- Desktop ≥1025px: Expanded sidebar.
- Tablet 768–1024px: Collapsible rail with tooltip labels.
- Mobile ≤767px: Hide sidebar, use bottom tab bar and hamburger-triggered drawer.

6. **Accessibility & UX Polish**

- Provide aria-labels, focus outlines, and keyboard navigation (Arrow keys cycle items, Enter activates).
- Ensure language selector and sign-out actions are reachable via the sidebar footer.

> Follow these steps in order to adapt the existing mobile-first navigation into a desktop-friendly sidebar without changing the underlying screen content.

---

## 📝 Prompt Cheat Sheet (Copy/Paste)

1. **Theme & Layout Shell**

- _"Set up the Pennyzo theme using the colors, typography, spacing, and shadows from WEB_APP_REPLICATION_PROMPT.md, and scaffold an AppShell with a left sidebar and main content area."_

2. **Sidebar Navigation**

- _"Implement the Pennyzo sidebar exactly as specified: logo header, five nav buttons (Home, Agents, Tasks, Documents, More), active state glow, footer actions, responsive behavior."_

3. **Home Screen**

- _"Using the Pennyzo components (StatCard, SummaryCard, QuickActionCard), recreate the Home screen layout: greeting bar, company selector card, three stat cards, AI insights summary, and suggested actions."_

4. **Agents Screen**

- _"Build the Agents screen with header, status summary bar, responsive grid of AgentCard components populated with the original agent list, and quick action buttons for Chat and Reports."_

5. **Tasks Screen**

- _"Create the Tasks screen with TaskHeader tabs (HR/CRM/Strategy) and reuse the arrays from TasksScreen.tsx to render stat cards, summary cards, quick actions, insights, and SWOT sections with fade transitions."_

6. **Documents Screen**

- _"Construct the Documents screen: header, overview stat cards, SectionCard for recent activity rows, and quick action cards for Search Documents and Bulk Upload."_

7. **Generate Screen**

- _"Lay out the Generate screen with hero copy, seasonal campaign carousel, four content template cards, and a brand voice SectionCard using the copy from GenerateScreen.tsx."_

8. **Profile / More Screens**

- _"Replicate the Profile screen with a SectionCard header (avatar, name, role, member since) and ListButton entries for User Info, Subscription, Integrations, Settings, Help, Logout, plus shortcuts to Generate and Language selector."_

9. **Chatbot & Assistant**

- _"Port the FloatingAssistantButton and ChatbotModal exactly, including pulse/glow animations, microphone badge, and message bubble styling."_

10. **Business Setup Flow**

- _"Implement the three-step Business Setup onboarding with progress bar, company input/logo upload, industry grid, and AI agent selection using the defined components."_

Run these prompts sequentially in Copilot to guarantee every screen and feature mirrors the native app.

---

## 🎨 Design Philosophy

**Key Characteristics**:

1. **Luxurious & Professional**: Gold accents on dark emerald/teal
2. **High Contrast**: Light text on dark backgrounds for readability
3. **Generous Spacing**: Never cramped, breathing room between elements
4. **Soft Glows**: Shadow system creates depth without harshness
5. **Rounded Corners**: Everything is rounded (8-24px)
6. **Bold Typography**: Heavy weights (700-900) for headers
7. **Subtle Animations**: Smooth transitions, pulse effects
8. **Consistent Elevation**: Cards, buttons, modals have distinct layers

**Visual Hierarchy**:

- Primary actions: Gold filled buttons
- Secondary actions: Gold outlined buttons
- Tertiary actions: Text buttons or icons
- Information cards: Medium elevation shadows
- Active states: Glow effects
- Disabled states: 50% opacity

---

## 📐 Responsive Breakpoints

```css
/* Mobile first approach */
mobile: 0-640px
tablet: 641px-1024px
desktop: 1025px+

/* Adjustments for web */
- Tab bar: Bottom on mobile, sidebar on desktop
- Grid columns: 2 on mobile, 3-4 on tablet, 4-6 on desktop
- Floating button: Bottom-right on all sizes
- Modals: Full screen on mobile, centered card on desktop
- Navigation: Hamburger on mobile, persistent on desktop
```

---

## 🎬 Special Notes for GitHub Copilot

1. **Background Image**: The app uses "bg pennyzo.png" - a teal/emerald gradient background. Apply 8px blur + dark overlay (75% opacity) on all main screens.

2. **Company Logo**: "ic_launcher_foreground.png" - appears in multiple places (welcome screen, floating button, company selector). Size varies by context.

3. **Icon Library**: Use Material Community Icons or React Icons library. Map icon names from React Native to web equivalents.

4. **Tab Navigation**: Bottom navigation on mobile should transform to sidebar/horizontal tabs on desktop for better UX.

5. **Floating Button**: The AI assistant button is a signature feature - must pulse, glow, and animate exactly as described.

6. **Card Interactions**: All cards should have press/click feedback. Scale down slightly and reduce opacity on interaction.

7. **Modal System**: Modals should overlay with dark backdrop (70% opacity) and animate in from bottom/center.

8. **Text Rendering**: Use system fonts that support international scripts (Indic languages). Fallback chain: -apple-system, Segoe UI, Roboto, etc.

9. **State Management**: Use React Context or Redux for global state (user, company selection, language, theme).

10. **Performance**: Lazy load screens, optimize images, use CSS transforms for animations (GPU accelerated).

---

## 🚀 Getting Started Commands

```bash
# Create React app with TypeScript
npx create-react-app pennyzo-web --template typescript

# Or use Vite for faster dev experience
npm create vite@latest pennyzo-web -- --template react-ts

# Install dependencies
npm install react-router-dom i18next react-i18next framer-motion react-icons @emotion/react @emotion/styled

# Project structure
src/
  ├── components/      # All reusable components
  ├── screens/         # Page components
  ├── theme/           # Design system (colors, typography, etc.)
  ├── i18n/            # Internationalization setup
  ├── assets/          # Images, icons
  ├── hooks/           # Custom React hooks
  ├── contexts/        # React Context providers
  └── types/           # TypeScript interfaces
```

---

## ✅ Final Output Requirements

The web app should be:

1. **Pixel-perfect**: Match mobile app design exactly
2. **Responsive**: Works on all screen sizes
3. **Accessible**: WCAG 2.1 AA compliant
4. **Performant**: Fast load times, smooth animations
5. **Internationalized**: Support all 10 languages
6. **Maintainable**: Clean code, documented components
7. **Tested**: Unit tests for components, E2E for critical flows

**Success Criteria**:

- [ ] User can complete entire onboarding flow
- [ ] All screens render correctly
- [ ] Navigation works seamlessly
- [ ] Language switching works
- [ ] AI chatbot modal functions
- [ ] All animations are smooth
- [ ] No console errors
- [ ] Responsive on mobile, tablet, desktop

---

## 📞 Component Usage Examples

### Screen Template

```tsx
import { Screen } from '@/components/Screen';

function MyScreen() {
  return (
    <Screen showBackground={true} showAssistant={true}>
      {/* Your content here */}
    </Screen>
  );
}
```

### Button Usage

```tsx
<PrimaryButton
  label="Continue"
  variant="filled"
  onPress={() => navigate('/next')}
/>
```

### Agent Card

```tsx
<AgentCard
  name="Evelyn"
  role="Accountant"
  avatar="https://i.pravatar.cc/120?img=1"
  status="active"
  onPress={() => openChat('evelyn')}
/>
```

### Stat Card

```tsx
<StatCard
  icon="cash"
  label="Revenue"
  value="₹1.2M"
  trend={{ value: '+18%', isPositive: true }}
  color="#CBA951"
/>
```

---

This document provides everything needed to replicate the Pennyzo mobile app design in a web application. Follow the specifications precisely for consistent results.