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
668
app/technical-specs/page.tsx
Normal file
668
app/technical-specs/page.tsx
Normal file
@@ -0,0 +1,668 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Layout,
|
||||
Typography,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Table,
|
||||
Descriptions,
|
||||
Tabs,
|
||||
Tag,
|
||||
Space,
|
||||
Button,
|
||||
Input,
|
||||
Progress,
|
||||
Statistic,
|
||||
Alert,
|
||||
Collapse,
|
||||
Badge
|
||||
} from 'antd';
|
||||
import {
|
||||
ServerIcon,
|
||||
ShieldIcon,
|
||||
CloudIcon,
|
||||
CodeIcon,
|
||||
DownloadIcon,
|
||||
BarChart3Icon
|
||||
} from 'lucide-react';
|
||||
import Header from '@/components/layout/Header';
|
||||
import Footer from '@/components/layout/Footer';
|
||||
import {
|
||||
performanceMetrics,
|
||||
systemRequirements,
|
||||
apiEndpoints,
|
||||
deploymentOptions,
|
||||
versionCompatibility,
|
||||
enterpriseFeatures,
|
||||
performanceStatistics,
|
||||
downloadableResources,
|
||||
installationGuides,
|
||||
sdkSupport,
|
||||
authenticationMethods,
|
||||
monitoringFeatures,
|
||||
securityFeatures
|
||||
} from '@/utils/technical-specs-data';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
const { Search } = Input;
|
||||
const { Panel } = Collapse;
|
||||
|
||||
// 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.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Performance columns
|
||||
const performanceColumns = [
|
||||
{
|
||||
title: 'Metric',
|
||||
dataIndex: 'metric',
|
||||
key: 'metric',
|
||||
render: (text: string, record: any) => (
|
||||
<Space>
|
||||
{record.icon}
|
||||
<Text strong>{text}</Text>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Value',
|
||||
dataIndex: 'value',
|
||||
key: 'value',
|
||||
render: (text: string) => <Tag color="blue">{text}</Tag>,
|
||||
},
|
||||
{
|
||||
title: 'Component',
|
||||
dataIndex: 'component',
|
||||
key: 'component',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status: string) => {
|
||||
return <Badge status="success" text={status} />;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// System requirements columns
|
||||
const requirementsColumns = [
|
||||
{
|
||||
title: 'Category',
|
||||
dataIndex: 'category',
|
||||
key: 'category',
|
||||
render: (text: string, record: any) => (
|
||||
<Space>
|
||||
{record.icon}
|
||||
<Text strong>{text}</Text>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Minimum',
|
||||
dataIndex: 'minimum',
|
||||
key: 'minimum',
|
||||
},
|
||||
{
|
||||
title: 'Recommended',
|
||||
dataIndex: 'recommended',
|
||||
key: 'recommended',
|
||||
render: (text: string) => <Text type="success">{text}</Text>,
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
dataIndex: 'enterprise',
|
||||
key: 'enterprise',
|
||||
render: (text: string) => <Text type="warning">{text}</Text>,
|
||||
},
|
||||
];
|
||||
|
||||
// API endpoints columns
|
||||
const apiColumns = [
|
||||
{
|
||||
title: 'Method',
|
||||
dataIndex: 'method',
|
||||
key: 'method',
|
||||
render: (method: string) => {
|
||||
const color =
|
||||
method === 'POST' ? 'green' :
|
||||
method === 'GET' ? 'blue' :
|
||||
method === 'WS' ? 'purple' : 'default';
|
||||
return <Tag color={color}>{method}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Endpoint',
|
||||
dataIndex: 'endpoint',
|
||||
key: 'endpoint',
|
||||
render: (text: string) => <Text code>{text}</Text>,
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
},
|
||||
{
|
||||
title: 'Authentication',
|
||||
dataIndex: 'authentication',
|
||||
key: 'authentication',
|
||||
},
|
||||
{
|
||||
title: 'Rate Limit',
|
||||
dataIndex: 'rateLimit',
|
||||
key: 'rateLimit',
|
||||
},
|
||||
];
|
||||
|
||||
export default function TechnicalSpecsPage() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [activeTab, setActiveTab] = useState('performance');
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: 'performance',
|
||||
label: (
|
||||
<Space>
|
||||
<BarChart3Icon className="w-4 h-4" />
|
||||
Performance Metrics
|
||||
</Space>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-6">
|
||||
<Alert
|
||||
message="Performance Benchmarks"
|
||||
description="All metrics are measured under standard production conditions with optimal configuration."
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
<Row gutter={[24, 24]} className="mb-6">
|
||||
{performanceStatistics.map((stat, index) => (
|
||||
<Col key={index} xs={24} sm={12} lg={6}>
|
||||
<Card className="glass-effect text-center">
|
||||
<Statistic
|
||||
title={stat.title}
|
||||
value={stat.value}
|
||||
suffix={stat.suffix}
|
||||
valueStyle={{ color: stat.color }}
|
||||
prefix={stat.icon}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Table
|
||||
columns={performanceColumns}
|
||||
dataSource={performanceMetrics}
|
||||
pagination={false}
|
||||
className="glass-effect"
|
||||
/>
|
||||
|
||||
<Card className="glass-effect">
|
||||
<Title level={4}>Scalability Architecture</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={12}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Text strong>Horizontal Scaling:</Text>
|
||||
<Progress percent={95} status="active" strokeColor="#30d158" />
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>Load Distribution:</Text>
|
||||
<Progress percent={88} status="active" strokeColor="#007aff" />
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>Auto-scaling:</Text>
|
||||
<Progress percent={92} status="active" strokeColor="#ff9500" />
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<Paragraph>
|
||||
CHORUS Services employs a microservices architecture with automatic horizontal
|
||||
scaling capabilities. Each component can scale independently based on demand,
|
||||
ensuring optimal resource utilization and consistent performance under varying loads.
|
||||
</Paragraph>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'requirements',
|
||||
label: (
|
||||
<Space>
|
||||
<ServerIcon className="w-4 h-4" />
|
||||
System Requirements
|
||||
</Space>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-6">
|
||||
<Alert
|
||||
message="Infrastructure Planning"
|
||||
description="Choose the configuration that best matches your deployment scale and requirements."
|
||||
type="success"
|
||||
showIcon
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
<Table
|
||||
columns={requirementsColumns}
|
||||
dataSource={systemRequirements}
|
||||
pagination={false}
|
||||
className="glass-effect"
|
||||
/>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} lg={12}>
|
||||
<Card className="glass-effect" title="Monitoring & Observability">
|
||||
<Space direction="vertical" className="w-full">
|
||||
{monitoringFeatures.map((feature, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<Text>{feature.name}</Text>
|
||||
{feature.icon}
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} lg={12}>
|
||||
<Card className="glass-effect" title="Security Features">
|
||||
<Space direction="vertical" className="w-full">
|
||||
{securityFeatures.map((feature, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<Text>{feature.name}</Text>
|
||||
{feature.icon}
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'api',
|
||||
label: (
|
||||
<Space>
|
||||
<CodeIcon className="w-4 h-4" />
|
||||
API Documentation
|
||||
</Space>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-6">
|
||||
<Alert
|
||||
message="RESTful API & WebSocket Support"
|
||||
description="Comprehensive API access with multiple authentication methods and real-time capabilities."
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
<Table
|
||||
columns={apiColumns}
|
||||
dataSource={apiEndpoints}
|
||||
pagination={false}
|
||||
className="glass-effect"
|
||||
/>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} lg={12}>
|
||||
<Card className="glass-effect" title="Authentication Methods">
|
||||
<Collapse ghost>
|
||||
{authenticationMethods.map((method, index) => (
|
||||
<Panel header={method.title} key={index}>
|
||||
<div className="space-y-2">
|
||||
<Text code>{method.example}</Text>
|
||||
<Paragraph className="text-sm text-gray-400">
|
||||
{method.description}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Panel>
|
||||
))}
|
||||
</Collapse>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} lg={12}>
|
||||
<Card className="glass-effect" title="SDK Support">
|
||||
<div className="space-y-4">
|
||||
{sdkSupport.map((sdk, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<Text>{sdk.language}</Text>
|
||||
<Tag color={sdk.color}>{sdk.status}</Tag>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card className="glass-effect" title="Example Request">
|
||||
<div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
|
||||
<pre className="text-sm text-gray-300">
|
||||
{`curl -X POST https://api.chorus.services/v1/whoosh/workflow \\
|
||||
-H "Authorization: Bearer YOUR_JWT_TOKEN" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"workflow_id": "example-workflow",
|
||||
"parameters": {
|
||||
"target": "production",
|
||||
"agents": ["bzzz-1", "bzzz-2"],
|
||||
"context": "semantic-search-enabled"
|
||||
}
|
||||
}'`}
|
||||
</pre>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'enterprise',
|
||||
label: (
|
||||
<Space>
|
||||
<ShieldIcon className="w-4 h-4" />
|
||||
Enterprise Features
|
||||
</Space>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-6">
|
||||
<Alert
|
||||
message="Enterprise-Grade Capabilities"
|
||||
description="Advanced features designed for mission-critical deployments and large-scale operations."
|
||||
type="success"
|
||||
showIcon
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
{enterpriseFeatures.map((feature, index) => (
|
||||
<Col key={index} xs={24} lg={8}>
|
||||
<Card className="glass-effect h-full" title={feature.category}>
|
||||
<div className="space-y-3">
|
||||
{feature.features.map((item, itemIndex) => (
|
||||
<div key={itemIndex} className="flex items-center space-x-2">
|
||||
<span className={feature.color}>{feature.icon}</span>
|
||||
<Text>{item}</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Card className="glass-effect" title="Enterprise Support">
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={12}>
|
||||
<Descriptions column={1} bordered size="small">
|
||||
<Descriptions.Item label="Support Level">24/7 Premium Support</Descriptions.Item>
|
||||
<Descriptions.Item label="Response Time">< 1 hour (Critical)</Descriptions.Item>
|
||||
<Descriptions.Item label="Dedicated CSM">Yes</Descriptions.Item>
|
||||
<Descriptions.Item label="Training">Included</Descriptions.Item>
|
||||
<Descriptions.Item label="Professional Services">Available</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
<Col xs={24} md={12}>
|
||||
<div className="space-y-4">
|
||||
<Title level={5}>Included Services</Title>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<Text>Architecture review and optimization</Text>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<Text>Custom integration development</Text>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<Text>Performance tuning and monitoring</Text>
|
||||
</li>
|
||||
<li className="flex items-center space-x-2">
|
||||
<CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<Text>Security audits and recommendations</Text>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'deployment',
|
||||
label: (
|
||||
<Space>
|
||||
<CloudIcon className="w-4 h-4" />
|
||||
Deployment Options
|
||||
</Space>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-6">
|
||||
<Alert
|
||||
message="Flexible Deployment Models"
|
||||
description="Choose from cloud, on-premises, or hybrid deployments to meet your specific requirements."
|
||||
type="info"
|
||||
showIcon
|
||||
className="mb-6"
|
||||
/>
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
{deploymentOptions.map((option) => (
|
||||
<Col key={option.key} xs={24} lg={12}>
|
||||
<Card className="glass-effect h-full" title={option.option}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Text strong>Platforms:</Text>
|
||||
<div className="mt-2 space-x-1">
|
||||
{option.platforms.map((platform) => (
|
||||
<Tag key={platform} color="blue">{platform}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>Key Features:</Text>
|
||||
<ul className="mt-2 space-y-1">
|
||||
{option.features.map((feature, idx) => (
|
||||
<li key={idx} className="text-sm flex items-center space-x-2">
|
||||
<CheckCircleIcon className="w-3 h-3 text-green-500 flex-shrink-0" />
|
||||
<Text>{feature}</Text>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pt-2 border-t border-gray-700">
|
||||
<div>
|
||||
<Text strong>Complexity: </Text>
|
||||
<Tag color={
|
||||
option.complexity === 'Low' ? 'green' :
|
||||
option.complexity === 'Medium' ? 'orange' : 'red'
|
||||
}>
|
||||
{option.complexity}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<Text strong>Cost: </Text>
|
||||
<Tag color="purple">{option.cost}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<Card className="glass-effect" title="Installation Guides">
|
||||
<Row gutter={[16, 16]}>
|
||||
{installationGuides.map((guide, index) => (
|
||||
<Col key={index} xs={24} md={8}>
|
||||
<Button
|
||||
type={index === 0 ? "primary" : undefined}
|
||||
icon={<DownloadIcon className="w-4 h-4" />}
|
||||
block
|
||||
size="large"
|
||||
className="mb-2"
|
||||
href={guide.href}
|
||||
>
|
||||
{guide.title}
|
||||
</Button>
|
||||
<Text className="text-sm text-gray-400">{guide.description}</Text>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card className="glass-effect" title="Version Compatibility Matrix">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left p-2">CHORUS Version</th>
|
||||
<th className="text-left p-2">Kubernetes</th>
|
||||
<th className="text-left p-2">Docker</th>
|
||||
<th className="text-left p-2">PostgreSQL</th>
|
||||
<th className="text-left p-2">Redis</th>
|
||||
<th className="text-left p-2">Node.js</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{versionCompatibility.map((version, index) => (
|
||||
<tr key={index} className={index < versionCompatibility.length - 1 ? "border-b border-gray-800" : ""}>
|
||||
<td className="p-2">{version.chorusVersion}</td>
|
||||
<td className="p-2">{version.kubernetes}</td>
|
||||
<td className="p-2">{version.docker}</td>
|
||||
<td className="p-2">{version.postgresql}</td>
|
||||
<td className="p-2">{version.redis}</td>
|
||||
<td className="p-2">{version.nodejs}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Layout className="min-h-screen bg-chorus-charcoal">
|
||||
<Content>
|
||||
{/* Hero Section */}
|
||||
<section className="section-padding-sm bg-gradient-to-br from-chorus-charcoal via-slate-900 to-chorus-charcoal">
|
||||
<div className="container-chorus">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeInUp}
|
||||
className="text-center max-w-4xl mx-auto"
|
||||
>
|
||||
<Title level={1} className="text-white mb-4">
|
||||
Technical Specifications
|
||||
</Title>
|
||||
<Paragraph className="text-xl text-gray-300 mb-8">
|
||||
Comprehensive technical documentation for enterprise decision makers,
|
||||
system architects, and development teams implementing CHORUS Services.
|
||||
</Paragraph>
|
||||
|
||||
<div className="max-w-md mx-auto mb-8">
|
||||
<Search
|
||||
placeholder="Search technical documentation..."
|
||||
size="large"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="glass-search"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="section-padding">
|
||||
<div className="container-chorus">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={stagger}
|
||||
>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={setActiveTab}
|
||||
items={tabItems}
|
||||
size="large"
|
||||
className="glass-tabs"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download Resources Section */}
|
||||
<section className="section-padding-sm bg-gradient-to-r from-slate-900 to-chorus-charcoal">
|
||||
<div className="container-chorus">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
variants={fadeInUp}
|
||||
className="text-center"
|
||||
>
|
||||
<Title level={2} className="text-white mb-6">
|
||||
Additional Resources
|
||||
</Title>
|
||||
<Row gutter={[24, 24]} justify="center">
|
||||
{downloadableResources.map((resource, index) => (
|
||||
<Col key={index} xs={24} sm={12} md={8}>
|
||||
<Card className="glass-effect text-center h-full">
|
||||
<div className={`mx-auto mb-4 ${resource.color}`}>
|
||||
{resource.icon}
|
||||
</div>
|
||||
<Title level={4} className="text-white mb-2">{resource.title}</Title>
|
||||
<Paragraph className="text-gray-400 mb-4">
|
||||
{resource.description}
|
||||
</Paragraph>
|
||||
<Button type="primary" block href={resource.href}>
|
||||
{resource.buttonText}
|
||||
</Button>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user