feat: Add comprehensive brand system and website architecture documentation
This commit adds the complete CHORUS Services brand system and documentation: BRAND ASSETS: - Complete CHORUS brand guide with visual identity standards - Comprehensive typography system with Exo font family - Color system documentation (Carbon Black, Walnut Brown, Brushed Aluminum) - Brand usage guidelines and logo specifications - Website mockup concepts and design assets - Texture assets for brand consistency WEBSITE SUBMODULE UPDATE: - Update to latest commit (7774d7e) with full brand system implementation - Includes typography system, design tokens, and component updates - Production-ready brand application across all website components DOCUMENTATION: - Website Architecture Strategy: Next.js 13+ with Ant Design 5+ technical specs - UX Design Strategy: User experience and interface design principles - Website Functionality Audit: Feature requirements and technical specifications - Network Validation Report: Infrastructure and deployment validation ASSETS STRUCTURE: - /brand-assets/fonts/ - Complete Exo font family with licensing - /brand-assets/colors/ - Color system documentation - /brand-assets/typography/ - Typography hierarchy specifications - /brand-assets/guidelines/ - Brand usage and implementation guidelines - /brand-assets/mockups/ - Website design concepts and layouts - /brand-assets/textures/ - Visual texture assets for brand consistency This establishes the complete foundation for CHORUS Services brand identity and provides comprehensive documentation for consistent implementation across all marketing and product materials. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
968
WEBSITE_ARCHITECTURE_STRATEGY.md
Normal file
968
WEBSITE_ARCHITECTURE_STRATEGY.md
Normal file
@@ -0,0 +1,968 @@
|
||||
# CHORUS Services Website Architecture Strategy
|
||||
|
||||
## Executive Summary
|
||||
|
||||
This document outlines a comprehensive website architecture strategy for CHORUS Services, a distributed AI orchestration platform. The strategy leverages Next.js 13+ App Router with Ant Design 5+ and Framer Motion to create an enterprise-grade marketing website that showcases the platform's technical capabilities while remaining accessible to both technical and business audiences.
|
||||
|
||||
## 1. Architecture Overview
|
||||
|
||||
### Core Technology Stack
|
||||
- **Framework**: Next.js 13+ with App Router for optimal performance and SEO
|
||||
- **UI Library**: Ant Design 5+ with custom dark theme and CSS-in-JS theming
|
||||
- **Animation**: Framer Motion for parallax effects and sophisticated animations
|
||||
- **Styling**: CSS-in-JS with @ant-design/cssinjs and antd-style for advanced theming
|
||||
- **Deployment**: Docker containerization with Traefik integration on existing infrastructure
|
||||
|
||||
### Design Philosophy
|
||||
- **Apple-inspired aesthetics**: Clean, sophisticated, technology-focused design
|
||||
- **Dark theme primary**: Technology-forward appearance with electric blue (#007aff) and emerald green (#30d158)
|
||||
- **Performance-first**: Enterprise-grade loading speeds and accessibility
|
||||
- **Responsive-native**: Mobile-first design with desktop enhancement
|
||||
|
||||
## 2. Folder Structure & Component Hierarchy
|
||||
|
||||
```
|
||||
chorus-website/
|
||||
├── src/
|
||||
│ ├── app/ # Next.js 13+ App Router
|
||||
│ │ ├── (marketing)/ # Route group for marketing pages
|
||||
│ │ │ ├── page.tsx # Home page (/)
|
||||
│ │ │ ├── ecosystem/ # Platform overview (/ecosystem)
|
||||
│ │ │ │ └── page.tsx
|
||||
│ │ │ ├── scenarios/ # Use cases and demos (/scenarios)
|
||||
│ │ │ │ └── page.tsx
|
||||
│ │ │ ├── modules/ # Component breakdown (/modules)
|
||||
│ │ │ │ └── page.tsx
|
||||
│ │ │ ├── how-it-works/ # Process explanation (/how-it-works)
|
||||
│ │ │ │ └── page.tsx
|
||||
│ │ │ └── about/ # Team and company (/about)
|
||||
│ │ │ └── page.tsx
|
||||
│ │ ├── investors/ # Investor relations (protected)
|
||||
│ │ │ └── page.tsx
|
||||
│ │ ├── api/ # API routes for contact forms, etc.
|
||||
│ │ │ └── contact/
|
||||
│ │ │ └── route.ts
|
||||
│ │ ├── globals.css # Global styles and CSS variables
|
||||
│ │ ├── layout.tsx # Root layout with Ant Design ConfigProvider
|
||||
│ │ └── loading.tsx # Global loading component
|
||||
│ ├── components/ # Reusable components
|
||||
│ │ ├── ui/ # Core UI components
|
||||
│ │ │ ├── PerformanceCard.tsx # Metrics display cards
|
||||
│ │ │ ├── ModuleCard.tsx # CHORUS component showcases
|
||||
│ │ │ ├── AnimatedCounter.tsx # Metric counters with animation
|
||||
│ │ │ ├── ParallaxSection.tsx # Scroll-based parallax container
|
||||
│ │ │ ├── GradientText.tsx # Styled gradient typography
|
||||
│ │ │ └── LoadingSpinner.tsx # Consistent loading states
|
||||
│ │ ├── sections/ # Page-specific sections
|
||||
│ │ │ ├── HeroSection.tsx # Homepage hero with animation
|
||||
│ │ │ ├── FeaturesSection.tsx # Platform capabilities
|
||||
│ │ │ ├── MetricsSection.tsx # Performance statistics
|
||||
│ │ │ ├── ModulesSection.tsx # Component breakdown
|
||||
│ │ │ ├── ScenariosSection.tsx # Use case demonstrations
|
||||
│ │ │ ├── TestimonialsSection.tsx # Customer validation
|
||||
│ │ │ └── CTASection.tsx # Call-to-action sections
|
||||
│ │ ├── navigation/ # Navigation components
|
||||
│ │ │ ├── Header.tsx # Main navigation with sticky behavior
|
||||
│ │ │ ├── Footer.tsx # Footer with links and company info
|
||||
│ │ │ ├── MobileMenu.tsx # Mobile-responsive navigation
|
||||
│ │ │ └── NavigationDots.tsx # Page section navigation
|
||||
│ │ └── forms/ # Contact and interaction forms
|
||||
│ │ ├── ContactForm.tsx # General contact form
|
||||
│ │ ├── InvestorForm.tsx # Investor qualification form
|
||||
│ │ └── DemoRequestForm.tsx # Technical demo requests
|
||||
│ ├── lib/ # Utilities and configurations
|
||||
│ │ ├── theme/ # Ant Design theme customization
|
||||
│ │ │ ├── chorusTheme.ts # Main theme configuration
|
||||
│ │ │ ├── darkTheme.ts # Dark mode specifications
|
||||
│ │ │ └── animations.ts # Framer Motion variants
|
||||
│ │ ├── utils/ # Helper functions
|
||||
│ │ │ ├── animations.ts # Animation utilities
|
||||
│ │ │ ├── metrics.ts # Performance data formatting
|
||||
│ │ │ └── validation.ts # Form validation schemas
|
||||
│ │ └── constants/ # Application constants
|
||||
│ │ ├── colors.ts # Brand color system
|
||||
│ │ ├── typography.ts # Font and text specifications
|
||||
│ │ └── content.ts # Static content and copy
|
||||
│ ├── styles/ # Global and component styles
|
||||
│ │ ├── globals.css # Reset and global styles
|
||||
│ │ ├── components.css # Component-specific styles
|
||||
│ │ └── animations.css # CSS animations and transitions
|
||||
│ └── assets/ # Static assets
|
||||
│ ├── images/ # Optimized images and graphics
|
||||
│ ├── icons/ # SVG icons and logos
|
||||
└── public/ # Public static files
|
||||
├── favicon.ico
|
||||
├── robots.txt
|
||||
├── sitemap.xml
|
||||
└── images/ # Public images for SEO
|
||||
```
|
||||
|
||||
## 3. Component Architecture Strategy
|
||||
|
||||
### 3.1 Design System Foundation
|
||||
|
||||
#### Color System
|
||||
```typescript
|
||||
// lib/constants/colors.ts
|
||||
export const colors = {
|
||||
primary: {
|
||||
blue: '#007aff', // Electric blue - primary actions
|
||||
green: '#30d158', // Emerald green - success states
|
||||
amber: '#ff9f0a', // Amber orange - warnings
|
||||
red: '#ff453a', // System red - errors
|
||||
},
|
||||
neutral: {
|
||||
black: '#000000', // Pure black - backgrounds
|
||||
charcoal: '#1a1a1a', // Deep charcoal - containers
|
||||
gray: '#2d2d30', // Cool gray - elevated surfaces
|
||||
lightGray: '#a1a1a6', // Light gray - secondary text
|
||||
white: '#f2f2f7', // Off-white - primary text
|
||||
},
|
||||
gradients: {
|
||||
hero: 'linear-gradient(135deg, #000000 0%, #1a1a1a 100%)',
|
||||
text: 'linear-gradient(135deg, #f2f2f7 0%, #007aff 100%)',
|
||||
card: 'linear-gradient(135deg, #1a1a1a 0%, #2d2d30 100%)',
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Typography System
|
||||
```typescript
|
||||
// lib/constants/typography.ts
|
||||
export const typography = {
|
||||
fonts: {
|
||||
primary: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif`,
|
||||
mono: `'SF Mono', 'Monaco', 'Inconsolata', monospace`,
|
||||
},
|
||||
sizes: {
|
||||
hero: '84px', // Large headlines
|
||||
h1: '48px', // Section headers
|
||||
h2: '36px', // Subsection headers
|
||||
h3: '24px', // Component titles
|
||||
body: '16px', // Default body text
|
||||
small: '14px', // Secondary information
|
||||
},
|
||||
weights: {
|
||||
light: 300,
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
semibold: 600,
|
||||
bold: 700,
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 3.2 Key Component Specifications
|
||||
|
||||
#### HeroSection Component
|
||||
```typescript
|
||||
// components/sections/HeroSection.tsx
|
||||
interface HeroSectionProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
ctaButtons: Array<{
|
||||
text: string;
|
||||
type: 'primary' | 'secondary';
|
||||
href: string;
|
||||
}>;
|
||||
backgroundAnimation?: boolean;
|
||||
}
|
||||
|
||||
// Features:
|
||||
// - Parallax background with subtle particle animation
|
||||
// - Staggered text animations using Framer Motion
|
||||
// - Responsive typography scaling
|
||||
// - Accessibility-compliant contrast ratios
|
||||
// - Integration with Ant Design Button components
|
||||
```
|
||||
|
||||
#### ModuleCard Component
|
||||
```typescript
|
||||
// components/ui/ModuleCard.tsx
|
||||
interface ModuleCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: ReactNode;
|
||||
metrics: Array<{
|
||||
label: string;
|
||||
value: string;
|
||||
trend?: 'up' | 'down' | 'stable';
|
||||
}>;
|
||||
delay?: number;
|
||||
link?: string;
|
||||
}
|
||||
|
||||
// Features:
|
||||
// - Hover animations with smooth transitions
|
||||
// - Metric counters with animation on scroll
|
||||
// - Consistent spacing using Ant Design tokens
|
||||
// - Dark mode optimized styling
|
||||
// - Performance-optimized rendering
|
||||
```
|
||||
|
||||
#### ParallaxSection Component
|
||||
```typescript
|
||||
// components/ui/ParallaxSection.tsx
|
||||
interface ParallaxSectionProps {
|
||||
children: ReactNode;
|
||||
speed?: number;
|
||||
offset?: [string, string];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Features:
|
||||
// - Smooth scroll parallax using Framer Motion
|
||||
// - Configurable speed and offset parameters
|
||||
// - Intersection Observer for performance
|
||||
// - Reduced motion support for accessibility
|
||||
// - Compatible with Ant Design Layout components
|
||||
```
|
||||
|
||||
## 4. Technology Integration Approach
|
||||
|
||||
### 4.1 Next.js 13+ Configuration
|
||||
|
||||
#### App Router Setup
|
||||
```typescript
|
||||
// app/layout.tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { chorusTheme } from '@/lib/theme/chorusTheme';
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'CHORUS Services - Distributed AI Orchestration',
|
||||
description: 'Enterprise-ready distributed AI orchestration platform that eliminates context loss, reduces hallucinations, and enables true multi-agent coordination.',
|
||||
keywords: ['AI orchestration', 'distributed systems', 'context management', 'enterprise AI'],
|
||||
openGraph: {
|
||||
title: 'CHORUS Services',
|
||||
description: 'Distributed AI Orchestration Without the Hallucinations',
|
||||
url: 'https://www.chorus.services',
|
||||
siteName: 'CHORUS Services',
|
||||
images: [
|
||||
{
|
||||
url: '/images/og-image.jpg',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'CHORUS Services Platform'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<ConfigProvider theme={chorusTheme}>
|
||||
{children}
|
||||
</ConfigProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
#### Performance Optimizations
|
||||
```javascript
|
||||
// next.config.js
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
experimental: {
|
||||
appDir: true,
|
||||
},
|
||||
transpilePackages: ['antd'],
|
||||
webpack: (config) => {
|
||||
// Ant Design tree shaking optimization
|
||||
config.optimization.splitChunks.cacheGroups.antd = {
|
||||
name: 'antd',
|
||||
test: /[\\/]node_modules[\\/]antd[\\/]/,
|
||||
chunks: 'all',
|
||||
priority: 10,
|
||||
};
|
||||
|
||||
// Framer Motion code splitting
|
||||
config.optimization.splitChunks.cacheGroups.framerMotion = {
|
||||
name: 'framer-motion',
|
||||
test: /[\\/]node_modules[\\/]framer-motion[\\/]/,
|
||||
chunks: 'all',
|
||||
priority: 10,
|
||||
};
|
||||
|
||||
return config;
|
||||
},
|
||||
images: {
|
||||
formats: ['image/webp', 'image/avif'],
|
||||
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
|
||||
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
|
||||
},
|
||||
compress: true,
|
||||
poweredByHeader: false,
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
```
|
||||
|
||||
### 4.2 Ant Design 5+ Integration
|
||||
|
||||
#### Custom Theme Configuration
|
||||
```typescript
|
||||
// lib/theme/chorusTheme.ts
|
||||
import { theme } from 'antd';
|
||||
import type { ThemeConfig } from 'antd';
|
||||
|
||||
export const chorusTheme: ThemeConfig = {
|
||||
algorithm: theme.darkAlgorithm,
|
||||
token: {
|
||||
// Color System
|
||||
colorPrimary: '#007aff', // Electric blue
|
||||
colorSuccess: '#30d158', // Emerald green
|
||||
colorWarning: '#ff9f0a', // Amber orange
|
||||
colorError: '#ff453a', // System red
|
||||
colorInfo: '#007aff', // Electric blue
|
||||
|
||||
// Background Colors
|
||||
colorBgContainer: '#1a1a1a', // Deep charcoal
|
||||
colorBgElevated: '#2d2d30', // Cool gray
|
||||
colorBgLayout: '#000000', // Pure black
|
||||
|
||||
// Typography
|
||||
fontFamily: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif`,
|
||||
fontSize: 16,
|
||||
fontSizeHeading1: 84, // Large headlines
|
||||
fontSizeHeading2: 48, // Section headers
|
||||
fontSizeHeading3: 36, // Subsection headers
|
||||
|
||||
// Spacing & Layout
|
||||
borderRadius: 8, // Consistent 8px radius
|
||||
wireframe: false, // Enable modern styling
|
||||
|
||||
// Motion & Animation
|
||||
motionDurationSlow: '0.3s', // Apple-style timing
|
||||
motionDurationMid: '0.2s',
|
||||
motionDurationFast: '0.1s',
|
||||
},
|
||||
|
||||
components: {
|
||||
Button: {
|
||||
primaryShadow: '0 12px 24px rgba(0, 122, 255, 0.3)',
|
||||
controlHeight: 48, // Larger touch targets
|
||||
fontWeight: 600,
|
||||
borderRadius: 8,
|
||||
},
|
||||
|
||||
Card: {
|
||||
borderRadiusLG: 12, // Slightly larger for cards
|
||||
paddingLG: 32,
|
||||
boxShadowTertiary: '0 8px 32px rgba(0, 0, 0, 0.4)',
|
||||
},
|
||||
|
||||
Layout: {
|
||||
headerBg: 'rgba(26, 26, 26, 0.8)', // Semi-transparent header
|
||||
headerHeight: 72,
|
||||
bodyBg: '#000000',
|
||||
},
|
||||
|
||||
Typography: {
|
||||
titleMarginTop: 0,
|
||||
titleMarginBottom: 24,
|
||||
colorText: '#f2f2f7',
|
||||
colorTextSecondary: '#a1a1a6',
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 4.3 Framer Motion Integration
|
||||
|
||||
#### Animation Variants Library
|
||||
```typescript
|
||||
// lib/theme/animations.ts
|
||||
export const fadeInUp = {
|
||||
initial: { opacity: 0, y: 40 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.6 }
|
||||
};
|
||||
|
||||
export const staggerChildren = {
|
||||
animate: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const parallaxVariants = {
|
||||
initial: { y: 0 },
|
||||
animate: (custom: number) => ({
|
||||
y: custom,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 100,
|
||||
damping: 30
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
export const counterAnimation = {
|
||||
initial: { scale: 0.8, opacity: 0 },
|
||||
animate: { scale: 1, opacity: 1 },
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 200,
|
||||
damping: 25
|
||||
}
|
||||
};
|
||||
|
||||
export const cardHover = {
|
||||
hover: {
|
||||
y: -8,
|
||||
boxShadow: "0 20px 40px rgba(0, 122, 255, 0.2)",
|
||||
transition: { duration: 0.3 }
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Parallax Implementation
|
||||
```typescript
|
||||
// components/ui/ParallaxSection.tsx
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Layout } from 'antd';
|
||||
|
||||
const { Content } = Layout;
|
||||
|
||||
interface ParallaxSectionProps {
|
||||
children: React.ReactNode;
|
||||
speed?: number;
|
||||
offset?: [string, string];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ParallaxSection: React.FC<ParallaxSectionProps> = ({
|
||||
children,
|
||||
speed = 0.5,
|
||||
offset = ["start end", "end start"],
|
||||
className
|
||||
}) => {
|
||||
const ref = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: ref,
|
||||
offset
|
||||
});
|
||||
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, -200 * speed]);
|
||||
|
||||
return (
|
||||
<Content ref={ref} className={className}>
|
||||
<motion.div style={{ y }}>
|
||||
{children}
|
||||
</motion.div>
|
||||
</Content>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 5. Performance Optimization Strategy
|
||||
|
||||
### 5.1 Bundle Optimization
|
||||
|
||||
#### Tree Shaking Configuration
|
||||
```typescript
|
||||
// lib/antd/index.ts - Centralized component imports
|
||||
export { default as Button } from 'antd/es/button';
|
||||
export { default as Card } from 'antd/es/card';
|
||||
export { default as Layout } from 'antd/es/layout';
|
||||
export { default as Typography } from 'antd/es/typography';
|
||||
export { default as Space } from 'antd/es/space';
|
||||
export { default as Row } from 'antd/es/row';
|
||||
export { default as Col } from 'antd/es/col';
|
||||
export { default as Form } from 'antd/es/form';
|
||||
export { default as Input } from 'antd/es/input';
|
||||
export { default as Progress } from 'antd/es/progress';
|
||||
export { default as Statistic } from 'antd/es/statistic';
|
||||
|
||||
// Usage in components
|
||||
import { Button, Card, Typography } from '@/lib/antd';
|
||||
```
|
||||
|
||||
#### Code Splitting Strategy
|
||||
```typescript
|
||||
// Dynamic imports for non-critical components
|
||||
const InvestorForm = dynamic(() => import('@/components/forms/InvestorForm'), {
|
||||
loading: () => <LoadingSpinner />,
|
||||
ssr: false
|
||||
});
|
||||
|
||||
const InteractiveDemo = dynamic(() => import('@/components/sections/InteractiveDemo'), {
|
||||
loading: () => <div>Loading demo...</div>
|
||||
});
|
||||
```
|
||||
|
||||
### 5.2 Image Optimization
|
||||
|
||||
#### Next.js Image Component Usage
|
||||
```typescript
|
||||
// components/ui/OptimizedImage.tsx
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface OptimizedImageProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
width: number;
|
||||
height: number;
|
||||
priority?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const OptimizedImage: React.FC<OptimizedImageProps> = ({
|
||||
src,
|
||||
alt,
|
||||
width,
|
||||
height,
|
||||
priority = false,
|
||||
className
|
||||
}) => {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={`image-container ${className}`}>
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
priority={priority}
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSennjdEBAABAAcAMgsGdCcIK+f"
|
||||
onLoad={() => setIsLoaded(true)}
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
style={{
|
||||
transition: 'opacity 0.3s',
|
||||
opacity: isLoaded ? 1 : 0
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 5.3 Loading Performance
|
||||
|
||||
#### Metrics and Monitoring
|
||||
```typescript
|
||||
// lib/utils/performance.ts
|
||||
export const trackWebVitals = (metric: any) => {
|
||||
switch (metric.name) {
|
||||
case 'FCP':
|
||||
// First Contentful Paint
|
||||
console.log('FCP:', metric.value);
|
||||
break;
|
||||
case 'LCP':
|
||||
// Largest Contentful Paint
|
||||
console.log('LCP:', metric.value);
|
||||
break;
|
||||
case 'CLS':
|
||||
// Cumulative Layout Shift
|
||||
console.log('CLS:', metric.value);
|
||||
break;
|
||||
case 'FID':
|
||||
// First Input Delay
|
||||
console.log('FID:', metric.value);
|
||||
break;
|
||||
case 'TTFB':
|
||||
// Time to First Byte
|
||||
console.log('TTFB:', metric.value);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Usage in _app.tsx or layout.tsx
|
||||
export function reportWebVitals(metric: any) {
|
||||
trackWebVitals(metric);
|
||||
}
|
||||
```
|
||||
|
||||
## 6. SEO and Accessibility Strategy
|
||||
|
||||
### 6.1 SEO Optimization
|
||||
|
||||
#### Metadata Configuration
|
||||
```typescript
|
||||
// app/page.tsx
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'CHORUS Services - Distributed AI Orchestration Without the Hallucinations',
|
||||
description: 'Enterprise-ready distributed AI orchestration platform that eliminates context loss, reduces hallucinations, and enables true multi-agent coordination through intelligent context management.',
|
||||
keywords: [
|
||||
'AI orchestration',
|
||||
'distributed AI systems',
|
||||
'context management',
|
||||
'multi-agent coordination',
|
||||
'enterprise AI platform',
|
||||
'AI hallucination prevention',
|
||||
'collaborative AI reasoning',
|
||||
'persistent AI memory'
|
||||
],
|
||||
authors: [{ name: 'Deep Black Cloud Development' }],
|
||||
creator: 'Deep Black Cloud Development',
|
||||
publisher: 'CHORUS Services',
|
||||
formatDetection: {
|
||||
email: false,
|
||||
address: false,
|
||||
telephone: false,
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
openGraph: {
|
||||
title: 'CHORUS Services - Distributed AI Orchestration',
|
||||
description: 'Distributed AI Orchestration Without the Hallucinations',
|
||||
url: 'https://www.chorus.services',
|
||||
siteName: 'CHORUS Services',
|
||||
type: 'website',
|
||||
images: [
|
||||
{
|
||||
url: '/images/og-chorus-platform.jpg',
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'CHORUS Services Platform Architecture',
|
||||
}
|
||||
],
|
||||
locale: 'en_US',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'CHORUS Services - Distributed AI Orchestration',
|
||||
description: 'Enterprise-ready AI orchestration platform that eliminates context loss and enables true multi-agent coordination.',
|
||||
images: ['/images/twitter-chorus-card.jpg'],
|
||||
creator: '@chorusservices',
|
||||
},
|
||||
verification: {
|
||||
google: 'google-site-verification-code',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Structured Data Implementation
|
||||
```typescript
|
||||
// components/seo/StructuredData.tsx
|
||||
export const OrganizationStructuredData = () => {
|
||||
const structuredData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "CHORUS Services",
|
||||
"description": "Enterprise-ready distributed AI orchestration platform",
|
||||
"url": "https://www.chorus.services",
|
||||
"logo": "https://www.chorus.services/images/chorus-logo.png",
|
||||
"sameAs": [
|
||||
"https://github.com/chorus-services",
|
||||
"https://linkedin.com/company/chorus-services"
|
||||
],
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+1-XXX-XXX-XXXX",
|
||||
"contactType": "customer service",
|
||||
"availableLanguage": "English"
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(structuredData)
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 6.2 Accessibility Implementation
|
||||
|
||||
#### ARIA Labels and Semantic HTML
|
||||
```typescript
|
||||
// components/sections/HeroSection.tsx
|
||||
export const HeroSection: React.FC = () => {
|
||||
return (
|
||||
<section
|
||||
role="banner"
|
||||
aria-label="CHORUS Services introduction"
|
||||
className="hero-section"
|
||||
>
|
||||
<header>
|
||||
<h1
|
||||
className="hero-title"
|
||||
aria-describedby="hero-subtitle"
|
||||
>
|
||||
CHORUS Services
|
||||
</h1>
|
||||
<p
|
||||
id="hero-subtitle"
|
||||
className="hero-subtitle"
|
||||
>
|
||||
Distributed AI Orchestration Without the Hallucinations
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<nav aria-label="Primary actions">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
aria-describedby="platform-exploration-desc"
|
||||
onClick={() => router.push('/ecosystem')}
|
||||
>
|
||||
Explore the Platform
|
||||
</Button>
|
||||
<span
|
||||
id="platform-exploration-desc"
|
||||
className="sr-only"
|
||||
>
|
||||
Navigate to detailed platform overview and capabilities
|
||||
</span>
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### Keyboard Navigation Support
|
||||
```typescript
|
||||
// components/navigation/Header.tsx
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
|
||||
export const Header: React.FC = () => {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isMobileMenuOpen) {
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isMobileMenuOpen]);
|
||||
|
||||
return (
|
||||
<header role="banner" className="main-header">
|
||||
<nav aria-label="Main navigation">
|
||||
{/* Navigation implementation with focus management */}
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 7. Docker Integration Plan
|
||||
|
||||
### 7.1 Dockerfile Configuration
|
||||
|
||||
#### Multi-stage Production Build
|
||||
```dockerfile
|
||||
# Dockerfile
|
||||
FROM node:18-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies based on the preferred package manager
|
||||
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
|
||||
RUN \
|
||||
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
|
||||
elif [ -f package-lock.json ]; then npm ci; \
|
||||
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
|
||||
else echo "Lockfile not found." && exit 1; \
|
||||
fi
|
||||
|
||||
# Rebuild the source code only when needed
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Build application
|
||||
ENV NEXT_TELEMETRY_DISABLED 1
|
||||
RUN yarn build
|
||||
|
||||
# Production image, copy all the files and run next
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV production
|
||||
ENV NEXT_TELEMETRY_DISABLED 1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
# Set the correct permission for prerender cache
|
||||
RUN mkdir .next
|
||||
RUN chown nextjs:nodejs .next
|
||||
|
||||
# Automatically leverage output traces to reduce image size
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT 3000
|
||||
ENV HOSTNAME "0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
```
|
||||
|
||||
### 7.2 Docker Compose Integration
|
||||
|
||||
#### Development Configuration
|
||||
```yaml
|
||||
# docker-compose.dev.yml
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
chorus-website-dev:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.dev
|
||||
ports:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- .:/app
|
||||
- /app/node_modules
|
||||
- /app/.next
|
||||
environment:
|
||||
- NODE_ENV=development
|
||||
- NEXT_TELEMETRY_DISABLED=1
|
||||
- WATCHPACK_POLLING=true
|
||||
command: yarn dev
|
||||
networks:
|
||||
- chorus_network
|
||||
|
||||
networks:
|
||||
chorus_network:
|
||||
external: true
|
||||
```
|
||||
|
||||
### 7.3 Production Deployment Integration
|
||||
|
||||
#### Traefik Labels for Docker Swarm
|
||||
The website service is already configured in the existing `docker-compose.swarm.yml`:
|
||||
|
||||
```yaml
|
||||
# From docker-compose.swarm.yml (lines 70-97)
|
||||
chorus-website:
|
||||
image: registry.home.deepblack.cloud/tony/chorus-website:latest
|
||||
deploy:
|
||||
replicas: 2
|
||||
placement:
|
||||
constraints:
|
||||
- node.role == worker
|
||||
resources:
|
||||
limits:
|
||||
memory: 128M
|
||||
reservations:
|
||||
memory: 64M
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.docker.network=tengig"
|
||||
- "traefik.http.routers.chorus-website.rule=Host(`www.chorus.services`) || Host(`chorus.services`)"
|
||||
- "traefik.http.routers.chorus-website.entrypoints=web-secured"
|
||||
- "traefik.http.routers.chorus-website.tls.certresolver=letsencryptresolver"
|
||||
- "traefik.http.services.chorus-website.loadbalancer.server.port=80"
|
||||
- "traefik.http.services.chorus-website.loadbalancer.passhostheader=true"
|
||||
# Redirect naked domain to www
|
||||
- "traefik.http.middlewares.chorus-redirect.redirectregex.regex=^https://chorus.services/(.*)"
|
||||
- "traefik.http.middlewares.chorus-redirect.redirectregex.replacement=https://www.chorus.services/$${1}"
|
||||
- "traefik.http.routers.chorus-website.middlewares=chorus-redirect"
|
||||
networks:
|
||||
- tengig
|
||||
```
|
||||
|
||||
## 8. Implementation Roadmap
|
||||
|
||||
### Phase 1: Foundation (Week 1-2)
|
||||
- Set up Next.js 13+ project with App Router
|
||||
- Configure Ant Design 5+ with custom CHORUS theme
|
||||
- Implement basic folder structure and component hierarchy
|
||||
- Set up Docker development environment
|
||||
- Create core UI components (buttons, cards, typography)
|
||||
|
||||
### Phase 2: Core Pages (Week 3-4)
|
||||
- Implement homepage with hero section and animations
|
||||
- Build ecosystem overview page with module showcases
|
||||
- Create scenarios page with interactive demonstrations
|
||||
- Develop modules detail page with technical specifications
|
||||
- Set up basic navigation and footer components
|
||||
|
||||
### Phase 3: Advanced Features (Week 5-6)
|
||||
- Integrate Framer Motion for parallax and advanced animations
|
||||
- Implement performance metrics displays with counters
|
||||
- Add contact forms and investor relations section
|
||||
- Optimize bundle size and implement code splitting
|
||||
- Set up comprehensive SEO and structured data
|
||||
|
||||
### Phase 4: Production Ready (Week 7-8)
|
||||
- Complete Docker production configuration
|
||||
- Implement comprehensive accessibility features
|
||||
- Set up analytics and performance monitoring
|
||||
- Complete testing across devices and browsers
|
||||
- Deploy to production environment with SSL/TLS
|
||||
|
||||
### Phase 5: Optimization (Week 9-10)
|
||||
- Performance optimization and Core Web Vitals improvement
|
||||
- A/B testing for conversion optimization
|
||||
- Content management system integration (if needed)
|
||||
- Advanced monitoring and error tracking
|
||||
- Documentation and handover
|
||||
|
||||
## 9. Success Metrics
|
||||
|
||||
### Technical Metrics
|
||||
- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
|
||||
- **Lighthouse Score**: 95+ for Performance, Accessibility, Best Practices, SEO
|
||||
- **Bundle Size**: < 500KB initial bundle, < 1MB total
|
||||
- **Load Time**: < 3s on 3G, < 1s on broadband
|
||||
|
||||
### Business Metrics
|
||||
- **Conversion Rate**: Track demo requests and investor inquiries
|
||||
- **Engagement**: Time on site, pages per session, scroll depth
|
||||
- **SEO Performance**: Organic traffic growth, keyword rankings
|
||||
- **Accessibility Score**: WCAG 2.1 AA compliance
|
||||
|
||||
## 10. Maintenance and Evolution Strategy
|
||||
|
||||
### Content Management
|
||||
- Implement headless CMS for non-technical team members to update content
|
||||
- Create component library documentation for developers
|
||||
- Set up automated testing for critical user journeys
|
||||
- Establish design system governance for consistent updates
|
||||
|
||||
### Performance Monitoring
|
||||
- Continuous monitoring of Core Web Vitals
|
||||
- Regular bundle size analysis and optimization
|
||||
- A/B testing infrastructure for conversion optimization
|
||||
- User feedback collection and implementation system
|
||||
|
||||
This comprehensive architecture strategy provides a solid foundation for creating an enterprise-grade website that effectively showcases CHORUS Services' technical capabilities while maintaining excellent performance, accessibility, and user experience standards.
|
||||
Reference in New Issue
Block a user