Sebastian Krüger
47f8fe7040
Added Units as the 5th tool in the kit: 🔄 Units Converter Features: - 187 units across 23 measurement categories - Real-time bidirectional conversion - Smart fuzzy search for quick unit selection - Conversion history with localStorage - Categories: length, mass, temperature, time, angle, area, volume, etc. 🎨 Visual: - Cyan-purple gradient - Bidirectional arrows icon (conversion symbol) - Badges: Real-time, Free 📊 Updates: - Stats section: 4 → 5 Tools - Footer: Added Units link with cyan hover - README: Added tool description - Grid layout: Now displays 5 tools responsively 🔗 URL: https://units.kit.pivoine.art 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
const stats = [
|
|
{
|
|
number: '5',
|
|
label: 'Tools',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
number: '100%',
|
|
label: 'Open Source',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
number: '∞',
|
|
label: 'Privacy First',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function Stats() {
|
|
return (
|
|
<section className="relative py-16 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{stats.map((stat, index) => (
|
|
<motion.div
|
|
key={stat.label}
|
|
className="glass rounded-2xl p-8 text-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
whileHover={{ y: -5 }}
|
|
>
|
|
<motion.div
|
|
className="inline-flex items-center justify-center w-12 h-12 mb-4 rounded-xl bg-gradient-to-br from-purple-500/20 to-cyan-500/20 text-purple-400"
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
transition={{ type: 'spring', stiffness: 300 }}
|
|
>
|
|
{stat.icon}
|
|
</motion.div>
|
|
<div className="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
|
|
{stat.number}
|
|
</div>
|
|
<div className="text-gray-400 text-sm font-medium">
|
|
{stat.label}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|