7774d7ec98
This commit implements a complete brand system overhaul including: TYPOGRAPHY SYSTEM: - Add Exo font family (Thin, Light, Regular, ExtraLight) as primary brand font - Implement SF Pro Display/Text hierarchy for UI components - Create comprehensive Typography component with all brand variants - Update all components to use new typography tokens DESIGN TOKEN SYSTEM: - Create complete design token system in theme/designTokens.ts - Define Carbon Black (#1a1a1a), Walnut Brown (#8B4513), Brushed Aluminum (#A8A8A8) palette - Implement CSS custom properties for consistent theming - Update Ant Design theme integration COMPONENT UPDATES: - Enhance Hero section with Exo Thin typography and improved layout - Update navigation with SF Pro font hierarchy - Redesign Button component with new variants and accessibility - Apply brand colors and typography across all showcase sections - Improve Footer with consistent brand application PERFORMANCE & ACCESSIBILITY: - Self-host Exo fonts for optimal loading performance - Implement proper font-display strategies - Add comprehensive accessibility audit documentation - Include responsive testing verification DOCUMENTATION: - Add brand system demo and implementation guides - Include QA testing reports and accessibility audits - Document design token usage and component patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
337 lines
16 KiB
TypeScript
337 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Typography, Row, Col, Card, Badge } 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 }
|
|
}
|
|
};
|
|
|
|
|
|
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">libp2p</div>
|
|
<Text className="text-sm text-gray-400">Protocol Foundation</Text>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-chorus-green">Go Runtime</div>
|
|
<Text className="text-sm text-gray-400">High Performance</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Text className="text-gray-300">Network Architecture</Text>
|
|
<Badge status="success" text="P2P Mesh" />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Text className="text-gray-300">Discovery Protocol</Text>
|
|
<Badge status="success" text="mDNS + DHT" />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Text className="text-gray-300">Message Routing</Text>
|
|
<Badge status="processing" text="Gossipsub" />
|
|
</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">
|
|
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div className="w-3 h-3 rounded-full bg-green-500" />
|
|
<Text className="text-white font-medium">Peer Discovery</Text>
|
|
<Badge color="green" text="mDNS + DHT" />
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Automatic peer discovery via multicast DNS and distributed hash table routing</Text>
|
|
</div>
|
|
|
|
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div className="w-3 h-3 rounded-full bg-blue-500" />
|
|
<Text className="text-white font-medium">Connection Multiplexing</Text>
|
|
<Badge color="blue" text="yamux" />
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Multiple streams over single connections for efficient resource utilization</Text>
|
|
</div>
|
|
|
|
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div className="w-3 h-3 rounded-full bg-purple-500" />
|
|
<Text className="text-white font-medium">NAT Traversal</Text>
|
|
<Badge color="purple" text="AutoRelay" />
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Automatic relay discovery and holepunching for firewall traversal</Text>
|
|
</div>
|
|
|
|
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div className="w-3 h-3 rounded-full bg-orange-500" />
|
|
<Text className="text-white font-medium">Transport Security</Text>
|
|
<Badge color="orange" text="Noise Protocol" />
|
|
</div>
|
|
<Text className="text-sm text-gray-400">End-to-end encryption with forward secrecy for all peer communications</Text>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</Card>
|
|
</motion.div>
|
|
</Col>
|
|
</Row>
|
|
|
|
{/* Network Architecture Highlights */}
|
|
<motion.div variants={fadeInUp} className="mb-16">
|
|
<Row gutter={[24, 24]}>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<ServerIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">libp2p</Title>
|
|
<Text className="text-gray-400 text-sm">Peer-to-peer networking protocol with automatic discovery</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<ActivityIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">Gossipsub</Title>
|
|
<Text className="text-gray-400 text-sm">Efficient message propagation across the P2P mesh network</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<ShieldIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">Noise Protocol</Title>
|
|
<Text className="text-gray-400 text-sm">Cryptographic security for all peer communications</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<WifiIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">DHT Routing</Title>
|
|
<Text className="text-gray-400 text-sm">Distributed hash table for decentralized agent discovery</Text>
|
|
</div>
|
|
</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>
|
|
);
|
|
} |