# mozdIT Bt. Website Development

[![CI/CD Pipeline](https://github.com/your-username/websitedev/actions/workflows/ci.yml/badge.svg)](https://github.com/your-username/websitedev/actions/workflows/ci.yml)
[![Docker](https://img.shields.io/badge/Docker-Ready-blue)](./docker-compose.dev.yml)
[![Plane Sync](https://img.shields.io/badge/Plane-Synced-success)](https://pm.llmdev.mozdit.hu)
[![Deployment](https://img.shields.io/badge/Deployment-Active-success)](https://mozdit.hu)

Modern Next.js 14 website for mozdIT Bt. - Hungarian IT services company specializing in web hosting, email services, and DNS administration.

## 🚀 Quick Start

```bash
# Development server
cd proto && npm run dev

# Docker development environment  
docker-compose -f docker-compose.dev.yml up -d

# Run tests
cd proto && npm run test:all
```

## 🔄 Dual Sync Architecture

This project uses **separated sync systems** for optimal management:

### 📊 **Plane Sync (Task Management)**
- **Project**: [MITHOME — mozdIT website dev](https://pm.llmdev.mozdit.hu) (workspace: `developments`)
- **TODO.md**: Local mirror, Plane is the authoritative source
- **Sync**: `node plane-sync.js` (one-way Plane → TODO.md)
- **Status Mapping**: `completed` → ✅, `started` → 🔄, `unstarted` → ⏳, `backlog` → 📋

### 🐙 **GitHub Sync (CI/CD)**
- **Code Versioning**: Git-based source control
- **CI/CD Pipeline**: Automated testing and deployment
- **Docker Integration**: Container build and registry
- **Deployment**: Docker Compose (deploy.sh)

### 🧪 Test Types
- **Unit Tests**: Component and logic testing
- **Browser Integration**: jsdom + mocked APIs  
- **Docker Integration**: Real HTTP calls to services
- **E2E Tests**: Complete user workflows

## 🛠️ Tech Stack

- **Frontend**: Next.js 14, TypeScript, Tailwind CSS 4
- **Design System**: CSS Variables, Dark Mode, Custom Animations
- **Content Management**: JSON-based structured content
- **Backend**: Next.js API Routes, MongoDB
- **Testing**: Jest, React Testing Library, Docker
- **Deployment**: Docker Compose (deploy.sh), native
- **Monitoring**: Winston, Loki, Grafana
- **Project Management**: Plane, GitHub Issues

## 📈 Current Status

![Requirements Coverage](https://img.shields.io/badge/Requirements-100%25-success)
![Test Automation](https://img.shields.io/badge/Test_Automation-100%25-success)
![Build Status](https://img.shields.io/badge/Build-Passing-success)

### ✅ Completed Features
- [x] Responsive website with modern design
- [x] **Design System** with CSS variables, animations, and micro-interactions
- [x] **Dark Mode** with system preference detection and manual toggle
- [x] **JSON Content Management** - Structured, easily modifiable content system
- [x] Contact form with validation & spam protection
- [x] Rate limiting and security features
- [x] Docker development environment
- [x] Comprehensive test suite
- [x] CI/CD pipeline with Plane sync integration
- [x] Requirements traceability system

### 🚧 In Progress
- [ ] Performance optimization (ZEE-44)
- [ ] SEO enhancements
- [ ] Analytics integration

## 🔗 Links

- **Production**: https://mozdit.hu
- **Staging**: https://staging.mozdit.hu
- **Plane Project**: https://pm.llmdev.mozdit.hu (workspace: `developments`, project: `MITHOME`)
- **Docker Registry**: ghcr.io/your-username/websitedev

## 📚 Documentation

### **Sync Systems:**
- [Plane Sync Guide](./PLANE-SYNC-GUIDE.md) - Task management with Plane
- [GitHub CI/CD Guide](./GITHUB-CICD-GUIDE.md) - Code & deployment pipeline
- [Sync Status Analysis](./SYNC-STATUS-ANALYSIS.md) - Current state overview

### **Development:**
- [Test Management Strategy](./TEST-MANAGEMENT.md)
- [Traceability Matrix](./TRACEABILITY-MATRIX.md)
- [Docker Setup](./DOCKER.md)
- [Development Guide](./proto/README.md)

## 🎨 Design System

The project uses a comprehensive design system with:

- **CSS Variables**: Brand colors, spacing, shadows, transitions
- **Dark Mode**: Automatic system preference + manual toggle via ThemeProvider
- **Animations**: fadeIn, float, pulse, hover effects (lift, scale, glow)
- **Components**: Buttons, cards, icons with consistent styling

## 📝 Content Management

All website text content is managed through JSON files:

```
proto/src/content/
├── types.ts          # TypeScript definitions
├── index.ts          # Content loader utility
├── common.json       # Shared texts (buttons, labels)
└── pages/
    ├── home.json     # Homepage content
    ├── about.json    # About page content
    ├── services.json # Services page content
    └── contact.json  # Contact page content
```

**Usage:**
```typescript
import { content, getPageContent } from '@/content'

// Access content
const aboutContent = content.pages.about
const servicesContent = getPageContent('services')
```