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
parent db464d1c48
commit d1213f9b3f
27 changed files with 3294 additions and 450 deletions
@@ -1,36 +1,131 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# mozdIT Bt. Website - Next.js Application

-## Getting Started
+Modern Next.js 14 website for mozdIT Bt. - Hungarian IT services company.

-First, run the development server:
+## 🚀 Quick Start

 ```bash
+# Install dependencies
+npm install
+
+# Development server (with Turbopack)
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+
+# Production build
+npm run build
+
+# Run tests
+npm test
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) to view the site.

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## 📁 Project Structure

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```
+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
+```

-## Learn More
+## 🎨 Design System

-To learn more about Next.js, take a look at the following resources:
+The project uses a comprehensive design system defined in `globals.css`:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### CSS Variables
+- Brand colors (`--color-primary-*`)
+- Semantic colors (`--color-background`, `--color-foreground`)
+- Shadows, transitions, border radius

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+### Dark Mode
+- Automatic system preference detection
+- Manual toggle via ThemeProvider
+- Uses `data-theme="dark"` attribute

-## Deploy on Vercel
+### 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

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Utility Classes
+- `.card` - Card component styling
+- `.btn`, `.btn-primary`, `.btn-secondary` - Button styles
+- `.icon-container` - Icon wrapper styling

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## 📝 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)