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>
346 lines
15 KiB
TypeScript
346 lines
15 KiB
TypeScript
'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>
|
|
);
|
|
} |