f343f89d24
Complete Next.js website with Docker containerization: - Next.js 14 with TypeScript and Tailwind CSS - Responsive design with modern UI components - Hero section, features showcase, testimonials - FAQ section with comprehensive content - Contact forms and newsletter signup - Docker production build with Nginx - Health checks and monitoring support - SEO optimization and performance tuning Ready for integration as git submodule in main CHORUS project. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
178 lines
4.4 KiB
Markdown
178 lines
4.4 KiB
Markdown
# CHORUS Services Website
|
|
|
|
A modern, responsive marketing website for CHORUS Services - the distributed AI orchestration platform. Built with Next.js 13+, Ant Design 5+, and Framer Motion.
|
|
|
|
## 🚀 Features
|
|
|
|
- **Next.js 13+ with App Router** - Latest React Server Components
|
|
- **Ant Design 5+** - Enterprise-class UI design language
|
|
- **Framer Motion** - Production-ready motion library
|
|
- **TypeScript** - Type-safe development
|
|
- **Tailwind CSS** - Utility-first CSS framework
|
|
- **Custom CHORUS Theme** - Dark theme with Apple-inspired design
|
|
- **Responsive Design** - Mobile-first approach
|
|
- **Performance Optimized** - Bundle splitting and optimization
|
|
- **SEO Ready** - Meta tags, structured data, and sitemap
|
|
|
|
## 🎨 Design System
|
|
|
|
- **Primary Color**: Electric Blue (#007aff)
|
|
- **Secondary Color**: Emerald Green (#30d158)
|
|
- **Background**: Deep Charcoal (#1a1a1a)
|
|
- **Typography**: SF Pro Text / Inter
|
|
- **Border Radius**: 8px
|
|
- **Animation**: Smooth, Apple-inspired transitions
|
|
|
|
## 🏗️ Project Structure
|
|
|
|
```
|
|
website/
|
|
├── app/ # Next.js 13+ App Router
|
|
│ ├── layout.tsx # Root layout
|
|
│ ├── page.tsx # Home page
|
|
│ └── globals.css # Global styles
|
|
├── components/ # Reusable components
|
|
│ ├── ui/ # Base UI components
|
|
│ ├── sections/ # Page sections
|
|
│ └── layout/ # Layout components
|
|
├── theme/ # Ant Design theme
|
|
├── types/ # TypeScript definitions
|
|
├── utils/ # Utility functions
|
|
└── public/ # Static assets
|
|
```
|
|
|
|
## 🛠️ Development
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm 9+
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Start production server
|
|
npm start
|
|
```
|
|
|
|
### Available Scripts
|
|
|
|
- `npm run dev` - Start development server
|
|
- `npm run build` - Build for production
|
|
- `npm run start` - Start production server
|
|
- `npm run lint` - Run ESLint
|
|
- `npm run lint:fix` - Fix ESLint issues
|
|
- `npm run type-check` - Run TypeScript checks
|
|
- `npm run format` - Format code with Prettier
|
|
|
|
## 🎯 Components
|
|
|
|
### CHORUS Components
|
|
|
|
The website showcases four main CHORUS components:
|
|
|
|
- **WHOOSH** - High-velocity data processing engine
|
|
- **BZZZ** - Intelligent task scheduling and resource management
|
|
- **SLURP** - Advanced data ingestion and real-time processing
|
|
- **COOEE + Monitoring** - Comprehensive system monitoring and alerting
|
|
|
|
### UI Components
|
|
|
|
- Custom Button component with variants
|
|
- Responsive Header with mobile navigation
|
|
- Feature-rich Footer with social links
|
|
- Animation utilities with Framer Motion
|
|
- Theme-aware components
|
|
|
|
## 🎨 Theming
|
|
|
|
The project uses a custom Ant Design theme with CHORUS branding:
|
|
|
|
```typescript
|
|
// CHORUS brand colors
|
|
const chorusTheme = {
|
|
token: {
|
|
colorPrimary: '#007aff', // Electric blue
|
|
colorSuccess: '#30d158', // Emerald green
|
|
colorBgContainer: '#1a1a1a', // Deep charcoal
|
|
// ... more theme tokens
|
|
}
|
|
};
|
|
```
|
|
|
|
## 📱 Responsive Design
|
|
|
|
- Mobile-first approach
|
|
- Breakpoints: xs(576px), sm(768px), md(992px), lg(1200px), xl(1600px)
|
|
- Flexible grid system with Ant Design
|
|
- Touch-friendly interactions
|
|
|
|
## ⚡ Performance
|
|
|
|
- Bundle splitting for optimal loading
|
|
- Image optimization with Next.js
|
|
- Code splitting with dynamic imports
|
|
- CSS-in-JS with minimal runtime overhead
|
|
- Preconnect and prefetch for external resources
|
|
|
|
## 🔍 SEO
|
|
|
|
- Structured data with JSON-LD
|
|
- Open Graph and Twitter Card meta tags
|
|
- Semantic HTML structure
|
|
- Sitemap generation
|
|
- Robot.txt configuration
|
|
|
|
## 🚀 Deployment
|
|
|
|
### Vercel (Recommended)
|
|
|
|
```bash
|
|
npm install -g vercel
|
|
vercel --prod
|
|
```
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
# Build Docker image
|
|
docker build -t chorus-website .
|
|
|
|
# Run container
|
|
docker run -p 3000:3000 chorus-website
|
|
```
|
|
|
|
### Static Export
|
|
|
|
```bash
|
|
npm run build
|
|
npm run export
|
|
```
|
|
|
|
## 🤝 Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Run tests and linting
|
|
5. Submit a pull request
|
|
|
|
## 📄 License
|
|
|
|
Copyright © 2024 CHORUS Services. All rights reserved.
|
|
|
|
## 🆘 Support
|
|
|
|
For support and questions:
|
|
- Documentation: [docs.chorus.services](https://docs.chorus.services)
|
|
- Email: hello@chorus.services
|
|
- GitHub Issues: [github.com/chorusservices/website/issues](https://github.com/chorusservices/website/issues) |