websitedev/proto

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

📚 Learn More

• Next.js Documentation
• Tailwind CSS
• Project Documentation