# Finlion Website

A modern, responsive business website built with Next.js, featuring a contact form, services showcase, and responsive design.

## Features
- Modern, responsive design with Tailwind CSS
- Server-side rendering with Next.js 15+
- Contact form with email integration
- Rate limiting for API routes
- Redis integration for caching and rate limiting
- Docker containerization for both development and production
- Animated UI components with Framer Motion
- Toast notifications system
- Responsive navigation with mobile support
- Services showcase section
- About page
- Contact page with form validation

## Technology Stack
### Frontend
- Next.js 15.0.4 with App Router
- React 19.0.0
- TypeScript
- Tailwind CSS for styling
- Framer Motion for animations
- HeadlessUI for UI components
- Lucide React & React Icons for icons

### Backend
- Next.js API Routes
- Nodemailer for email functionality
- Upstash Redis for rate limiting
- Environment variables management

### Development & Build Tools
- PNPM 9.14.2 package manager
- ESLint for code linting
- TypeScript for type safety
- Docker & Docker Compose
- PostCSS & Autoprefixer

## Getting Started

### Prerequisites
- Node.js 18+ installed
- PNPM package manager
- Docker and Docker Compose (for containerized development)
- Redis (handled through Upstash)

### Environment Variables
Create a `.env` file in the root directory with the following variables:
```env
# Email Configuration
SMTP_HOST=your-smtp-host
SMTP_PORT=your-smtp-port
SMTP_USER=your-smtp-user
SMTP_PASS=your-smtp-password
FROM_EMAIL=your-from-email
TO_EMAIL=your-to-email

# Redis Configuration (for rate limiting)
UPSTASH_REDIS_REST_URL=your-redis-url
UPSTASH_REDIS_REST_TOKEN=your-redis-token
```

### Development Setup

1. Install PNPM (if not already installed):
```bash
corepack enable && corepack prepare pnpm@latest --activate
```

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

3. Start the development server:

Using Docker:
```bash
docker compose -f docker-compose.dev.yml up
```

Without Docker:
```bash
pnpm dev
```

The site will be available at `http://localhost:3000`

### Production Deployment

1. Build and run using Docker:
```bash
docker compose up -d
```

The production site will be available at `http://localhost:805`

## Project Structure
```
├── public/               # Static files
│   ├── images/          # Image assets
│   └── ...
├── src/
│   ├── app/            # Next.js app router pages
│   │   ├── api/       # API routes
│   │   ├── about/     # About page
│   │   ├── contact/   # Contact page
│   │   └── services/  # Services page
│   ├── components/    # React components
│   │   ├── home/     # Home page components
│   │   ├── layout/   # Layout components
│   │   ├── providers/ # Context providers
│   │   ├── shared/   # Shared components
│   │   └── ui/       # UI components
│   ├── data/         # Static data
│   ├── lib/          # Utility functions
│   ├── styles/       # Global styles
│   └── types/        # TypeScript types
```

## API Routes
- `/api/contact` - Contact form submission endpoint with rate limiting

## Available Scripts
- `pnpm dev` - Start development server
- `pnpm build` - Build production application
- `pnpm start` - Start production server
- `pnpm lint` - Run ESLint

## Docker Configuration
Three Docker Compose configurations are available:
- `docker-compose.yml` - Production deployment
- `docker-compose.dev.yml` - Development environment with hot reload
- `docker-compose.staging.yml` - Staging environment

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

## License
This project is proprietary and confidential.