# 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)
[![Linear Sync](https://img.shields.io/badge/Linear-Synced-success)](https://linear.app/zeener)
[![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:

### 🧪 **Linear Sync (Test Management)**
- **Requirements**: [ZEE-47: Contact Form Validation](https://linear.app/zeener/issue/ZEE-47)
- **Test Cases**: [ZEE-48: Email Validation](https://linear.app/zeener/issue/ZEE-48), [ZEE-49: Rate Limiting](https://linear.app/zeener/issue/ZEE-49)
- **Test Execution**: Automatic sync with Linear issues
- **Traceability**: Requirements → Test Cases → Automated Tests

### 🐙 **GitHub Sync (CI/CD)**
- **Code Versioning**: Git-based source control
- **CI/CD Pipeline**: Automated testing and deployment
- **Docker Integration**: Container build and registry
- **Deployment**: Staging and production via Dokploy

### 🧪 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**: Dokploy, Docker
- **Monitoring**: Winston, Loki, Grafana
- **Project Management**: Linear, 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 Linear 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
- **Linear Project**: https://linear.app/zeener
- **Docker Registry**: ghcr.io/your-username/websitedev

## 📚 Documentation

### **Sync Systems:**
- [Linear Sync Guide](./LINEAR-SYNC-GUIDE.md) - Test management with Linear
- [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')
```