Files

T

Do Siki d1213f9b3f feat(ZEE-29): implement design system, dark mode, and JSON content management

- Add comprehensive design system with CSS variables, animations, and utility classes
- Implement dark mode with ThemeProvider (system preference + manual toggle)
- Create JSON-based content management system in src/content/
- Update all pages to use structured JSON content
- Add ThemeProvider component with theme toggle button
- Update Header with glass effect and animated mobile menu
- Update Footer with dark mode support
- Update documentation (README.md, CLAUDE.md, knowledge.md, proto/README.md)
- Sync with Linear (ZEE-29 completed)

2026-01-24 02:30:27 +01:00

3.3 KiB

Raw Blame History

mozdIT Bt. Website - Next.js Application

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

🚀 Quick Start

# Install dependencies
npm install

# Development server (with Turbopack)
npm run dev

# Production build
npm run build

# Run tests
npm test

Open 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/:

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

# 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:

# 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

3.3 KiB Raw Blame History