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

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

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

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

Border Radius

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

Icon Sizes

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

Shadow System

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:

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:

// 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 QuickActionCards. 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 AgentCards 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 StatCards for Headcount, Present, On leave
2. Team Directory: SummaryCard with leadership/product/operations counts
3. Actions: Three QuickActionCards (Process payroll, Send salary slips, Generate reports)
4. Insights: Custom SectionCard with icon (lightbulb-outline) and narrative text

CRM Tab Composition:

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

Strategy Tab Composition:

1. Progress Stats: StatCards for OKRs, Initiatives, Markets
2. SWOT Grid: Four SectionCard-like cells (Strengths, Weaknesses, Opportunities, Threats)
3. Actions: QuickActionCards 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 StatCards 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 QuickActionCards: 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 ListButtons for User Info, Subscription, Integrations, Settings, Help, Logout."

---

🎭 Animations & Interactions

Button Press Animation

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

Card Hover (for web)

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

Fade In Animation

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

Tab Switching

// 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):

{
  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

{
  "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

/* 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

# 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

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

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

Button Usage

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

Agent Card

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

Stat Card

<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.