chorus-services/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 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.