Upload components/Features.js with huggingface_hub

components/Features.js

@@ -0,0 +1,61 @@
+import { Zap, Shield, Globe, Layers, Cpu, Terminal } from 'lucide-react'
+
+const features = [
+  {
+    name: 'Instant Generation',
+    description: 'Convert plain text descriptions into complex code structures instantly.',
+    icon: Zap,
+  },
+  {
+    name: 'Secure Environment',
+    description: 'Your code runs in isolated, sandboxed environments for maximum security.',
+    icon: Shield,
+  },
+  {
+    name: 'Global Collaboration',
+    description: 'Share live notebooks with teams across the globe in real-time.',
+    icon: Globe,
+  },
+  {
+    name: 'Multi-Layer Support',
+    description: 'Support for Python, JavaScript, Rust, and Go in a single interface.',
+    icon: Layers,
+  },
+  {
+    name: 'Neural Processing',
+    description: 'Built on advanced neural networks to understand context better.',
+    icon: Cpu,
+  },
+  {
+    name: 'CLI Integration',
+    description: 'Connect your local workflow with our powerful command line tools.',
+    icon: Terminal,
+  },
+]
+
+export default function Features() {
+  return (
+    <div className="py-24 bg-brand-dark relative" id="features">
+      <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 font-bold text-white mb-4">Everything you need to build faster</h2>
+          <p className="text-gray-400 max-w-2xl mx-auto">
+            Deepnote isn't just a notebook. It's a complete development environment powered by AI.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feature) => (
+            <div key={feature.name} className="glass-panel p-6 rounded-xl hover:border-gray-600 transition-colors group">
+              <div className="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center mb-4 text-brand-accent group-hover:text-white group-hover:bg-brand-accent transition-all">
+                <feature.icon size={24} />
+              </div>
+              <h3 className="text-xl font-bold text-white mb-2">{feature.name}</h3>
+              <p className="text-gray-400 leading-relaxed">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}