chorus-services/modules/teaser/TEASER_WEBSITE_PLAN.md

# CHORUS Services - Teaser Website Implementation Plan

## Project Overview

**Objective**: Create a ultra-minimalist teaser website for chorus.services that maintains mystery while capturing high-quality leads during the development phase.

**Location**: `/home/tony/chorus/project-queues/active/chorus.services/modules/teaser/`

**Brand Identity**: 
- **Tagline**: "The right context, to the right agent, at the right time."
- **Mission**: "We are creating a distributed, semantic and temporal knowledge fabric, for humans and AI, to share reasoning, context and intent, not just files."

## Content Strategy

### Information Disclosure Level: **Minimal**
- Focus on the vision and mission rather than technical implementation details
- Create intrigue without revealing competitive advantages
- Position as revolutionary AI orchestration platform
- Emphasize the transformative potential for enterprises

### Core Content Elements

1. **Hero Section**
   - Large Mobius ring logo (3D animated, accessibility-aware)
   - "CHORUS" in Exo Thin 100, tracking-wide
   - Primary tagline: "The right context, to the right agent, at the right time."
   - Single primary CTA: "Get Early Access"

2. **Mission Statement**
   - Secondary section with mission statement
   - Minimal explanation of the knowledge fabric concept
   - Focus on human-AI collaboration narrative

3. **Coming Soon Features** (Ultra-minimal)
   - Three key value propositions without technical details:
     - "Contextual Intelligence"
     - "Agent Orchestration" 
     - "Temporal Knowledge"

4. **Lead Capture Integration**
   - Single high-intent lead capture form
   - "Get Early Access" or "Join Waitlist" CTA
   - Integrated with existing lead capture system

## Technical Architecture

### Framework Selection: **Next.js 15**
- Leverage existing chorus.services website architecture
- Use established component library and design system
- Integrate seamlessly with current lead capture infrastructure

### Key Components to Reuse
- Lead capture system from `/modules/website/`
- Brand assets and design tokens
- Database schema and API endpoints
- Docker deployment configuration

### New Components Required
- Teaser-specific hero section
- Simplified navigation (logo only)
- Coming soon content sections
- Minimal footer

## Design Specifications

