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
244
components/layout/Footer.tsx
Normal file
244
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Layout, Row, Col, Space, Typography, Divider } from 'antd';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
TwitterIcon,
|
||||
LinkedinIcon,
|
||||
GithubIcon,
|
||||
MailIcon,
|
||||
ArrowUpIcon
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { fadeInUp, staggerContainer } from '@/utils/animations';
|
||||
|
||||
const { Footer: AntFooter } = Layout;
|
||||
const { Title, Text, Link } = Typography;
|
||||
|
||||
interface FooterSection {
|
||||
title: string;
|
||||
links: Array<{
|
||||
label: string;
|
||||
href: string;
|
||||
external?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
const footerSections: FooterSection[] = [
|
||||
{
|
||||
title: 'Platform',
|
||||
links: [
|
||||
{ label: 'WHOOSH', href: '/components/whoosh' },
|
||||
{ label: 'BZZZ', href: '/components/bzzz' },
|
||||
{ label: 'SLURP', href: '/components/slurp' },
|
||||
{ label: 'COOEE + Monitoring', href: '/components/cooee' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Solutions',
|
||||
links: [
|
||||
{ label: 'Enterprise', href: '/solutions/enterprise' },
|
||||
{ label: 'Startups', href: '/solutions/startups' },
|
||||
{ label: 'Developers', href: '/solutions/developers' },
|
||||
{ label: 'Integration', href: '/solutions/integration' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
links: [
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Tutorials', href: '/tutorials' },
|
||||
{ label: 'Community', href: '/community' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
links: [
|
||||
{ label: 'About', href: '/about' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Careers', href: '/careers' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: TwitterIcon, href: 'https://twitter.com/chorusservices', label: 'Twitter' },
|
||||
{ icon: LinkedinIcon, href: 'https://linkedin.com/company/chorusservices', label: 'LinkedIn' },
|
||||
{ icon: GithubIcon, href: 'https://github.com/chorusservices', label: 'GitHub' },
|
||||
{ icon: MailIcon, href: 'mailto:hello@chorus.services', label: 'Email' },
|
||||
];
|
||||
|
||||
export const Footer: React.FC = () => {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<AntFooter className="bg-chorus-charcoal-dark border-t border-gray-800 py-16">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{/* Main Footer Content */}
|
||||
<Row gutter={[48, 48]} className="mb-12">
|
||||
{/* Brand Section */}
|
||||
<Col xs={24} lg={8}>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gradient-chorus rounded-xl flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">C</span>
|
||||
</div>
|
||||
<Title level={3} className="text-white mb-0">
|
||||
CHORUS Services
|
||||
</Title>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<Text className="text-gray-300 text-base leading-relaxed">
|
||||
Orchestrate the future with distributed AI.
|
||||
CHORUS Services provides intelligent automation
|
||||
through seamless component integration.
|
||||
</Text>
|
||||
|
||||
{/* Social Links */}
|
||||
<Space size="middle">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 text-gray-400 hover:text-chorus-blue transition-colors duration-200 rounded-lg hover:bg-white/5"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 + index * 0.1 }}
|
||||
>
|
||||
<social.icon size={20} />
|
||||
<span className="sr-only">{social.label}</span>
|
||||
</motion.a>
|
||||
))}
|
||||
</Space>
|
||||
</Space>
|
||||
</motion.div>
|
||||
</Col>
|
||||
|
||||
{/* Footer Links */}
|
||||
{footerSections.map((section, sectionIndex) => (
|
||||
<Col xs={12} sm={6} lg={4} key={section.title}>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
custom={sectionIndex}
|
||||
>
|
||||
<Space direction="vertical" size="middle" className="w-full">
|
||||
<Title level={5} className="text-white mb-0">
|
||||
{section.title}
|
||||
</Title>
|
||||
<div className="space-y-3">
|
||||
{section.links.map((link, linkIndex) => (
|
||||
<div key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
target={link.external ? '_blank' : undefined}
|
||||
rel={link.external ? 'noopener noreferrer' : undefined}
|
||||
className="text-gray-400 hover:text-chorus-blue transition-colors duration-200 text-sm block"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Space>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* Newsletter Signup */}
|
||||
<motion.div variants={fadeInUp} className="mb-12">
|
||||
<div className="glass-effect rounded-2xl p-8">
|
||||
<Row gutter={[24, 24]} align="middle">
|
||||
<Col xs={24} md={16}>
|
||||
<Space direction="vertical" size="small">
|
||||
<Title level={4} className="text-white mb-0">
|
||||
Stay Updated
|
||||
</Title>
|
||||
<Text className="text-gray-300">
|
||||
Get the latest updates on CHORUS Services and AI orchestration.
|
||||
</Text>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xs={24} md={8}>
|
||||
<Space.Compact className="w-full">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 px-4 py-3 bg-chorus-charcoal border border-gray-700 rounded-l-lg text-white placeholder-gray-400 focus:outline-none focus:border-chorus-blue transition-colors"
|
||||
/>
|
||||
<Button variant="primary" className="rounded-l-none">
|
||||
Subscribe
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Divider className="border-gray-800" />
|
||||
|
||||
{/* Bottom Footer */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Row justify="space-between" align="middle" className="flex-wrap">
|
||||
<Col xs={24} md={12} className="text-center md:text-left mb-4 md:mb-0">
|
||||
<Text className="text-gray-400 text-sm">
|
||||
© {new Date().getFullYear()} CHORUS Services. All rights reserved.
|
||||
</Text>
|
||||
</Col>
|
||||
<Col xs={24} md={12} className="text-center md:text-right">
|
||||
<Space split={<span className="text-gray-600">•</span>} size="middle">
|
||||
<Link href="/privacy" className="text-gray-400 hover:text-white text-sm">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link href="/terms" className="text-gray-400 hover:text-white text-sm">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Link href="/cookies" className="text-gray-400 hover:text-white text-sm">
|
||||
Cookies
|
||||
</Link>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll to Top Button */}
|
||||
<motion.div
|
||||
className="fixed bottom-8 right-8 z-40"
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
shape="circle"
|
||||
size="large"
|
||||
icon={<ArrowUpIcon size={20} />}
|
||||
onClick={scrollToTop}
|
||||
className="shadow-lg hover:shadow-xl"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</AntFooter>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
239
components/layout/Header.tsx
Normal file
239
components/layout/Header.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Layout, Menu, Button as AntButton, Drawer, Space } from 'antd';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { MenuIcon, XIcon, ArrowRightIcon } from 'lucide-react';
|
||||
import { cn } from '@/utils/cn';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
const { Header: AntHeader } = Layout;
|
||||
|
||||
interface NavigationItem {
|
||||
key: string;
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const navigationItems: NavigationItem[] = [
|
||||
{ key: 'home', label: 'Home', href: '/' },
|
||||
{ key: 'services', label: 'Services', href: '/services' },
|
||||
{ key: 'components', label: 'Components', href: '/components' },
|
||||
{ key: 'technical-specs', label: 'Technical Specs', href: '/technical-specs' },
|
||||
{ key: 'pricing', label: 'Pricing', href: '/pricing' },
|
||||
{ key: 'docs', label: 'Documentation', href: '/docs' },
|
||||
{ key: 'about', label: 'About', href: '/about' },
|
||||
];
|
||||
|
||||
export const Header: React.FC = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [activeKey, setActiveKey] = useState('home');
|
||||
|
||||
// Handle scroll effect
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Handle navigation click
|
||||
const handleNavClick = (href: string, key: string) => {
|
||||
setActiveKey(key);
|
||||
setIsMobileMenuOpen(false);
|
||||
// In a real app, you'd use Next.js router here
|
||||
// router.push(href);
|
||||
};
|
||||
|
||||
// Mobile menu animation variants
|
||||
const drawerVariants = {
|
||||
closed: { opacity: 0 },
|
||||
open: { opacity: 1 },
|
||||
};
|
||||
|
||||
const menuItemVariants = {
|
||||
closed: { x: -20, opacity: 0 },
|
||||
open: (i: number) => ({
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
transition: { delay: i * 0.1 },
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AntHeader
|
||||
className={cn(
|
||||
'fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b',
|
||||
isScrolled
|
||||
? 'bg-chorus-charcoal/95 backdrop-blur-md border-gray-800 shadow-lg'
|
||||
: 'bg-transparent border-transparent'
|
||||
)}
|
||||
style={{ height: '80px', padding: '0 24px' }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto h-full flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex items-center space-x-3"
|
||||
>
|
||||
<div className="w-10 h-10 bg-gradient-chorus rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">C</span>
|
||||
</div>
|
||||
<span className="text-white text-xl font-bold">CHORUS</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center space-x-8">
|
||||
{navigationItems.map((item, index) => (
|
||||
<motion.button
|
||||
key={item.key}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
onClick={() => handleNavClick(item.href, item.key)}
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-lg font-medium transition-all duration-200',
|
||||
'hover:bg-white/10 hover:text-chorus-blue',
|
||||
activeKey === item.key
|
||||
? 'text-chorus-blue'
|
||||
: 'text-gray-300'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop CTA Buttons */}
|
||||
<div className="hidden lg:flex items-center space-x-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<Button variant="ghost" size="middle">
|
||||
Sign In
|
||||
</Button>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="middle"
|
||||
icon={<ArrowRightIcon size={16} />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<motion.button
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
>
|
||||
<MenuIcon size={24} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</AntHeader>
|
||||
|
||||
{/* Mobile Menu Drawer */}
|
||||
<Drawer
|
||||
title={null}
|
||||
placement="right"
|
||||
closable={false}
|
||||
onClose={() => setIsMobileMenuOpen(false)}
|
||||
open={isMobileMenuOpen}
|
||||
width={320}
|
||||
className="mobile-menu-drawer"
|
||||
styles={{
|
||||
body: { padding: 0, background: '#1a1a1a' },
|
||||
header: { display: 'none' },
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.div
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
variants={drawerVariants}
|
||||
className="h-full bg-chorus-charcoal"
|
||||
>
|
||||
{/* Mobile Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-800">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 bg-gradient-chorus rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">C</span>
|
||||
</div>
|
||||
<span className="text-white text-lg font-bold">CHORUS</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
|
||||
>
|
||||
<XIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<div className="p-6">
|
||||
<nav className="space-y-2">
|
||||
{navigationItems.map((item, index) => (
|
||||
<motion.button
|
||||
key={item.key}
|
||||
custom={index}
|
||||
variants={menuItemVariants}
|
||||
onClick={() => handleNavClick(item.href, item.key)}
|
||||
className={cn(
|
||||
'w-full text-left p-4 rounded-lg font-medium transition-all duration-200',
|
||||
'hover:bg-white/10 hover:text-chorus-blue',
|
||||
activeKey === item.key
|
||||
? 'text-chorus-blue bg-chorus-blue/10'
|
||||
: 'text-gray-300'
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Mobile CTA Buttons */}
|
||||
<div className="mt-8 space-y-4">
|
||||
<Button variant="outline" fullWidth size="large">
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
fullWidth
|
||||
size="large"
|
||||
icon={<ArrowRightIcon size={16} />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Drawer>
|
||||
|
||||
{/* Spacer to prevent content from going under fixed header */}
|
||||
<div style={{ height: '80px' }} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
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>
|
||||
);
|
||||
}
|
||||
100
components/ui/Button.tsx
Normal file
100
components/ui/Button.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Button as AntButton, ButtonProps as AntButtonProps } from 'antd';
|
||||
import { motion, MotionProps } from 'framer-motion';
|
||||
import { cn } from '@/utils/cn';
|
||||
|
||||
// Extend Ant Design ButtonProps with custom variants
|
||||
interface CustomButtonProps {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient';
|
||||
fullWidth?: boolean;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
type ButtonProps = AntButtonProps & CustomButtonProps & Partial<MotionProps>;
|
||||
|
||||
const MotionButton = motion(AntButton);
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
fullWidth = false,
|
||||
animated = true,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
const getVariantClasses = () => {
|
||||
switch (variant) {
|
||||
case 'primary':
|
||||
return 'bg-chorus-blue hover:bg-blue-600 border-chorus-blue hover:border-blue-600 text-white shadow-lg hover:shadow-xl';
|
||||
case 'secondary':
|
||||
return 'bg-chorus-green hover:bg-green-600 border-chorus-green hover:border-green-600 text-white shadow-lg hover:shadow-xl';
|
||||
case 'outline':
|
||||
return 'bg-transparent border-2 border-chorus-blue text-chorus-blue hover:bg-chorus-blue hover:text-white';
|
||||
case 'ghost':
|
||||
return 'bg-transparent border-transparent text-white hover:bg-white/10 hover:border-white/20';
|
||||
case 'gradient':
|
||||
return 'bg-gradient-chorus border-transparent text-white shadow-lg hover:shadow-xl';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const buttonClasses = cn(
|
||||
'font-semibold transition-all duration-200 border-0 rounded-lg',
|
||||
'focus:ring-2 focus:ring-chorus-blue focus:ring-opacity-50 focus:outline-none',
|
||||
getVariantClasses(),
|
||||
fullWidth && 'w-full',
|
||||
className
|
||||
);
|
||||
|
||||
const animationProps = animated
|
||||
? {
|
||||
whileHover: { scale: 1.02 },
|
||||
whileTap: { scale: 0.98 },
|
||||
transition: { duration: 0.2 },
|
||||
}
|
||||
: {};
|
||||
|
||||
if (animated) {
|
||||
return (
|
||||
<MotionButton
|
||||
className={buttonClasses}
|
||||
{...animationProps}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</MotionButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AntButton className={buttonClasses} {...props}>
|
||||
{children}
|
||||
</AntButton>
|
||||
);
|
||||
};
|
||||
|
||||
// Specific button variants for common use cases
|
||||
export const PrimaryButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
|
||||
<Button variant="primary" {...props} />
|
||||
);
|
||||
|
||||
export const SecondaryButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
|
||||
<Button variant="secondary" {...props} />
|
||||
);
|
||||
|
||||
export const OutlineButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
|
||||
<Button variant="outline" {...props} />
|
||||
);
|
||||
|
||||
export const GhostButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
|
||||
<Button variant="ghost" {...props} />
|
||||
);
|
||||
|
||||
export const GradientButton: React.FC<Omit<ButtonProps, 'variant'>> = (props) => (
|
||||
<Button variant="gradient" {...props} />
|
||||
);
|
||||
|
||||
export default Button;
|
||||
69
components/ui/Loading.tsx
Normal file
69
components/ui/Loading.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Spin, Typography } from 'antd';
|
||||
import { cn } from '@/utils/cn';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface LoadingProps {
|
||||
size?: 'small' | 'default' | 'large';
|
||||
text?: string;
|
||||
fullScreen?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Loading: React.FC<LoadingProps> = ({
|
||||
size = 'default',
|
||||
text = 'Loading...',
|
||||
fullScreen = false,
|
||||
className,
|
||||
}) => {
|
||||
const containerClasses = cn(
|
||||
'flex flex-col items-center justify-center',
|
||||
fullScreen ? 'fixed inset-0 bg-chorus-charcoal z-50' : 'py-8',
|
||||
className
|
||||
);
|
||||
|
||||
const spinnerSize = size === 'small' ? 20 : size === 'large' ? 40 : 30;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={containerClasses}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
}}
|
||||
className="mb-4"
|
||||
>
|
||||
<div
|
||||
className="rounded-full border-4 border-chorus-blue/20 border-t-chorus-blue"
|
||||
style={{
|
||||
width: spinnerSize,
|
||||
height: spinnerSize,
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{text && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<Text className="text-gray-300 text-sm">{text}</Text>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
101
components/ui/ProgressIndicator.tsx
Normal file
101
components/ui/ProgressIndicator.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Progress } from 'antd';
|
||||
|
||||
interface ProgressIndicatorProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const sections = ['hero', 'whoosh', 'bzzz', 'slurp', 'cooee', 'integration'];
|
||||
|
||||
export default function ProgressIndicator({ className = '' }: ProgressIndicatorProps) {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [currentSection, setCurrentSection] = useState('');
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollY = window.scrollY;
|
||||
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const scrollProgress = Math.min((scrollY / documentHeight) * 100, 100);
|
||||
|
||||
setProgress(scrollProgress);
|
||||
setIsVisible(scrollY > 200);
|
||||
|
||||
// Find current section
|
||||
const sectionElements = sections.map(section =>
|
||||
document.getElementById(section) || document.querySelector('.hero-section')
|
||||
).filter(Boolean);
|
||||
|
||||
for (let i = sectionElements.length - 1; i >= 0; i--) {
|
||||
const element = sectionElements[i];
|
||||
if (element && element.offsetTop <= scrollY + 300) {
|
||||
setCurrentSection(sections[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
handleScroll(); // Check initial position
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const getSectionTitle = (section: string) => {
|
||||
switch (section) {
|
||||
case 'hero': return 'Welcome to CHORUS';
|
||||
case 'whoosh': return 'WHOOSH - Orchestration Engine';
|
||||
case 'bzzz': return 'BZZZ - P2P Coordination';
|
||||
case 'slurp': return 'SLURP - Context Curator';
|
||||
case 'cooee': return 'COOEE - Feedback & Learning';
|
||||
case 'integration': return 'Complete Ecosystem';
|
||||
default: return 'CHORUS Services';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -50 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`fixed top-0 left-0 right-0 z-40 ${className}`}
|
||||
>
|
||||
<div className="glass-effect border-b border-gray-600">
|
||||
<div className="container-chorus py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-gray-300 mb-1">
|
||||
{getSectionTitle(currentSection)}
|
||||
</div>
|
||||
<Progress
|
||||
percent={progress}
|
||||
strokeColor={{
|
||||
'0%': '#007aff',
|
||||
'25%': '#30d158',
|
||||
'50%': '#eab308',
|
||||
'75%': '#a855f7',
|
||||
'100%': '#f97316',
|
||||
}}
|
||||
trailColor="rgba(255, 255, 255, 0.1)"
|
||||
showInfo={false}
|
||||
strokeWidth={3}
|
||||
className="max-w-md"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 ml-4">
|
||||
{Math.round(progress)}% complete
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
139
components/ui/SectionNavigation.tsx
Normal file
139
components/ui/SectionNavigation.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Tooltip } from 'antd';
|
||||
import {
|
||||
RocketIcon,
|
||||
ZapIcon,
|
||||
DatabaseIcon,
|
||||
BrainCircuitIcon,
|
||||
NetworkIcon,
|
||||
ChevronUpIcon
|
||||
} from 'lucide-react';
|
||||
|
||||
interface SectionNavigationProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{ id: 'whoosh', name: 'WHOOSH', icon: RocketIcon, color: '#007aff' },
|
||||
{ id: 'bzzz', name: 'BZZZ', icon: ZapIcon, color: '#30d158' },
|
||||
{ id: 'slurp', name: 'SLURP', icon: DatabaseIcon, color: '#eab308' },
|
||||
{ id: 'cooee', name: 'COOEE', icon: BrainCircuitIcon, color: '#a855f7' },
|
||||
{ id: 'integration', name: 'Integration', icon: NetworkIcon, color: '#f97316' },
|
||||
];
|
||||
|
||||
export default function SectionNavigation({ className = '' }: SectionNavigationProps) {
|
||||
const [activeSection, setActiveSection] = useState('');
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollY = window.scrollY;
|
||||
setIsVisible(scrollY > 800);
|
||||
|
||||
// Find active section
|
||||
const sectionElements = sections.map(section =>
|
||||
document.getElementById(section.id)
|
||||
).filter(Boolean);
|
||||
|
||||
for (let i = sectionElements.length - 1; i >= 0; i--) {
|
||||
const element = sectionElements[i];
|
||||
if (element && element.offsetTop <= scrollY + 200) {
|
||||
setActiveSection(sections[i].id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
handleScroll(); // Check initial position
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const element = document.getElementById(sectionId);
|
||||
if (element) {
|
||||
const headerOffset = 80; // Account for fixed header
|
||||
const elementPosition = element.offsetTop - headerOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: elementPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 100 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 100 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`fixed right-6 top-1/2 transform -translate-y-1/2 z-50 ${className}`}
|
||||
>
|
||||
<div className="glass-effect rounded-full p-2 border border-gray-600">
|
||||
{/* Section navigation dots */}
|
||||
{sections.map((section) => {
|
||||
const Icon = section.icon;
|
||||
const isActive = activeSection === section.id;
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
key={section.id}
|
||||
title={section.name}
|
||||
placement="left"
|
||||
overlayClassName="section-nav-tooltip"
|
||||
>
|
||||
<motion.button
|
||||
onClick={() => scrollToSection(section.id)}
|
||||
className={`block w-12 h-12 rounded-full mb-2 last:mb-0 flex items-center justify-center border-2 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'border-white shadow-lg'
|
||||
: 'border-transparent hover:border-gray-400'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: isActive ? `${section.color}20` : 'transparent'
|
||||
}}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Icon
|
||||
size={20}
|
||||
style={{ color: isActive ? section.color : '#9ca3af' }}
|
||||
/>
|
||||
</motion.button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Scroll to top button */}
|
||||
<div className="border-t border-gray-600 mt-2 pt-2">
|
||||
<Tooltip title="Back to Top" placement="left">
|
||||
<motion.button
|
||||
onClick={scrollToTop}
|
||||
className="w-12 h-12 rounded-full flex items-center justify-center border-2 border-transparent hover:border-gray-400 transition-all duration-300"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<ChevronUpIcon size={20} className="text-gray-400" />
|
||||
</motion.button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user