Files
chorus-services/modules/teaser
tony c8fb816775 feat: Add CHORUS teaser website with mobile-responsive design
- Created complete Next.js 15 teaser website with CHORUS brand styling
- Implemented mobile-responsive 3D logo (128px mobile, 512px desktop)
- Added proper Exo font loading via Next.js Google Fonts for iOS/Chrome compatibility
- Built comprehensive early access form with GDPR compliance and rate limiting
- Integrated PostgreSQL database with complete schema for lead capture
- Added scroll indicators that auto-hide when scrolling begins
- Optimized mobile modal forms with proper scrolling and submit button access
- Deployed via Docker Swarm with Traefik SSL termination at chorus.services
- Includes database migrations, consent tracking, and email notifications

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-26 13:57:30 +10:00
..

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

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3001

Production Build

# Build for production
npm run build

# Start production server
npm start

Docker Deployment

# 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

# Local development
npm run dev  # Port 3001 to avoid conflicts

Production Deployment

# 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

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.