Upload components/Specifications.jsx with huggingface_hub

components/Specifications.jsx

@@ -0,0 +1,80 @@
+import { Check } from 'lucide-react';
+
+export default function Specifications() {
+  const specs = [
+    { category: 'Mechanical', items: [
+      { label: 'Degrees of Freedom', value: '6 DOF' },
+      { label: 'Reach', value: '50 cm' },
+      { label: 'Payload', value: 'Up to 1 kg' },
+      { label: 'Repeatability', value: '±0.5 mm' },
+      { label: 'Weight', value: '3.5 kg' },
+    ]},
+    { category: 'Electrical', items: [
+      { label: 'Voltage', value: '12V DC' },
+      { label: 'Power Consumption', value: 'Max 50W' },
+      { label: 'Communication', value: 'USB-C, WiFi, Bluetooth' },
+      { label: 'Sensors', value: 'Position, Temperature, Current' },
+    ]},
+    { category: 'Software', items: [
+      { label: 'Programming', value: 'Python, ROS, C++' },
+      { label: 'Control', value: 'Inverse Kinematics' },
+      { label: 'API', value: 'REST, WebSocket' },
+      { label: 'Compatibility', value: 'Linux, macOS, Windows' },
+    ]},
+  ];
+
+  const includes = [
+    'Reachy Mini Robotic Arm',
+    'Power Supply (12V, 5A)',
+    'USB-C Cable',
+    'Quick Start Guide',
+    'Access to Online Documentation',
+    'Community Support Access',
+  ];
+
+  return (
+    <section id="specs" className="py-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold mb-4">
+            <span className="text-gradient">Technical Specifications</span>
+          </h2>
+          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+            Detailed specifications to help you integrate Reachy Mini into your projects
+          </p>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-8 mb-16">
+          {specs.map((specGroup, index) => (
+            <div key={index} className="bg-gray-800/50 border border-gray-700 rounded-2xl p-8">
+              <h3 className="text-xl font-semibold mb-6 text-primary-400">{specGroup.category}</h3>
+              <div className="space-y-4">
+                {specGroup.items.map((item, itemIndex) => (
+                  <div key={itemIndex} className="flex justify-between items-start border-b border-gray-700 pb-3 last:border-0">
+                    <span className="text-gray-400">{item.label}</span>
+                    <span className="text-white font-medium text-right">{item.value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* What's included */}
+        <div className="bg-gradient-to-r from-primary-900/20 to-accent-900/20 border border-gray-700 rounded-2xl p-8 lg:p-12">
+          <h3 className="text-2xl font-semibold mb-8 text-center">What's in the Box</h3>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {includes.map((item, index) => (
+              <div key={index} className="flex items-center space-x-3">
+                <div className="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                  <Check className="w-4 h-4 text-white" />
+                </div>
+                <span className="text-gray-300">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}