polish: streamline colors and enhance UX with major improvements

Color System Improvements:
- Added accentColor prop to ToolCard for consistent color identity
- Each tool now has its signature color for hover effects
- Title and arrow icon now change to tool's accent color on hover
- Footer links match card colors for unified visual language

Hero Section Enhancement:
- Added prominent CTA buttons (Explore Tools + View on GitHub)
- Gradient animated button with hover effects
- GitHub button with icon and border hover effect
- Better visual hierarchy with button placement
- Updated scroll indicator text to "Scroll to explore"

User Experience:
- Improved hover interactions with color-coded feedback
- Better visual consistency across all components
- Enhanced call-to-action visibility
- Smooth transitions and micro-interactions

Color Palette:
- Vert: #10b981 (emerald green)
- Paint: #f97316 (vibrant orange)
- Pastel: #a855f7 (purple)
- Stirling: #667eea (indigo blue)
- Units: #2dd4bf (cyan)
- Draw: #ec4899 (pink)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-08 18:40:25 +01:00
parent 86efde25bc
commit 3a4fa63de7
3 changed files with 69 additions and 4 deletions

View File

@@ -9,6 +9,7 @@ const tools = [
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',
accentColor: '#10b981',
badges: ['Privacy', 'Open Source', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -21,6 +22,7 @@ const tools = [
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',
accentColor: '#f97316',
badges: ['Browser-Based', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -33,6 +35,7 @@ const tools = [
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',
accentColor: '#a855f7',
badges: ['Open Source', 'WCAG', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -48,6 +51,7 @@ const tools = [
description: 'Powerful locally-hosted PDF toolkit with 50+ operations. Merge, split, convert, OCR, sign, and manipulate PDFs with complete privacy.',
url: 'https://stirling.kit.pivoine.art',
gradient: 'gradient-purple-blue',
accentColor: '#667eea',
badges: ['Privacy', 'Open Source', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -61,6 +65,7 @@ const tools = [
description: 'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search and conversion history.',
url: 'https://units.kit.pivoine.art',
gradient: 'gradient-cyan-purple',
accentColor: '#2dd4bf',
badges: ['Real-time', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -73,6 +78,7 @@ const tools = [
description: 'Virtual whiteboard for sketching hand-drawn style diagrams. Create flowcharts, wireframes, and visual brainstorming with collaborative editing.',
url: 'https://draw.kit.pivoine.art',
gradient: 'gradient-orange-pink',
accentColor: '#ec4899',
badges: ['Collaborative', 'Open Source', 'Free'],
icon: (
<svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -112,6 +118,7 @@ export default function ToolsGrid() {
icon={tool.icon}
url={tool.url}
gradient={tool.gradient}
accentColor={tool.accentColor}
badges={tool.badges}
index={index}
/>