Add comprehensive footer component with:
- Four-column responsive layout (About, Resources, Documentation, Community)
- Links to all major features and GitHub repositories
- Copyright notice with dynamic year
- Attribution to Pastel CLI and David Peter
- MIT License link
- Built with acknowledgments
Fix TypeScript compilation errors:
- Remove all references to `comingSoon` property in accessibility/page.tsx
- Remove all references to `comingSoon` property in palettes/page.tsx
- Clean up conditional rendering logic
All features now properly linked and accessible.
Build now completes successfully for Docker deployment.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive feature set and fixes:
**Theme Improvements:**
- Fix theme flickering by adding blocking script in layout
- Prevents FOUC (Flash of Unstyled Content)
- Smooth transitions between light and dark modes
**Tailwind CSS v4 Migration:**
- Convert globals.css to Tailwind CSS v4 format
- Use @import "tailwindcss" instead of @tailwind directives
- Implement @theme block with OkLCH color space
- Add @plugin directives for forms and typography
- Use :root and .dark class-based theming
- Add all custom animations in CSS
- Create postcss.config.mjs with @tailwindcss/postcss
**Dev Environment:**
- Add .env.local with API on port 3001
- Add dev:api and dev:all scripts to package.json
- Create .env for API with port 3001 configuration
- Enable running both UI and API simultaneously
**New Features Implemented:**
1. **Harmony Palettes** (app/palettes/harmony/page.tsx)
- Generate color harmonies based on color theory
- Support for 6 harmony types:
- Monochromatic
- Analogous (±30°)
- Complementary (180°)
- Split-complementary
- Triadic (120° spacing)
- Tetradic/Square (90° spacing)
- Uses complement and rotate API endpoints
- Export harmonies in multiple formats
2. **Color Blindness Simulator** (app/accessibility/colorblind/page.tsx)
- Simulate 3 types of color blindness:
- Protanopia (red-blind, ~1% males)
- Deuteranopia (green-blind, ~1% males)
- Tritanopia (blue-blind, rare)
- Side-by-side comparison of original vs simulated
- Support for multiple colors (up to 10)
- Educational information about each type
- Accessibility tips and best practices
3. **Batch Operations** (app/batch/page.tsx)
- Process up to 100 colors at once
- Text input (line-separated or comma-separated)
- 5 operations supported:
- Lighten/Darken
- Saturate/Desaturate
- Rotate hue
- Adjustable amount slider
- Export processed colors
- Live validation and color count
**API Query Hooks:**
- Add useSimulateColorBlindness hook
- Add useTextColor hook
- Export ColorBlindnessRequest and TextColorRequest types
**Files Added:**
- postcss.config.mjs
- .env.local
- ../pastel-api/.env
- app/accessibility/colorblind/page.tsx
- app/palettes/harmony/page.tsx
**Files Modified:**
- app/globals.css (Tailwind v4 migration)
- app/layout.tsx (theme flicker fix)
- app/batch/page.tsx (functional implementation)
- lib/api/queries.ts (new hooks)
- package.json (dev scripts)
- tailwind.config.ts (simplified, CSS-first)
All features build successfully and are ready for testing.
Development server can now run with API via `pnpm dev:all`.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add complete navigation and theming infrastructure:
**Theme System:**
- ThemeProvider component with React Context
- Supports light, dark, and system themes
- Persists preference to localStorage
- Auto-detects system theme preference
- Listens for system theme changes
- Smooth theme transitions
- ThemeToggle component
- Sun/Moon icon toggle button
- Accessible with ARIA labels
- Shows current theme state
- Keyboard accessible
**Navigation:**
- Navbar component with sticky header
- Gradient logo with Palette icon
- Desktop horizontal navigation
- Mobile responsive menu
- Active route highlighting
- Backdrop blur effect
- Links to all main sections:
- Home
- Playground
- Palettes
- Accessibility
- Named Colors
- Batch Operations
**Layout Updates:**
- Integrated Navbar into root layout
- Added ThemeProvider to Providers wrapper
- Proper HTML suppressHydrationWarning for theme
- Container-based responsive layout
**Features:**
- Theme persists across page reloads
- System theme preference detection
- Active navigation state
- Smooth hover transitions
- Mobile-first responsive design
- Accessible navigation with proper semantics
**Styling:**
- Gradient text logo (pink → purple → blue)
- Sticky top navbar with backdrop blur
- Border bottom for visual separation
- Consistent spacing and padding
- Mobile menu slides in smoothly
Build successful! Navigation and theming complete.
Next: Palette generation pages and additional features.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
