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

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.