# Pennyzo Web

A modern React TypeScript web application for Pennyzo, built with Tailwind CSS and custom branding.

## Features

- React 18 with TypeScript for type safety
- Tailwind CSS with custom color palette
- Responsive design with mobile-first approach
- Sticky navigation header
- Custom brand colors: deep-navy, brass, off-white, light-gray

## Getting Started

1. Install dependencies:

   ```bash
   npm install
   ```

2. Start the development server:

   ```bash
   npm run dev
   ```

3. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

## Custom Colors

The project includes a custom Tailwind color palette:

- `deep-navy`: #0A192F
- `brass`: #D4AF37
- `off-white`: #F8F8F8
- `light-gray`: #CCD6F6

## Project Structure

```
src/
├── components/
│   ├── Header.tsx          # Main navigation header
│   ├── HeroSection.tsx     # Hero section with CTA
│   ├── FeaturesSection.tsx # Features grid with cards
│   ├── WhyPennyzoSection.tsx # Benefits section
│   └── Footer.tsx          # Footer with links and contact info
├── App.tsx                 # Main application component
├── index.tsx              # Application entry point
└── index.css              # Tailwind CSS imports
```

## Available Scripts

- `npm run dev` - Runs the app in development mode with Vite
- `npm run build` - Builds the app for production
- `npm run preview` - Preview the production build locally

## Backend Integration Guide

Base URL: `https://api.pennyzo.com/api/v1/general` (configurable via `VITE_API_BASE_URL`)

- HTTP client: `src/lib/http.ts` (handles JSON, form, and auth header)
- Auth state: `src/context/AuthContext.tsx` (stores JWT token, loads `auth/me`)
- Endpoints: `src/lib/api/*`
  - `system.ts`: `/system/health`, `/system/`
  - `auth.ts`: `/auth/*` (verify email/resend/login/me/forgot/reset/change)
  - `registration.ts`: `/registration/*` (register + rules + health)
  - `users.ts`: `/users/*` (profile/company/gst/upgrade/stats/membership-info)

### UI flows → endpoints

- Registration modal `WaitlistForm`: `POST /registration/register`
  - Maps UI fields to API and enforces rules:
    - GST Registered → send `gst_number`, `cin_number=null`, `pan_number=null`
    - Non-GST PRIVATE_LIMITED/LLP → send `cin_number`, `pan_number=null`
    - Non-GST PARTNERSHIP/PROPRIETORSHIP/SOLE_INDIVIDUAL/OTHERS → send `pan_number`, `cin_number=null`
- Login modal `LoginPage`: `POST /auth/login` as `application/x-www-form-urlencoded` with `username`, `password`; then `GET /auth/me`.
- Forgot password button calls `POST /auth/forgot-password` with the entered email.

### Types and config

- Types: `src/types/api.ts`
- Config: set `VITE_API_BASE_URL` in `.env` (see `.env.example`).

### Quick health check

```
curl -X GET "https://api.pennyzo.com/api/v1/general/system/health"
```

### Error handling

- Non-2xx responses are surfaced with `error.message` when provided by backend.
- Invalid token on `auth/me` clears stored token.