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
parent 630d1c26ad
commit c8fb816775
236 changed files with 17525 additions and 0 deletions
--- a/modules/teaser/TEASER_WEBSITE_PLAN.md
+++ b/modules/teaser/TEASER_WEBSITE_PLAN.md
@@ -0,0 +1,325 @@
+# 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.