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)

CLAUDE.md

@@ -13,7 +13,12 @@ websitedev/
 ├── proto/                  # Main Next.js application
 │   ├── src/
 │   │   ├── app/           # Next.js App Router (pages and API routes)
-│   │   ├── components/    # React components (Header, Footer)
+│   │   ├── components/    # React components (Header, Footer, ThemeProvider)
+│   │   ├── content/       # JSON content management system
+│   │   │   ├── types.ts   # Content TypeScript definitions
+│   │   │   ├── index.ts   # Content loader utility
+│   │   │   ├── common.json # Shared texts (buttons, labels)
+│   │   │   └── pages/     # Page-specific content JSONs
 │   │   ├── lib/          # Utility libraries (MongoDB, Logger, Site Config)
 │   │   ├── config/       # Static site configuration
 │   │   └── types/        # TypeScript type definitions
@@ -28,6 +33,8 @@ websitedev/
 
 - **Framework**: Next.js 14 with App Router and TypeScript
 - **UI**: Tailwind CSS 4 with custom fonts (Geist Sans/Mono)
+- **Design System**: CSS Variables, Dark Mode (ThemeProvider), Animations
+- **Content Management**: JSON-based structured content in `src/content/`
 - **Database**: MongoDB with Mongoose ODM
 - **Logging**: Winston with Loki integration
 - **Testing**: Jest with React Testing Library
@@ -80,11 +87,43 @@ Required environment variables (check `.env` and `proto/.env.local`):
 ## Site Configuration
 
 The site uses a centralized configuration system:
-- `src/config/site.ts` - Main site configuration with all content
+- `src/config/site.ts` - Main site configuration (company info, navigation, services)
 - `src/types/site.ts` - TypeScript interfaces for configuration
 - `src/lib/site-config.ts` - Runtime configuration utilities
 
-This approach enables easy content updates and future CMS integration.
+## Content Management System
+
+All page text content is managed through JSON files for easy modification:
+
+```
+src/content/
+├── types.ts          # TypeScript definitions for content
+├── index.ts          # Content loader with getPageContent() helper
+├── common.json       # Shared texts (buttons, labels, validation)
+└── pages/
+    ├── home.json     # Homepage CTA, feature labels
+    ├── about.json    # About page (hero, story, mission, team)
+    ├── services.json # Services details, support info
+    └── contact.json  # Form labels, FAQ, contact info
+```
+
+**Usage in components:**
+```typescript
+import { content, getPageContent } from '@/content'
+
+const { about: pageContent } = content.pages
+// or
+const servicesContent = getPageContent('services')
+```
+
+## Design System
+
+The project includes a comprehensive design system:
+
+- **CSS Variables**: Defined in `globals.css` for colors, shadows, transitions
+- **Dark Mode**: ThemeProvider component with system preference + manual toggle
+- **Animations**: fadeIn, float, pulse, hover effects (lift, scale, glow)
+- **Utility Classes**: `.card`, `.btn`, `.icon-container`, etc.
 
 ## Database Integration