Upload components/RobotShowcase.js with huggingface_hub

components/RobotShowcase.js

@@ -0,0 +1,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>
+  );
+}