Sebastian Krüger
76e1af8e97
- Added Figlet tool with 373 fonts for ASCII art text generation - Created new gradient-yellow-amber for terminal/retro aesthetic - Updated Stats component from 6 to 7 tools - Updated Footer badge to 7 tools and added Figlet link - Added Figlet to README Available Tools section Figlet Features: - 373 curated fonts from xero/figlet-fonts collection - Live preview and fuzzy search - Multiple export formats (text, PNG, SVG, code snippets) - Shareable URLs and keyboard shortcuts - Perfect for ASCII banners, terminal art, and retro designs Color: Yellow (#eab308) to Amber (#f59e0b) gradient URL: https://figlet.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: '7',
|
|
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>
|
|
);
|
|
}
|