Spaces:
Build error
Build error
File size: 7,049 Bytes
4aedb5d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | import { useState } from 'react';
import { Battery, Wifi, Cpu as CpuIcon, Activity } from 'lucide-react';
const robots = [
{
id: 1,
name: "Nexus One",
role: "Home Assistant",
description: "Perfect for daily chores, elderly care, and home security. Equipped with gentle touch sensors and emotional AI.",
stats: { battery: "48h", wifi: "6E", cpu: "Q1", activity: "Low" },
color: "from-blue-500 to-cyan-400"
},
{
id: 2,
name: "Nexus Pro",
role: "Industrial Worker",
description: "Heavy lifting, precision assembly, and hazardous environment exploration. Built with titanium alloy chassis.",
stats: { battery: "72h", wifi: "Mesh", cpu: "Q2", activity: "High" },
color: "from-orange-500 to-red-500"
},
{
id: 3,
name: "Nexus Medical",
role: "Surgical Assistant",
description: "Sub-millimeter precision for surgical procedures. Sterilizable exterior and advanced biometric scanning.",
stats: { battery: "24h", wifi: "Secure", cpu: "Q3", activity: "Med" },
color: "from-emerald-500 to-green-400"
}
];
export default function RobotShowcase() {
const [activeRobot, setActiveRobot] = useState(robots[0]);
return (
<section id="models" className="py-24 bg-surface relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-bold mb-4">Choose Your <span className="text-gradient">Companion</span></h2>
<p className="text-gray-400 max-w-2xl mx-auto">Select the model that fits your needs. From home assistance to industrial applications.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Robot Visualizer */}
<div className="relative h-[500px] w-full glass-panel flex items-center justify-center overflow-hidden group">
<div className={`absolute inset-0 bg-gradient-to-br ${activeRobot.color} opacity-10 group-hover:opacity-20 transition-opacity duration-500`}></div>
{/* Abstract Robot Representation */}
<div className="relative z-10 animate-float">
<div className="w-64 h-96 bg-gradient-to-b from-gray-800 to-black rounded-[3rem] border border-white/20 shadow-2xl relative overflow-hidden flex flex-col items-center pt-12">
{/* Head */}
<div className="w-32 h-32 rounded-full bg-gray-900 border-2 border-primary/50 shadow-[0_0_30px_rgba(0,240,255,0.3)] mb-8 flex items-center justify-center">
<div className="w-24 h-8 bg-primary/20 rounded-full flex items-center justify-center space-x-2">
<div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
<div className="w-2 h-2 bg-primary rounded-full animate-pulse" style={{ animationDelay: '0.2s'}}></div>
</div>
</div>
{/* Body Details */}
<div className="w-full px-8 space-y-4">
<div className="h-2 w-full bg-gray-800 rounded-full overflow-hidden">
<div className={`h-full bg-gradient-to-r ${activeRobot.color} w-3/4`}></div>
</div>
<div className="h-2 w-2/3 mx-auto bg-gray-800 rounded-full"></div>
<div className="h-2 w-1/2 mx-auto bg-gray-800 rounded-full"></div>
</div>
{/* Chest Display */}
<div className="mt-12 w-40 h-24 bg-black/50 rounded-xl border border-white/10 flex items-center justify-center">
<Activity className="text-primary h-8 w-8 animate-pulse" />
</div>
</div>
</div>
</div>
{/* Controls & Info */}
<div className="space-y-8">
<div className="flex space-x-4 overflow-x-auto pb-4">
{robots.map((robot) => (
<button
key={robot.id}
onClick={() => setActiveRobot(robot)}
className={`flex-shrink-0 px-6 py-4 rounded-xl border transition-all duration-300 text-left min-w-[160px] ${
activeRobot.id === robot.id
? `bg-white/10 border-primary text-white`
: 'bg-transparent border-white/10 text-gray-400 hover:border-white/30'
}`}
>
<div className="font-bold text-lg">{robot.name}</div>
<div className="text-xs opacity-70">{robot.role}</div>
</button>
))}
</div>
<div className="glass-panel p-8">
<h3 className="text-2xl font-bold mb-2">{activeRobot.name}</h3>
<div className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-mono rounded mb-4">
{activeRobot.role.toUpperCase()}
</div>
<p className="text-gray-300 mb-8 leading-relaxed">
{activeRobot.description}
</p>
<div className="grid grid-cols-2 gap-4 mb-8">
<div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
<Battery className="text-primary h-5 w-5" />
<div>
<div className="text-xs text-gray-500">Battery Life</div>
<div className="font-mono font-bold">{activeRobot.stats.battery}</div>
</div>
</div>
<div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
<Wifi className="text-primary h-5 w-5" />
<div>
<div className="text-xs text-gray-500">Connectivity</div>
<div className="font-mono font-bold">{activeRobot.stats.wifi}</div>
</div>
</div>
<div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
<CpuIcon className="text-primary h-5 w-5" />
<div>
<div className="text-xs text-gray-500">Processor</div>
<div className="font-mono font-bold">{activeRobot.stats.cpu}</div>
</div>
</div>
<div className="bg-black/20 p-4 rounded-lg flex items-center space-x-3">
<Activity className="text-primary h-5 w-5" />
<div>
<div className="text-xs text-gray-500">Activity Level</div>
<div className="font-mono font-bold">{activeRobot.stats.activity}</div>
</div>
</div>
</div>
<button className="w-full py-4 bg-white text-dark font-bold rounded-lg hover:bg-gray-200 transition-colors">
Configure {activeRobot.name}
</button>
</div>
</div>
</div>
</div>
</section>
);
} |