7774d7ec98
This commit implements a complete brand system overhaul including: TYPOGRAPHY SYSTEM: - Add Exo font family (Thin, Light, Regular, ExtraLight) as primary brand font - Implement SF Pro Display/Text hierarchy for UI components - Create comprehensive Typography component with all brand variants - Update all components to use new typography tokens DESIGN TOKEN SYSTEM: - Create complete design token system in theme/designTokens.ts - Define Carbon Black (#1a1a1a), Walnut Brown (#8B4513), Brushed Aluminum (#A8A8A8) palette - Implement CSS custom properties for consistent theming - Update Ant Design theme integration COMPONENT UPDATES: - Enhance Hero section with Exo Thin typography and improved layout - Update navigation with SF Pro font hierarchy - Redesign Button component with new variants and accessibility - Apply brand colors and typography across all showcase sections - Improve Footer with consistent brand application PERFORMANCE & ACCESSIBILITY: - Self-host Exo fonts for optimal loading performance - Implement proper font-display strategies - Add comprehensive accessibility audit documentation - Include responsive testing verification DOCUMENTATION: - Add brand system demo and implementation guides - Include QA testing reports and accessibility audits - Document design token usage and component patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
403 lines
19 KiB
TypeScript
403 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Typography, Row, Col, Card, Tag, Timeline } 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 }
|
|
}
|
|
};
|
|
|
|
|
|
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">
|
|
<div 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">Hypercore Log Processing</Text>
|
|
<Tag color="blue">Real-time</Tag>
|
|
</div>
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Continuous ingestion and processing of append-only log entries with tamper-evident verification</Text>
|
|
</div>
|
|
|
|
<div 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">Semantic Analysis</Text>
|
|
<Tag color="green">AI-Powered</Tag>
|
|
</div>
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Natural language processing for content understanding and automatic categorization</Text>
|
|
</div>
|
|
|
|
<div 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">Role-Based Filtering</Text>
|
|
<Tag color="purple">Dynamic</Tag>
|
|
</div>
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Context filtering based on agent roles, permissions, and access control policies</Text>
|
|
</div>
|
|
|
|
<div 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">SQL Interface</Text>
|
|
<Tag color="orange">Standards-Based</Tag>
|
|
</div>
|
|
</div>
|
|
<Text className="text-sm text-gray-400">Standard SQL queries for flexible context retrieval and integration</Text>
|
|
</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">Technical Architecture</Title>
|
|
<Timeline
|
|
size="small"
|
|
items={[
|
|
{
|
|
color: 'green',
|
|
children: (
|
|
<div>
|
|
<Text className="text-gray-300 text-sm">Hypercore Protocol Integration</Text>
|
|
<div className="text-xs text-gray-500">Tamper-evident append-only logs</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
color: 'blue',
|
|
children: (
|
|
<div>
|
|
<Text className="text-gray-300 text-sm">HCFS Filesystem Integration</Text>
|
|
<div className="text-xs text-gray-500">Transparent context access via FUSE</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
color: 'orange',
|
|
children: (
|
|
<div>
|
|
<Text className="text-gray-300 text-sm">SQL Query Engine</Text>
|
|
<div className="text-xs text-gray-500">Standard SQL interface for context retrieval</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
color: 'purple',
|
|
children: (
|
|
<div>
|
|
<Text className="text-gray-300 text-sm">Role-Based Access Control</Text>
|
|
<div className="text-xs text-gray-500">Agent permissions and content filtering</div>
|
|
</div>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</Card>
|
|
</motion.div>
|
|
</Col>
|
|
</Row>
|
|
|
|
{/* Context Architecture Components */}
|
|
<motion.div variants={fadeInUp} className="mb-16">
|
|
<Row gutter={[24, 24]}>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<FileTextIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">Hypercore</Title>
|
|
<Text className="text-gray-400 text-sm">Append-only log for tamper-evident audit trails</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<SearchIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">SQL Interface</Title>
|
|
<Text className="text-gray-400 text-sm">Standard SQL queries for flexible context retrieval</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<UsersIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">Role-Based</Title>
|
|
<Text className="text-gray-400 text-sm">Context filtering based on agent roles and permissions</Text>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
<Col xs={12} sm={6}>
|
|
<Card className="glass-effect border-0 text-center">
|
|
<div className="p-4">
|
|
<TrendingUpIcon size={32} className="text-slate-400 mb-3" />
|
|
<Title level={4} className="text-white mb-2">Real-time</Title>
|
|
<Text className="text-gray-400 text-sm">Live context updates as Hypercore log grows</Text>
|
|
</div>
|
|
</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>
|
|
);
|
|
} |