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:
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user