# Zeper Go Documentation

A modern, responsive documentation site for Zeper Go built with React, featuring dark mode support and interactive animations.

![Zeper Go](public/images/dashboard-preview.png)

## 🌟 Features

- 📱 Responsive design for all devices
- 🌓 Dark mode support
- ✨ Interactive animations and transitions
- 📚 Comprehensive API documentation
- 🔍 Full-text search functionality
- 🎨 Modern UI with Tailwind CSS
- 🚀 Optimized performance

## 🛠️ Tech Stack

- React
- Tailwind CSS
- React Router
- React Spring (animations)
- Hero Icons
- Docker

## 🚀 Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn
- Docker (optional)

### Local Development

1. Clone the repository:
   ```bash
   git clone https://phantasm-agents.com/Sainadh/erp-docs.git
   cd erp-docs
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Start the development server:
   ```bash
   npm run dev
   ```

The site will be available at http://localhost:4429

### Using Docker

#### Development

```bash
docker-compose up app-dev
```

This will start the development server with hot-reload at http://localhost:4429

#### Production

```bash
docker-compose up app-prod
```

This will start the production server at http://localhost:80

## 📁 Project Structure

```
src/
├── components/         # Reusable components
│   ├── common/        # Shared components
│   ├── layout/        # Layout components
│   └── pages/         # Page components
├── context/           # React context providers
├── styles/            # Global styles
└── App.jsx           # Main application component
```

## 🔧 Configuration

### Environment Variables

Create a `.env` file in the root directory:

```env
NODE_ENV=development
PORT=4429
```

### Docker Configuration

The project includes:
- `Dockerfile` - Multi-stage build for production
- `docker-compose.yml` - Development and production services
- `.dockerignore` - Excludes unnecessary files

## 🎨 Customization

### Themes

The application supports light and dark modes. Theme colors can be customized in:
- `tailwind.config.js` - Color palette
- `ThemeContext.jsx` - Theme switching logic

### Animations

Custom animations are implemented using:
- React Spring for smooth transitions
- Custom BlurText component for text animations
- ClickSpark effect for interactive feedback

## 📚 Documentation Features

- API Documentation
- Installation Guide
- User Management
- Troubleshooting Guide
- Core Modules Overview
- Customization Options

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request