tony/chorus-services-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: CHORUS Services marketing website

Browse Source 
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
2025-08-01 22:45:06 +10:00
commit f343f89d24
50 changed files with 16178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
components/sections/SLURPShowcase.tsx Normal file
View 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>
);
}