chorus-services/planning and reports/WEBSITE_ARCHITECTURE_STRATEGY.md

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 Tailwind CSS and the CHORUS 8-color brand system to create an ultra-minimalist marketing website that showcases the platform's technical capabilities while maintaining exceptional performance and accessibility.

1. Architecture Overview

Core Technology Stack

• Framework: Next.js 13+ with App Router for optimal performance and SEO
• Styling: Tailwind CSS with custom CHORUS 8-color configuration
• Animation: Framer Motion for smooth transitions and Three.js logo integration
• Logo System: Three.js Möbius Ring with accessibility adaptations
• Development Server: HTTP server on port 3000 for development
• Deployment: Docker containerization with Traefik integration on existing infrastructure

Design Philosophy

• Ultra-minimalist aesthetics: Clean, sophisticated, distraction-free design
• Dark mode default: Professional appearance with light mode toggle capability
• CHORUS 8-color system: Carbon, Mulberry, Walnut, Paper, Nickel, Ocean, Eucalyptus, Sand, Coral
• Performance-first: Enterprise-grade loading speeds and accessibility compliance
• 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

CHORUS 8-Color System

// tailwind.config.js - CHORUS Brand Colors
const colors = {
  // Core Brand Colors (Primary Identity)
  'carbon': {
    950: '#000000',   // Pure black - primary backgrounds
    900: '#0a0a0a',   // Deep charcoal - containers
    800: '#1a1a1a',   // Elevated surfaces
    // ... full scale
  },
  'mulberry': {
    950: '#0b0213',   // Dark mulberry - secondary backgrounds
    900: '#1a1426',   // Accent backgrounds
    // ... full scale
  },
  'walnut': {
    950: '#1E1815',   // Walnut brown - accent elements
    900: '#403730',   // Warm accent
    // ... full scale
  },
  'paper': {
    950: '#F5F5DC',   // Natural paper - light mode primary
    // ... full scale
  },
  'nickel': {
    950: '#171717',   // Brushed nickel - neutral tones
    400: '#c1bfb1',   // Key neutral color
    // ... full scale
  },
  // System Colors (Functional)
  'ocean': '#2a3441',      // Info/navigation
  'eucalyptus': '#2a3330', // Success states
  'sand': '#473e2f',       // Warning states
  'coral': '#2e1d1c',      // Error/danger states
};

CHORUS Typography System

// tailwind.config.js - CHORUS Typography
const fontFamily = {
  sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
  mono: ['Inconsolata', 'ui-monospace', 'monospace'],
  logo: ['Exo', 'Inter Tight', 'sans-serif'],
};

const spacing = {
  'chorus-sm': '8px',
  'chorus-md': '16px', 
  'chorus-lg': '32px',
  'chorus-xl': '64px',
  'chorus-xxl': '128px',
};

// Custom utility classes
const utilities = {
  '.h7': {
    fontSize: '0.7rem',
    lineHeight: '1rem',
    fontWeight: '700',
    letterSpacing: '0.05em',
    textTransform: 'uppercase'
  }
};

3.2 Key Component Specifications

HeroSection Component

// 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

// 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

// 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 with CHORUS Theme

// app/layout.tsx
import type { Metadata } from 'next';
import './globals.css';

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" className="dark h-full">
      <body className="h-full bg-carbon-950 text-white antialiased">
        {children}
      </body>
    </html>
  );
}

Performance Optimizations

// 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 Tailwind CSS Configuration

