tony/chorus-services-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: CHORUS Services marketing website

Browse Source 
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>
This commit is contained in:
anthonyrawlins
2025-08-01 22:45:06 +10:00
commit f343f89d24
50 changed files with 16178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
components/sections/COOEEShowcase.tsx Normal file
View File

@@ -0,0 +1,368 @@
'use client';
import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Progress, Rate, Badge, Statistic } from 'antd';
import {
BrainCircuitIcon,
ThumbsUpIcon,
ThumbsDownIcon,
TrendingUpIcon,
TargetIcon,
FlaskConicalIcon,
BarChart3Icon,
Users2Icon,
ClockIcon,
SparklesIcon,
AwardIcon,
RefreshCwIcon
} from 'lucide-react';
const { Title, Paragraph, Text } = Typography;
// Animation variants
const fadeInUp = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6, ease: 'easeOut' }
}
};
const stagger = {
visible: {
transition: {
staggerChildren: 0.15
}
}
};
const scaleOnHover = {
hover: {
scale: 1.02,
transition: { duration: 0.2 }
}
};
// Mock feedback data
const feedbackSamples = [
{ id: 1, agent: 'AI-Agent-Alpha', context: 'API Documentation Update', rating: 5, feedback: 'Highly relevant and timely', timestamp: '2m ago' },
{ id: 2, agent: 'AI-Agent-Beta', context: 'Code Review Context', rating: 4, feedback: 'Good context but could be more specific', timestamp: '5m ago' },
{ id: 3, agent: 'Human-Operator', context: 'Performance Metrics', rating: 3, feedback: 'Adequate but needs improvement', timestamp: '12m ago' },
{ id: 4, agent: 'AI-Agent-Gamma', context: 'User Feedback Analysis', rating: 5, feedback: 'Excellent contextual relevance', timestamp: '18m ago' },
];
// Mock learning metrics
const learningMetrics = [
{ metric: 'Context Accuracy', current: 87.5, trend: '+2.3%', color: '#30d158' },
{ metric: 'Response Relevance', current: 92.1, trend: '+1.8%', color: '#007aff' },
{ metric: 'Agent Satisfaction', current: 4.2, trend: '+0.3', color: '#eab308', max: 5 },
{ metric: 'Learning Rate', current: 78.9, trend: '+5.1%', color: '#f97316' },
];
export default function COOEEShowcase() {
return (
<section id="cooee" className="section-padding bg-gradient-to-br from-amber-950 via-chorus-charcoal to-purple-950">
<div className="container-chorus">
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: "-100px" }}
variants={stagger}
>
{/* Header */}
<motion.div variants={fadeInUp} className="text-center mb-16">
<div className="inline-flex items-center justify-center p-4 bg-purple-500/20 rounded-full mb-6">
<BrainCircuitIcon size={48} className="text-purple-500" />
</div>
<Title level={1} className="text-white mb-4">
COOEE
</Title>
<Text className="text-2xl text-purple-500 font-semibold block mb-4">
Feedback & Learning (RL Context SLURP)
</Text>
<Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
Reinforcement learning for context relevance tuning with agent feedback collection,
role-based filtering, and continuous improvement through real-world performance data.
</Paragraph>
</motion.div>
{/* Main Features Grid */}
<Row gutter={[32, 32]} className="mb-16">
<Col xs={24} lg={12}>
<motion.div variants={fadeInUp} whileHover="hover">
<Card
className="h-full glass-effect border-0 card-hover"
bodyStyle={{ padding: '2rem' }}
>
<motion.div variants={scaleOnHover}>
<div className="flex items-start space-x-4 mb-6">
<div className="p-3 bg-purple-500/20 rounded-lg">
<SparklesIcon size={32} className="text-purple-500" />
</div>
<div>
<Title level={3} className="text-white mb-2">Reinforcement Learning Engine</Title>
<Paragraph className="text-gray-300">
Advanced RL algorithms for context relevance optimization with multi-agent
feedback integration and adaptive learning rates.
</Paragraph>
</div>
</div>
<div className="space-y-4">
{learningMetrics.map((metric, index) => (
<div key={index} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
<div className="flex items-center justify-between mb-3">
<Text className="text-white font-medium">{metric.metric}</Text>
<div className="flex items-center space-x-2">
<Badge
color={metric.trend.startsWith('+') ? 'green' : 'red'}
text={metric.trend}
/>
</div>
</div>
<div className="flex items-center justify-between mb-2">
<Text className="text-sm text-gray-300">Current Performance</Text>
<Text className="text-sm font-semibold" style={{ color: metric.color }}>
{metric.current}{metric.max ? `/${metric.max}` : '%'}
</Text>
</div>
<Progress
percent={metric.max ? (metric.current / metric.max) * 100 : metric.current}
strokeColor={metric.color}
trailColor="#2a2a2a"
showInfo={false}
size="small"
/>
</div>
))}
</div>
</motion.div>
</Card>
</motion.div>
</Col>
<Col xs={24} lg={12}>
<motion.div variants={fadeInUp} whileHover="hover">
<Card
className="h-full glass-effect border-0 card-hover"
bodyStyle={{ padding: '2rem' }}
>
<motion.div variants={scaleOnHover}>
<div className="flex items-start space-x-4 mb-6">
<div className="p-3 bg-green-500/20 rounded-lg">
<ThumbsUpIcon size={32} className="text-green-500" />
</div>
<div>
<Title level={3} className="text-white mb-2">Agent Feedback Collection</Title>
<Paragraph className="text-gray-300">
Real-time feedback collection with upvote/downvote systems,
detailed comments, and sentiment analysis for continuous improvement.
</Paragraph>
</div>
</div>
<div className="space-y-4 max-h-96 overflow-y-auto">
{feedbackSamples.map((sample) => (
<div key={sample.id} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-3">
<Badge
color={
sample.agent.includes('Alpha') ? 'blue' :
sample.agent.includes('Beta') ? 'green' :
sample.agent.includes('Gamma') ? 'purple' : 'orange'
}
text={sample.agent}
/>
<Text className="text-xs text-gray-500">{sample.timestamp}</Text>
</div>
<Rate
disabled
defaultValue={sample.rating}
style={{ fontSize: '14px' }}
className="text-yellow-500"
/>
</div>
<Text className="text-sm text-gray-300 mb-2">{sample.context}</Text>
<Text className="text-xs text-gray-400 italic">"{sample.feedback}"</Text>
</div>
))}
</div>
</motion.div>
</Card>
</motion.div>
</Col>
</Row>
{/* Learning Statistics */}
<motion.div variants={fadeInUp} className="mb-16">
<Row gutter={[24, 24]}>
<Col xs={12} sm={6}>
<Card className="glass-effect border-0 text-center">
<Statistic
title={<span className="text-gray-400">Total Feedback</span>}
value={127834}
valueStyle={{ color: '#a855f7', fontSize: '2rem', fontWeight: 'bold' }}
prefix={<ThumbsUpIcon size={20} className="text-purple-500" />}
/>
</Card>
</Col>
<Col xs={12} sm={6}>
<Card className="glass-effect border-0 text-center">
<Statistic
title={<span className="text-gray-400">Learning Cycles</span>}
value={5847}
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
prefix={<RefreshCwIcon size={20} className="text-green-500" />}
/>
</Card>
</Col>
<Col xs={12} sm={6}>
<Card className="glass-effect border-0 text-center">
<Statistic
title={<span className="text-gray-400">Accuracy Gain</span>}
value={23.7}
precision={1}
suffix="%"
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
prefix={<TrendingUpIcon size={20} className="text-yellow-500" />}
/>
</Card>
</Col>
<Col xs={12} sm={6}>
<Card className="glass-effect border-0 text-center">
<Statistic
title={<span className="text-gray-400">Active Agents</span>}
value={47}
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
prefix={<Users2Icon size={20} className="text-orange-500" />}
/>
</Card>
</Col>
</Row>
</motion.div>
{/* Continuous Learning Features */}
<motion.div variants={fadeInUp} className="mb-16">
<Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
<Title level={2} className="text-white text-center mb-8">
Continuous Improvement Through Real-World Data
</Title>
<Row gutter={[32, 32]}>
<Col xs={24} md={8}>
<div className="text-center">
<div className="p-4 bg-purple-500/10 rounded-full inline-block mb-4">
<TargetIcon size={40} className="text-purple-500" />
</div>
<Title level={4} className="text-white mb-3">Adaptive Learning</Title>
<Paragraph className="text-gray-300">
Dynamic algorithm adjustment based on real-world performance metrics
with personalized learning paths for different agent types.
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div className="text-center">
<div className="p-4 bg-green-500/10 rounded-full inline-block mb-4">
<FlaskConicalIcon size={40} className="text-green-500" />
</div>
<Title level={4} className="text-white mb-3">A/B Testing Framework</Title>
<Paragraph className="text-gray-300">
Automated experimentation platform for testing context relevance
improvements with statistical significance validation.
</Paragraph>
</div>
</Col>
<Col xs={24} md={8}>
<div className="text-center">
<div className="p-4 bg-blue-500/10 rounded-full inline-block mb-4">
<AwardIcon size={40} className="text-blue-500" />
</div>
<Title level={4} className="text-white mb-3">Performance Rewards</Title>
<Paragraph className="text-gray-300">
Incentive-based learning system with performance-based rewards
and penalty mechanisms for optimal context quality.
</Paragraph>
</div>
</Col>
</Row>
</Card>
</motion.div>
{/* Role-Based Learning */}
<motion.div variants={fadeInUp}>
<Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
<Title level={3} className="text-white mb-6">Role-Based Context Filtering & Access Control</Title>
<Row gutter={[24, 24]}>
<Col xs={24} md={12}>
<div className="space-y-4">
<div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
<div className="p-2 bg-purple-500/20 rounded">
<Users2Icon size={20} className="text-purple-500" />
</div>
<div>
<Text className="text-white font-medium">Multi-Agent Learning</Text>
<Paragraph className="text-gray-400 text-sm mb-0">
Personalized learning models for different agent roles and capabilities
</Paragraph>
</div>
</div>
<div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
<div className="p-2 bg-green-500/20 rounded">
<BarChart3Icon size={20} className="text-green-500" />
</div>
<div>
<Text className="text-white font-medium">Performance Analytics</Text>
<Paragraph className="text-gray-400 text-sm mb-0">
Detailed metrics tracking and analysis for continuous optimization
</Paragraph>
</div>
</div>
</div>
</Col>
<Col xs={24} md={12}>
<div className="space-y-4">
<div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
<div className="p-2 bg-blue-500/20 rounded">
<ClockIcon size={20} className="text-blue-500" />
</div>
<div>
<Text className="text-white font-medium">Real-Time Adaptation</Text>
<Paragraph className="text-gray-400 text-sm mb-0">
Immediate learning integration with live performance monitoring
</Paragraph>
</div>
</div>
<div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
<div className="p-2 bg-yellow-500/20 rounded">
<TrendingUpIcon size={20} className="text-yellow-500" />
</div>
<div>
<Text className="text-white font-medium">Predictive Modeling</Text>
<Paragraph className="text-gray-400 text-sm mb-0">
Future context relevance prediction based on historical patterns
</Paragraph>
</div>
</div>
</div>
</Col>
</Row>
</Card>
</motion.div>
</motion.div>
</div>
</section>
);
}