Files
kit-ui/components/Stats.tsx
Sebastian Krüger 9126589de3 refactor: align landing page and 404 with Calculate blueprint
- Hero: remove framer-motion, CSS stagger animations, glass pill CTA button, refined typography and scroll indicator
- Stats: remove framer-motion, Lucide icons, tighter glass cards with mono labels
- ToolsGrid: remove framer-motion, editorial section heading, 4-col xl grid
- ToolCard: replace framer-motion motion.Link with plain Link + CSS hover, compact layout (icon→title→desc→badges+arrow), ElementType icon prop
- Footer: remove framer-motion, matches sidebar footer style
- BackToTop: remove framer-motion, JS scroll progress bar (1px primary line), compact glass button
- not-found: remove framer-motion and shadcn Button, glass pill CTA, 120px mono 404, CSS stagger
- page.tsx: remove unnecessary 'use client' directive

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-01 09:07:18 +01:00

38 lines
1.3 KiB
TypeScript

import { tools } from '@/lib/tools';
import { Box, Code2, Shield } from 'lucide-react';
const stats = [
{ value: tools.length, label: 'Tools', icon: Box },
{ value: '100%', label: 'Open Source', icon: Code2 },
{ value: '∞', label: 'Privacy First', icon: Shield },
];
export default function Stats() {
return (
<section className="relative py-8 px-6">
<div className="max-w-xl mx-auto">
<div className="grid grid-cols-3 gap-3">
{stats.map((stat, i) => {
const Icon = stat.icon;
return (
<div
key={stat.label}
className="glass rounded-xl p-5 flex flex-col items-center text-center"
style={{ animation: `slideUp 0.5s ease-out ${0.1 + i * 0.1}s both` }}
>
<div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center mb-3">
<Icon className="w-3.5 h-3.5 text-primary" />
</div>
<span className="text-2xl font-bold tabular-nums text-foreground">{stat.value}</span>
<span className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest mt-1">
{stat.label}
</span>
</div>
);
})}
</div>
</div>
</section>
);
}