'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 {
Sparkles,
Eye,
Navigation,
Cpu,
Battery,
ChevronRight,
CheckCircle,
X,
Info,
ExternalLink,
Zap,
Camera,
Mic,
Arm
} from 'lucide-react'
import Link from 'next/link'
const models = {
m1: {
name: 'ROSMaster M1',
price: '~$300',
dimensions: 'Compact (280mm × 220mm × 180mm)',
weight: '2-3 kg',
payload: '1.5 kg',
speed: '1.2 m/s',
battery: '2-3 hours',
processor: 'Raspberry Pi 5 (4GB included)',
camera: '1080p RGB camera',
arm: 'Optional 4-DOF robotic arm',
useCase: 'Starter platform, demos, education'
},
x3: {
name: 'ROSMaster X3/X3 Plus',
price: '~$500-600',
dimensions: '300mm × 250mm × 200mm',
weight: '3-4 kg',
payload: '2 kg',
speed: '1.5 m/s',
battery: '2-3 hours',
processor: 'Raspberry Pi 5 (8GB recommended)',
camera: '1080p RGB camera',
arm: 'Optional 4-DOF robotic arm',
useCase: 'Professional research, manipulation tasks'
}
}
const features = [
{
icon: Sparkles,
title: 'Multimodal AI',
description: 'Vision, voice, and text processing with onboard AI capabilities'
},
{
icon: Navigation,
title: 'ROS 2 Navigation',
description: 'Advanced SLAM and navigation stack with obstacle avoidance'
},
{
icon: Eye,
title: 'Computer Vision',
description: 'Object detection, tracking, and scene understanding'
},
{
icon: Cpu,
title: 'Edge Computing',
description: 'Onboard processing with Raspberry Pi 4B for real-time AI'
},
{
icon: Arm,
title: 'Robotic Arm',
description: 'Optional 4-DOF manipulator for object manipulation tasks'
},
{
icon: Mic,
title: 'Voice Interaction',
description: 'Speech recognition and synthesis for human-robot interaction'
}
]
const applications = [
'Educational robotics',
'AI research and development',
'Service robotics',
'Autonomous navigation research',
'Human-robot interaction studies',
'ROS 2 learning platform'
]
const integrationFeatures = [
'ROS 2 Rolling Jazzy',
'Navigation2 stack',
'SLAM Toolbox',
'MoveIt2 for manipulation',
'OpenCV integration',
'TensorFlow Lite',
'WebRTC streaming',
'RESTful API'
]
export default function YahboomROSMasterPage() {
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">
<Sparkles className="h-12 w-12 text-primary" />
<div>
<h1 className="text-4xl font-bold">Yahboom ROSMASTER Series</h1>
<p className="text-xl text-muted-foreground">
ROS 2-powered AI wheeled robots with multimodal capabilities - M1 & X3 models
</p>
</div>
<Badge variant="default" className="text-sm">
Active Platform
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card>
<CardContent className="p-4 text-center">
<Sparkles className="h-8 w-8 text-purple-500 mx-auto mb-2" />
<div className="text-2xl font-bold">ROS 2</div>
<div className="text-sm text-muted-foreground">Framework</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Eye className="h-8 w-8 text-blue-500 mx-auto mb-2" />
<div className="text-2xl font-bold">AI</div>
<div className="text-sm text-muted-foreground">Multimodal</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Navigation className="h-8 w-8 text-green-500 mx-auto mb-2" />
<div className="text-2xl font-bold">SLAM</div>
<div className="text-sm text-muted-foreground">Navigation</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Arm className="h-8 w-8 text-orange-500 mx-auto mb-2" />
<div className="text-2xl font-bold">4-DOF</div>
<div className="text-sm text-muted-foreground">Optional Arm</div>
</CardContent>
</Card>
</div>
</div>
{/* Overview */}
<Card className="mb-8">
<CardHeader>
<CardTitle>Overview</CardTitle>
<CardDescription>
The Yahboom ROSMASTER is a comprehensive ROS 2 robotics platform designed for education,
research, and development. It combines multimodal AI capabilities with robust navigation
and optional manipulation features.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<h3 className="font-medium mb-3">Key Capabilities (All Models)</h3>
<ul className="space-y-2">
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">Multimodal AI (Vision, Voice, Text)</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">ROS 2 Rolling Jazzy Integration</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">Advanced SLAM Navigation</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">Real-time Obstacle Avoidance</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">Optional 4-DOF Robotic Arm</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">WebRTC Video Streaming</span>
</li>
<li className="flex items-center space-x-2">
<X className="h-4 w-4 text-red-500" />
<span className="text-sm">Autonomous Charging Station</span>
</li>
</ul>
</div>
<div>
<h3 className="font-medium mb-3">Model Comparison</h3>
<div className="space-y-4">
<div className="border rounded-lg p-4">
<div className="flex justify-between items-center mb-2">
<h4 className="font-medium">{models.m1.name}</h4>
<Badge variant="outline">{models.m1.price}</Badge>
</div>
<p className="text-sm text-muted-foreground mb-2">{models.m1.useCase}</p>
<div className="text-xs space-y-1">
<div><strong>Weight:</strong> {models.m1.weight}</div>
<div><strong>Processor:</strong> {models.m1.processor}</div>
</div>
</div>
<div className="border rounded-lg p-4">
<div className="flex justify-between items-center mb-2">
<h4 className="font-medium">{models.x3.name}</h4>
<Badge variant="outline">{models.x3.price}</Badge>
</div>
<p className="text-sm text-muted-foreground mb-2">{models.x3.useCase}</p>
<div className="text-xs space-y-1">
<div><strong>Weight:</strong> {models.x3.weight}</div>
<div><strong>Processor:</strong> {models.x3.processor}</div>
</div>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
{/* Features Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
{features.map((feature, index) => (
<Card key={index}>
<CardHeader>
<div className="flex items-center space-x-3">
<feature.icon className="h-8 w-8 text-primary" />
<CardTitle className="text-lg">{feature.title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
{/* Autonomous Operation Note */}
<Card className="mb-8 border-amber-200 bg-amber-50">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-amber-800">
<Battery className="h-5 w-5" />
Autonomous Operation Note
</CardTitle>
<CardDescription className="text-amber-700">
For weeks-long unsupervised operation, consider robots with auto-docking stations
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div className="flex items-center justify-between p-3 bg-white rounded-lg border">
<div>
<h4 className="font-medium">Dreame D20 Pro</h4>
<p className="text-sm text-muted-foreground">Auto-docking + auto-empty station</p>
</div>
<Badge variant="outline" className="text-green-700 border-green-300">Recommended</Badge>
</div>
<div className="flex items-center justify-between p-3 bg-white rounded-lg border">
<div>
<h4 className="font-medium">Moorebot Scout</h4>
<p className="text-sm text-muted-foreground">Auto-docking station included</p>
</div>
<Badge variant="outline" className="text-blue-700 border-blue-300">Alternative</Badge>
</div>
<div className="flex items-center justify-between p-3 bg-white rounded-lg border">
<div>
<h4 className="font-medium">ROSMaster Series</h4>
<p className="text-sm text-muted-foreground">Manual charging required</p>
</div>
<Badge variant="outline" className="text-red-700 border-red-300">Limited</Badge>
</div>
</div>
</CardContent>
</Card>
{/* Applications */}
<Card className="mb-8">
<CardHeader>
<CardTitle>Applications</CardTitle>
<CardDescription>
Versatile platform suitable for various robotics applications
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{applications.map((app, index) => (
<div key={index} className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span className="text-sm">{app}</span>
</div>
))}
</div>
</CardContent>
</Card>
{/* Integration */}
<Card className="mb-8">
<CardHeader>
<CardTitle>ROS 2 Integration</CardTitle>
<CardDescription>
Full ROS 2 ecosystem integration with modern robotics tools
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="font-medium mb-3">Core Packages</h3>
<ul className="space-y-2 text-sm">
{integrationFeatures.slice(0, 4).map((feature, index) => (
<li key={index} className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
<div>
<h3 className="font-medium mb-3">AI & Vision</h3>
<ul className="space-y-2 text-sm">
{integrationFeatures.slice(4).map((feature, index) => (
<li key={index} className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
</div>
</CardContent>
</Card>
{/* Control Integration */}
<Card className="mb-8">
<CardHeader>
<CardTitle>Robotics MCP Integration</CardTitle>
<CardDescription>
Seamless integration with our unified robotics control platform
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center">
<Bot className="h-12 w-12 text-primary mx-auto mb-3" />
<h3 className="font-medium mb-2">Unified Control</h3>
<p className="text-sm text-muted-foreground">
Control alongside other robots through standardized APIs
</p>
</div>
<div className="text-center">
<Eye className="h-12 w-12 text-blue-500 mx-auto mb-3" />
<h3 className="font-medium mb-2">Real-time Monitoring</h3>
<p className="text-sm text-muted-foreground">
Live telemetry and status monitoring through web dashboard
</p>
</div>
<div className="text-center">
<Zap className="h-12 w-12 text-green-500 mx-auto mb-3" />
<h3 className="font-medium mb-2">AI Commands</h3>
<p className="text-sm text-muted-foreground">
Natural language control with multimodal AI understanding
</p>
</div>
</div>
</CardContent>
</Card>
{/* Navigation */}
<div className="flex items-center justify-between pt-8 border-t">
<Link href="/docs/robots">
<Button variant="outline">
<ChevronRight className="mr-2 h-4 w-4 rotate-180" />
Back to Robots
</Button>
</Link>
<div className="flex space-x-2">
<Link href="/docs/ros-integration">
<Button variant="outline">
ROS Integration
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</Link>
<Link href="/robot-control">
<Button>
Try Control
<ExternalLink className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
</div>
)
}
