Sebastian Krüger
075aa0b6c5
Hero: Kit. title with primary dot, arrow-down CTA, minimal line scroll indicator. Stats: rounded-2xl + icon border matching cards. ToolsGrid: proper h2 with gradient accent word. ToolCard: visible rest border, radial glow, bigger icon+arrow. Footer: visible Source label, consistent border. 404: fade gradient number, divider line, rounded-xl CTA. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { tools } from '@/lib/tools';
|
|
import { Box, Code2, Shield } from 'lucide-react';
|
|
|
|
const stats = [
|
|
{ value: tools.length, label: 'Tools available', icon: Box },
|
|
{ value: '100%', label: 'Open source', icon: Code2 },
|
|
{ value: '0', label: 'Data collected', icon: Shield },
|
|
];
|
|
|
|
export default function Stats() {
|
|
return (
|
|
<section className="relative py-4 px-6">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{stats.map((stat, i) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<div
|
|
key={stat.label}
|
|
className="glass rounded-2xl p-5 flex items-center gap-4 border border-white/[0.06]"
|
|
style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/15 flex items-center justify-center shrink-0">
|
|
<Icon className="w-4.5 h-4.5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<span className="text-2xl font-bold tabular-nums text-foreground block leading-none">
|
|
{stat.value}
|
|
</span>
|
|
<span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1 block">
|
|
{stat.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|