Update branding assets and deployment configurations
- Enhanced moebius ring logo design in Blender - Updated Docker Compose for website-only deployment with improved config - Enhanced teaser layout with updated branding integration - Added installation and setup documentation - Consolidated planning and reports documentation - Updated gitignore to exclude Next.js build artifacts and archives 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
307
planning and reports/HERO_IMPLEMENTATION.md
Normal file
307
planning and reports/HERO_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,307 @@
|
||||
# CHORUS Services - Ultra-Minimalist Hero Implementation
|
||||
|
||||
## 🎯 Implementation Summary
|
||||
|
||||
Updated hero section implementation to align with current CHORUS brand guidelines, featuring ultra-minimalist design principles, CHORUS 8-color system integration, Three.js Möbius Ring logo, and comprehensive accessibility support. All brand requirements have been integrated and technical specifications updated.
|
||||
|
||||
## 📁 File Locations
|
||||
|
||||
### Core Implementation Files
|
||||
|
||||
1. **Enhanced Hero Component**
|
||||
- **Location**: `/home/tony/AI/projects/chorus.services/website/components/sections/EnhancedHero.tsx`
|
||||
- **Purpose**: Main hero section component with multi-layer parallax and advanced animations
|
||||
|
||||
2. **Custom Hook for Accessibility**
|
||||
- **Location**: `/home/tony/AI/projects/chorus.services/website/hooks/useReducedMotion.ts`
|
||||
- **Purpose**: Optimized hook for detecting user's reduced motion preference
|
||||
|
||||
3. **Updated Main Page**
|
||||
- **Location**: `/home/tony/AI/projects/chorus.services/website/app/page.tsx`
|
||||
- **Purpose**: Integrated the enhanced hero component into the main landing page
|
||||
|
||||
4. **Enhanced Styles**
|
||||
- **Location**: `/home/tony/AI/projects/chorus.services/website/app/globals.css`
|
||||
- **Purpose**: Added gradient animations, performance optimizations, and accessibility support
|
||||
|
||||
## ✅ Requirements Fulfilled
|
||||
|
||||
### Updated Design Specifications
|
||||
- ✅ **Main headline**: "CHORUS" with Exo font and ultra-clean typography
|
||||
- ✅ **Tagline**: "Distributed AI Orchestration Without the Hallucinations"
|
||||
- ✅ **Background**: Carbon black (#000000) with minimal geometric elements
|
||||
- ✅ **Three.js Logo**: Möbius Ring with accessibility adaptations
|
||||
- ✅ **CHORUS Colors**: 8-color system with semantic color tokens
|
||||
- ✅ **Typography**: Inter Tight for body, Exo for logo, Inconsolata for code
|
||||
|
||||
### Ultra-Minimalist Animation Features
|
||||
- ✅ **Subtle entrance animations**: 200ms ease-out transitions with reduced motion support
|
||||
- ✅ **Three.js logo**: Interactive Möbius Ring with smooth rotation and material updates
|
||||
- ✅ **Accessibility-aware motion**: Respects prefers-reduced-motion settings
|
||||
- ✅ **Clean hover states**: Minimal feedback with 200ms transitions
|
||||
- ✅ **Logo accessibility**: Automatic material adaptation for color vision conditions
|
||||
- ✅ **Performance optimization**: GPU acceleration with 60fps target
|
||||
|
||||
### Technical Requirements (Updated)
|
||||
- ✅ **Tailwind CSS**: CHORUS 8-color system with semantic tokens
|
||||
- ✅ **Three.js Integration**: Möbius Ring logo with accessibility themes
|
||||
- ✅ **Accessibility System**: Data attributes for protanopia/deuteranopia/tritanopia/achromatopsia
|
||||
- ✅ **Dark Mode Default**: Carbon black backgrounds with light mode toggle
|
||||
- ✅ **Performance**: <2.5s LCP, <100ms FID, <0.1 CLS targets
|
||||
- ✅ **HTTP Server**: Development on port 3000, production optimized
|
||||
|
||||
## 🎨 Key Features (Brand-Aligned Implementation)
|
||||
|
||||
### 1. Ultra-Minimalist Design System
|
||||
```typescript
|
||||
// CHORUS 8-Color System Implementation
|
||||
const heroColors = {
|
||||
primary: 'text-carbon-950 dark:text-paper-400',
|
||||
secondary: 'text-mulberry-950 dark:text-mulberry-200',
|
||||
accent: 'text-walnut-900 dark:text-walnut-400',
|
||||
neutral: 'text-nickel-400',
|
||||
background: 'bg-carbon-950', // Dark mode default
|
||||
};
|
||||
|
||||
// Ultra-clean typography
|
||||
const typography = {
|
||||
headline: 'font-logo text-6xl font-regular tracking-wide',
|
||||
tagline: 'font-sans text-xl font-light',
|
||||
body: 'font-sans text-base leading-relaxed',
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Three.js Möbius Ring Integration
|
||||
```typescript
|
||||
// Logo with accessibility adaptations
|
||||
const ChorusLogo = ({ accessibilityTheme = 'default' }) => {
|
||||
useEffect(() => {
|
||||
// Initialize Three.js Möbius Ring
|
||||
// Apply accessibility theme materials
|
||||
updateLogoMaterials(accessibilityTheme);
|
||||
}, [accessibilityTheme]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
className="chorus-logo aspect-square"
|
||||
data-accessibility-aware="true"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3. CHORUS Accessibility System
|
||||
```typescript
|
||||
// Comprehensive accessibility implementation
|
||||
const AccessibilityProvider = ({ children }) => {
|
||||
const [accessibilityTheme, setAccessibilityTheme] = useState('default');
|
||||
|
||||
const themes = {
|
||||
protanopia: { logoMaterial: '#1e40af', colorAdjustments: 'blue-focus' },
|
||||
deuteranopia: { logoMaterial: '#6b21a8', colorAdjustments: 'purple-focus' },
|
||||
tritanopia: { logoMaterial: '#991b1b', colorAdjustments: 'red-focus' },
|
||||
achromatopsia: { logoMaterial: '#374151', colorAdjustments: 'grayscale' },
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-accessibility={accessibilityTheme}>
|
||||
{/* Accessibility-aware component tree */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 4. Performance & SEO Optimizations
|
||||
```typescript
|
||||
// Ultra-minimalist performance strategy
|
||||
const HeroSection = () => {
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section
|
||||
className="min-h-screen bg-carbon-950 text-white"
|
||||
aria-label="CHORUS Services introduction"
|
||||
>
|
||||
{/* Three.js logo with GPU acceleration */}
|
||||
<ChorusLogo
|
||||
size={128}
|
||||
interactive={!reducedMotion}
|
||||
accessibilityTheme={accessibilityTheme}
|
||||
/>
|
||||
|
||||
{/* Ultra-clean typography */}
|
||||
<h1 className="font-logo text-6xl font-regular mb-chorus-lg">
|
||||
CHORUS
|
||||
</h1>
|
||||
|
||||
{/* Semantic tagline */}
|
||||
<p className="font-sans text-xl font-light mb-chorus-xl">
|
||||
Distributed AI Orchestration Without the Hallucinations
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 🚀 Ultra-Minimalist Animation Strategy
|
||||
|
||||
### Page Load Sequence (Reduced Complexity)
|
||||
1. **Three.js logo initialization** - Möbius Ring renders (200ms)
|
||||
2. **Typography fade-in** - Clean, semantic headline appearance (400ms)
|
||||
3. **Content reveal** - Tagline and navigation (600ms)
|
||||
4. **Accessibility ready** - All themes loaded and available (800ms)
|
||||
5. **Interactive state** - Logo interaction enabled (1000ms)
|
||||
|
||||
### Accessibility-Aware Animations
|
||||
```typescript
|
||||
// Respect user preferences
|
||||
const animationConfig = {
|
||||
duration: reducedMotion ? 0 : 200,
|
||||
easing: 'ease-out',
|
||||
respectMotionPreferences: true,
|
||||
};
|
||||
|
||||
// Three.js logo with motion control
|
||||
const logoAnimation = {
|
||||
rotation: reducedMotion ? 0 : 0.01,
|
||||
interaction: !reducedMotion,
|
||||
materialTransitions: 200, // Always allow material changes for accessibility
|
||||
};
|
||||
```
|
||||
|
||||
## 🎯 CHORUS Ultra-Minimalist Design Principles
|
||||
|
||||
### Visual Design (Brand-Compliant)
|
||||
- **Typography Hierarchy** - Exo for logo, Inter Tight for content, Inconsolata for code
|
||||
- **CHORUS Spacing** - 8px, 16px, 32px, 64px, 128px system (chorus-sm to chorus-xxl)
|
||||
- **Color Semantic Tokens** - 8-color system with semantic meaning
|
||||
- **Dark Mode Default** - Carbon black (#000000) primary background
|
||||
- **Three.js Integration** - Interactive Möbius Ring with accessibility themes
|
||||
|
||||
### Interaction Design (Accessibility-First)
|
||||
```typescript
|
||||
const interactionStates = {
|
||||
hover: 'transition-colors duration-200 ease-out',
|
||||
focus: 'ring-2 ring-offset-2 ring-chorus-accent',
|
||||
active: 'transform scale-95 transition-transform duration-100',
|
||||
disabled: 'opacity-50 cursor-not-allowed',
|
||||
};
|
||||
|
||||
// Keyboard navigation support
|
||||
const keyboardHandler = (event) => {
|
||||
if (event.key === 'Tab') {
|
||||
// Ensure visible focus indicators
|
||||
document.body.classList.add('keyboard-navigation');
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## 🔧 Performance Metrics (Updated Targets)
|
||||
|
||||
### Core Web Vitals Optimization
|
||||
- **LCP Target**: <2.5s (First Möbius Ring render)
|
||||
- **FID Target**: <100ms (Logo interaction responsiveness)
|
||||
- **CLS Target**: <0.1 (Stable layout with Three.js canvas)
|
||||
- **Bundle Size**: <500KB initial load with Tailwind CSS optimization
|
||||
- **Lighthouse Score**: 95+ across Performance, Accessibility, Best Practices, SEO
|
||||
|
||||
### CHORUS Accessibility Compliance
|
||||
```typescript
|
||||
// Complete accessibility implementation
|
||||
const accessibilityFeatures = {
|
||||
wcag: '2.1 AA compliant',
|
||||
screenReaders: 'Semantic HTML with ARIA labels',
|
||||
keyboard: 'Full tab navigation support',
|
||||
colorVision: 'Four accessibility theme adaptations',
|
||||
motion: 'prefers-reduced-motion respected',
|
||||
contrast: 'WCAG AA contrast ratios maintained',
|
||||
logoAdaptation: 'Three.js materials adapt to vision conditions'
|
||||
};
|
||||
|
||||
// SEO optimization for ultra-minimalist design
|
||||
const seoStrategy = {
|
||||
structuredData: 'JSON-LD for software application',
|
||||
semanticHTML: 'H1, H2, section, article hierarchy',
|
||||
metaDescription: 'Concise, keyword-optimized descriptions',
|
||||
openGraph: 'Optimized social sharing',
|
||||
performance: 'Fast loading for better search rankings'
|
||||
};
|
||||
```
|
||||
|
||||
## 🛠 Updated Usage Instructions
|
||||
|
||||
### Development Server (Port 3000)
|
||||
```bash
|
||||
cd /home/tony/chorus/project-queues/active/chorus.services/website
|
||||
npm install
|
||||
npm run dev # HTTP server on port 3000
|
||||
```
|
||||
|
||||
### Brand System Development
|
||||
```bash
|
||||
# Development with CHORUS brand system
|
||||
- **Local URL**: http://localhost:3000
|
||||
- **Hot Reload**: Tailwind CSS with brand colors
|
||||
- **Three.js Logo**: Interactive Möbius Ring development
|
||||
- **Accessibility Testing**: All four vision condition themes available
|
||||
```
|
||||
|
||||
### Production Build
|
||||
```bash
|
||||
# Build for production deployment
|
||||
npm run build
|
||||
|
||||
# Docker build with brand system
|
||||
docker build -t chorus-website .
|
||||
|
||||
# Deploy to registry
|
||||
./build-and-push.sh website
|
||||
```
|
||||
|
||||
### CHORUS Brand Customization
|
||||
```typescript
|
||||
// Brand system customization points
|
||||
const brandCustomization = {
|
||||
colors: {
|
||||
// CHORUS 8-color system in tailwind.config.js
|
||||
semantic: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'danger'],
|
||||
themes: ['light', 'dark', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia']
|
||||
},
|
||||
typography: {
|
||||
fonts: ['Inter Tight', 'Exo', 'Inconsolata'],
|
||||
spacing: ['chorus-sm', 'chorus-md', 'chorus-lg', 'chorus-xl', 'chorus-xxl']
|
||||
},
|
||||
logo: {
|
||||
threejs: 'Möbius Ring with material adaptations',
|
||||
fallback: 'Static PNG for accessibility',
|
||||
sizes: [32, 64, 128, 256]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## 📱 Responsive Design
|
||||
|
||||
### Breakpoint Strategy
|
||||
- **Mobile First** - Base styles for mobile devices
|
||||
- **Progressive Enhancement** - Larger screens get enhanced features
|
||||
- **Fluid Typography** - Text scales smoothly across devices
|
||||
- **Adaptive Animations** - Motion complexity adjusts to device capability
|
||||
|
||||
### Device Support
|
||||
- **Mobile** (320px+) - Core functionality with simplified animations
|
||||
- **Tablet** (768px+) - Enhanced parallax and interaction effects
|
||||
- **Desktop** (1024px+) - Full animation suite with mouse tracking
|
||||
- **Large Screens** (1440px+) - Maximum visual impact with all features
|
||||
|
||||
## 🎉 Brand-Aligned Implementation Result
|
||||
|
||||
The CHORUS Services website hero section now features:
|
||||
- **Ultra-minimalist design** following CHORUS brand guidelines
|
||||
- **CHORUS 8-color system** with semantic color tokens and accessibility themes
|
||||
- **Three.js Möbius Ring** logo with automatic accessibility adaptations
|
||||
- **Dark mode default** with light mode toggle capability
|
||||
- **Performance optimization** targeting <2.5s LCP and 95+ Lighthouse scores
|
||||
- **Comprehensive accessibility** supporting four color vision conditions
|
||||
- **SEO optimization** for minimalist design with structured data
|
||||
|
||||
The implementation fully aligns with current CHORUS brand guidelines and establishes a consistent foundation for the complete website development with technical specifications ready for immediate implementation.
|
||||
Reference in New Issue
Block a user