Sebastian Krüger
c7373430f9
✨ Visual Enhancements: - Unique gradients per tool (green-teal for Vert, orange-pink for Paint, indigo-purple for Pastel) - Added new gradient utilities for better color differentiation 📊 Stats Section: - New animated stats component showing "3 Tools, 100% Open Source, ∞ Privacy First" - Glassmorphism cards with hover effects - Icon badges for each stat 🔍 Enhanced Metadata: - Comprehensive Open Graph tags for social sharing - Twitter Card support - Enhanced SEO with detailed keywords (vert, paint, pastel) - Added SVG favicon with gradient toolbox icon - Viewport meta tag and preconnect optimization 🔗 Improved Footer: - 3-column responsive layout - GitHub repository link with icon - Quick links to all tools (Vert, Paint, Pastel) - Tool count badge - Updated tech stack mention (Next.js 16 & Tailwind CSS 4) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import ToolCard from './ToolCard';
|
|
|
|
const tools = [
|
|
{
|
|
title: 'Vert',
|
|
description: 'Privacy-focused file converter that processes images, audio, and documents locally on your device. No file size limits, completely open source.',
|
|
url: 'https://vert.kit.pivoine.art',
|
|
gradient: 'gradient-green-teal',
|
|
icon: (
|
|
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Paint',
|
|
description: 'An advanced image editor running in your browser. Edit photos, create graphics, and more.',
|
|
url: 'https://paint.kit.pivoine.art',
|
|
gradient: 'gradient-orange-pink',
|
|
icon: (
|
|
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Pastel',
|
|
description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
|
|
url: 'https://pastel.kit.pivoine.art',
|
|
gradient: 'gradient-indigo-purple',
|
|
icon: (
|
|
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
|
|
<circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
|
|
<circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function ToolsGrid() {
|
|
return (
|
|
<section 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-gray-400 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-3 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}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|