# Kobelly Web Solutions

A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) and is fully dockerized for easy deployment.

## Features

- 🌐 **Multilanguage Support**: English (EN), Dutch (NL), French (FR), German (DE)
- 📱 **Responsive Design**: Modern, mobile-friendly interface
- 🎨 **Professional UI**: Clean, modern design with Bootstrap 5
- 🐳 **Docker Support**: Easy containerization and deployment
- ⚡ **Fast Performance**: Optimized for speed and performance
- 🔧 **No Database Required**: Simple, lightweight setup

## Pages

- **Home**: Hero section, features, and service overview
- **Services**: Detailed service offerings with pricing information
- **About**: Company story, team, and values
- **Contact**: Contact form and business information

## Quick Start

### Local Development (Recommended)

1. **Install Python dependencies:**
   ```bash
   pip install -r requirements.txt
   ```

2. **Run the application:**
   ```bash
   python app.py
   ```

3. **Access the website:**
   Open your browser and go to `http://localhost:5000`

### Docker Deployment

1. **Build and run with Docker Compose:**
   ```bash
   docker-compose up --build
   ```

2. **Or build and run manually:**
   ```bash
   docker build -t kobelly-website .
   docker run -p 5000:5000 kobelly-website
   ```

## Project Structure

```
Kobelly/
├── app.py                 # Main Flask application
├── requirements.txt       # Python dependencies
├── Dockerfile            # Docker configuration
├── docker-compose.yml    # Docker Compose configuration
├── babel.cfg             # Babel configuration for translations
├── templates/            # HTML templates
│   ├── base.html         # Base template with navigation
│   ├── index.html        # Homepage
│   ├── services.html     # Services page
│   ├── about.html        # About page
│   └── contact.html      # Contact page
└── translations/         # Translation files
    ├── en/LC_MESSAGES/messages.po
    ├── nl/LC_MESSAGES/messages.po
    ├── fr/LC_MESSAGES/messages.po
    └── de/LC_MESSAGES/messages.po
```

## Multilanguage Support

The website supports four languages:
- 🇺🇸 **English** (EN) - Default
- 🇳🇱 **Dutch** (NL)
- 🇫🇷 **French** (FR)
- 🇩🇪 **German** (DE)

Users can switch languages using the language selector in the navigation bar. The language preference is stored in the session.

## Customization

### Content Updates

1. **Text Content**: Edit the HTML templates in the `templates/` directory
2. **Translations**: Update the `.po` files in the `translations/` directory
3. **Styling**: Modify the CSS in `templates/base.html`

### Adding New Pages

1. Add a new route in `app.py`
2. Create a new template file in `templates/`
3. Add navigation link in `templates/base.html`

### Updating Translations

1. Extract translatable strings:
   ```bash
   pybabel extract -F babel.cfg -o messages.pot .
   ```

2. Update translation files:
   ```bash
   pybabel update -i messages.pot -d translations
   ```

3. Compile translations:
   ```bash
   pybabel compile -d translations
   ```

## Configuration

### Environment Variables

- `SECRET_KEY`: Secret key for Flask sessions (default: 'your-secret-key-change-in-production')
- `FLASK_ENV`: Flask environment (development/production)

### Production Deployment

For production deployment:

1. Set a strong `SECRET_KEY`
2. Disable debug mode
3. Use a production WSGI server (e.g., Gunicorn)
4. Set up proper SSL/TLS certificates
5. Configure a reverse proxy (e.g., Nginx)

## Technologies Used

- **Backend**: Flask 2.3.3
- **Frontend**: Bootstrap 5, Font Awesome
- **Internationalization**: Flask-Babel
- **Containerization**: Docker, Docker Compose
- **Styling**: Custom CSS with CSS variables

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## License

This project is created for demonstration purposes. Feel free to use and modify for your own business needs.

## Support

For questions or support, please contact:
- Email: info@kobelly.com
- Phone: +32 486 21 07 07
- Address: Blijkheerstraat 92, 1755 Pajottegem, Belgium

---

**Kobelly Web Solutions** - Professional web development for small businesses and entrepreneurs.