Upload components/Hero.jsx with huggingface_hub

components/Hero.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ArrowRight, Cpu, Network } from 'lucide-react';
+
+export default function Hero() {
+  return (
+    <div className="relative pt-32 pb-16 sm:pt-40 sm:pb-24 overflow-hidden bg-brand-dark">
+      {/* Background Gradients */}
+      <div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
+        <div className="absolute top-20 left-1/4 w-96 h-96 bg-brand-accent/20 rounded-full blur-3xl animate-pulse-slow"></div>
+        <div className="absolute bottom-20 right-1/4 w-96 h-96 bg-brand-glow/20 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
+      </div>
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <h1 className="text-4xl sm:text-6xl font-extrabold text-white tracking-tight mb-8">
+          Fueling the Next Generation of <br/>
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent to-brand-glow">
+            Artificial Intelligence
+          </span>
+        </h1>
+        
+        <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-400 mb-10">
+          High-fidelity, curated, and ethically sourced datasets designed specifically for training Large Language Models. Scale your AI infrastructure with NeuroData.
+        </p>
+        
+        <div className="flex flex-col sm:flex-row justify-center gap-4">
+          <button className="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-brand-dark bg-brand-accent hover:bg-sky-400 md:text-lg transition-all shadow-[0_0_20px_rgba(56,189,248,0.5)] hover:shadow-[0_0_30px_rgba(56,189,248,0.7)]">
+            Start Training Now
+            <ArrowRight className="ml-2 h-5 w-5" />
+          </button>
+          <button className="inline-flex items-center justify-center px-8 py-3 border border-gray-600 text-base font-medium rounded-md text-gray-300 hover:text-white hover:border-white md:text-lg transition-colors bg-white/5 backdrop-blur-sm">
+            View Documentation
+          </button>
+        </div>
+
+        <div className="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-4 opacity-70">
+          <div className="flex flex-col items-center">
+            <span className="text-3xl font-bold text-white">50PB+</span>
+            <span className="text-sm text-gray-400">Processed Data</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-3xl font-bold text-white">99.9%</span>
+            <span className="text-sm text-gray-400">Uptime SLA</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-3xl font-bold text-white">100Gbps</span>
+            <span className="text-sm text-gray-400">Throughput</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-3xl font-bold text-white">ISO 27001</span>
+            <span className="text-sm text-gray-400">Certified Security</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}