Initial commit: CHORUS Services marketing website
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
346
components/sections/BZZZShowcase.tsx
Normal file
346
components/sections/BZZZShowcase.tsx
Normal file
@@ -0,0 +1,346 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Typography, Row, Col, Card, Progress, Badge, Statistic } from 'antd';
|
||||
import {
|
||||
ZapIcon,
|
||||
NetworkIcon,
|
||||
RadioIcon,
|
||||
ShieldIcon,
|
||||
ServerIcon,
|
||||
ActivityIcon,
|
||||
WifiIcon,
|
||||
GitBranchIcon,
|
||||
CpuIcon,
|
||||
CloudIcon
|
||||
} 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 network nodes data
|
||||
const networkNodes = [
|
||||
{ id: 'node-1', status: 'active', load: 75, region: 'US-East' },
|
||||
{ id: 'node-2', status: 'active', load: 62, region: 'EU-West' },
|
||||
{ id: 'node-3', status: 'active', load: 88, region: 'AP-South' },
|
||||
{ id: 'node-4', status: 'syncing', load: 45, region: 'US-West' },
|
||||
{ id: 'node-5', status: 'active', load: 91, region: 'EU-North' },
|
||||
];
|
||||
|
||||
export default function BZZZShowcase() {
|
||||
return (
|
||||
<section id="bzzz" className="section-padding bg-gradient-to-br from-slate-900 via-chorus-charcoal to-emerald-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-chorus-green/20 rounded-full mb-6">
|
||||
<ZapIcon size={48} className="text-chorus-green" />
|
||||
</div>
|
||||
<Title level={1} className="text-white mb-4">
|
||||
BZZZ
|
||||
</Title>
|
||||
<Text className="text-2xl text-chorus-green font-semibold block mb-4">
|
||||
P2P Agent Coordination
|
||||
</Text>
|
||||
<Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||||
Mesh networking with libp2p for resilient communication, automatic peer discovery,
|
||||
and distributed task coordination without single points of failure.
|
||||
</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-chorus-green/20 rounded-lg">
|
||||
<NetworkIcon size={32} className="text-chorus-green" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Mesh Network Architecture</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Built on libp2p for robust peer-to-peer communication with automatic
|
||||
routing, NAT traversal, and adaptive connection management.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-chorus-green/20">
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-chorus-green">15ms</div>
|
||||
<Text className="text-sm text-gray-400">Avg Latency</Text>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-chorus-green">99.95%</div>
|
||||
<Text className="text-sm text-gray-400">Uptime</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Network Stability</Text>
|
||||
<Badge status="processing" text="Excellent" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Peer Discovery</Text>
|
||||
<Badge status="success" text="Active" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Load Balancing</Text>
|
||||
<Badge status="processing" text="Optimized" />
|
||||
</div>
|
||||
</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-blue-500/20 rounded-lg">
|
||||
<RadioIcon size={32} className="text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Automatic Peer Discovery</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
mDNS-based service discovery with intelligent peer ranking,
|
||||
connection pooling, and failover mechanisms.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{networkNodes.map((node, index) => (
|
||||
<div key={node.id} className="bg-chorus-charcoal/50 rounded-lg p-3 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
node.status === 'active' ? 'bg-green-500' :
|
||||
node.status === 'syncing' ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`} />
|
||||
<Text className="text-white font-medium">{node.id}</Text>
|
||||
<Badge
|
||||
color={node.status === 'active' ? 'green' : 'orange'}
|
||||
text={node.region}
|
||||
/>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">{node.load}% load</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={node.load}
|
||||
size="small"
|
||||
strokeColor={
|
||||
node.load < 60 ? '#30d158' :
|
||||
node.load < 80 ? '#eab308' : '#ef4444'
|
||||
}
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Network 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">Active Peers</span>}
|
||||
value={127}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ServerIcon 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">Messages/Sec</span>}
|
||||
value={2847}
|
||||
valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ActivityIcon size={20} className="text-chorus-blue" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Network Health</span>}
|
||||
value={99.8}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ShieldIcon 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">Bandwidth</span>}
|
||||
value={1.2}
|
||||
precision={1}
|
||||
suffix="GB/s"
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<WifiIcon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
|
||||
{/* Technical Architecture */}
|
||||
<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">
|
||||
High-Performance Go Architecture
|
||||
</Title>
|
||||
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col xs={24} md={8}>
|
||||
<div className="text-center">
|
||||
<div className="p-4 bg-chorus-green/10 rounded-full inline-block mb-4">
|
||||
<CpuIcon size={40} className="text-chorus-green" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Concurrent Processing</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Goroutine-based concurrent task handling with intelligent work
|
||||
stealing and adaptive thread pooling for maximum throughput.
|
||||
</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">
|
||||
<GitBranchIcon size={40} className="text-blue-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Fault Tolerance</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Distributed consensus mechanisms with automatic failover,
|
||||
circuit breakers, and graceful degradation patterns.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={8}>
|
||||
<div className="text-center">
|
||||
<div className="p-4 bg-purple-500/10 rounded-full inline-block mb-4">
|
||||
<CloudIcon size={40} className="text-purple-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Scale-out Architecture</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Horizontal scaling capabilities with dynamic peer joining,
|
||||
load redistribution, and seamless cluster expansion.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Coordination Features */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
|
||||
<Title level={3} className="text-white mb-6">Distributed Task Coordination</Title>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} md={12}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-chorus-green rounded-full" />
|
||||
<Text className="text-gray-300">Consensus-based task allocation</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-chorus-green rounded-full" />
|
||||
<Text className="text-gray-300">Dynamic workload rebalancing</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-chorus-green rounded-full" />
|
||||
<Text className="text-gray-300">Real-time peer health monitoring</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-chorus-green rounded-full" />
|
||||
<Text className="text-gray-300">Automatic failure recovery</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={12}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full" />
|
||||
<Text className="text-gray-300">Message routing optimization</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full" />
|
||||
<Text className="text-gray-300">End-to-end encryption</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full" />
|
||||
<Text className="text-gray-300">Bandwidth throttling</Text>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full" />
|
||||
<Text className="text-gray-300">Connection multiplexing</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
368
components/sections/COOEEShowcase.tsx
Normal file
368
components/sections/COOEEShowcase.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
498
components/sections/EnhancedHero.tsx
Normal file
498
components/sections/EnhancedHero.tsx
Normal file
@@ -0,0 +1,498 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useScroll, useTransform, useSpring, useInView } from 'framer-motion';
|
||||
import { Typography, Space } from 'antd';
|
||||
import { PlayIcon, ArrowRightIcon, ChevronDownIcon } from 'lucide-react';
|
||||
import { PrimaryButton, SecondaryButton } from '@/components/ui/Button';
|
||||
import { useReducedMotion } from '@/hooks/useReducedMotion';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
interface ParallaxLayerProps {
|
||||
children: React.ReactNode;
|
||||
speed: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ParallaxLayer: React.FC<ParallaxLayerProps> = ({ children, speed, className = '' }) => {
|
||||
const { scrollY } = useScroll();
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
const y = useTransform(scrollY, [0, 1000], [0, prefersReducedMotion ? 0 : speed * 100]);
|
||||
const smoothY = useSpring(y, { stiffness: 100, damping: 30 });
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={`${className} will-change-transform gpu-accelerated`}
|
||||
style={{ y: prefersReducedMotion ? 0 : smoothY }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const FloatingElement: React.FC<{ delay: number; children: React.ReactNode }> = ({ delay, children }) => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="will-change-transform gpu-accelerated"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
y: [-10, 10, -10],
|
||||
rotate: [-2, 2, -2],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 6,
|
||||
delay: prefersReducedMotion ? 0 : delay,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const GeometricPattern: React.FC = () => {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (heroRef.current && !prefersReducedMotion) {
|
||||
const rect = heroRef.current.getBoundingClientRect();
|
||||
setMousePosition({
|
||||
x: (e.clientX - rect.left) / rect.width,
|
||||
y: (e.clientY - rect.top) / rect.height,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const heroElement = heroRef.current;
|
||||
if (heroElement) {
|
||||
heroElement.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
return () => {
|
||||
heroElement.removeEventListener('mousemove', handleMouseMove);
|
||||
};
|
||||
}
|
||||
}, [prefersReducedMotion]);
|
||||
|
||||
return (
|
||||
<div ref={heroRef} className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
|
||||
{/* Enhanced animated gradient background */}
|
||||
<motion.div
|
||||
className="absolute inset-0 opacity-30"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
background: [
|
||||
'radial-gradient(circle at 20% 50%, rgba(0, 122, 255, 0.15) 0%, transparent 50%)',
|
||||
'radial-gradient(circle at 80% 20%, rgba(48, 209, 88, 0.15) 0%, transparent 50%)',
|
||||
'radial-gradient(circle at 40% 80%, rgba(0, 122, 255, 0.15) 0%, transparent 50%)',
|
||||
'radial-gradient(circle at 60% 30%, rgba(48, 209, 88, 0.12) 0%, transparent 60%)',
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 12,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Particle system - responsive dots */}
|
||||
{[...Array(16)].map((_, i) => (
|
||||
<motion.div
|
||||
key={`particle-${i}`}
|
||||
className="absolute w-1 h-1 bg-white/20 rounded-full"
|
||||
style={{
|
||||
left: `${15 + (i * 5.5)}%`,
|
||||
top: `${25 + Math.sin(i * 0.8) * 25}%`,
|
||||
}}
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1, 1.8, 1],
|
||||
opacity: [0.2, 0.7, 0.2],
|
||||
x: mousePosition.x * (8 + i * 1.5),
|
||||
y: mousePosition.y * (4 + i * 0.8),
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 4 + i * 0.3,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Enhanced geometric shapes - hexagons */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<motion.div
|
||||
key={`hex-${i}`}
|
||||
className="absolute w-6 h-6 border border-white/8"
|
||||
style={{
|
||||
left: `${8 + (i * 12)}%`,
|
||||
top: `${15 + Math.cos(i * 0.6) * 35}%`,
|
||||
clipPath: 'polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)',
|
||||
}}
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
rotate: [0, 360],
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [0.08, 0.25, 0.08],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 10 + i * 2.5,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Grid pattern overlay */}
|
||||
<motion.div
|
||||
className="absolute inset-0 opacity-5"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px',
|
||||
}}
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
opacity: [0.02, 0.08, 0.02],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 8,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Additional floating circles for depth */}
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<motion.div
|
||||
key={`circle-${i}`}
|
||||
className="absolute rounded-full border border-white/5"
|
||||
style={{
|
||||
width: `${60 + i * 40}px`,
|
||||
height: `${60 + i * 40}px`,
|
||||
left: `${20 + i * 20}%`,
|
||||
top: `${10 + i * 15}%`,
|
||||
}}
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1, 1.1, 1],
|
||||
opacity: [0.03, 0.12, 0.03],
|
||||
rotate: [0, 180, 360],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 15 + i * 5,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AnimatedText: React.FC<{ children: React.ReactNode; delay?: number }> = ({ children, delay = 0 }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay,
|
||||
ease: [0.21, 1.11, 0.81, 0.99], // Apple-style easing
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const GradientText: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<motion.span
|
||||
className="text-gradient"
|
||||
animate={{
|
||||
backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
style={{
|
||||
backgroundSize: '200% 200%',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</motion.span>
|
||||
);
|
||||
|
||||
const ScrollIndicator: React.FC = () => {
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center text-white/60"
|
||||
initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: prefersReducedMotion ? 0 : 2, duration: prefersReducedMotion ? 0.01 : 1 }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Scroll down to see more content"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
onClick={() => {
|
||||
window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });
|
||||
}}
|
||||
className="cursor-pointer focus:outline-none focus:ring-2 focus:ring-chorus-blue focus:ring-opacity-50 rounded-lg p-3"
|
||||
>
|
||||
<motion.div
|
||||
animate={prefersReducedMotion ? {} : { y: [0, 8, 0] }}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 2,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
>
|
||||
<ChevronDownIcon size={24} />
|
||||
</motion.div>
|
||||
<span className="text-sm mt-2 tracking-wider">SCROLL</span>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const EnhancedHero: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollY } = useScroll();
|
||||
const opacity = useTransform(scrollY, [0, 500], [1, 0]);
|
||||
const scale = useTransform(scrollY, [0, 500], [1, 0.95]);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
// Staggered animation variants with reduced motion support
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: prefersReducedMotion ? 0 : 0.2,
|
||||
delayChildren: prefersReducedMotion ? 0 : 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: prefersReducedMotion ? 0 : 60,
|
||||
scale: prefersReducedMotion ? 1 : 0.95,
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: {
|
||||
duration: prefersReducedMotion ? 0.01 : 0.8,
|
||||
ease: [0.21, 1.11, 0.81, 0.99], // Apple cubic-bezier
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const buttonVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: prefersReducedMotion ? 0 : 30
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: prefersReducedMotion ? 0.01 : 0.6,
|
||||
ease: [0.21, 1.11, 0.81, 0.99],
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
scale: prefersReducedMotion ? 1 : 1.05,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
ease: "easeOut",
|
||||
},
|
||||
},
|
||||
tap: {
|
||||
scale: prefersReducedMotion ? 1 : 0.98,
|
||||
transition: {
|
||||
duration: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-chorus-charcoal via-chorus-charcoal to-chorus-charcoal-dark"
|
||||
aria-label="CHORUS Services Hero Section"
|
||||
role="banner"
|
||||
>
|
||||
{/* Geometric Background Pattern */}
|
||||
<GeometricPattern />
|
||||
|
||||
{/* Main Content with Parallax */}
|
||||
<motion.div
|
||||
className="relative z-10 text-center max-w-6xl mx-auto px-6"
|
||||
style={{ opacity, scale }}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
>
|
||||
{/* Background floating elements */}
|
||||
<ParallaxLayer speed={-0.3} className="absolute -top-20 -left-20">
|
||||
<FloatingElement delay={0}>
|
||||
<div className="w-32 h-32 rounded-full border border-white/5 bg-gradient-to-r from-chorus-blue/10 to-chorus-green/10" />
|
||||
</FloatingElement>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer speed={-0.5} className="absolute -top-40 -right-32">
|
||||
<FloatingElement delay={1}>
|
||||
<div className="w-48 h-48 rounded-full border border-white/5 bg-gradient-to-l from-chorus-green/10 to-chorus-blue/10" />
|
||||
</FloatingElement>
|
||||
</ParallaxLayer>
|
||||
|
||||
{/* Main Headline */}
|
||||
<motion.div variants={itemVariants} className="mb-8">
|
||||
<Title
|
||||
level={1}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold mb-6 text-white leading-tight"
|
||||
style={{ letterSpacing: '-0.02em' }}
|
||||
role="heading"
|
||||
aria-level={1}
|
||||
>
|
||||
<GradientText>CHORUS</GradientText> Services
|
||||
</Title>
|
||||
</motion.div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.div variants={itemVariants} className="mb-12">
|
||||
<Paragraph
|
||||
className="text-lg sm:text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
|
||||
role="heading"
|
||||
aria-level={2}
|
||||
>
|
||||
Distributed AI Orchestration Without the Hallucinations
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<Space size="large" className="flex flex-wrap justify-center gap-4">
|
||||
<motion.div
|
||||
variants={buttonVariants}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
<PrimaryButton
|
||||
size="large"
|
||||
icon={<PlayIcon size={20} />}
|
||||
className="text-lg px-8 py-4 h-auto min-w-[180px] shadow-2xl shadow-chorus-blue/25"
|
||||
aria-label="Explore CHORUS Platform"
|
||||
>
|
||||
Explore Platform
|
||||
</PrimaryButton>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={buttonVariants}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
<SecondaryButton
|
||||
size="large"
|
||||
icon={<ArrowRightIcon size={20} />}
|
||||
className="text-lg px-8 py-4 h-auto min-w-[180px] backdrop-blur-sm"
|
||||
aria-label="View CHORUS Documentation"
|
||||
>
|
||||
View Documentation
|
||||
</SecondaryButton>
|
||||
</motion.div>
|
||||
</Space>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats or additional info */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-2xl mx-auto"
|
||||
>
|
||||
{[
|
||||
{ label: 'Components', value: '4+', color: 'chorus-blue' },
|
||||
{ label: 'Uptime', value: '99.9%', color: 'chorus-green' },
|
||||
{ label: 'Performance', value: '< 100ms', color: 'yellow-400' },
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
className="text-center"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`text-2xl font-bold text-${stat.color} mb-2`}
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
delay: index * 0.5 + 3,
|
||||
repeat: Infinity,
|
||||
repeatDelay: 5,
|
||||
}}
|
||||
>
|
||||
{stat.value}
|
||||
</motion.div>
|
||||
<div className="text-gray-400 text-sm uppercase tracking-wider">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<ScrollIndicator />
|
||||
|
||||
{/* Ambient lighting effects */}
|
||||
<div className="absolute inset-0 pointer-events-none" aria-hidden="true">
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-1/4 w-96 h-96 bg-chorus-blue/5 rounded-full blur-3xl"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.3, 0.5, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 8,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-chorus-green/5 rounded-full blur-3xl"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1.2, 1, 1.2],
|
||||
opacity: [0.5, 0.3, 0.5],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 8,
|
||||
repeat: prefersReducedMotion ? 0 : Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: prefersReducedMotion ? 0 : 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnhancedHero;
|
||||
356
components/sections/IntegrationShowcase.tsx
Normal file
356
components/sections/IntegrationShowcase.tsx
Normal file
@@ -0,0 +1,356 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Typography, Row, Col, Card, Space } from 'antd';
|
||||
import {
|
||||
RocketIcon,
|
||||
ZapIcon,
|
||||
DatabaseIcon,
|
||||
BrainCircuitIcon,
|
||||
ArrowRightIcon,
|
||||
RefreshCwIcon,
|
||||
NetworkIcon,
|
||||
FlowIcon
|
||||
} 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.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const flowAnimation = {
|
||||
hidden: { pathLength: 0, opacity: 0 },
|
||||
visible: {
|
||||
pathLength: 1,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 2,
|
||||
ease: 'easeInOut',
|
||||
repeat: Infinity,
|
||||
repeatType: 'loop' as const,
|
||||
repeatDelay: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Component data
|
||||
const components = [
|
||||
{
|
||||
name: 'WHOOSH',
|
||||
icon: RocketIcon,
|
||||
color: '#007aff',
|
||||
description: 'Orchestrates workflows and manages agent tasks',
|
||||
position: { x: 10, y: 20 }
|
||||
},
|
||||
{
|
||||
name: 'BZZZ',
|
||||
icon: ZapIcon,
|
||||
color: '#30d158',
|
||||
description: 'Coordinates P2P communication between agents',
|
||||
position: { x: 70, y: 20 }
|
||||
},
|
||||
{
|
||||
name: 'SLURP',
|
||||
icon: DatabaseIcon,
|
||||
color: '#eab308',
|
||||
description: 'Curates and filters context based on roles',
|
||||
position: { x: 10, y: 70 }
|
||||
},
|
||||
{
|
||||
name: 'COOEE',
|
||||
icon: BrainCircuitIcon,
|
||||
color: '#a855f7',
|
||||
description: 'Learns and adapts from agent feedback',
|
||||
position: { x: 70, y: 70 }
|
||||
}
|
||||
];
|
||||
|
||||
// Integration flows
|
||||
const flows = [
|
||||
{ from: 'WHOOSH', to: 'BZZZ', description: 'Task Distribution' },
|
||||
{ from: 'BZZV', to: 'SLURP', description: 'Context Requests' },
|
||||
{ from: 'SLURP', to: 'COOEE', description: 'Feedback Data' },
|
||||
{ from: 'COOEE', to: 'WHOOSH', description: 'Performance Insights' }
|
||||
];
|
||||
|
||||
export default function IntegrationShowcase() {
|
||||
return (
|
||||
<section id="integration" className="section-padding bg-gradient-to-br from-purple-950 via-chorus-charcoal to-slate-900">
|
||||
<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-gradient-to-r from-chorus-blue/20 to-chorus-green/20 rounded-full mb-6">
|
||||
<NetworkIcon size={48} className="text-white" />
|
||||
</div>
|
||||
<Title level={1} className="text-white mb-4">
|
||||
The Complete CHORUS Ecosystem
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||||
Four powerful components working in harmony to create the most advanced
|
||||
AI orchestration platform. See how they integrate to deliver unmatched performance.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
{/* Interactive Architecture Diagram */}
|
||||
<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">
|
||||
System Architecture & Data Flow
|
||||
</Title>
|
||||
|
||||
<div className="relative h-96 mb-8">
|
||||
{/* SVG Flow Diagram */}
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className="absolute inset-0 w-full h-full"
|
||||
style={{ zIndex: 1 }}
|
||||
>
|
||||
{/* Flow paths */}
|
||||
<motion.path
|
||||
d="M 25 25 Q 50 15 75 25"
|
||||
fill="none"
|
||||
stroke="#007aff"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="2,2"
|
||||
variants={flowAnimation}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
/>
|
||||
<motion.path
|
||||
d="M 75 35 Q 85 50 75 65"
|
||||
fill="none"
|
||||
stroke="#30d158"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="2,2"
|
||||
variants={flowAnimation}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
/>
|
||||
<motion.path
|
||||
d="M 65 75 Q 50 85 35 75"
|
||||
fill="none"
|
||||
stroke="#eab308"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="2,2"
|
||||
variants={flowAnimation}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
/>
|
||||
<motion.path
|
||||
d="M 25 65 Q 15 50 25 35"
|
||||
fill="none"
|
||||
stroke="#a855f7"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="2,2"
|
||||
variants={flowAnimation}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Component nodes */}
|
||||
{components.map((component, index) => {
|
||||
const Icon = component.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={component.name}
|
||||
className="absolute transform -translate-x-1/2 -translate-y-1/2"
|
||||
style={{
|
||||
left: `${component.position.x}%`,
|
||||
top: `${component.position.y}%`,
|
||||
zIndex: 2
|
||||
}}
|
||||
variants={fadeInUp}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="w-16 h-16 rounded-full flex items-center justify-center glass-effect border-2 mb-3 mx-auto"
|
||||
style={{ borderColor: component.color }}
|
||||
>
|
||||
<Icon size={28} style={{ color: component.color }} />
|
||||
</div>
|
||||
<Text className="text-white font-semibold block">{component.name}</Text>
|
||||
<Text className="text-xs text-gray-400 max-w-24 block">
|
||||
{component.description}
|
||||
</Text>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Flow descriptions */}
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={12} md={6}>
|
||||
<div className="text-center p-3 bg-chorus-blue/10 rounded-lg">
|
||||
<ArrowRightIcon size={20} className="text-chorus-blue mx-auto mb-2" />
|
||||
<Text className="text-xs text-gray-300">Task Distribution</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} md={6}>
|
||||
<div className="text-center p-3 bg-green-500/10 rounded-lg">
|
||||
<ArrowRightIcon size={20} className="text-green-500 mx-auto mb-2" />
|
||||
<Text className="text-xs text-gray-300">Context Requests</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} md={6}>
|
||||
<div className="text-center p-3 bg-yellow-500/10 rounded-lg">
|
||||
<ArrowRightIcon size={20} className="text-yellow-500 mx-auto mb-2" />
|
||||
<Text className="text-xs text-gray-300">Feedback Data</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={12} md={6}>
|
||||
<div className="text-center p-3 bg-purple-500/10 rounded-lg">
|
||||
<RefreshCwIcon size={20} className="text-purple-500 mx-auto mb-2" />
|
||||
<Text className="text-xs text-gray-300">Performance Insights</Text>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Integration Benefits */}
|
||||
<Row gutter={[32, 32]} className="mb-16">
|
||||
<Col xs={24} lg={12}>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="h-full glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
|
||||
<Title level={3} className="text-white mb-4">Seamless Integration</Title>
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
<div>
|
||||
<Text className="text-chorus-blue font-semibold">Unified API Layer</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Single API interface for all CHORUS services with consistent authentication and error handling.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-chorus-green font-semibold">Real-time Synchronization</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Event-driven architecture ensures all components stay in sync with minimal latency.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-yellow-500 font-semibold">Shared Context</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Common context model across all services for consistent data interpretation.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={12}>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="h-full glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
|
||||
<Title level={3} className="text-white mb-4">Enterprise Benefits</Title>
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
<div>
|
||||
<Text className="text-purple-500 font-semibold">Scalable Architecture</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Each component scales independently while maintaining tight integration.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-orange-500 font-semibold">Fault Tolerance</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Distributed design with automatic failover and graceful degradation.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-red-500 font-semibold">Performance Monitoring</Text>
|
||||
<Paragraph className="text-gray-300 mb-0">
|
||||
Built-in monitoring and alerting across the entire ecosystem.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Data Flow Steps */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
|
||||
<Title level={2} className="text-white text-center mb-8">
|
||||
How It All Works Together
|
||||
</Title>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} md={6}>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-chorus-blue/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Text className="text-chorus-blue font-bold">1</Text>
|
||||
</div>
|
||||
<Title level={5} className="text-white mb-2">Task Creation</Title>
|
||||
<Paragraph className="text-gray-400 text-sm">
|
||||
WHOOSH receives workflow requests and creates optimized task distributions
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={6}>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Text className="text-green-500 font-bold">2</Text>
|
||||
</div>
|
||||
<Title level={5} className="text-white mb-2">Agent Coordination</Title>
|
||||
<Paragraph className="text-gray-400 text-sm">
|
||||
BZZZ coordinates agent communication and ensures reliable task delivery
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={6}>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Text className="text-yellow-500 font-bold">3</Text>
|
||||
</div>
|
||||
<Title level={5} className="text-white mb-2">Context Delivery</Title>
|
||||
<Paragraph className="text-gray-400 text-sm">
|
||||
SLURP provides relevant, role-based context to agents for informed decisions
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={6}>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Text className="text-purple-500 font-bold">4</Text>
|
||||
</div>
|
||||
<Title level={5} className="text-white mb-2">Continuous Learning</Title>
|
||||
<Paragraph className="text-gray-400 text-sm">
|
||||
COOEE collects feedback and optimizes the entire system for better performance
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
385
components/sections/SLURPShowcase.tsx
Normal file
385
components/sections/SLURPShowcase.tsx
Normal file
@@ -0,0 +1,385 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Typography, Row, Col, Card, Progress, Tag, Timeline, Statistic } from 'antd';
|
||||
import {
|
||||
DatabaseIcon,
|
||||
FilterIcon,
|
||||
BrainIcon,
|
||||
ShieldCheckIcon,
|
||||
ClockIcon,
|
||||
FoldersIcon,
|
||||
SearchIcon,
|
||||
LayersIcon,
|
||||
TrendingUpIcon,
|
||||
FileTextIcon,
|
||||
TagIcon,
|
||||
UsersIcon
|
||||
} 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 context data
|
||||
const contextSources = [
|
||||
{ name: 'API Documentation', items: 1247, relevance: 92, category: 'technical' },
|
||||
{ name: 'Code Changes', items: 832, relevance: 88, category: 'development' },
|
||||
{ name: 'User Feedback', items: 456, relevance: 85, category: 'user-input' },
|
||||
{ name: 'Performance Logs', items: 2341, relevance: 78, category: 'metrics' },
|
||||
];
|
||||
|
||||
const recentActivity = [
|
||||
{ time: '2m ago', action: 'Context filtered for AI-Agent-Beta', type: 'filter' },
|
||||
{ time: '5m ago', action: 'New deprecation notice indexed', type: 'index' },
|
||||
{ time: '12m ago', action: 'Role permissions updated', type: 'permission' },
|
||||
{ time: '18m ago', action: 'Context relevance score updated', type: 'score' },
|
||||
];
|
||||
|
||||
export default function SLURPShowcase() {
|
||||
return (
|
||||
<section id="slurp" className="section-padding bg-gradient-to-br from-emerald-950 via-chorus-charcoal to-amber-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-yellow-500/20 rounded-full mb-6">
|
||||
<DatabaseIcon size={48} className="text-yellow-500" />
|
||||
</div>
|
||||
<Title level={1} className="text-white mb-4">
|
||||
SLURP
|
||||
</Title>
|
||||
<Text className="text-2xl text-yellow-500 font-semibold block mb-4">
|
||||
Context Curator Service
|
||||
</Text>
|
||||
<Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||||
Context curation from Hypercore logs with role-based filtering, intelligent
|
||||
relevance scoring, and seamless HCFS integration for transparent access.
|
||||
</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-yellow-500/20 rounded-lg">
|
||||
<BrainIcon size={32} className="text-yellow-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Intelligent Context Curation</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
AI-powered context extraction from Hypercore logs with semantic analysis,
|
||||
relevance scoring, and automated categorization based on agent roles.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{contextSources.map((source, index) => (
|
||||
<div key={index} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">{source.name}</Text>
|
||||
<Tag color={
|
||||
source.category === 'technical' ? 'blue' :
|
||||
source.category === 'development' ? 'green' :
|
||||
source.category === 'user-input' ? 'purple' : 'orange'
|
||||
}>
|
||||
{source.category}
|
||||
</Tag>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">{source.items} items</Text>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Text className="text-sm text-gray-300">Relevance Score</Text>
|
||||
<Text className="text-sm font-semibold text-yellow-500">{source.relevance}%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={source.relevance}
|
||||
strokeColor="#eab308"
|
||||
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-purple-500/20 rounded-lg">
|
||||
<ShieldCheckIcon size={32} className="text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Role-Based Access Control</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Granular permissions system with role-based context filtering,
|
||||
deprecation tracking, and feature-specific access controls.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<Title level={5} className="text-white mb-3">Active Roles</Title>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full" />
|
||||
<Text className="text-gray-300">AI-Agent-Alpha</Text>
|
||||
</div>
|
||||
<Tag color="green">Full Access</Tag>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-yellow-500 rounded-full" />
|
||||
<Text className="text-gray-300">AI-Agent-Beta</Text>
|
||||
</div>
|
||||
<Tag color="orange">Limited</Tag>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full" />
|
||||
<Text className="text-gray-300">Human-Operator</Text>
|
||||
</div>
|
||||
<Tag color="blue">Read-Only</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<Title level={5} className="text-white mb-3">Recent Activity</Title>
|
||||
<Timeline
|
||||
size="small"
|
||||
items={recentActivity.map((activity, index) => ({
|
||||
color: activity.type === 'filter' ? 'green' :
|
||||
activity.type === 'index' ? 'blue' :
|
||||
activity.type === 'permission' ? 'orange' : 'purple',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">{activity.action}</Text>
|
||||
<div className="text-xs text-gray-500">{activity.time}</div>
|
||||
</div>
|
||||
)
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Context 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">Context Items</span>}
|
||||
value={48750}
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<FileTextIcon 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">Queries/Hour</span>}
|
||||
value={5247}
|
||||
valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<SearchIcon size={20} className="text-chorus-blue" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Active Roles</span>}
|
||||
value={23}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<UsersIcon 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">Avg Relevance</span>}
|
||||
value={87.3}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<TrendingUpIcon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
|
||||
{/* SQL Context Delivery */}
|
||||
<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">
|
||||
SQL-Based Context Delivery
|
||||
</Title>
|
||||
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col xs={24} md={8}>
|
||||
<div className="text-center">
|
||||
<div className="p-4 bg-yellow-500/10 rounded-full inline-block mb-4">
|
||||
<DatabaseIcon size={40} className="text-yellow-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Intelligent Querying</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Advanced SQL queries with semantic search, relevance ranking,
|
||||
and context-aware result filtering for precise information delivery.
|
||||
</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">
|
||||
<FilterIcon size={40} className="text-green-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Dynamic Filtering</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Real-time context filtering based on agent roles, permissions,
|
||||
feature flags, and deprecation status for accurate information access.
|
||||
</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">
|
||||
<FoldersIcon size={40} className="text-blue-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">HCFS Integration</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Seamless filesystem integration for transparent context access,
|
||||
with automated indexing and real-time synchronization.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Context Processing Pipeline */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
|
||||
<Title level={3} className="text-white mb-6">Context Processing Pipeline</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-yellow-500/20 rounded">
|
||||
<ClockIcon size={20} className="text-yellow-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-white font-medium">Real-time Ingestion</Text>
|
||||
<Paragraph className="text-gray-400 text-sm mb-0">
|
||||
Continuous monitoring of Hypercore logs with low-latency processing
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<BrainIcon size={20} className="text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-white font-medium">Semantic Analysis</Text>
|
||||
<Paragraph className="text-gray-400 text-sm mb-0">
|
||||
AI-powered content understanding and automatic categorization
|
||||
</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-green-500/20 rounded">
|
||||
<TagIcon size={20} className="text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-white font-medium">Role-based Tagging</Text>
|
||||
<Paragraph className="text-gray-400 text-sm mb-0">
|
||||
Automatic tagging and permission assignment based on content type
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<TrendingUpIcon size={20} className="text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Text className="text-white font-medium">Relevance Scoring</Text>
|
||||
<Paragraph className="text-gray-400 text-sm mb-0">
|
||||
Dynamic scoring based on recency, frequency, and agent feedback
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
285
components/sections/WHOOSHShowcase.tsx
Normal file
285
components/sections/WHOOSHShowcase.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Typography, Row, Col, Card, Progress, Statistic } from 'antd';
|
||||
import {
|
||||
RocketIcon,
|
||||
WorkflowIcon,
|
||||
BarChart3Icon,
|
||||
UsersIcon,
|
||||
ZapIcon,
|
||||
LayersIcon,
|
||||
MonitorIcon,
|
||||
NetworkIcon
|
||||
} 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 }
|
||||
}
|
||||
};
|
||||
|
||||
export default function WHOOSHShowcase() {
|
||||
return (
|
||||
<section id="whoosh" className="section-padding bg-gradient-to-br from-chorus-charcoal via-chorus-charcoal to-slate-900">
|
||||
<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-chorus-blue/20 rounded-full mb-6">
|
||||
<RocketIcon size={48} className="text-chorus-blue" />
|
||||
</div>
|
||||
<Title level={1} className="text-white mb-4">
|
||||
WHOOSH
|
||||
</Title>
|
||||
<Text className="text-2xl text-chorus-blue font-semibold block mb-4">
|
||||
Orchestration Engine
|
||||
</Text>
|
||||
<Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||||
Enterprise-grade workflow management for AI agents with visual editing,
|
||||
real-time monitoring, and intelligent task distribution.
|
||||
</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-chorus-blue/20 rounded-lg">
|
||||
<WorkflowIcon size={32} className="text-chorus-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Visual Workflow Editor</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Drag-and-drop interface powered by React Flow for creating complex
|
||||
AI agent workflows with intuitive node connections and real-time validation.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-chorus-blue/20">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-chorus-blue/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||
<LayersIcon size={20} className="text-chorus-blue" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Input Nodes</Text>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||
<ZapIcon size={20} className="text-green-500" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Process Nodes</Text>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||
<NetworkIcon size={20} className="text-purple-500" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Output Nodes</Text>
|
||||
</div>
|
||||
</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">
|
||||
<MonitorIcon size={32} className="text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<Title level={3} className="text-white mb-2">Real-time Performance Monitoring</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Comprehensive metrics dashboard with workflow execution tracking,
|
||||
performance analytics, and intelligent alerting systems.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<Text className="text-gray-300">Workflow Execution</Text>
|
||||
<Text className="text-green-500">98.7%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={98.7}
|
||||
strokeColor="#30d158"
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<Text className="text-gray-300">Agent Utilization</Text>
|
||||
<Text className="text-chorus-blue">85.2%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={85.2}
|
||||
strokeColor="#007aff"
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<Text className="text-gray-300">Task Completion</Text>
|
||||
<Text className="text-yellow-500">92.4%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={92.4}
|
||||
strokeColor="#eab308"
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Performance 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">Active Workflows</span>}
|
||||
value={1247}
|
||||
valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<WorkflowIcon size={20} className="text-chorus-blue" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Tasks/Hour</span>}
|
||||
value={15420}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ZapIcon 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">Connected Agents</span>}
|
||||
value={89}
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<UsersIcon 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">Uptime</span>}
|
||||
value={99.9}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<BarChart3Icon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
|
||||
{/* Key Capabilities */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
|
||||
<Title level={2} className="text-white text-center mb-8">
|
||||
Enterprise Orchestration Capabilities
|
||||
</Title>
|
||||
|
||||
<Row gutter={[32, 32]}>
|
||||
<Col xs={24} md={8}>
|
||||
<div className="text-center">
|
||||
<div className="p-4 bg-chorus-blue/10 rounded-full inline-block mb-4">
|
||||
<UsersIcon size={40} className="text-chorus-blue" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Multi-Agent Task Distribution</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Intelligent workload balancing across agent networks with dynamic
|
||||
scaling and fault tolerance mechanisms.
|
||||
</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">
|
||||
<BarChart3Icon size={40} className="text-green-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Performance Analytics</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Real-time metrics collection with predictive analytics for
|
||||
workflow optimization and bottleneck identification.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} md={8}>
|
||||
<div className="text-center">
|
||||
<div className="p-4 bg-purple-500/10 rounded-full inline-block mb-4">
|
||||
<LayersIcon size={40} className="text-purple-500" />
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-3">Workflow Management</Title>
|
||||
<Paragraph className="text-gray-300">
|
||||
Version control, rollback capabilities, and A/B testing for
|
||||
continuous workflow improvement and reliability.
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user