'use client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
Server,
Zap,
Shield,
Eye,
Navigation,
Cpu,
Battery,
Wifi,
Settings,
Play,
Pause,
RotateCcw,
ChevronRight,
Gamepad2,
AlertTriangle,
CheckCircle,
Info,
ExternalLink,
MessageSquare,
Database,
Layers,
GitBranch,
Activity,
Code,
Network,
Globe,
Users
} from 'lucide-react'
import { Link } from 'react-router-dom'
const mcpServers = [
{
name: 'Robotics MCP',
description: 'Unified robotics control and orchestration',
version: '0.1.0',
tools: 7,
status: 'Active',
icon: Server,
features: [
'Multi-robot coordination',
'Real-time control interfaces',
'Unified API layer',
'Web dashboard integration'
]
},
{
name: 'OSC MCP',
description: 'Open Sound Control for real-time communication',
version: '1.0.0',
tools: 8,
status: 'Active',
icon: MessageSquare,
features: [
'UDP-based messaging',
'Real-time performance',
'Audio/visual control',
'Modular synth integration'
]
},
{
name: 'Unity3D MCP',
description: 'Unity game engine integration and control',
version: '0.8.0',
tools: 12,
status: 'Development',
icon: Gamepad2,
features: [
'Scene manipulation',
'Asset management',
'Real-time rendering',
'Physics simulation'
]
},
{
name: 'VRChat MCP',
description: 'VRChat world and avatar control',
version: '0.6.0',
tools: 10,
status: 'Development',
icon: Users,
features: [
'Avatar animation',
'World interaction',
'OSC integration',
'Social features'
]
},
{
name: 'Blender MCP',
description: '3D modeling and animation control',
version: '0.7.0',
tools: 15,
status: 'Development',
icon: Eye,
features: [
'Mesh manipulation',
'Material editing',
'Animation control',
'Rendering pipeline'
]
},
{
name: 'GIMP MCP',
description: 'Image editing and processing',
version: '0.5.0',
tools: 9,
status: 'Development',
icon: Eye,
features: [
'Layer operations',
'Filter application',
'Selection tools',
'Color correction'
]
},
{
name: 'Avatar MCP',
description: 'Avatar management and customization',
version: '0.4.0',
tools: 6,
status: 'Development',
icon: Users,
features: [
'Avatar creation',
'Parameter control',
'Expression management',
'Social interaction'
]
}
]
const architecturePrinciples = [
{
principle: 'Portmanteau Design',
description: 'Consolidate related operations into single tools with 15+ functions',
benefits: ['Reduced tool explosion', 'Logical grouping', 'Better discoverability'],
icon: Layers
},
{
principle: 'FastMCP 2.13+ Compliance',
description: 'Built on the latest FastMCP framework with modern patterns',
benefits: ['Performance optimization', 'Security enhancements', 'Future compatibility'],
icon: Zap
},
{
principle: 'MCP Server Composition',
description: 'Servers can mount and use other MCP servers internally',
benefits: ['Modular architecture', 'Reusable components', 'Scalable design'],
icon: Network
},
{
principle: 'Dual Transport',
description: 'Support both stdio (MCP) and HTTP (REST) interfaces',
benefits: ['Flexibility', 'Web integration', 'API compatibility'],
icon: Globe
},
{
principle: 'SOTA Compliance',
description: 'State-of-the-Art standards with CI/CD, testing, and documentation',
benefits: ['Quality assurance', 'Maintainability', 'Industry standards'],
icon: Shield
}
]
const portmanteauTools = [
{
server: 'Robotics MCP',
tools: [
{ name: 'robotics_system', functions: ['help', 'status', 'list_robots'] },
{ name: 'robot_control', functions: ['move', 'stop', 'get_status', 'emergency_stop'] },
{ name: 'robot_behavior', functions: ['animate', 'camera_control', 'navigation', 'manipulation'] },
{ name: 'robot_manufacturing', functions: ['3d_print', 'cnc_control', 'quality_check'] },
{ name: 'robot_virtual', functions: ['spawn_vbot', 'sync_physical', 'environment_control'] },
{ name: 'robot_model', functions: ['create_model', 'import_export', 'convert_formats'] },
{ name: 'vbot_crud', functions: ['create', 'read', 'update', 'delete', 'list'] }
]
},
{
server: 'OSC MCP',
tools: [
{ name: 'osc_send', functions: ['send_message', 'send_bundle', 'query_devices'] },
{ name: 'osc_server', functions: ['start_server', 'stop_server', 'get_messages'] },
{ name: 'osc_recorder', functions: ['start_recording', 'stop_recording', 'playback'] },
{ name: 'osc_devices', functions: ['discover', 'configure', 'monitor'] }
]
}
]
const integrationPatterns = [
{
pattern: 'Server Composition',
description: 'Robotics MCP mounts and uses other MCP servers internally',
example: 'Robotics MCP uses OSC MCP for real-time control without exposing OSC tools',
benefits: ['Clean separation', 'Internal complexity hidden', 'Unified API']
},
{
pattern: 'Tool Portmanteaus',
description: 'Related operations consolidated into single tools with many functions',
example: 'robot_behavior tool handles animation, camera, navigation, and manipulation',
benefits: ['Reduced complexity', 'Logical grouping', 'Better performance']
},
{
pattern: 'Dual Transport',
description: 'Same server supports both MCP stdio and HTTP REST APIs',
example: 'Robotics MCP accessible via MCP protocol and web dashboard',
benefits: ['Multiple interfaces', 'Web integration', 'API flexibility']
},
{
pattern: 'State Management',
description: 'Centralized state management with persistence and synchronization',
example: 'Robot states synchronized across MCP tools and web interface',
benefits: ['Consistency', 'Reliability', 'Real-time updates']
}
]
export default function MCPServerPage() {
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-8 max-w-6xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-4 mb-4">
<Server className="h-12 w-12 text-primary" />
<div>
<h1 className="text-4xl font-bold">MCP Server Architecture</h1>
<p className="text-xl text-muted-foreground">
Robotics MCP Server and Composite MCP Ecosystem
</p>
</div>
<Badge variant="default" className="text-sm">
FastMCP 2.13+
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card>
<CardContent className="p-4 text-center">
<Server className="h-8 w-8 text-blue-500 mx-auto mb-2" />
<div className="text-2xl font-bold">7</div>
<div className="text-sm text-muted-foreground">MCP Servers</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Settings className="h-8 w-8 text-green-500 mx-auto mb-2" />
<div className="text-2xl font-bold">50+</div>
<div className="text-sm text-muted-foreground">Portmanteau Tools</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Layers className="h-8 w-8 text-purple-500 mx-auto mb-2" />
<div className="text-2xl font-bold">Dual</div>
<div className="text-sm text-muted-foreground">Transport Support</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Shield className="h-8 w-8 text-red-500 mx-auto mb-2" />
<div className="text-2xl font-bold">SOTA</div>
<div className="text-sm text-muted-foreground">Compliance</div>
</CardContent>
</Card>
</div>
</div>
<Tabs defaultValue="overview" className="space-y-6">
<TabsList className="grid w-full grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="servers">MCP Servers</TabsTrigger>
<TabsTrigger value="architecture">Architecture</TabsTrigger>
<TabsTrigger value="tools">Portmanteaus</TabsTrigger>
<TabsTrigger value="integration">Integration</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>MCP Ecosystem Overview</CardTitle>
<CardDescription>
A comprehensive suite of MCP servers for robotics, creative tools, and automation
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold mb-3">Core Principles</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Portmanteau design pattern (15+ functions per tool)</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>FastMCP 2.13+ compliance with modern patterns</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>MCP server composition for modularity</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Dual transport (stdio MCP + HTTP REST)</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>State-of-the-Art (SOTA) compliance standards</span>
</li>
</ul>
</div>
<div>
<h3 className="font-semibold mb-3">Architecture Benefits</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Unified control across diverse platforms</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Modular and extensible design</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Real-time performance and reliability</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Web dashboard integration</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Cross-platform compatibility</span>
</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Architecture Principles</CardTitle>
<CardDescription>
Core design principles guiding the MCP ecosystem development
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{architecturePrinciples.map((principle) => (
<div key={principle.principle} className="border rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<principle.icon className="h-6 w-6 text-primary" />
<h4 className="font-medium">{principle.principle}</h4>
</div>
<p className="text-sm text-muted-foreground mb-3">{principle.description}</p>
<ul className="text-xs space-y-1">
{principle.benefits.map((benefit) => (
<li key={benefit} className="flex items-center space-x-1">
<CheckCircle className="h-2 w-2 text-green-500" />
<span>{benefit}</span>
</li>
))}
</ul>
</div>
))}
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="servers" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>MCP Server Ecosystem</CardTitle>
<CardDescription>
Complete suite of MCP servers for comprehensive control and automation
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{mcpServers.map((server) => (
<div key={server.name} className="border rounded-lg p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-3">
<server.icon className="h-8 w-8 text-primary" />
<div>
<h4 className="font-medium">{server.name}</h4>
<p className="text-xs text-muted-foreground">v{server.version}</p>
</div>
</div>
<Badge variant={server.status === 'Active' ? 'default' : 'secondary'}>
{server.status}
</Badge>
</div>
<p className="text-sm text-muted-foreground mb-3">{server.description}</p>
<div className="flex items-center justify-between text-xs mb-3">
<span>{server.tools} tools</span>
<span>Portmanteau design</span>
</div>
<ul className="text-xs space-y-1">
{server.features.map((feature) => (
<li key={feature} className="flex items-center space-x-1">
<CheckCircle className="h-2 w-2 text-green-500" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
))}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Server Interoperability</CardTitle>
<CardDescription>
How MCP servers work together in the ecosystem
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Server Composition</h4>
<p className="text-sm text-muted-foreground">Robotics MCP mounts other MCP servers internally for unified functionality</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Tool Coordination</h4>
<p className="text-sm text-muted-foreground">Tools from different servers can coordinate through shared state and messaging</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">State Synchronization</h4>
<p className="text-sm text-muted-foreground">Consistent state management across all servers and interfaces</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Unified API</h4>
<p className="text-sm text-muted-foreground">Single entry point through Robotics MCP for all functionality</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="architecture" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Robotics MCP Architecture</CardTitle>
<CardDescription>
Detailed architecture of the main robotics control server
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="border rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<Layers className="h-6 w-6 text-primary" />
<h4 className="font-medium">Portmanteau Tools</h4>
</div>
<p className="text-sm text-muted-foreground mb-2">7 consolidated tools with 15+ functions each</p>
<ul className="text-xs space-y-1">
<li>• robotics_system (3 functions)</li>
<li>• robot_control (4 functions)</li>
<li>• robot_behavior (4 functions)</li>
<li>• robot_manufacturing (3 functions)</li>
<li>• robot_virtual (3 functions)</li>
<li>• robot_model (3 functions)</li>
<li>• vbot_crud (5 functions)</li>
</ul>
</div>
<div className="border rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<Network className="h-6 w-6 text-blue-500" />
<h4 className="font-medium">Server Composition</h4>
</div>
<p className="text-sm text-muted-foreground mb-2">Internal mounting of other MCP servers</p>
<ul className="text-xs space-y-1">
<li>• OSC MCP for real-time control</li>
<li>• Unity3D MCP for simulation</li>
<li>• VRChat MCP for social VR</li>
<li>• Blender MCP for 3D modeling</li>
</ul>
</div>
<div className="border rounded-lg p-4">
<div className="flex items-center space-x-3 mb-3">
<Globe className="h-6 w-6 text-green-500" />
<h4 className="font-medium">Dual Transport</h4>
</div>
<p className="text-sm text-muted-foreground mb-2">Stdio MCP + HTTP REST APIs</p>
<ul className="text-xs space-y-1">
<li>• MCP protocol for IDE integration</li>
<li>• REST API for web dashboard</li>
<li>• WebSocket for real-time updates</li>
<li>• CORS-enabled cross-origin access</li>
</ul>
</div>
</div>
<div className="border rounded-lg p-6">
<h4 className="font-medium mb-4">State Management Architecture</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h5 className="font-medium text-sm mb-2">Robot State Manager</h5>
<ul className="text-xs space-y-1 text-muted-foreground">
<li>• Centralized robot registry</li>
<li>• Real-time state synchronization</li>
<li>• Persistent state storage</li>
<li>• Multi-robot coordination</li>
</ul>
</div>
<div>
<h5 className="font-medium text-sm mb-2">Configuration System</h5>
<ul className="text-xs space-y-1 text-muted-foreground">
<li>• YAML-based configuration</li>
<li>• Environment-specific settings</li>
<li>• Runtime parameter updates</li>
<li>• Validation and error handling</li>
</ul>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Integration Patterns</CardTitle>
<CardDescription>
Proven patterns for MCP server integration and composition
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{integrationPatterns.map((pattern, index) => (
<div key={pattern.pattern} className="border rounded-lg p-4">
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
{index + 1}
</div>
<div className="flex-1">
<h4 className="font-medium mb-2">{pattern.pattern}</h4>
<p className="text-sm text-muted-foreground mb-2">{pattern.description}</p>
<div className="bg-gray-50 p-2 rounded text-xs mb-2">
<strong>Example:</strong> {pattern.example}
</div>
<p className="text-xs text-primary"><strong>Benefits:</strong> {pattern.benefits.join(', ')}</p>
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="tools" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Portmanteau Tool Design</CardTitle>
<CardDescription>
How we consolidate related operations into powerful multi-function tools
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
{portmanteauTools.map((server) => (
<div key={server.server} className="border rounded-lg p-4">
<h4 className="font-medium mb-4">{server.server}</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{server.tools.map((tool) => (
<div key={tool.name} className="border-l-2 border-primary pl-3">
<h5 className="font-medium text-sm mb-1">{tool.name}</h5>
<p className="text-xs text-muted-foreground mb-2">
{tool.functions.length} functions: {tool.functions.join(', ')}
</p>
</div>
))}
</div>
</div>
))}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Tool Design Principles</CardTitle>
<CardDescription>
Guidelines for creating effective portmanteau tools
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Logical Grouping</h4>
<p className="text-sm text-muted-foreground">Group related operations that share common context or data structures</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Consistent Interfaces</h4>
<p className="text-sm text-muted-foreground">Use consistent parameter naming and return formats across functions</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Error Handling</h4>
<p className="text-sm text-muted-foreground">Comprehensive error handling with structured error responses</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Performance Optimization</h4>
<p className="text-sm text-muted-foreground">Efficient implementation with caching and batch operations where appropriate</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="integration" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Web Dashboard Integration</CardTitle>
<CardDescription>
How MCP servers integrate with the robotics web interface
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">HTTP REST API</h4>
<p className="text-sm text-muted-foreground">All MCP server functionality exposed via REST endpoints for web access</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">WebSocket Real-time Updates</h4>
<p className="text-sm text-muted-foreground">Live telemetry and status updates through WebSocket connections</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">State Synchronization</h4>
<p className="text-sm text-muted-foreground">Consistent state between MCP tools and web interface components</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Authentication & Security</h4>
<p className="text-sm text-muted-foreground">Secure access control with role-based permissions and encryption</p>
</div>
</div>
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Development Workflow</CardTitle>
<CardDescription>
How to develop and deploy MCP servers
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Use FastMCP 2.13+ framework</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Implement portmanteau tool design</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Add comprehensive error handling</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Include dual transport support</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Add comprehensive documentation</span>
</li>
</ul>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Deployment & Scaling</CardTitle>
<CardDescription>
Best practices for production deployment
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<Info className="h-3 w-3 text-blue-500" />
<span>Container-based deployment</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-3 w-3 text-blue-500" />
<span>Horizontal scaling with load balancing</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-3 w-3 text-blue-500" />
<span>Monitoring and observability</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-3 w-3 text-blue-500" />
<span>Automated testing and CI/CD</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-3 w-3 text-blue-500" />
<span>Security hardening and compliance</span>
</li>
</ul>
</CardContent>
</Card>
</div>
</TabsContent>
</Tabs>
{/* Navigation Footer */}
<div className="mt-12 pt-8 border-t">
<div className="flex items-center justify-between">
<Link to="/docs">
<Button variant="outline">
<ChevronRight className="mr-2 h-4 w-4 rotate-180" />
Back to Documentation
</Button>
</Link>
<div className="flex space-x-2">
<Link to="/docs/planning-strategy">
<Button variant="outline">
Planning & Strategy
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
)
}
