Spaces:
Sleeping
Sleeping
File size: 2,832 Bytes
a8e2413 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 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>
);
} |