From 3a4fa63de7b5f27762783730e69189ddd4568392 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sat, 8 Nov 2025 18:40:25 +0100 Subject: [PATCH] polish: streamline colors and enhance UX with major improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- components/Hero.tsx | 39 ++++++++++++++++++++++++++++++++++++++- components/ToolCard.tsx | 27 ++++++++++++++++++++++++--- components/ToolsGrid.tsx | 7 +++++++ 3 files changed, 69 insertions(+), 4 deletions(-) diff --git a/components/Hero.tsx b/components/Hero.tsx index ce671da..44ffbca 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -48,6 +48,43 @@ export default function Hero() { Simple, powerful, and always at your fingertips. + {/* CTA Buttons */} + + + Explore Tools + + + + + + + + View on GitHub + + + {/* Scroll indicator */} - Explore Tools + Scroll to explore {/* Title */} -

+

{ + e.currentTarget.style.color = accentColor; + }} + onMouseLeave={(e) => { + e.currentTarget.style.color = 'white'; + }} + > {title}

@@ -74,7 +86,16 @@ export default function ToolCard({ title, description, icon, url, gradient, inde {/* Arrow icon */} { + e.currentTarget.style.color = accentColor; + }} + onMouseLeave={(e) => { + e.currentTarget.style.color = '#6b7280'; + }} initial={{ x: 0 }} whileHover={{ x: 5 }} > diff --git a/components/ToolsGrid.tsx b/components/ToolsGrid.tsx index 3a01662..36d3393 100644 --- a/components/ToolsGrid.tsx +++ b/components/ToolsGrid.tsx @@ -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: ( @@ -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: ( @@ -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: ( @@ -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: ( @@ -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: ( @@ -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: ( @@ -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} />