Do Siki
d1213f9b3f
- 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)
132 lines
3.3 KiB
Markdown
132 lines
3.3 KiB
Markdown
# 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)
|