CHORUS Custom Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        // CHORUS 8-Color System
        'carbon': {
          950: '#000000', 900: '#0a0a0a', 800: '#1a1a1a',
          700: '#2a2a2a', 600: '#666666', 500: '#808080',
          400: '#a0a0a0', 300: '#c0c0c0', 200: '#e0e0e0',
          100: '#f0f0f0', 50: '#f8f8f8'
        },
        'mulberry': {
          950: '#0b0213', 900: '#1a1426', 800: '#2a2639',
          // ... complete color scale
        },
        'walnut': {
          950: '#1E1815', 900: '#403730',
          // ... complete color scale
        },
        'paper': { 950: '#F5F5DC', 400: '#ffffff' },
        'nickel': { 950: '#171717', 400: '#c1bfb1' },
        'ocean': { 950: '#2a3441', 900: '#3a4654' },
        'eucalyptus': { 950: '#2a3330', 900: '#3a4540' },
        'sand': { 950: '#473e2f', 900: '#6a5c46' },
        'coral': { 950: '#2e1d1c', 900: '#3e2d2c' }
      },
      fontFamily: {
        sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
        mono: ['Inconsolata', 'ui-monospace', 'monospace'],
        logo: ['Exo', 'Inter Tight', 'sans-serif']
      },
      spacing: {
        'chorus-sm': '8px', 'chorus-md': '16px',
        'chorus-lg': '32px', 'chorus-xl': '64px',
        'chorus-xxl': '128px'
      }
    }
  },
  plugins: [function({ addUtilities }){...}]
};

4.3 Framer Motion Integration

Animation Variants Library

// 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

// 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

// 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

// 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

// 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

// 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. Three.js Logo Integration & Accessibility

6.1 Three.js Möbius Ring Logo System

Logo Implementation

// components/ui/ChorusLogo.tsx
import { useEffect, useRef } from 'react';

interface ChorusLogoProps {
  className?: string;
  size?: number;
  interactive?: boolean;
}

export const ChorusLogo: React.FC<ChorusLogoProps> = ({
  className = "chorus-logo",
  size = 64,
  interactive = true
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    // Three.js Möbius Ring initialization
    // Automatically adapts materials for accessibility themes
    // Handles data-accessibility attribute changes
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className={`${className} aspect-square`}
      style={{ width: `${size}px`, height: `${size}px` }}
      data-accessibility-aware="true"
    />
  );
};

Accessibility Theme Adaptations

/* Logo material adaptations for color vision conditions */
[data-accessibility="protanopia"] .chorus-logo {
  --color-ring-primary: #1e40af; /* Blue-800 */
}

[data-accessibility="deuteranopia"] .chorus-logo {
  --color-ring-primary: #6b21a8; /* Purple-800 */
}

[data-accessibility="tritanopia"] .chorus-logo {
  --color-ring-primary: #991b1b; /* Red-800 */
}

[data-accessibility="achromatopsia"] .chorus-logo {
  --color-ring-primary: #374151; /* Gray-700 */
}

6.2 CHORUS Accessibility System Implementation

Data Attributes for Accessibility

// Accessibility system with data attributes
const AccessibilityProvider = () => {
  const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');

  useEffect(() => {
    document.documentElement.setAttribute('data-accessibility', accessibilityTheme);
    
    // Update Three.js logo materials
    if (window.updateLogoAccessibilityTheme) {
      window.updateLogoAccessibilityTheme(accessibilityTheme);
    }
  }, [accessibilityTheme]);

  return (
    <div data-accessibility={accessibilityTheme}>
      {/* Component tree with accessibility-aware styling */}
    </div>
  );
};

6.3 SEO Optimization

Metadata Configuration

// 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

// 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

// 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

// 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 HTTP Development Server Configuration

Development Server Setup (Port 3000)

# Development server with HTTP on port 3000
npm run dev
# or
yarn dev

# Next.js automatically serves on:
# - http://localhost:3000 (development)
# - Internal Docker network access via service name

Production Dockerfile (Multi-stage Build)

# 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

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 . .

ENV NEXT_TELEMETRY_DISABLED 1
RUN yarn build

# Production image with HTTP server
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
ENV PORT 80
ENV HOSTNAME "0.0.0.0"

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
RUN mkdir .next
RUN chown nextjs:nodejs .next

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 80

CMD ["node", "server.js"]

7.2 Docker Compose Integration

Development Configuration

# 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:

# 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.