# mozdIT Bt. Website - Next.js Application

Modern Next.js 14 website for mozdIT Bt. - Hungarian IT services company.

## 🚀 Quick Start

```bash
# Install dependencies
npm install

# Development server (with Turbopack)
npm run dev

# Production build
npm run build

# Run tests
npm test
```

Open [http://localhost:3000](http://localhost:3000) to view the site.

## 📁 Project Structure

```
src/
├── app/                 # Next.js App Router
│   ├── page.tsx        # Homepage
│   ├── rolunk/         # About page
│   ├── szolgaltatasok/ # Services page
│   ├── kapcsolat/      # Contact page
│   ├── api/            # API routes
│   └── globals.css     # Design system & styles
├── components/         # React components
│   ├── Header.tsx      # Navigation header
│   ├── Footer.tsx      # Site footer
│   └── ThemeProvider.tsx # Dark mode provider
├── content/            # JSON content management
│   ├── types.ts        # Content type definitions
│   ├── index.ts        # Content loader
│   ├── common.json     # Shared texts
│   └── pages/          # Page-specific content
├── config/             # Site configuration
├── lib/                # Utilities
└── types/              # TypeScript definitions
```

## 🎨 Design System

The project uses a comprehensive design system defined in `globals.css`:

### CSS Variables
- Brand colors (`--color-primary-*`)
- Semantic colors (`--color-background`, `--color-foreground`)
- Shadows, transitions, border radius

### Dark Mode
- Automatic system preference detection
- Manual toggle via ThemeProvider
- Uses `data-theme="dark"` attribute

### Animations
- `animate-fade-in-up` - Fade in with upward motion
- `animate-float` - Floating effect
- `animate-pulse-slow` - Slow pulsing
- `hover-lift`, `hover-scale`, `hover-glow` - Hover effects

### Utility Classes
- `.card` - Card component styling
- `.btn`, `.btn-primary`, `.btn-secondary` - Button styles
- `.icon-container` - Icon wrapper styling

## 📝 Content Management

All page content is managed through JSON files in `src/content/`:

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

// Access specific page content
const aboutContent = content.pages.about

// Or use the helper function
const servicesContent = getPageContent('services')
```

### Content Files

| File | Description |
|------|-------------|
| `common.json` | Shared texts (buttons, labels, validation) |
| `pages/home.json` | Homepage CTA section |
| `pages/about.json` | About page (hero, story, mission, team, CTA) |
| `pages/services.json` | Services (hero, details, support, CTA) |
| `pages/contact.json` | Contact (form labels, FAQ, info) |

## 🧪 Testing

```bash
# Unit tests
npm test

# Watch mode
npm run test:watch

# Coverage report
npm run test:coverage

# All test suites
npm run test:all
```

## 🐳 Docker Development

For full-stack development with MongoDB and monitoring:

```bash
# From project root
docker-compose -f docker-compose.dev.yml up -d
```

Services:
- **Website**: http://localhost:3000
- **MongoDB UI**: http://localhost:8081
- **Grafana**: http://localhost:3001

## 📚 Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Project Documentation](../README.md)