Upload components/Stats.js with huggingface_hub

components/Stats.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+import { Brain, Cpu, Database, Zap } from 'lucide-react';
+
+const stats = [
+  { value: '50+', label: 'Models Deployed', icon: Brain },
+  { value: '98%', label: 'Accuracy Rate', icon: Zap },
+  { value: '10M+', label: 'Data Points', icon: Database },
+  { value: '12', label: 'Research Papers', icon: Cpu },
+];
+
+export default function Stats() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: '-100px' });
+
+  return (
+    <section id="research" ref={ref} className="py-32 px-6 relative">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+          className="mb-20"
+        >
+          <h2 className="font-serif text-4xl md:text-6xl mb-4">Performance Metrics</h2>
+          <div className="w-24 h-1 bg-white"></div>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {stats.map((stat, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ delay: index * 0.1, duration: 0.5 }}
+              className="electric-border p-8 group hover:bg-white/5 transition-colors duration-500"
+            >
+              <div className="flex justify-between items-start mb-6">
+                <stat.icon className="w-8 h-8 text-gray-400 group-hover:text-white transition-colors" />
+                <div className="w-2 h-2 bg-white rounded-full opacity-50 group-hover:opacity-100 group-hover:animate-pulse"></div>
+              </div>
+              <div className="font-serif text-5xl md:text-6xl mb-2 group-hover:translate-x-2 transition-transform duration-300">
+                {stat.value}
+              </div>
+              <div className="font-mono text-xs uppercase tracking-widest text-faint group-hover:text-gray-300">
+                {stat.label}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Large Text Feature */}
+        <motion.div 
+          initial={{ opacity: 0, scale: 0.95 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          viewport={{ once: true }}
+          className="mt-32 p-12 border border-white/10 bg-gradient-to-br from-white/5 to-transparent backdrop-blur-sm"
+        >
+          <p className="font-serif text-2xl md:text-4xl leading-relaxed text-gray-300">
+            "We don't just predict the future; we <span className="text-white italic">synthesize</span> it through layers of computation and intuition."
+          </p>
+        </motion.div>
+      </div>
+    </section>
+  );
+}