### Brand Compliance (Ultra-Minimalist)
- **Primary Colors**: Dark Mulberry (#0b0213), Walnut Brown (#403730)
- **Backgrounds**: Carbon black (#000000) default, Natural Paper (#F5F5DC) alternate
- **Typography**: Exo Thin for logotype, Inter Tight for content, Inconsolata for code
- **Default Mode**: Dark mode (launch with `class="dark"`)
- **Spacing**: 8px grid system, generous whitespace (50% more than conventional)

### Layout Structure
```
Header (Minimal)
├── Mobius Ring Logo
└── Optional theme toggle

Hero Section (Full viewport)
├── Animated Mobius Ring (3D)
├── CHORUS Logotype (Exo Thin 100)
├── Primary Tagline
└── Single CTA Button

Mission Section
├── Mission Statement
└── Minimal Context

Coming Soon Section  
├── Three Value Props
└── Subtle visual hierarchy

Lead Capture Integration
├── Modal/inline form
└── Seamless UX flow

Footer (Minimal)
├── Business entity info
└── Legal links
```

## Lead Capture Integration

### Strategy: High-Intent Capture
- Single lead source type: `early_access_waitlist`
- Minimal form fields (name, email, company)
- Optional interest level (technical_evaluation, strategic_demo, general_interest)
- GDPR compliant with existing system

### Form Configuration
```typescript
const TEASER_LEAD_CONFIG = {
  leadSource: 'early_access_waitlist',
  title: 'Get Early Access to CHORUS',
  subtitle: 'Be first to experience contextual AI orchestration',
  showFields: { 
    phone: false, 
    company: true, 
    customMessage: false,
    interestLevel: true 
  },
  submitButtonText: 'Join Waitlist'
}
```

### Database Integration
- Use existing leads table structure
- Add `early_access_waitlist` to lead source types
- Leverage existing GDPR compliance and rate limiting
- Integrate with notification system for immediate alerts

## File Structure

```
/modules/teaser/
├── README.md
├── TEASER_WEBSITE_PLAN.md (this file)
├── package.json
├── next.config.js
├── tailwind.config.js
├── tsconfig.json
├── docker-compose.yml
├── Dockerfile
│
├── app/
│   ├── layout.tsx
│   ├── page.tsx (main teaser page)
│   ├── globals.css
│   └── api/
│       └── early-access/
│           └── route.ts
│
├── components/
│   ├── TeaserHero.tsx
│   ├── MissionStatement.tsx
│   ├── ComingSoonFeatures.tsx
│   ├── EarlyAccessForm.tsx
│   └── MinimalLayout.tsx
│
├── hooks/
│   └── useEarlyAccessCapture.ts
│
├── public/
│   ├── favicon.ico
│   └── logos/
│       └── (symlink to brand-assets)
│
└── docker/
    ├── nginx.conf
    └── init-db.sql
```

## Implementation Phases

### Phase 1: Foundation Setup
- [ ] Create teaser module directory structure
- [ ] Set up Next.js project with Tailwind CSS
- [ ] Configure build and deployment scripts
- [ ] Establish symlinks to brand assets

### Phase 2: Core Components
- [ ] Implement TeaserHero with animated Mobius ring
- [ ] Create MissionStatement component
- [ ] Build ComingSoonFeatures section
- [ ] Develop MinimalLayout wrapper

### Phase 3: Lead Capture Integration  
- [ ] Extend existing lead capture for early access
- [ ] Implement EarlyAccessForm component
- [ ] Configure API endpoints for waitlist
- [ ] Test GDPR compliance and notifications

### Phase 4: Design & Polish
- [ ] Apply ultra-minimalist brand guidelines
- [ ] Implement dark mode default
- [ ] Optimize animations and accessibility
- [ ] Conduct responsive design testing

### Phase 5: Deployment & Testing
- [ ] Configure Docker deployment
- [ ] Set up domain routing (teaser.chorus.services)
- [ ] Implement analytics and monitoring
- [ ] Conduct security and performance testing

## Content Guidelines

### Messaging Tone
- **Sophisticated**: Enterprise-grade language without jargon
- **Confident**: Revolutionary vision without hyperbole
- **Mysterious**: Intriguing without being vague
- **Professional**: Business intelligence focus

### What to Reveal
- Vision for AI-human collaboration
- Contextual intelligence concept
- Agent orchestration value proposition
- Temporal knowledge differentiation
- Enterprise transformation potential

### What to Conceal
- Technical architecture details
- Competitive implementation strategies
- Specific AI models or partnerships
- Pricing or business model details
- Development timeline specifics
- Internal project names (BZZZ, SLURP, WHOOSH, etc.)

## SEO & Marketing Considerations

### Meta Information
- **Title**: "CHORUS Services - Contextual AI Orchestration Platform"
- **Description**: "Revolutionary AI orchestration platform. The right context, to the right agent, at the right time. Join the waitlist."
- **Keywords**: contextual AI, agent orchestration, enterprise AI, knowledge fabric

### Social Media
- Open Graph optimized for professional sharing
- LinkedIn-focused social media strategy
- Clean, minimalist preview cards

## Security & Compliance

### Data Protection
- Leverage existing GDPR compliance framework
- Minimal data collection (name, email, company)
- Clear privacy policy and data handling
- Secure lead storage and processing

### Rate Limiting
- Use existing rate limiting infrastructure
- IP-based and email-based protection
- Prevent spam and abuse

## Analytics & Measurement

### Success Metrics
- Lead capture conversion rate
- Email signup quality (company domains)
- Time on page and engagement
- Traffic sources and referral quality

### Tracking Implementation
- Google Analytics 4 integration
- Lead source attribution
- Form interaction tracking
- Performance monitoring

## Business Integration

### Contact Information
- **Business Entity**: Deep Black Cloud (Anthony Lewis Rawlins)
- **Primary Contact**: cto@deepblack.cloud
- **Business Phone**: 0401424024 
- **Address**: 27 Daly Drive, LUCAS Victoria 3350
- **ABN**: 38558842858

### Legal Requirements
- Privacy policy compliance
- Australian business law compliance
- GDPR for international visitors
- Clear terms of service

## Deployment Strategy

### Domain Configuration
- **Primary**: teaser.chorus.services
- **Alternative**: coming-soon.chorus.services
- **Redirect**: Set up from main domain during development

### Infrastructure
- Docker Swarm deployment
- Nginx reverse proxy
- SSL certificate automation
- Database connection to existing PostgreSQL

### Monitoring
- Health check endpoints
- Performance monitoring
- Lead capture success tracking
- Error logging and alerting

## Future Migration Path

### Transition Strategy
When main website is ready:
- Migrate leads to full website database
- Redirect teaser traffic to main site
- Archive teaser site as static backup
- Retain lead data for follow-up campaigns

### Content Evolution
- Convert early access leads to qualified prospects
- Expand content based on lead feedback
- Develop targeted follow-up sequences
- Prepare for full website launch

---

## Next Steps

1. **Review and Approve Plan**: Ensure alignment with business strategy
2. **Create Directory Structure**: Set up the teaser module foundation
3. **Begin Phase 1 Implementation**: Start with basic Next.js setup
4. **Integrate with Existing Infrastructure**: Leverage established components and systems

This plan balances the need for market presence with strategic information control, creating intrigue while capturing high-quality leads for future conversion.