chorus-services/planning and reports/WEBSITE_INTEGRATION.md

# Website Integration - Updated with Brand Guidelines

## Status: Ready for Implementation ✅

The CHORUS Services platform is fully configured for the www.chorus.services website integration with current brand guidelines. All technical specifications have been updated to align with the CHORUS 8-color system, Three.js logo integration, and ultra-minimalist design principles.

## Technical Integration Complete

### Brand System Integration
- **Color System**: CHORUS 8-color system implemented with Tailwind CSS
- **Typography**: Inter Tight, Inconsolata, and Exo font families configured
- **Logo System**: Three.js Möbius Ring with accessibility adaptations
- **Accessibility**: Data attributes for protanopia, deuteranopia, tritanopia, achromatopsia
- **Theme System**: Dark mode default with light mode toggle capability

### Docker Swarm Configuration
- `docker-compose.swarm.yml` includes `chorus-website` service
- Traefik labels configured for `www.chorus.services` and `chorus.services`
- Domain redirect: `chorus.services` → `www.chorus.services`
- SSL/TLS certificates via Let's Encrypt
- Registry image: `registry.home.deepblack.cloud/tony/chorus-website:latest`
- HTTP server development on port 3000, production on port 80

### Build Scripts & Development Server
- `build-and-push.sh` includes website build support
- Individual build command: `./build-and-push.sh website`
- Integrated with unified build: `./chorus.sh build`
- **Development Server**: HTTP server on port 3000 (`npm run dev`)
- **Production Build**: Next.js standalone with Tailwind CSS optimization

### Management Integration
- `./chorus.sh deploy` includes website in production deployment
- Production endpoints configured and documented

## Implementation Requirements

### 1. Three.js Logo Integration
```typescript
// Required Three.js logo implementation
// components/ui/ChorusLogo.tsx
interface ChorusLogoProps {
  className?: string;
  size?: number;
  accessibilityTheme?: 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia' | 'default';
}

// Canvas element with accessibility adaptations
<canvas 
  className="chorus-logo aspect-square" 
  data-accessibility-aware="true"
  style={{ width: `${size}px`, height: `${size}px` }}
/>
```

### 2. Accessibility System Implementation
```typescript
// Required accessibility provider
const AccessibilityProvider = ({ children }) => {
  const [theme, setTheme] = useState('default');
  
  useEffect(() => {
    document.documentElement.setAttribute('data-accessibility', theme);
    // Update Three.js logo materials
    window.updateLogoAccessibilityTheme?.(theme);
  }, [theme]);
  
  return <div data-accessibility={theme}>{children}</div>;
};
```

### 3. CHORUS 8-Color System Configuration
```javascript
// tailwind.config.js - Required configuration
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Semantic color tokens for 8-color system
        'chorus-primary': '#000000',    // carbon-950
        'chorus-secondary': '#0b0213',  // mulberry-950
        'chorus-accent': '#403730',     // walnut-900
        'chorus-neutral': '#c1bfb1',    // nickel-400
        'chorus-info': '#3a4654',       // ocean-900
        'chorus-success': '#3a4540',    // eucalyptus-900
        'chorus-warning': '#6a5c46',    // sand-900
        'chorus-danger': '#3e2d2c',     // coral-900
        // Full color scales for carbon, mulberry, walnut, etc.
      }
    }
  }
};
```

### 4. Performance Optimization Strategy
```typescript
// Ultra-minimalist component design
const MinimalButton = ({ children, variant = 'primary', ...props }) => {
  const baseClasses = "transition-all duration-200 ease-out";
  const variants = {
    primary: "bg-carbon-950 text-white hover:bg-carbon-900",
    secondary: "bg-mulberry-950 text-paper-400 hover:bg-mulberry-900",
  };
  
  return (
    <button className={`${baseClasses} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};
```

## Deployment & Access Points

### Build and Deploy
```bash
# Development server (port 3000)
cd website/
npm run dev  # http://localhost:3000

# Production build and deploy
./chorus.sh build    # Includes website with brand system
./chorus.sh deploy   # Deploys to production
```

### Access Points
- **Marketing**: https://www.chorus.services
- **Dashboard**: https://dashboard.chorus.services  
- **API**: https://api.chorus.services

## Domain Configuration ✅

### DNS & SSL Configuration
External domains configured with DNS pointing to 202.171.184.242:
- `chorus.services` (redirects to www)
- `www.chorus.services` (marketing website with CHORUS brand system)
- `dashboard.chorus.services` (WHOOSH dashboard)
- `api.chorus.services` (API endpoints)
- `*.chorus.services` (wildcard for future services)

### Brand-Compliant Domain Strategy
- **Primary Domain**: www.chorus.services (ultra-minimalist design)
- **Logo Integration**: Three.js Möbius Ring on all subdomains
- **Consistent Theme**: Dark mode default across all services
- **Performance**: HTTP/2, Brotli compression, CDN optimization

## SEO Considerations for Minimalist Design

### Ultra-Minimalist SEO Strategy
```typescript
// Structured data for minimalist design
const structuredData = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "CHORUS Services",
  "description": "Distributed AI Orchestration Without the Hallucinations",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web Browser",
  "softwareVersion": "1.0",
  "author": {
    "@type": "Organization",
    "name": "Deep Black Cloud Development"
  }
};
```

### Performance Requirements
- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
- **Lighthouse Score**: 95+ across all categories
- **Bundle Size**: <500KB initial, optimized with Next.js tree shaking
- **Three.js Logo**: GPU-accelerated rendering with fallback images

### Accessibility Compliance
- **WCAG 2.1 AA**: Full compliance with semantic HTML
- **Keyboard Navigation**: Tab order and focus management
- **Screen Readers**: ARIA labels and descriptions
- **Reduced Motion**: Respects prefers-reduced-motion settings
- **Color Vision**: Four accessibility theme adaptations

## Integration Challenges Identified

### 1. Three.js Logo Performance
**Challenge**: Ensuring 60fps performance across all devices
**Solution**: GPU acceleration, level-of-detail rendering, WebGL fallbacks

### 2. Accessibility Theme Switching
**Challenge**: Seamless logo material updates without re-initialization
**Solution**: CSS custom properties with Three.js material parameter binding

### 3. Ultra-Minimalist Content Strategy
**Challenge**: Maintaining SEO effectiveness with minimal content
**Solution**: Semantic HTML, structured data, optimized meta descriptions

All Traefik labels and routing ready for production deployment with brand-compliant implementation.