f343f89d24
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>
668 lines
21 KiB
TypeScript
668 lines
21 KiB
TypeScript
'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 />
|
|
</>
|
|
);
|
|
} |