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/BRAND_STYLING_INTEGRATION.md
+++ b/modules/teaser/BRAND_STYLING_INTEGRATION.md
@@ -0,0 +1,221 @@
+# Brand Styling Integration Guide
+
+This document outlines how to integrate the CHORUS brand guidelines once they are completed.
+
+## Current State
+
+The teaser website is implemented with basic HTML structure and minimal styling using:
+- Simple inline styles for immediate functionality
+- CSS variables for easy theme switching
+- Basic form styling with accessibility focus
+- No complex animations or brand-specific elements
+
+## Brand Integration Tasks
+
+### 1. Font Integration
+**Files to Update:**
+- `app/globals.css` - Update font imports
+- `tailwind.config.js` - Configure font families
+
+**Changes Needed:**
+```css
+/* Replace current font import with brand fonts */
+@import url('path-to-exo-font');
+@import url('path-to-inter-tight-font');
+@import url('path-to-inconsolata-font');
+
+/* Update font classes */
+.font-logo { font-family: "Exo", sans-serif; }
+.font-content { font-family: "Inter Tight", sans-serif; }
+.font-technical { font-family: "Inconsolata", monospace; }
+```
+
+### 2. Color Palette Implementation
+**Files to Update:**
+- `app/globals.css` - CSS variables
+- `tailwind.config.js` - Color configuration
+
+**Brand Colors to Apply:**
+- Dark Mulberry: #0b0213 (primary)
+- Walnut Brown: #403730 (secondary)
+- Natural Paper: #F5F5DC (backgrounds)
+- Brushed Nickel: #c1bfb1 (accents)
+
+### 3. Component Styling Updates
+
+#### TeaserHero.tsx
+- Replace simple logo placeholder with 3D Mobius ring
+- Apply Exo Thin for CHORUS logotype
+- Implement dark mode background
+- Add subtle animations (respecting reduced motion preferences)
+
+#### MissionStatement.tsx
+- Apply Inter Tight typography hierarchy
+- Implement brand color scheme
+- Add proper spacing using 8px grid system
+
+#### EarlyAccessForm.tsx
+- Style modal with brand colors
+- Apply form input styling per brand guidelines
+- Implement proper button styling
+- Add brand-compliant success states
+
+### 4. Layout and Spacing
+**Apply 8px Grid System:**
+```css
+/* Spacing scale */
+--spacing-sm: 8px;
+--spacing-md: 16px;
+--spacing-lg: 32px;
+--spacing-xl: 64px;
+--spacing-2xl: 128px;
+```
+
+### 5. Animation Guidelines
+**Implement Brand-Compliant Motion:**
+- 200ms ease-out transitions for interactions
+- Accessibility-aware animations with `prefers-reduced-motion`
+- Mobius ring rotation animation (20s linear infinite)
+- Subtle fade-in animations for content sections
+
+## Integration Process
+
+### Step 1: Asset Preparation
+1. Copy brand assets from `/brand-assets/` to `/public/`
+2. Create symlinks for fonts and logos
+3. Optimize images for web delivery
+
+### Step 2: Styling Implementation
+1. Update CSS variables in `globals.css`
+2. Replace inline styles with brand-compliant CSS classes
+3. Apply Tailwind configuration with brand colors
+4. Implement responsive design breakpoints
+
+### Step 3: Component Enhancement
+1. Update each component file with brand styling
+2. Replace placeholder elements with brand assets
+3. Implement proper typography hierarchy
+4. Add accessibility-compliant animations
+
+### Step 4: Testing and Refinement
+1. Test on multiple devices and screen sizes
+2. Verify accessibility compliance (WCAG 2.1 AA)
+3. Validate brand guideline adherence
+4. Performance optimization
+
+## Brand Asset Requirements
+
+### Logos
+- Mobius ring 3D model or high-quality SVG
+- CHORUS wordmark in Exo Thin
+- Favicon and app icons
+
+### Color Specifications
+- Full brand color palette with all variants
+- Dark mode and light mode specifications
+- Accessibility contrast ratios verified
+
+### Typography Specifications
+- Complete font weight ranges
+- Line height specifications
+- Letter spacing values
+- Responsive typography scale
+
+## Responsive Design Implementation
+
+### Breakpoints
+```css
+/* Mobile First */
+--mobile: 320px;
+--tablet: 768px;
+--desktop: 1024px;
+--large: 1440px;
+```
+
+### Typography Scaling
+```css
+/* Responsive text sizes */
+.text-logotype {
+  font-size: clamp(3rem, 8vw, 6rem);
+  font-weight: 100;
+  letter-spacing: 0.2em;
+}
+```
+
+## Performance Considerations
+
+### Font Loading
+- Implement `font-display: swap` for web fonts
+- Preload critical brand fonts
+- Use font subsetting for faster loading
+
+### Image Optimization
+- Optimize logo files for different screen densities
+- Implement lazy loading for non-critical images
+- Use modern image formats (WebP, AVIF) with fallbacks
+
+### CSS Optimization
+- Minimize CSS bundle size
+- Use CSS custom properties for theme consistency
+- Implement critical CSS inlining
+
+## Accessibility Compliance
+
+### Color Contrast
+- Ensure minimum 4.5:1 contrast ratio for normal text
+- Ensure minimum 3:1 contrast ratio for large text
+- Test with color blindness simulation tools
+
+### Motion Accessibility
+- Respect `prefers-reduced-motion` user preference
+- Provide reduced motion alternatives
+- Ensure animations don't trigger vestibular disorders
+
+### Keyboard Navigation
+- Implement proper focus management
+- Ensure all interactive elements are keyboard accessible
+- Provide visible focus indicators
+
+## File Structure After Integration
+
+```
+/modules/teaser/
+├── app/
+│   ├── globals.css          # ← Brand styles integrated
+│   ├── layout.tsx           # ← Meta tags updated
+│   └── page.tsx            # ← Styling classes applied
+├── components/
+│   ├── TeaserHero.tsx      # ← 3D logo, brand colors
+│   ├── MissionStatement.tsx # ← Typography hierarchy
+│   └── EarlyAccessForm.tsx # ← Brand form styling
+├── public/
+│   ├── fonts/              # ← Brand font files
+│   ├── logos/              # ← Brand logo assets
+│   └── images/             # ← Optimized brand images
+└── styles/
+    ├── brand.css           # ← Brand-specific styles
+    └── components.css      # ← Component-specific styles
+```
+
+## Testing Checklist
+
+- [ ] Visual comparison with brand style guide
+- [ ] Typography rendering across browsers
+- [ ] Color accuracy on different displays
+- [ ] Animation performance on various devices
+- [ ] Accessibility testing with screen readers
+- [ ] Mobile responsiveness validation
+- [ ] Performance benchmarking
+- [ ] Cross-browser compatibility testing
+
+## Notes
+
+- Current implementation prioritizes functionality over aesthetics
+- All components use semantic HTML for accessibility
+- Form validation and API integration are fully functional
+- Ready for immediate brand styling overlay
+- No breaking changes required for styling integration
+
+---
+
+*This guide ensures smooth integration of brand guidelines while maintaining the functional foundation already established.*