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>

components/sections/BZZZShowcase.tsx

@@ -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>
+  );
+}