86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import ToolCard from './ToolCard';
|
|
import { PastelIcon, UnitsIcon, FigletIcon, MediaIcon } from '@/components/AppIcons';
|
|
|
|
const tools = [
|
|
{
|
|
title: 'Pastel',
|
|
description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
|
|
url: '/pastel',
|
|
gradient: 'gradient-indigo-purple',
|
|
accentColor: '#a855f7',
|
|
badges: ['Open Source', 'WCAG', 'Free'],
|
|
icon: <PastelIcon className="w-12 h-12 text-white" />,
|
|
},
|
|
{
|
|
title: 'Units',
|
|
description: 'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search.',
|
|
url: '/units',
|
|
gradient: 'gradient-cyan-purple',
|
|
accentColor: '#2dd4bf',
|
|
badges: ['Open Source', 'Real-time', 'Free'],
|
|
icon: <UnitsIcon className="w-12 h-12 text-white" />,
|
|
},
|
|
{
|
|
title: 'Figlet',
|
|
description: 'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
|
|
url: '/figlet',
|
|
gradient: 'gradient-yellow-amber',
|
|
accentColor: '#eab308',
|
|
badges: ['Open Source', 'ASCII Art', 'Free'],
|
|
icon: <FigletIcon className="w-12 h-12 text-white" />,
|
|
},
|
|
{
|
|
title: 'Media',
|
|
description: 'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
|
|
url: '/media',
|
|
gradient: 'gradient-green-teal',
|
|
accentColor: '#10b981',
|
|
badges: ['Open Source', 'Converter', 'Free'],
|
|
icon: <MediaIcon className="w-12 h-12 text-white" />,
|
|
},
|
|
];
|
|
|
|
export default function ToolsGrid() {
|
|
return (
|
|
<section id="tools" className="relative py-20 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Section heading */}
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">
|
|
Available Tools
|
|
</h2>
|
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
|
Explore our collection of carefully crafted tools designed to boost your productivity and creativity
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Tools grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{tools.map((tool, index) => (
|
|
<ToolCard
|
|
key={tool.title}
|
|
title={tool.title}
|
|
description={tool.description}
|
|
icon={tool.icon}
|
|
url={tool.url}
|
|
gradient={tool.gradient}
|
|
accentColor={tool.accentColor}
|
|
badges={tool.badges}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|