chorus-services/modules/teaser/README.md

# CHORUS Services - Teaser Website

Ultra-minimalist teaser website for CHORUS Services, designed to capture high-quality early access leads while maintaining strategic mystery about the full platform capabilities.

## Overview

**Purpose**: Create market presence and lead capture during development phase
**Domain**: teaser.chorus.services (or coming-soon.chorus.services)
**Framework**: Next.js 15 with TypeScript and Tailwind CSS

## Brand Compliance

- **Ultra-Minimalist Design**: Clean, no border radius, generous whitespace
- **Dark Mode Default**: Carbon black backgrounds with mulberry accents
- **Typography**: Exo Thin for logotype, Inter Tight for content
- **Colors**: Dark Mulberry (#0b0213), Walnut Brown (#403730)
- **Motion**: Accessibility-aware animations with reduced motion support

## Key Features

### 🎨 Design System
- CHORUS brand color palette implementation
- Typography hierarchy (Exo/Inter Tight/Inconsolata)
- 8px grid spacing system
- WCAG 2.1 AA accessibility compliance
- Vision inclusive design (8-color accessibility)

### 🔒 Lead Capture System
- Early access waitlist integration
- GDPR compliant with consent management
- Rate limiting protection (IP and email based)
- International phone validation ready
- Email notification system ready

### ⚡ Performance
- Static generation where possible
- Optimized image loading
- Minimal JavaScript bundle
- CDN ready assets

## Quick Start

### Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3001
```

### Production Build

```bash
# Build for production
npm run build

# Start production server
npm start
```

### Docker Deployment

```bash
# Build and run with Docker Compose
npm run docker:compose

# Or build image directly
npm run docker:build
npm run docker:run
```

## Content Strategy

### What We Reveal
- **Vision**: Contextual AI orchestration platform
- **Mission**: Distributed, semantic and temporal knowledge fabric
- **Value Props**: Right context, right agent, right time
- **Target**: Enterprise AI transformation

### What We Conceal
- Technical implementation details
- Competitive advantages and unique approaches
- Internal project codenames (BZZZ, SLURP, WHOOSH, etc.)
- Development timelines and specific roadmap
- Pricing models and business details

## Lead Capture Configuration

### Form Fields
- Name (first/last) - Required
- Email address - Required
- Company name - Optional
- Role/title - Optional
- Interest level - Technical evaluation, Strategic demo, General interest
- GDPR consent - Required
- Marketing consent - Optional

### Lead Source Types
- `early_access_waitlist` - Primary teaser website signups
- Integrates with existing chorus.services lead capture database
- Leverages established GDPR compliance framework

## File Structure

```
/modules/teaser/
├── app/                    # Next.js 13+ app directory
│   ├── layout.tsx         # Root layout with metadata
│   ├── page.tsx           # Main teaser page
│   ├── globals.css        # Brand-compliant styling
│   └── api/
│       └── early-access/  # Lead capture API endpoint
├── components/            # React components
│   ├── TeaserHero.tsx    # Hero section with Mobius ring
│   ├── MissionStatement.tsx # Mission and value props
│   └── EarlyAccessForm.tsx  # Lead capture modal form
├── hooks/                 # Custom React hooks
│   └── useEarlyAccessCapture.ts # Lead capture logic
└── Docker configuration files
```

## Integration Points

### Database Integration
When ready to integrate with the main website database:

1. Update API endpoint to connect to PostgreSQL
2. Use existing `leads` table structure
3. Leverage established rate limiting with Redis
4. Enable email notifications via existing SMTP config

### Brand Assets
- Symlinks to `/brand-assets/` for logos and fonts
- 3D Mobius ring model integration (when available)
- Consistent icon usage from Coolicons library

### Analytics
- Google Analytics 4 ready
- Event tracking for lead capture success
- Conversion funnel monitoring
- A/B testing framework ready

## Deployment Strategy

### Development Staging
```bash
# Local development
npm run dev  # Port 3001 to avoid conflicts
```

### Production Deployment
```bash
# Docker Swarm (recommended)
docker stack deploy -c docker-compose.yml chorus-teaser

# Or standalone Docker Compose
docker-compose up -d
```

### Domain Configuration
- **Primary**: teaser.chorus.services
- **Fallback**: coming-soon.chorus.services
- **SSL**: Automated via Traefik labels
- **CDN**: Ready for CloudFlare integration

## Security Features

### Rate Limiting
- 5 requests per hour per IP address
- 3 requests per day per email address
- Automatic temporary blocking for abuse

### Input Validation
- Zod schema validation on all inputs
- SQL injection prevention
- XSS protection via proper escaping
- CSRF protection built into Next.js

### Privacy Compliance
- GDPR consent management
- Data minimization principles
- Audit trail ready infrastructure
- Right to be forgotten framework

## Performance Optimization

### Core Web Vitals
- First Contentful Paint < 1.5s
- Largest Contentful Paint < 2.5s
- First Input Delay < 100ms
- Cumulative Layout Shift < 0.1

### Optimization Techniques
- Static generation for hero content
- Lazy loading for below-fold content
- Optimized font loading
- Minimal CSS and JavaScript
- Progressive enhancement

## Monitoring & Analytics

### Health Monitoring
- `/api/health` endpoint for uptime checks
- Docker healthcheck configuration
- Error logging and alerting ready

### Lead Analytics
- Conversion rate tracking
- Lead source attribution
- Geographic distribution analysis
- Interest level segmentation

### Performance Monitoring
- Core Web Vitals tracking
- Real User Monitoring ready
- Error rate monitoring
- API response time tracking

## Migration Strategy

When transitioning to the full website:

1. **Lead Migration**: Export waitlist leads to main database
2. **Domain Redirect**: Set up seamless redirect to main site
3. **Data Retention**: Archive teaser site data for compliance
4. **Analytics Continuity**: Maintain tracking through transition

## Support & Contact

- **Technical Issues**: cto@deepblack.cloud
- **Business Inquiries**: anthony.lewis.rawlins@gmail.com
- **Privacy Questions**: privacy@chorus.services (when established)

## License

Proprietary - Deep Black Cloud
© 2025 Anthony Lewis Rawlins. All rights reserved.

---

*This teaser website represents the first public touchpoint for CHORUS Services, designed to create intrigue and capture high-quality early access leads while the full platform is in development.*